/* iPhone — /iphone only. Loaded after landing.css and download.css, whose pieces it reuses. */
.scan{display:inline-flex;align-items:center;gap:16px;margin:28px auto 0;padding:14px 20px 14px 14px;border:1px solid var(--line);border-radius:22px;background:#fff;text-align:left}
.qr{width:84px;height:84px;padding:8px;border-radius:12px;background:#fff;border:1px solid var(--line);flex:none}
.scan p{margin:0;max-width:220px;font-size:13.5px;line-height:1.45;color:var(--muted)}
.scan b{display:block;color:var(--text);font-weight:500}

/* The render. Without .live (no script, or reduced motion) it rests with the new task landed. */
.pocket{position:relative;max-width:1000px;height:640px;margin:72px auto 0;border-radius:28px;overflow:hidden;text-align:left;background:linear-gradient(160deg,#f7f7f9 0%,#ececf0 55%,#e4e4e9 100%);border:1px solid var(--line);box-shadow:0 30px 80px -40px rgba(0,0,0,.35)}
.float-l,.float-r{position:absolute;top:50%;z-index:1}
.float-l{left:9%;margin-top:-40px;animation:bob2 7s ease-in-out infinite}
.float-r{right:8%;margin-top:-110px;animation:bob2 7s ease-in-out -3.5s infinite}
.phone{position:absolute;left:50%;top:44px;width:300px;height:620px;margin-left:-150px;border-radius:50px;background:#fff;border:10px solid var(--ink);box-shadow:0 30px 60px -24px rgba(0,0,0,.4);overflow:hidden;z-index:2}
.island{position:absolute;left:50%;top:9px;width:86px;height:25px;margin-left:-43px;border-radius:999px;background:var(--ink);z-index:4}
.sbar{display:flex;align-items:center;justify-content:space-between;height:42px;padding:4px 22px 0 28px;font-size:13px;font-weight:600}
.sig{display:flex;align-items:flex-end;gap:2px;height:10px}
.sig i{width:3px;border-radius:1px;background:var(--text)}
.sig i:nth-child(1){height:5px}.sig i:nth-child(2){height:7px}.sig i:nth-child(3){height:10px}
.tbar{display:flex;align-items:center;justify-content:space-between;padding:6px 14px 0}
.tb-r{display:flex;gap:8px}
.tb{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--soft);transition:transform .15s,background .15s}
.tb svg{width:16px;height:16px;fill:none;stroke:var(--text);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.live.is-plus .plus{transform:scale(.9);background:#e4e4e9}
.ptitle{margin:10px 18px 8px;font-size:26px;font-weight:700;letter-spacing:-.02em}
.phone .p-tabs{padding:0 14px 2px;font-size:12px}
.phone .p-tabs span{padding:3px 11px}
.plist{padding:0 8px}
.phone .grp{display:flex;align-items:center;gap:7px;margin:12px 8px 2px;font-size:11.5px;font-weight:500;color:var(--faint)}
.phone .st{width:10px;height:10px}
.phone .row{height:36px;font-size:13px;gap:10px}
.phone .row .ring{width:15px;height:15px;flex:none}
.phone .row .by{width:14px;height:14px}
.live .row,.live .row .ring,.live .row .txt,.live .grp{transition:height .45s var(--ease),opacity .4s var(--ease),transform .45s var(--ease),background .6s,border-color .2s,margin .45s var(--ease)}
.live .added,.phone .acc{height:0;opacity:0}
.live.is-landed .added{height:36px;opacity:1}
.live.is-landed:not(.is-tap):not(.is-accepted) .added{background:var(--soft)}
.live.is-tap .pdraft .ring{border-style:solid;border-color:var(--ink);background:var(--ink);transform:scale(.88)}
.pocket.is-accepted .acc{height:36px;opacity:1;animation:landed 1.4s var(--ease)}
.pocket.is-accepted .pdraft{height:0;opacity:0;transform:translateX(10px)}
.pocket.is-accepted .dgrp{height:0;opacity:0;margin:0}
/* The toast and the quick-add sheet slide up from the bottom. */
.ptoast{position:absolute;left:50%;bottom:28px;display:flex;align-items:center;gap:14px;height:38px;padding:0 16px;border-radius:999px;background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--line);box-shadow:0 12px 28px -14px rgba(0,0,0,.35);font-size:12.5px;color:var(--muted);white-space:nowrap;transform:translate(-50%,90px);transition:transform .45s var(--ease)}
.ptoast b{color:var(--text);font-weight:600}
.is-accepted .ptoast{transform:translate(-50%,0)}
.sheet{position:absolute;left:0;right:0;bottom:0;padding:8px 14px 0;border-radius:26px 26px 0 0;background:#fff;box-shadow:0 -12px 40px -12px rgba(0,0,0,.22);transform:translateY(105%);transition:transform .4s var(--ease);z-index:3}
.live.is-sheet .sheet{transform:none}
.grab{width:36px;height:5px;margin:0 auto 12px;border-radius:999px;background:#dcdce1}
.s-field{display:flex;align-items:center;height:28px;padding:0 4px;font-size:15px}
.s-field .ph{color:var(--faint)}
.sheet .typed{display:none;overflow:hidden;white-space:nowrap;border-right:1.5px solid var(--ink);width:0;color:var(--text)}
.live.is-typing .s-field .ph{display:none}
.live.is-typing .sheet .typed{display:block;animation:typein 1.8s steps(27) forwards}
.s-chips{display:flex;gap:6px;margin:10px 0 12px}
.s-chips span{padding:4px 10px;border:1px solid var(--line);border-radius:999px;font-size:11.5px;color:var(--muted)}
.kb{display:grid;grid-template-columns:1fr;gap:7px;margin:0 -14px;padding:10px 8px 26px;background:#e9e9ed}
.kb i{height:32px;border-radius:7px;background:repeating-linear-gradient(90deg,#fff 0 22px,transparent 22px 27px)}
.kb i:nth-child(2){margin:0 13px}.kb i:nth-child(3){margin:0 40px}
.kb .ret{justify-self:end;display:grid;place-items:center;width:84px;height:32px;border-radius:7px;background:#d2d2d8;font-size:12px;font-weight:500;color:var(--text);transition:background .15s,transform .15s}
.live.is-enter .ret{background:var(--ink);color:#fff;transform:scale(.96)}

/* Install */
.store{display:flex;align-items:center;gap:12px;width:min(280px,100%);padding:12px 14px 12px 12px;border-radius:18px;background:#fff;border:1px solid var(--line);box-shadow:0 12px 28px -18px rgba(0,0,0,.3)}
.store p{margin:0;flex:1;font-size:12px;line-height:1.35;color:var(--faint)}
.store b{display:block;font-size:14px;font-weight:600;color:var(--text)}
.store .ic,.tf{width:48px;height:48px;border-radius:12px;flex:none}
.tf{display:grid;place-items:center;background:linear-gradient(160deg,#fafafb,#e7e7ec);border:1px solid var(--line)}
.tf svg{width:28px;height:28px;fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round}
.store .get{padding:5px 14px;border-radius:999px;background:var(--soft);font-size:12.5px;font-weight:600;color:var(--text);animation:press3 4s var(--ease) infinite}
.store .acc2{animation-delay:1s}
@keyframes press3{0%,30%,85%,100%{background:var(--soft);color:var(--text);transform:none}36%{transform:scale(.94)}40%,80%{background:var(--ink);color:#fff;transform:none}}
.v-in{flex-direction:column;gap:8px;padding:0 24px}
.v-in .mini{max-width:260px;animation:rise 1s var(--ease) both}
.v-in .mini .by{width:14px;height:14px}

/* Features */
.a-swipe{gap:10px}
.swipe{position:relative;width:min(380px,100%);height:44px}
.swipe .under{position:absolute;inset:1px;padding-left:18px;border-radius:13px;background:var(--ink);line-height:42px;font-size:13px;font-weight:500;color:#fff}
.srow{position:absolute;inset:0;display:flex;align-items:center;gap:10px;padding:0 14px;border:1px solid var(--line);border-radius:14px;background:#fff;font-size:13.5px;white-space:nowrap;animation:swipe 4.5s var(--ease) infinite}
.swipe.still .srow{animation:none}
.srow .ring{width:15px;height:15px;flex:none}
.srow em{margin-left:auto;font-style:normal;font-size:12px;color:var(--faint)}
@keyframes swipe{0%,15%{transform:none}35%,62%{transform:translateX(96px)}70%,100%{transform:none}}
.a-swipe .swipe:first-child .ring{animation:wring 4.5s var(--ease) infinite}
.said{margin:0;padding:9px 14px;border-radius:16px;border-bottom-left-radius:6px;background:#fff;border:1px solid var(--line);font-size:13px;color:var(--text)}
.a-siri .mini{max-width:220px;animation:rise2 4.5s var(--ease) infinite}
@keyframes rise2{0%,25%{opacity:0;transform:translateY(8px)}35%,85%{opacity:1;transform:none}100%{opacity:0}}

@media(max-width:980px){
  .float-l{left:4%}
  .float-r{right:3%}
}
@media(max-width:820px){
  .float-l,.float-r{display:none}
}
@media(max-width:720px){
  .pocket{height:600px;border-radius:22px;margin-top:52px}
  .phone{top:28px;transform:scale(.94);transform-origin:50% 0}
  .scan{display:none}
}
@media(prefers-reduced-motion:reduce){
  .sheet .typed{display:none}
}