@font-face {font-family: 'Geist Mono';font-style: normal;font-weight: 400;font-display: swap;src: url(fonts/geist-mono-latin.woff2) format('woff2');unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face {font-family: 'Geist Mono';font-style: normal;font-weight: 500;font-display: swap;src: url(fonts/geist-mono-latin.woff2) format('woff2');unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face {font-family: 'Inter';font-style: normal;font-weight: 400;font-display: swap;src: url(fonts/inter-latin.woff2) format('woff2');unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face {font-family: 'Inter';font-style: normal;font-weight: 500;font-display: swap;src: url(fonts/inter-latin.woff2) format('woff2');unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face {font-family: 'Inter';font-style: normal;font-weight: 600;font-display: swap;src: url(fonts/inter-latin.woff2) format('woff2');unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
*{box-sizing:border-box}
:root{--bg:#f5f5f5;--ink:#111;--mut:#626262;--line:#d6d5d7;--blue:#0f7fff;--sans:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace}
body{margin:0;color:var(--ink);font:15px/1.6 var(--sans);background:var(--bg) radial-gradient(#d6d5d7 1px,transparent 1.2px) 0 0/28px 28px}
a{color:var(--blue);text-decoration:none}.mono{font-family:var(--mono)}
.menubar{position:sticky;top:0;z-index:5;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:42px;padding:0 20px;background:#f5f5f5e6;backdrop-filter:blur(10px);border-bottom:1px solid #e7e7e7;font-size:14px}
.menubar .left,.menubar .right{display:flex;gap:16px;align-items:center}.menubar .right{justify-content:flex-end}
.menubar a{color:var(--mut)}.menubar .brand{color:var(--ink);font-weight:500}.menubar .mono{color:#b5b5b4;font-size:12px}.menubar .get{color:var(--blue)}
main{max-width:1040px;margin:0 auto;padding:0 24px}
.hero{text-align:center;padding:96px 0 40px}
.tag{display:inline-block;font:500 11px/1 var(--mono);text-transform:uppercase;letter-spacing:.04em;color:var(--mut);border:1px solid #b5b5b4;border-radius:999px;padding:6px 10px;background:#fbfbfb}
h1{font-weight:500;font-size:84px;letter-spacing:-.04em;line-height:1;margin:22px 0 10px}
.sub{font-size:18px;margin:0}.lead{color:var(--mut);max-width:520px;margin:14px auto 0}
.ctas{display:flex;gap:14px;justify-content:center;margin-top:30px}.ctas>div{display:flex;flex-direction:column;align-items:center;gap:8px}
.ctas small{font-size:11px;color:#9a9a9a}
.btn{display:inline-flex;gap:8px;align-items:center;padding:9px 22px;border-radius:999px;font-weight:500;font-size:15px;transition:transform .15s}
.btn:hover{transform:translateY(-1px)}
.aqua{color:#06224a;background:linear-gradient(#cfe6ff,#7fb6ff 50%,#5aa0ff 51%,#9fd0ff);border:1px solid #3d7ad6;box-shadow:inset 0 1px 0 #fff9,0 2px 6px #0f7fff40}
.glass{color:var(--ink);background:linear-gradient(#fff,#ececec 50%,#e2e2e2 51%,#f6f6f6);border:1px solid #b5b5b4;box-shadow:inset 0 1px 0 #fff,0 2px 6px #0000001a}
.window{background:#fff;border:1px solid #9a9a9a;border-radius:10px;overflow:hidden;box-shadow:0 10px 30px #0000001f}
.bar{display:flex;align-items:center;gap:6px;height:24px;padding:0 10px;background:linear-gradient(90deg,#e9e8ea,#f5f5f5);border-bottom:1px solid #d6d5d7}
.bar i{width:9px;height:9px;border-radius:50%;background:#ff5f57}.bar i:nth-child(2){background:#febc2e}.bar i:nth-child(3){background:#28c840}
.bar span{margin-left:auto;font:11px var(--mono);color:#8a8a8a}
.hero-win{max-width:640px;margin:56px auto 0}.art{display:block;width:100%;height:auto}
.caption{font-size:11px;color:#9a9a9a;margin-top:10px}
hr{border:0;border-top:1px solid #e0e0e0;margin:80px 0}
section{text-align:center}
h2{font-weight:500;font-size:44px;letter-spacing:-.03em;line-height:1.1;margin:16px 0 40px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;text-align:left}
.c1 .bar{background:linear-gradient(90deg,#b9dcc2,#e4f1e7)}.c2 .bar{background:linear-gradient(90deg,#b9d6f2,#e3eefa)}.c3 .bar{background:linear-gradient(90deg,#efc6c6,#f7e4e4)}
.c4 .bar{background:linear-gradient(90deg,#bfe5e8,#e2f4f5)}.c5 .bar{background:linear-gradient(90deg,#f0d6bd,#f8ebde)}.c6 .bar{background:linear-gradient(90deg,#e6dcae,#f5f0da)}
.body{padding:16px 18px 20px}.body h3{margin:0 0 6px;font-size:16px;font-weight:500}.body p{margin:0;color:var(--mut);font-size:14px}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;text-align:left}
.steps li{background:#fbfbfb;border:1px solid #e7e7e7;border-radius:16px;padding:22px}.steps .mono{color:var(--blue);font-size:12px}
.steps h3{margin:8px 0 4px;font-weight:500;font-size:17px}.steps p{margin:0;color:var(--mut);font-size:14px}
.band{margin:110px 0 0;padding:64px 24px;border-radius:24px;background:linear-gradient(180deg,#1d6ee5,#0f4fb8);color:#fff}
.band h2{color:#fff;margin:0 0 8px}.band p{color:#dbe8ff;margin:0}.band a:not(.btn){color:#fff;text-decoration:underline}.band .note{font-size:12px;margin-top:16px;color:#b9d2ff}
footer{max-width:1040px;margin:70px auto 0;padding:28px 24px 48px;border-top:1px solid #e0e0e0;font-size:13px;color:var(--mut)}.muted{color:#9a9a9a}
@media(max-width:860px){.menubar{grid-template-columns:1fr auto}.menubar .mark,.menubar .left a:not(.brand),.menubar .mono{display:none}h1{font-size:56px}h2{font-size:32px}.grid,.steps{grid-template-columns:1fr}.ctas{flex-direction:column;align-items:center}}
/* hero scene */
.dd-scene{max-width:840px;margin:52px auto 0;padding:0}.dd-scene svg{display:block;width:100%;height:auto;overflow:visible}
.dd-drag{animation:dd-slide 16.8s cubic-bezier(.45,0,.25,1) infinite}
.dd-cur{animation:dd-cur 16.8s cubic-bezier(.45,0,.25,1) infinite}.dd-curp{transform-box:fill-box;transform-origin:0 0;animation:dd-press 16.8s cubic-bezier(.45,0,.25,1) infinite}
.dd-menu{animation:dd-menu 16.8s infinite}.dd-hl{animation:dd-hl 16.8s infinite}
.dd-hand{opacity:0;transform-box:view-box;transform-origin:788.5px 354px;animation:dd-hand 16.8s ease-in-out infinite}
.dd-rip{opacity:0;transform-box:fill-box;transform-origin:center}.dd-rip1{animation:dd-rip1 16.8s ease-out infinite}.dd-rip2{animation:dd-rip2 16.8s ease-out infinite}
.dd-play{animation:dd-play 16.8s step-end infinite}.dd-pause{opacity:0;animation:dd-pause 16.8s step-end infinite}
.dd-mplug{animation:dd-plug 16.8s ease-in-out infinite}.dd-cable{animation:dd-cable 16.8s ease-in-out infinite}
.dd-wcue{opacity:0;animation:dd-wcue 16.8s infinite}.dd-ovw{opacity:0;animation:dd-ovw 16.8s ease-in-out infinite}.dd-ovu{opacity:0;animation:dd-ovu 16.8s ease-in-out infinite}
.dd-spin{transform-box:fill-box;transform-origin:center;animation:dd-spin .9s linear infinite}
@keyframes dd-slide{0%,10.119%{transform:translate(-150px,30px)}20.238%,42.857%{transform:translate(140px,118px)}51.786%,100%{transform:translate(-150px,30px)}}
@keyframes dd-cur{0%,2.381%{opacity:0;transform:translate(290px,232px)}4.167%{opacity:1;transform:translate(290px,232px)}8.929%,10.119%{opacity:1;transform:translate(330px,160px)}20.238%,42.857%{transform:translate(620px,248px)}51.786%,83.929%{transform:translate(330px,160px)}88.69%,97.024%{opacity:1;transform:translate(478px,51px)}99.404%,100%{opacity:0;transform:translate(478px,51px)}}
@keyframes dd-press{0%,8.929%{transform:scale(1)}9.524%,20.238%{transform:scale(0.85)}20.833%,41.667%{transform:scale(1)}42.262%,51.786%{transform:scale(0.85)}52.381%,88.69%{transform:scale(1)}88.988%{transform:scale(0.82)}89.583%,100%{transform:scale(1)}}
@keyframes dd-hl{0%,88.964%{opacity:0}89.286%,97.024%{opacity:.14}98.512%,100%{opacity:0}}
@keyframes dd-menu{0%,89.583%{opacity:0;transform:translateY(-3px)}91.071%,97.024%{opacity:1;transform:translateY(0)}98.512%,100%{opacity:0;transform:translateY(-2px)}}
@keyframes dd-hand{0%,27.976%{opacity:0;transform:translate(16px,22px)}30.06%{opacity:.9;transform:translate(0,0)}31.25%{transform:translate(0,0) scale(1)}31.667%{transform:translate(0,1px) scale(.95)}32.44%{transform:translate(0,0) scale(1)}37.024%{transform:translate(0,0) scale(1)}37.44%{transform:translate(0,1px) scale(.95)}38.214%,39.286%{opacity:.9;transform:translate(0,0) scale(1)}41.667%,100%{opacity:0;transform:translate(16px,22px)}}
@keyframes dd-rip1{0%,31.547%{opacity:0;transform:scale(.2)}31.786%{opacity:.7;transform:scale(.3)}35.417%,100%{opacity:0;transform:scale(1)}}
@keyframes dd-rip2{0%,37.321%{opacity:0;transform:scale(.2)}37.56%{opacity:.7;transform:scale(.3)}41.19%,100%{opacity:0;transform:scale(1)}}
@keyframes dd-play{0%,31.726%{opacity:1}31.786%,37.5%{opacity:0}37.56%,100%{opacity:1}}
@keyframes dd-pause{0%,31.726%{opacity:0}31.786%,37.5%{opacity:1}37.56%,100%{opacity:0}}
@keyframes dd-plug{0%,53.571%{transform:translateX(0)}55.953%,72.619%{transform:translateX(10px)}73.571%{transform:translateX(-.6px)}74.167%,100%{transform:translateX(0)}}
@keyframes dd-cable{0%,53.571%{d:path('M570 356.5 C 614 356.5, 626 440, 708 440 C 760 440, 790 440, 790 396')}55.953%,72.619%{d:path('M580 356.5 C 624 356.5, 628 446, 710 446 C 762 446, 790 444, 790 396')}73.571%,100%{d:path('M570 356.5 C 614 356.5, 626 440, 708 440 C 760 440, 790 440, 790 396')}}
@keyframes dd-wcue{0%,55.953%{opacity:0}57.143%,72.917%{opacity:1}74.107%,100%{opacity:0}}
@keyframes dd-ovw{0%,56.547%{opacity:0}57.738%,71.428%{opacity:1}72.619%,100%{opacity:0}}
@keyframes dd-ovu{0%,75%{opacity:0}76.191%,85.119%{opacity:1}86.31%,100%{opacity:0}}
@keyframes dd-spin{to{transform:rotate(360deg)}}
@media(max-width:600px){.dd-menu-s{transform:scale(1.9);transform-origin:504px 58px}.dd-ovs{transform:scale(1.7);transform-origin:726px 289px}}
@media(prefers-reduced-motion:reduce){.dd-drag{animation:none;transform:translate(140px,118px)}.dd-cur,.dd-curp,.dd-menu,.dd-hl,.dd-hand,.dd-rip,.dd-play,.dd-pause,.dd-mplug,.dd-cable,.dd-wcue,.dd-ovw,.dd-ovu,.dd-spin{animation:none}.dd-menu{opacity:1}.dd-hl{opacity:.14}.dd-cur{opacity:1;transform:translate(478px,51px)}}
/* Let the device illustration use the phone's full width, while the copy keeps
   its comfortable inset. The SVG's own gutters keep both devices off the edges. */
@media(max-width:600px){.dd-scene{max-width:none;margin:28px -24px 0}.hero>.caption{margin-top:0}}
.ico{flex-shrink:0;display:block}
.wl{display:flex;align-items:center;gap:16px;margin-top:18px;padding:16px 20px;text-align:left;background:#fbfbfb;border:1px dashed #cfcfd4;border-radius:14px}
.wl-ico{flex-shrink:0;color:var(--blue)}.wl h3{margin:0 0 2px;font-size:15px;font-weight:500}.wl p{margin:0;color:var(--mut);font-size:14px}
.wl-cap{margin-left:auto;flex-shrink:0;font-size:11px;color:#9a9a9a;border:1px solid #e0e0e0;border-radius:999px;padding:4px 10px;white-space:nowrap}
@media(max-width:860px){.wl{flex-wrap:wrap;align-items:flex-start}.wl>div{flex:1 1 200px}.wl-cap{margin-left:34px}}

/* branding */
.menubar{grid-template-columns:1fr auto}
.menubar .brand img{display:block;height:20px;width:auto}
.menubar .mark{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);line-height:0;pointer-events:none}.menubar .mark img{display:block;height:24px;width:auto}
.logo-h1{margin:6px 0 14px;line-height:0}.logo-h1 img{display:inline-block;height:96px;width:auto;max-width:86vw;object-fit:contain}
@media(max-width:860px){.menubar .mark{display:block}}
@media(max-width:600px){.hero{padding-top:28px}.menubar .right a:not(.get){display:none}.logo-h1 img{height:auto;width:min(300px,82vw)}}
/* hero takeover: real pointer replaces the demo cursor */
.dd-live .dd-curclip{visibility:hidden}
.dd-live{touch-action:none}
/* "Get the iPhone app" icon: iPhone Duo closed (portrait cover screen, ~82x118 mm) -> open (~165x118 mm, hinge) */
.ico-duo *{transition:x .4s ease-out,y .4s ease-out,width .4s ease-out,height .4s ease-out,rx .4s ease-out,cx .4s ease-out,cy .4s ease-out,opacity .4s ease-out}
.ip-btn:hover .ip-body,.ip-btn:focus-visible .ip-body,.ip-btn.ip-open .ip-body{x:.6px;y:2.9px;width:14.8px;height:10.2px;rx:2px}
.ip-btn:hover .ip-scr,.ip-btn:focus-visible .ip-scr,.ip-btn.ip-open .ip-scr{x:2.6px;y:4.8px;width:10.8px;height:6.4px;rx:.8px;opacity:.16}
.ip-btn:hover .ip-cam,.ip-btn:focus-visible .ip-cam,.ip-btn.ip-open .ip-cam{cx:12.4px;cy:5.7px;opacity:0}
.ip-btn:hover .ip-h,.ip-btn:focus-visible .ip-h,.ip-btn.ip-open .ip-h{opacity:.45}
@media(prefers-reduced-motion:reduce){.ico-duo *{transition:none}.ip-btn:hover .ip-body,.ip-btn:focus-visible .ip-body,.ip-btn.ip-open .ip-body{x:3.45px;y:1.5px;width:9.1px;height:13px;rx:2.2px}.ip-btn:hover .ip-scr,.ip-btn:focus-visible .ip-scr,.ip-btn.ip-open .ip-scr{x:5.6px;y:3.65px;width:4.8px;height:8.7px;rx:.9px;opacity:.28}.ip-btn:hover .ip-cam,.ip-btn:focus-visible .ip-cam,.ip-btn.ip-open .ip-cam{cx:8px;cy:4.7px;opacity:1}.ip-btn:hover .ip-h,.ip-btn:focus-visible .ip-h,.ip-btn.ip-open .ip-h{opacity:0}}
@media(pointer:coarse){.menubar{height:44px}.menubar a{display:inline-flex;align-items:center;min-height:44px}.band p a,footer a{padding:14px 4px;margin:0 -4px}}

/* Keep the USB connection readable while visitors manipulate the displays. */
.dd-scene svg{touch-action:none}
.dd-live .dd-mplug{transform:translateX(0)!important}
.dd-live .dd-cable{d:path('M570 356.5 C 614 356.5, 626 440, 708 440 C 760 440, 790 440, 790 396')!important}
.dd-live .dd-ovw,.dd-live .dd-ovu,.dd-live .dd-wcue,.dd-live .dd-hand,.dd-live .dd-rip{opacity:0!important}