/* The watch uses the same journey controller, timestamps and QR as the phone. */
.watch-glass{cursor:default}.watch-glass img{animation:none!important}.watch-product{transition:transform .35s ease}.watch-product:has(.watch-glass:hover){transform:translateY(-3px) rotate(-.5deg)}.watch-glass:after{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(125deg,#fff1,transparent 35%,transparent 75%,#fff06);pointer-events:none}.watch-glass.watch-state-change{animation:watch-response .4s ease-out}.watch-hotspot.watch-main-action{left:8%;width:84%;border-radius:28px;color:transparent}.watch-hotspot.watch-pass-action{top:68%;height:10%}.watch-hotspot.watch-bottom-action{top:82%;height:15%}.state-pass .watch-hotspot.watch-bottom-action{top:91%;height:7%}.watch-hotspot:hover{background:#ffffff0c}.watch-hotspot:focus-visible{outline:3px solid #e9a333;outline-offset:0}.watch-swipe-control{position:absolute;left:9%;right:9%;top:82%;height:11.5%;border-radius:50px;background:#e9a333;color:#062749;touch-action:pan-y;user-select:none;cursor:grab;overflow:hidden;box-shadow:0 6px 14px #0002;isolation:isolate}.watch-swipe-control[hidden]{display:none}.watch-swipe-control:focus-visible{outline:3px solid white;outline-offset:4px}.watch-swipe-fill{position:absolute;inset:0;background:#f7cb77;transform:scaleX(var(--watch-progress,0));transform-origin:left}.watch-swipe-label{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;padding-left:36px;font:750 12px Arial,sans-serif;white-space:nowrap}.watch-swipe-thumb{position:absolute;left:4px;top:4px;bottom:4px;aspect-ratio:1;border-radius:50%;background:#062749;color:#e9a333;font:22px Arial,sans-serif;display:grid;place-items:center;transform:translateX(var(--watch-drag,0px));transition:transform .2s;box-shadow:0 3px 6px #0002}.watch-swipe-control.dragging{cursor:grabbing}.watch-swipe-control.dragging .watch-swipe-thumb{transition:none}.state-ready .watch-swipe-control{animation:watch-invite 2.8s ease-in-out infinite}.watch-actions button:disabled{opacity:.4;cursor:default}.watch-hint{max-width:300px;text-align:center;line-height:1.5}.watch-actions button{transition:background .2s,color .2s}.watch-actions button:focus-visible{outline-offset:3px}@keyframes watch-invite{50%{box-shadow:0 0 0 5px #e9a33318,0 6px 14px #0002}}@keyframes watch-response{50%{transform:scale(.985)}}@media(max-width:760px){.watch-product:has(.watch-glass:hover){transform:scale(.9)}}@media(prefers-reduced-motion:reduce){.watch-product,.watch-swipe-thumb{transition:none}.watch-glass.watch-state-change,.state-ready .watch-swipe-control{animation:none}}

/* A second interactive watch travels alongside the phone. */
#try .app-demo{max-width:1100px;grid-template-columns:minmax(300px,.9fr) minmax(520px,1.2fr);gap:42px}
.demo-devices{grid-column:2;grid-row:1;min-width:0;position:relative;isolation:isolate}
.demo-device-row{display:flex;align-items:center;justify-content:center;gap:22px}
.demo-phone-column{width:300px;flex:none;min-width:0}
.demo-phone-column>.interactive-phone{width:100%;margin:0}
.demo-phone-column>.journey-live-tools{width:100%;margin:20px 0 0}
.demo-watch{width:196px;flex:none;position:relative;text-align:center;margin:0;padding:0}
.demo-watch-label{display:flex;align-items:center;justify-content:center;gap:7px;font-size:8px;font-weight:750;letter-spacing:.13em;color:#6b8192;margin-bottom:14px;white-space:nowrap}
.demo-watch-label>span{width:5px;height:5px;border-radius:50%;background:#31a47b;box-shadow:0 0 0 4px #31a47b0d}
.demo-watch-hardware{width:196px;height:302.4px;position:relative}
.demo-watch .watch-product{transform:scale(.56);transform-origin:top left;margin:0;max-width:none}
.demo-watch .watch-product:has(.watch-glass:hover){transform:scale(.56) translateY(-3px) rotate(-.5deg)}
.demo-watch-caption{color:#718697;font-size:10px;line-height:1.6;min-height:32px;margin:15px 0 0}
.demo-device-sync{display:flex;align-items:center;justify-content:center;gap:11px;margin:28px 0 0;color:#12334e}
.demo-device-sync>span:first-child{width:36px;height:36px;display:grid;place-items:center;border:1px solid #d5e2eb;border-radius:50%;background:#ffffffa3}
.demo-device-sync svg{width:18px;height:18px;stroke:#b58534;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.demo-device-sync strong{display:block;font-size:12px;font-weight:650}
.demo-device-sync small{display:block;font-size:10px;color:#718697;margin-top:3px}
.demo-stage #try .app-demo,.demo-stage .app-demo{grid-template-columns:minmax(280px,.85fr) minmax(510px,1.2fr);gap:4vw}
.demo-stage .demo-devices{grid-column:2;grid-row:1;align-self:center}
.demo-stage .demo-device-row{gap:22px}
.demo-stage .demo-phone-column{width:min(30vw,calc((100dvh - 220px)*.47));max-width:380px}
.demo-stage .demo-devices .interactive-phone{width:100%;max-width:none;padding:8px;box-shadow:0 22px 60px #073d6c26}
.demo-stage .demo-device-sync{margin-top:20px}
@media(max-width:1100px){#try .app-demo{grid-template-columns:minmax(260px,.9fr) minmax(480px,1.2fr);gap:28px}.demo-phone-column{width:280px}.demo-device-row{gap:12px}.demo-stage .app-demo{grid-template-columns:minmax(260px,.9fr) minmax(460px,1.2fr);gap:25px}.demo-stage .demo-device-row{gap:12px}.demo-stage .demo-phone-column{width:min(28vw,calc((100dvh - 220px)*.47))}}
@media(max-width:900px){#try .app-demo{grid-template-columns:1fr;gap:35px;max-width:620px}.demo-devices{grid-column:auto;grid-row:auto}.demo-copy{max-width:580px}.demo-phone-column{width:300px}.demo-device-row{gap:25px}.demo-stage .app-demo{display:flex;flex-direction:column;height:auto;gap:30px}.demo-stage .demo-copy{width:100%;max-width:620px}.demo-stage .demo-devices{width:100%;max-width:620px}.demo-stage .demo-phone-column{width:300px}.demo-stage .demo-device-row{gap:25px}}
@media(max-width:600px){.demo-device-row,.demo-stage .demo-device-row{flex-direction:column;gap:34px}.demo-phone-column,.demo-stage .demo-phone-column{width:min(300px,100%)}.demo-watch{width:100%;display:grid;grid-template-columns:196px 1fr;grid-template-rows:auto 1fr;gap:0 18px;align-items:center;max-width:340px;text-align:left}.demo-watch-hardware{grid-column:1;grid-row:1/3}.demo-watch-label{grid-column:2;grid-row:1;white-space:normal;line-height:1.7;justify-content:flex-start;align-self:end;margin:0 0 12px;font-size:9px}.demo-watch-label>span{flex:none}.demo-watch-caption{grid-column:2;grid-row:2;align-self:start;margin:0;font-size:12px}.demo-device-sync{margin-top:24px}.demo-stage .demo-watch{max-width:340px}.demo-stage .demo-device-sync{margin-bottom:12px}}
@media(prefers-reduced-motion:reduce){.demo-watch .watch-product:has(.watch-glass:hover){transform:scale(.56)}}