/* Motion is progressive enhancement. Content stays visible without JavaScript. */
:root{--ease-glass:cubic-bezier(.22,1,.36,1)}
.navbar{transition:box-shadow .5s var(--ease-glass),background .5s}
.site-header.is-scrolled .navbar{background:linear-gradient(125deg,#ffffffc9,#f9fbffa6);box-shadow:0 12px 32px #26375815,inset 0 1px 0 #fff,inset 0 -1px 1px #fff}
.main-nav a{position:relative}
.main-nav a::after{content:"";position:absolute;left:0;right:0;bottom:5px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease-glass)}
.main-nav a:hover::after{transform:scaleX(1)}
.motion-pending{opacity:0;translate:0 24px}
.motion-pending:focus-within{opacity:1;translate:none}
.feature-card,.page-plan,.page-feature,.page-download-card{transition:box-shadow .45s var(--ease-glass),border-color .45s}
.feature-card::after{content:"";position:absolute;pointer-events:none;z-index:-1;inset:0;border-radius:inherit;background:radial-gradient(420px circle at var(--light-x,50%) var(--light-y,0%),#ffffff55,transparent 72%);opacity:0;transition:opacity .5s;border:1px solid #ffffff70}
.feature-card:hover::after{opacity:1}
.hero{background:linear-gradient(#f5f5f7 2%,#f3f6fb 48%,#edf3fc 78%,#f5f5f7)}
.hero:before{height:660px;top:95px;opacity:.9;background:radial-gradient(ellipse at 15% 45%,#86baf463,transparent 49%),radial-gradient(ellipse at 84% 38%,#b9ace557,transparent 47%),radial-gradient(ellipse at 52% 83%,#9dccf754,transparent 54%)}
.hero-product:before,.hero-product:after{content:"";position:absolute;z-index:0;pointer-events:none;left:6%;right:6%;top:14%;height:62%;border:1px solid #fff9;border-radius:50%;transform:rotate(-12deg);box-shadow:0 1px 0 #8ba8d30b,inset 0 1px 0 #fff8}
.hero-product:after{left:0;right:0;top:9%;height:75%;transform:rotate(-12deg);opacity:.38}
.lp-stage{overflow:visible}
.lp-window{transform:perspective(1800px) rotateX(var(--tilt-x,3deg)) rotateY(var(--tilt-y,-2deg));transition:transform .7s var(--ease-glass);background:linear-gradient(130deg,#fcfdfff5,#eaf1f8f2);box-shadow:inset 0 0 0 1px #ffffffd9,0 1px 0 1px #a0b0c52e,0 20px 32px -19px #627d9b8a,0 36px 65px -27px #4c668945}
.lp-window::after{background:radial-gradient(ellipse at var(--light-x,30%) var(--light-y,0%),#ffffff18,transparent 60%)}
.lp-rear-glass{transition:transform 1s var(--ease-glass);transform:translateX(var(--rear-x,0px)) rotate(-2deg)}
.lp-device{transition:box-shadow .45s,border-color .45s,transform .65s var(--ease-glass)}
.lp-screen{transition:filter .5s}
.lp-screen:after{pointer-events:none}
.lp-toolbar{background-image:radial-gradient(ellipse at var(--light-x,25%) 0%,#ffffffcf,transparent 70%),linear-gradient(140deg,#ffffffe0,#f5f9ff7a 55%,#ffffffb0);transition:box-shadow .5s}
.lp-stage:hover .lp-toolbar{box-shadow:inset 0 2px 2px #fff,inset 0 -2px 2px #9cacbf24,0 1px 0 1px #acbdd333,0 20px 36px -18px #536d988a}
.lp-tool{transition:background-color .4s,color .4s}
.hero-switch{isolation:isolate}
.hero-switch.has-indicator:before{content:"";position:absolute;z-index:-1;top:5px;bottom:5px;left:0;width:var(--tab-width,96px);transform:translateX(var(--tab-x,5px));border:1px solid #fff;border-radius:28px;background:linear-gradient(140deg,#fffffff5,#ffffffa6);box-shadow:0 3px 10px #23406212,inset 0 1px 0 #fff;transition:transform .55s var(--ease-glass),width .55s var(--ease-glass)}
.hero-switch.has-indicator button[aria-selected=true]{background:transparent;box-shadow:none}
.hero-switch button{transition:color .3s;white-space:nowrap}
.hero-switch{border-radius:20px;background:linear-gradient(155deg,#e8eff8c9,#f7faffb3);border-color:#fffffff5;box-shadow:inset 0 1px 2px #90a9c617,0 8px 24px #3f638512}
.hero-switch button{min-height:44px;border-radius:14px;transition:color .3s,transform .25s cubic-bezier(.22,1,.36,1)}
.hero-switch button:active{transform:scale(.97)}
.hero-switch button[aria-selected=true]{color:#155eaa}
.hero-switch.has-indicator:before{border-radius:14px;background:linear-gradient(145deg,#fff,#f3f8ffe3);box-shadow:0 2px 5px #36527a16,0 5px 12px #5977990a,inset 0 1px 0 #fff,inset 0 -1px 1px #d8e5f17a}
.free-card::after{background:radial-gradient(420px circle at var(--light-x,50%) var(--light-y,0%),#bcd8ff12,transparent 70%);border-color:#ffffff18}
.lp-stage[data-mode=sync] .lp-screen:after{width:12px;height:12px;right:26%;top:53%;background:#1789eaa6;box-shadow:0 0 0 5px #f2faff66,0 2px 9px #24528d33}
.lp-transfer{position:absolute;z-index:3;inset:auto 9% 35%;display:flex;flex-direction:column;align-items:center;gap:9px;padding:14px 6px 12px;border:1px solid #ffffffdc;border-radius:13px;background:linear-gradient(145deg,#fffffff0,#eef6ffd9);box-shadow:0 8px 24px #41658e22,inset 0 1px 0 white;opacity:0;transform:translateY(14px) scale(.92);transition:opacity .4s,transform .7s var(--ease-glass);pointer-events:none}
.lp-transfer svg{width:26px;height:26px;fill:none;stroke:#6799ce;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.lp-transfer span{font-size:9px;line-height:1.4;color:#5b7291;white-space:nowrap}
.lp-transfer i{position:relative;width:75%;height:3px;border-radius:3px;background:#c2d9f357;overflow:hidden}
.lp-transfer i:after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,#8cbcf1,#3887db);transform:scaleX(.72);transform-origin:left}
.lp-stage[data-mode=batch] .lp-transfer{opacity:1;transform:none;transition-delay:var(--device-delay,0ms)}
.lp-stage[data-mode=batch] .lp-apps{opacity:.35}
.lp-apps{transition:opacity .4s}
.lp-device:nth-child(2){--device-delay:45ms}.lp-device:nth-child(3){--device-delay:90ms}.lp-device:nth-child(4){--device-delay:135ms}.lp-device:nth-child(5){--device-delay:180ms}.lp-device:nth-child(6){--device-delay:225ms}
.batch-scene .task-line{position:relative;isolation:isolate;overflow:hidden;background:#ffffffe0}
.batch-scene .task-line:before{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,#e1ecfd99,#d9e9fa66);transform:scaleX(0);transform-origin:left}
.batch-scene .task-line:last-child{background:#ffffffe0}
.start-grid article{position:relative}
.start-grid article:not(:last-child):after{content:"";position:absolute;top:24px;left:72px;right:0;height:1px;transform-origin:left;background:linear-gradient(90deg,#cbd7e6,transparent)}
.get-app:before{content:"";position:absolute;pointer-events:none;inset:auto 10% -75%;height:110%;border-radius:50%;background:radial-gradient(ellipse,#ddeafb75,transparent 65%)}
.get-app>*{position:relative}
@media(hover:hover) and (pointer:fine){
  .feature-card:hover,.page-feature:hover{box-shadow:0 18px 36px -24px #455a8740}
  .page-plan:hover{box-shadow:0 18px 40px #304b7114}
  .free-card:hover .free-device-wall{transform:rotateY(-5deg) rotateZ(-1deg) translateY(-3px)}
}
@media(prefers-reduced-motion:no-preference){
  .motion-enabled .hero:before{animation:glass-light-arrive 3.6s var(--ease-glass) both}
  .motion-enabled .hero-product:before,.motion-enabled .hero-product:after{animation:glass-contour-arrive 2.8s var(--ease-glass) both}
  .motion-enabled .hero-product:after{animation-delay:.12s}
  .motion-enabled .lp-stage.is-demonstrating[data-mode=sync] .lp-screen:after{animation:glass-sync-touch 1.8s var(--ease-glass) both}
  .motion-enabled .lp-stage.is-demonstrating[data-mode=batch] .lp-transfer i:after{animation:glass-transfer 1.7s var(--ease-glass) both;animation-delay:var(--device-delay,0ms)}
  .motion-enabled .sync-card.is-inview .keycap.active{animation:glass-key-press 2.6s ease both}
  .motion-enabled .batch-card.is-inview .task-line:before{animation:glass-task-fill 2.1s var(--ease-glass) both}
  .motion-enabled .batch-card.is-inview .task-line:nth-child(3):before{animation-delay:.22s}
  .motion-enabled .batch-card.is-inview .task-line:nth-child(4):before{animation-delay:.44s}
  .motion-enabled .start-grid article.is-inview:after{animation:glass-line-draw 1.5s var(--ease-glass) both}
  .main-nav.is-open{animation:glass-menu-open .3s var(--ease-glass) both}
  .page-answer{animation:glass-menu-open .3s var(--ease-glass)}
  .motion-enabled .free-card.is-inview .free-phone{animation:free-phone-arrive .85s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--phone-index)*45ms)}
  .motion-enabled .free-card.is-inview .free-glass-badge{animation:free-badge-arrive 1s cubic-bezier(.22,1,.36,1) .3s both}
}
@keyframes free-phone-arrive{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}
@keyframes free-badge-arrive{from{opacity:0;translate:0 15px}to{opacity:1;translate:0 0}}
@keyframes glass-light-arrive{from{opacity:0;transform:translateX(-50%) scale(.85)}to{opacity:.9;transform:translateX(-50%) scale(1)}}
@keyframes glass-contour-arrive{from{opacity:0;transform:translateY(25px) rotate(-18deg) scale(.94)}to{transform:rotate(-12deg)}}
@keyframes glass-sync-touch{0%,15%{opacity:0;transform:translate(-9px,15px) scale(.6)}35%{opacity:1;transform:translate(0,0) scale(1)}48%{transform:scale(.72);box-shadow:0 0 0 3px #f2faff88}68%{transform:scale(1);box-shadow:0 0 0 12px #f2faff00}100%{opacity:1;transform:none}}
@keyframes glass-transfer{from{transform:scaleX(.08)}to{transform:scaleX(.72)}}
@keyframes glass-key-press{0%,25%,58%,100%{transform:none}33%,48%{transform:translateY(4px);box-shadow:inset 0 1px 4px #0041a533,0 2px 9px #0071e330}}
@keyframes glass-task-fill{from{transform:scaleX(0)}to{transform:scaleX(.78)}}

@keyframes glass-line-draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes glass-menu-open{from{opacity:0;translate:0 -7px}to{opacity:1;translate:none}}
@media(max-width:800px){.lp-window{transform:perspective(1600px) rotateX(2deg)}.lp-transfer{inset:auto 13% 31%;padding-block:12px}.hero-product:before{left:4%;right:4%}}
@media(max-width:600px){.hero:before{top:180px;height:460px}.hero-product:before{top:19%;height:54%}.hero-product:after{top:14%;height:65%}.lp-window{transform:none}.hero-switch.has-indicator:before{top:4px;bottom:4px}.hero-switch button{padding-inline:16px}.start-grid article:not(:last-child):after{top:55px;bottom:-19px;left:20px;right:auto;width:1px;height:auto;background:linear-gradient(#ccd8e7,#ccd8e72e)}.lp-transfer{inset:auto 8% 30%;padding:12px 5px 10px;gap:7px;border-radius:11px}.lp-transfer svg{width:23px;height:23px}.lp-transfer span{font-size:8px}.main-nav a::after{display:none}}
@media(max-width:360px){.hero-switch button{padding-inline:13px}.lp-transfer{gap:6px}.lp-transfer svg{width:21px;height:21px}}
@media(prefers-reduced-motion:reduce){.motion-pending{opacity:1;translate:none}.lp-window,.lp-rear-glass{transform:none}.hero-product:before,.hero-product:after{animation:none}}
@media print{.motion-pending{opacity:1;translate:none}.hero-product:before,.hero-product:after{display:none}}