/* Front-facing iPhone 18 Pro study: slim metal rail, curved glass, small island.
   Screen assets remain unedited. All movement is driven by the page scroll. */
.phone-stage{position:relative;min-width:0;isolation:isolate;}
.iphone-18-pro{
 --phone-size:300px;
 position:relative;isolation:isolate;box-sizing:border-box;
 width:min(var(--phone-size),calc(100% - 12px));aspect-ratio:71.9 / 150;
 margin-inline:auto;border:1px solid #72767a;border-radius:15.5% / 7.45%;
 background:linear-gradient(108deg,#858b91 0%,#e5e8e9 7%,#8a8e92 17%,#e5e7e8 43%,#b2b6b9 67%,#f1f2f2 91%,#787d82 100%);
 box-shadow:inset 0 0 0 1px #f1f2f5b3,inset 0 0 0 2px #383b3f,
  0 2px 3px #07111c30,0 18px 24px -16px #050d1866,0 38px 58px -28px #0410208c;
}
.iphone-18-pro::before{
 content:"";position:absolute;inset:2px;z-index:4;pointer-events:none;border-radius:inherit;
 box-shadow:inset 1px 0 1px #ffffff9e,inset -1px 0 1px #1b222760;
}
.iphone-18-pro::after{
 content:"";position:absolute;inset:7px;z-index:4;pointer-events:none;
 border-radius:14.6% / 7%;box-shadow:inset 0 0 0 .65px #ffffff32;
}
.device-screen{
 position:absolute;inset:4px;box-sizing:border-box;overflow:hidden;
 border:3px solid #080a0c;border-radius:14.6% / 7%;isolation:isolate;
 background:#f2f3f4;
}
.device-screen::before{
 content:"9:41";position:absolute;top:15px;left:22px;z-index:3;
 font:650 10px/1 -apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif;
 letter-spacing:-.03em;color:#14191e;pointer-events:none;
}
.device-screen::after{
 content:"";position:absolute;top:16px;right:21px;width:15px;height:7px;z-index:3;
 border:1px solid #252a2e;border-radius:2px;
 background:linear-gradient(90deg,#252a2e 0 82%,transparent 82%);background-clip:content-box;
 padding:1px;box-sizing:content-box;box-shadow:3px 0 0 -2px #252a2e;pointer-events:none;
}
.device-island{
 position:absolute;z-index:5;top:9px;left:50%;width:23%;height:20px;
 transform:translateX(-50%);border-radius:999px;background:#060708;
 box-shadow:inset 0 .6px 1px #24272c,0 .5px .7px #0009;pointer-events:none;
}
.device-island::after{
 content:"";position:absolute;right:8px;top:7px;width:5px;height:5px;border-radius:50%;
 background:radial-gradient(circle at 36% 33%,#253750,#121b27 37%,#080b0e 70%);
 box-shadow:0 0 0 .5px #1a1d22;
}
.device-button{position:absolute;z-index:-1;display:block;width:3px;border-radius:2px;background:linear-gradient(90deg,#717880,#d9dcdf 45%,#858a8f);box-shadow:0 0 0 .5px #1d252d70;}
.button-action{left:-3px;top:17%;height:18px;}
.button-volume{left:-3px;top:24%;height:34px;}
.button-volume::after{content:"";position:absolute;top:43px;left:0;width:3px;height:34px;border-radius:inherit;background:inherit;box-shadow:inherit;}
.button-power{right:-3px;top:28%;height:52px;}
.button-power::after{content:"";position:absolute;top:151px;right:0;width:2px;height:27px;border-radius:2px;background:#7c8187;box-shadow:inset 0 0 0 .6px #4b535b;}
.device-home{position:absolute;z-index:5;bottom:6px;left:34%;width:32%;height:3px;border-radius:8px;background:#12171a;pointer-events:none;}
.device-content{
 position:absolute;inset:46px 0 19px;overflow:hidden;container-type:inline-size;
 background:linear-gradient(115deg,#fafafa,#edf0f3 78%,#e4e9ed);
 touch-action:pan-y;overscroll-behavior:auto;
}
.device-content::after{
 content:"";position:absolute;z-index:2;inset:auto 0 0;height:24px;pointer-events:none;
 background:linear-gradient(transparent,#eef1f3);
}
.device-content .phone-page{
 --phone-crop-start:0;
 display:block;width:100%;max-width:none;height:auto;margin:0;padding:0;
 border:0;border-radius:0;object-fit:initial;pointer-events:none;user-select:none;
 transform:translate3d(0,0,0);transform-origin:50% 0;
 /* No transition: the scroll position is the timeline, including in reverse. */
 animation:none;transition:none;
}
.device-content .phone-page:not([src*="-phone."]){--phone-crop-start:480;transform:translate3d(0,-28.436%,0);}
.device-content .phone-config{
 position:relative;box-sizing:border-box;min-height:100%;padding:20px 21px 34px;
 color:#171b20;font-family:"Mona Sans",-apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif;
 font-size:13px;line-height:1.5;transform:translate3d(0,0,0);animation:none;transition:none;
}
.phone-config .phone-kicker{margin:0 0 13px;font-size:9px;line-height:1.2;font-weight:650;letter-spacing:.16em;color:#616b73;}
.phone-config h4{margin:0 0 14px;font-size:33px;font-weight:550;line-height:1.04;letter-spacing:-.065em;color:#171b20;}
.phone-config>p:not(.phone-kicker){margin:0 0 22px;font-size:12px;line-height:1.5;letter-spacing:-.012em;color:#636970;}
.phone-config .phone-field{
 --choice-progress:1;
 position:relative;margin:0 0 11px;padding:10px 29px 11px 12px;border-radius:9px;
 border:1px solid #cad0d4;background:linear-gradient(130deg,#ffffffcc,#ffffff59);
 box-shadow:0 1px 2px #11233208;
}
.phone-field>span{display:block;margin-bottom:3px;font-size:9px;font-weight:500;letter-spacing:.02em;line-height:1.4;color:#616b73;}
.phone-field>b{display:block;font-size:12px;line-height:1.45;letter-spacing:-.025em;font-weight:600;opacity:calc(.3 + .7 * var(--choice-progress));transform:translate3d(0,calc(2px * (1 - var(--choice-progress))),0);}
.phone-field::after{
 content:"✓";position:absolute;right:11px;top:22px;width:13px;height:13px;border-radius:50%;
 background:#283541;color:#fff;font:600 9px/13px -apple-system,BlinkMacSystemFont,sans-serif;text-align:center;
 opacity:var(--choice-progress);transform:scale(calc(.92 + .08 * var(--choice-progress)));
}
.phone-config .phone-confirm{
 --confirmation-progress:1;
 margin-top:20px;padding:15px 12px;border-radius:10px;background:#25313c;color:#fff;
 font-size:12px;font-weight:550;line-height:1.5;letter-spacing:-.02em;
 box-shadow:0 5px 12px #15233114;opacity:calc(.42 + .58 * var(--confirmation-progress));
 transform:translate3d(0,calc(5px * (1 - var(--confirmation-progress))),0);
}
.phone-confirm>span{display:block;margin-top:3px;font-size:9px;font-weight:400;letter-spacing:0;color:#d2dbe3;}
.phone-stage .demo-caption{margin:24px auto 0!important;text-align:center;font-size:11px!important;line-height:1.5;letter-spacing:.01em;opacity:.8;max-width:300px;}
.phone-demo-control{
 display:inline-flex;align-items:center;gap:9px;min-height:44px;margin-top:16px;padding:9px 14px;
 border:1px solid currentColor;border-radius:999px;background:transparent;color:inherit;
 font-family:inherit;font-size:11px;font-weight:500;line-height:1.2;letter-spacing:.015em;cursor:pointer;opacity:.85;
}
.phone-demo-control::before{content:"";width:8px;height:10px;border-left:2px solid currentColor;border-right:2px solid currentColor;box-sizing:border-box;}
.phone-demo-control[aria-pressed="true"]::before{width:0;height:0;border:5px solid transparent;border-left:8px solid currentColor;border-right:0;}
.phone-demo-control:hover{opacity:1;}
.phone-demo-control:disabled{cursor:default;opacity:.6;}
.phone-demo-control:focus-visible{outline:2px solid currentColor;outline-offset:4px;}
.phone-demo-control[hidden]{display:none!important;}
@media(min-width:761px){.iphone-18-pro{--phone-size:286px;}.phone-config h4{font-size:31px;}}
@media(max-width:360px){.iphone-18-pro{--phone-size:272px;}.phone-config h4{font-size:29px;}.device-content .phone-config{padding-inline:18px;}.phone-config .phone-field{margin-bottom:8px;padding-block:8px;}.phone-config .phone-confirm{margin-top:16px;}}
@media(prefers-reduced-motion:reduce){
 .device-content .phone-page{transform:translate3d(0,0,0)!important;}
 .device-content .phone-page:not([src*="-phone."]){transform:translate3d(0,-28.436%,0)!important;}
 .device-content .phone-config,.phone-field>b,.phone-field::after,.phone-config .phone-confirm{transform:none!important;opacity:1!important;}
 .phone-demo-control{display:none!important;}
}