/* One continuous workspace, across two very different screens. */
.handoff-section{padding-top:76px;padding-bottom:84px;position:relative;isolation:isolate}
.handoff-section .section-heading{margin-bottom:32px}.handoff-section .section-description{max-width:390px}
.handoff-controls{display:flex;justify-content:space-between;gap:22px;align-items:center;margin-bottom:20px}
.handoff-tabs{display:flex;gap:6px;border-bottom:1px solid #ffffff18;max-width:100%}
.handoff-tabs button{padding:16px 22px;background:none;border:0;color:#9896a2;position:relative;display:flex;align-items:center;gap:10px;font:inherit;cursor:pointer;white-space:nowrap}
.handoff-tabs button svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.handoff-tabs button::after{content:'';position:absolute;left:20px;right:20px;bottom:-1px;height:2px;background:#c7b5ef;transform:scaleX(0);transition:transform .35s ease}
.handoff-tabs button[aria-pressed=true]{color:#f5e9d5}.handoff-tabs button[aria-pressed=true]::after{transform:scaleX(1)}
.handoff-stage{position:relative;height:730px;perspective:1600px;--flow:#c7b5ef}
.handoff-stage::before{content:'';position:absolute;inset:16% -4% 4%;z-index:-1;background:radial-gradient(ellipse at 75% 60%,#91cbb515,transparent 48%),radial-gradient(ellipse at 25% 48%,#b499ee13,transparent 56%);pointer-events:none}
.handoff-desktop{position:absolute;left:0;top:45px;width:73%;transform:rotateY(5deg) rotateX(3deg);transform-origin:left center;box-shadow:0 32px 75px #0007}
.handoff-desktop img{display:block;width:100%;height:auto}.handoff-desktop .screen-chrome{height:36px}
.handoff-desktop .screen-live{color:#a9d5bd}
.handoff-phone{position:absolute;width:300px;right:1%;top:5px;padding:5px;border:1px solid #868b915c;border-radius:40px;background:linear-gradient(135deg,#a0a4a9 0%,#4a4e53 9%,#20242a 26%,#15181d 65%,#6b7077 91%,#afb5b9);box-shadow:inset 0 0 0 1px #d8dce51a,1px 3px 0 1px #020405,7px 14px 25px #0004,0 38px 60px #0007;transform:rotateX(1.2deg) rotateY(-7deg) rotateZ(1deg);transform-origin:50% 65%;z-index:3;isolation:isolate}
.handoff-phone::before{content:'';position:absolute;inset:1px;border:1px solid #dfe7ed24;border-radius:38px;pointer-events:none}
.phone-glass{position:relative;padding:3px;border-radius:34px;background:#080a0c;overflow:hidden;box-shadow:0 0 0 1px #000,inset 0 0 0 1px #ffffff0a}
.phone-status{height:29px;padding:0 17px 1px;display:flex;align-items:center;justify-content:space-between;position:relative;background:#0f1214;color:#dadde0;border-radius:29px 29px 0 0;font-family:system-ui,sans-serif;font-size:9px;font-weight:600;letter-spacing:.015em}
.phone-status>svg{width:38px;height:10px}.phone-island{position:absolute;left:50%;top:7px;translate:-50% 0;width:64px;height:16px;background:#030405;border-radius:12px;box-shadow:inset 0 0 0 .5px #ffffff06}.phone-island::after{content:'';position:absolute;width:5px;height:5px;right:9px;top:5px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#344053,#0b101a 60%);box-shadow:0 0 0 1px #ffffff04}
.phone-key{position:absolute;display:block;width:3px;border-radius:3px;background:linear-gradient(90deg,#535a62,#101318);box-shadow:inset 0 1px #a2a9b15c;z-index:-1}.phone-key-action{left:-3px;top:74px;height:17px}.phone-key-volume{left:-3px;top:111px;height:43px}.phone-key-power{right:-3px;top:133px;height:54px;background:linear-gradient(90deg,#101318,#5b626a)}
.phone-screen{position:relative;width:100%;aspect-ratio:1/2;overflow:hidden;background:#101416}
.phone-screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0}
.phone-screen img:first-child{opacity:1}
.handoff-stage:not(.handoff-ready)[data-mode='1'] .phone-screen img,.handoff-stage:not(.handoff-ready)[data-mode='2'] .phone-screen img{opacity:0}
.handoff-stage:not(.handoff-ready)[data-mode='1'] .phone-screen img:nth-child(2),.handoff-stage:not(.handoff-ready)[data-mode='2'] .phone-screen img:nth-child(3){opacity:1}
.phone-home{height:18px;display:grid;place-items:center;background:#0f1214}.phone-home i{width:31%;height:3px;background:#d8dde3b3;border-radius:4px}
.phone-reflection{position:absolute;inset:0;pointer-events:none;opacity:.12;background:linear-gradient(119deg,#e5edf626,transparent 24%,transparent 74%,#d6e5fa12);border-radius:inherit}
.phone-arrival{position:absolute;inset:-2px;border:1px solid #badac3;border-radius:42px;opacity:0;pointer-events:none;box-shadow:0 0 20px #a9d5c61a}
.handoff-paths{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2;overflow:visible}
.handoff-path-base{stroke:#adbbdb20;stroke-width:1;fill:none}
.handoff-path-glow{stroke:url(#handoff-flow);stroke-width:1.8;stroke-linecap:round;fill:none;stroke-dasharray:.12 1;stroke-dashoffset:.12;opacity:0;filter:drop-shadow(0 0 4px #b4d6ca66)}
.device-rail{position:absolute;left:3%;right:32%;bottom:2px;display:flex;gap:38px;z-index:3}
.device-rail>div{display:flex;align-items:center;gap:12px;flex:1;padding:16px 0;border-top:1px solid #c1cad12b}
.device-rail svg{width:30px;height:30px;flex-shrink:0;stroke:#8b939e;fill:none;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;transition:stroke .5s}
.device-rail strong{display:block;font-weight:500;font-size:14px;color:#d5d7dc}.device-rail small{font-size:12px;color:#89919a;display:flex;align-items:center;gap:7px;margin-top:6px}.device-rail small i{width:5px;height:5px;border-radius:50%;background:#95cbb6}
.handoff-stage[data-mode='1'] .device-rail svg{stroke:#b4ddcc}.handoff-stage[data-mode='1'] .device-rail>div{border-color:#9bceba66}
.handoff-caption{min-height:112px;margin:20px 0 0;border-left:2px solid #c7b5ef70;padding:6px 0 6px 22px;position:relative}
.handoff-caption article[hidden]{display:none}.handoff-caption h3{font-size:23px;font-weight:500;letter-spacing:-.025em;margin:0 0 8px}.handoff-caption p{color:#9b9ba6;font-size:15px;line-height:1.8;max-width:780px;margin:0}.handoff-section .scene-footer{margin-top:16px}
.download-status{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);max-width:min(90vw,540px);width:max-content;padding:14px 22px;background:#22262a;border:1px solid #59605e;border-radius:16px;box-shadow:0 12px 40px #0009;color:#f5eee0;z-index:100;pointer-events:none;font-size:14px;line-height:1.5;text-align:center}.download-status[hidden]{display:none}.download-pending{cursor:progress;opacity:.7}
@media(min-width:1450px){.handoff-stage{height:730px}.handoff-phone{width:314px}}
@media(max-width:1100px){.handoff-stage{height:640px}.handoff-phone{width:270px;right:0}.handoff-desktop{top:60px;width:72%}.device-rail{left:0;right:34%;gap:14px}.device-rail>div{align-items:flex-start}.device-rail svg{width:23px}.handoff-controls>.replay{font-size:13px}.handoff-tabs button{padding:16px 14px}}
@media(max-width:800px){.handoff-section{padding-top:50px;padding-bottom:44px}.handoff-section .section-heading{gap:20px}.handoff-controls{align-items:flex-start;gap:14px;flex-direction:column}.handoff-tabs{width:100%}.handoff-tabs button{flex:1;justify-content:center;font-size:14px;padding:15px 8px}.handoff-tabs button::after{left:8px;right:8px}.handoff-stage{height:640px;margin-top:18px}.handoff-phone{width:266px;right:2%;top:8px}.handoff-desktop{width:91%;left:-3%;top:104px;opacity:.6}.device-rail{right:auto;left:2%;bottom:0;width:96%;flex-direction:row;gap:18px}.device-rail>div{padding:12px 0}.handoff-caption{margin-top:18px}.handoff-caption h3{font-size:21px}.handoff-caption p{font-size:14px}}
@media(max-width:520px){.handoff-stage{height:665px;margin-top:10px}.handoff-phone{width:258px;right:1%;top:46px;border-radius:36px;padding:4px}.handoff-phone::before{border-radius:34px}.phone-glass{border-radius:31px}.phone-status{height:26px;padding-inline:14px}.phone-island{top:5px}.phone-home{height:16px}.phone-arrival{border-radius:38px}.handoff-desktop{top:5px;width:90%;left:-5%;transform:rotateY(8deg) rotateZ(-3deg);opacity:.55}.handoff-desktop .screen-chrome{height:24px;font-size:7px}.handoff-desktop .window-dots{gap:3px}.handoff-desktop .window-dots i{width:4px;height:4px}.device-rail{bottom:0;left:0;width:100%;flex-direction:row;gap:16px}.device-rail>div{gap:7px;align-items:center}.device-rail svg{width:21px;height:21px}.device-rail strong{font-size:11px}.device-rail small{font-size:10px}.handoff-paths{opacity:.6}.handoff-tabs button{font-size:12px;gap:6px}.handoff-tabs svg{display:none}.handoff-caption{padding-left:16px;min-height:142px}.handoff-section .scene-footer{align-items:flex-start}.handoff-section .capture-label{font-size:11px}}
@media(max-width:360px){.handoff-phone{width:238px;top:44px}.handoff-stage{height:620px}.handoff-tabs button{font-size:11px}.device-rail{gap:10px}}
@media(prefers-reduced-motion:reduce){.handoff-desktop,.handoff-phone,.phone-screen img,.handoff-tabs button::after{transition:none}.phone-arrival,.handoff-path-glow{display:none}}