/* One screen-shaped compositor mask contains every iframe layer, including scrims.
   Geometry comes from the existing Figma inner screen; scales with each device. */
[data-phone-demo] {
  overflow:hidden;
  isolation:isolate;
  contain:paint;
  clip-path:none;
  -webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMDguNjA1IDQ1MS40NDIiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxwYXRoIGZpbGw9IndoaXRlIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNjkuMjM3IDBDMTgzLjAxNyAwIDE4OS45MDcgNi42MTMyM2UtMDUgMTk1LjE3IDIuNjgxNjRDMTk5LjggNS4wNDA1NyAyMDMuNTY0IDguODA0OTEgMjA1LjkyMyAxMy40MzQ2QzIwOC42MDUgMTguNjk3NyAyMDguNjA0IDI1LjU4NzYgMjA4LjYwNCAzOS4zNjcyVjQxMi4wNzRDMjA4LjYwNCA0MjUuODU0IDIwOC42MDUgNDMyLjc0NSAyMDUuOTIzIDQzOC4wMDhDMjAzLjU2NCA0NDIuNjM3IDE5OS43OTkgNDQ2LjQwMSAxOTUuMTcgNDQ4Ljc2QzE4OS45MDcgNDUxLjQ0MSAxODMuMDE3IDQ1MS40NDEgMTY5LjIzNyA0NTEuNDQxSDM5LjM2NzJDMjUuNTg3NSA0NTEuNDQxIDE4LjY5NzggNDUxLjQ0MSAxMy40MzQ2IDQ0OC43NkM4LjgwNDk4IDQ0Ni40MDEgNS4wNDA1OCA0NDIuNjM3IDIuNjgxNjQgNDM4LjAwOEMtMC4wMDAxMDYxNzEgNDMyLjc0NSAwIDQyNS44NTQgMCA0MTIuMDc0VjM5LjM2NzJDMS4yOTQ0OGUtMTAgMjUuNTg3NiAxLjM4MzM5ZS0wNSAxOC42OTc3IDIuNjgxNjQgMTMuNDM0NkM1LjA0MDU3IDguODA0OTEgOC44MDQ5MSA1LjA0MDU3IDEzLjQzNDYgMi42ODE2NEMxOC42OTc3IDEuMjA5MjZlLTA1IDI1LjU4NzYgMS4wNTE3NWUtMTAgMzkuMzY3MiAwSDE2OS4yMzdaIi8+PC9zdmc+Cg==");
  mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMDguNjA1IDQ1MS40NDIiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxwYXRoIGZpbGw9IndoaXRlIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNjkuMjM3IDBDMTgzLjAxNyAwIDE4OS45MDcgNi42MTMyM2UtMDUgMTk1LjE3IDIuNjgxNjRDMTk5LjggNS4wNDA1NyAyMDMuNTY0IDguODA0OTEgMjA1LjkyMyAxMy40MzQ2QzIwOC42MDUgMTguNjk3NyAyMDguNjA0IDI1LjU4NzYgMjA4LjYwNCAzOS4zNjcyVjQxMi4wNzRDMjA4LjYwNCA0MjUuODU0IDIwOC42MDUgNDMyLjc0NSAyMDUuOTIzIDQzOC4wMDhDMjAzLjU2NCA0NDIuNjM3IDE5OS43OTkgNDQ2LjQwMSAxOTUuMTcgNDQ4Ljc2QzE4OS45MDcgNDUxLjQ0MSAxODMuMDE3IDQ1MS40NDEgMTY5LjIzNyA0NTEuNDQxSDM5LjM2NzJDMjUuNTg3NSA0NTEuNDQxIDE4LjY5NzggNDUxLjQ0MSAxMy40MzQ2IDQ0OC43NkM4LjgwNDk4IDQ0Ni40MDEgNS4wNDA1OCA0NDIuNjM3IDIuNjgxNjQgNDM4LjAwOEMtMC4wMDAxMDYxNzEgNDMyLjc0NSAwIDQyNS44NTQgMCA0MTIuMDc0VjM5LjM2NzJDMS4yOTQ0OGUtMTAgMjUuNTg3NiAxLjM4MzM5ZS0wNSAxOC42OTc3IDIuNjgxNjQgMTMuNDM0NkM1LjA0MDU3IDguODA0OTEgOC44MDQ5MSA1LjA0MDU3IDEzLjQzNDYgMi42ODE2NEMxOC42OTc3IDEuMjA5MjZlLTA1IDI1LjU4NzYgMS4wNTE3NWUtMTAgMzkuMzY3MiAwSDE2OS4yMzdaIi8+PC9zdmc+Cg==");
  -webkit-mask-size:100% 100%;
  mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  mask-mode:alpha;
}
[data-phone-demo] iframe.phone-demo-frame {display:block;width:100%;height:100%;border:0;background:white;}
.phone-demo-replay {position:absolute;right:-31px;top:16px;z-index:5;display:flex;align-items:center;justify-content:center;width:25px;height:25px;border:1px solid rgba(25,22,24,.12);border-radius:50%;padding:0;background:rgba(255,255,255,.86);color:#85858a;font:19px/1 Arial,sans-serif;cursor:pointer;transition:color .15s,background .15s;}
.phone-demo-replay:hover {color:#7f6cf6;background:white;}.phone-demo-replay:focus-visible {outline:2px solid #7f6cf6;outline-offset:2px;}

/* Voice demo uses the existing 18px screen outline; shell keeps its external stroke/shadow. */
.innovation-demo-device {position:absolute;left:0;top:95px;width:232px;height:502px;}
.innovation-demo-device .innovation-html-slot {left:0;top:0;}
.innovation-html-screen {position:absolute;inset:0;border-radius:18px;-webkit-mask-image:linear-gradient(#fff,#fff);mask-image:linear-gradient(#fff,#fff);}

/* Replay below the comparison board, beside the voice phone's bottom edge. */
.innovation-demo-device > .phone-demo-replay {
 left:266px;right:auto;top:481.5px;border:0;border-radius:0;
 background:transparent;box-shadow:none;color:#85858a;
}
.innovation-demo-device > .phone-demo-replay:hover {background:transparent;color:#7f6cf6;}

/* Replay controls stay outside the screen mask and follow the annotated positions. */
.assistant-device > .phone-demo-replay,
.recommend-device > .phone-demo-replay,
.content-intent-device > .phone-demo-replay {
 border:0;border-radius:0;background:transparent;box-shadow:none;
 top:auto;bottom:0;color:#fff;
}
.assistant-device > .phone-demo-replay {right:-33.5px;bottom:-3px;}
.recommend-device > .phone-demo-replay {right:-40px;bottom:2px;}
.product-intent-phone > .phone-demo-replay {color:rgba(133,133,138,.8);}
.product-phone-first > .phone-demo-replay {left:calc(50% - 12.5px);right:auto;top:calc(100% + 4px);bottom:auto;}
.product-phone-second > .phone-demo-replay {left:136.5px;right:auto;top:-55.2px;bottom:auto;}
.assistant-device > .phone-demo-replay:hover,
.recommend-device > .phone-demo-replay:hover,
.content-intent-device > .phone-demo-replay:hover {background:transparent;color:#fff;}
.product-intent-phone > .phone-demo-replay:hover {color:rgba(133,133,138,.8);}