/* Quiet phone silhouettes with floating, readable product moments. */
.product-motion { --motion-progress:1; position:relative; isolation:isolate; height:550px; width:100%; max-width:480px; margin:auto; color:#24272c; font:15px/1.45 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",sans-serif; }
.motion-phone { position:absolute; inset:12px 12% 0; border-radius:42px; background:linear-gradient(160deg,#f1f2f4,#e6e9ee); border:1px solid #fff; box-shadow:0 14px 35px #14233a12,inset 0 0 0 5px #ffffff75; overflow:hidden; }
.motion-speaker { width:65px; height:5px; background:#c9ced5; border-radius:9px; margin:18px auto 25px; }
.motion-phone-header { display:flex; gap:9px; align-items:center; padding:0 20px; font-weight:700; }
.motion-phone-header img { width:28px; height:28px; background:#1b3e72; border-radius:8px; padding:5px; }
.product-motion small { display:block; font-size:11px; color:#737b86; font-weight:400; }
.motion-phone-header small { font-size:9px; margin-top:2px; }
.motion-phone-lines { padding:35px 20px; opacity:.4; }
.motion-phone-lines i { display:block; height:38px; margin:12px 0; border-radius:15px; background:#fff; width:70%; }
.motion-phone-lines i:nth-child(2) { margin-left:auto; width:60%; background:#c5d9e3; }
.motion-composer { position:absolute; bottom:22px; left:16px; right:16px; display:flex; justify-content:space-between; align-items:center; padding:10px 12px; border-radius:24px; background:#ffffffa6; font-size:11px; color:#9198a0; }
.motion-composer span { font-size:20px; }
.motion-floats { position:relative; z-index:2; padding-top:134px; display:flex; flex-direction:column; gap:20px; }
.motion-bubble,.motion-result { background:#f2f1f1; border-radius:20px; padding:17px 19px; box-shadow:0 0 10px rgb(0 0 0 / 20%); width:88%; }
.motion-bubble small { margin-bottom:7px; display:flex; align-items:center; gap:6px; }
.motion-bubble small img { width:15px; height:15px; }
.motion-outgoing { align-self:flex-end; background:#0da6f2; color:#fff; width:82%; }
.motion-result { margin-left:4%; background:#f2f1f1; }
.motion-result > b { display:block; font-size:18px; margin:8px 0 12px; }
.motion-chat .motion-result { display:flex; align-items:center; gap:12px; margin-top:10px; }
.motion-check { color:#0da6f2; font-size:24px; }
.motion-backphone { position:absolute; inset:38px 34% 22px -2%; border-radius:36px; background:#eff3ef; transform:rotate(-7deg); padding:38px 18px; color:#83968b; font-size:11px; opacity:.65; }
.motion-backphone > img { width:20px; vertical-align:middle; margin-right:7px; }
.motion-backphone > div { margin-top:30px; border-radius:12px; padding:12px; background:#fff; }
.motion-chat .motion-phone { left:19%; right:5%; }
.product-motion mark { background:#0da6f21a; color:inherit; border-radius:4px; padding:1px 3px; }
.motion-chips { display:flex; flex-wrap:wrap; gap:7px; margin-top:12px; }
.motion-chips span { padding:4px 9px; border-radius:20px; background:#e3e6ea; font-size:11px; }
.motion-task-status { position:relative; height:20px; margin-top:14px; font-size:12px; }
.motion-done,.motion-open { position:absolute; inset:0; }
.motion-done { color:#14714c; }
.motion-task .motion-floats { gap:16px; padding-top:123px; }
.motion-report .motion-floats { padding-top:120px; gap:18px; }
.motion-document { width:91%; background:#f2f1f1; }
.motion-paper { overflow:hidden; border-radius:10px; background:white; margin-top:14px; }
.motion-paper img { width:100%; height:130px; object-fit:cover; object-position:top; display:block; }
.motion-paper-caption { display:flex; gap:9px; align-items:center; padding:12px; font-size:10px; }
.motion-paper-caption span { color:#d84646; border:1px solid #ecd4d4; padding:5px; border-radius:4px; }
.motion-ready { font-size:12px; color:#14714c; margin-top:14px; }
.motion-answer-card p,.motion-source p { margin:9px 0; }
.motion-source { width:81%; margin-left:12%; background:#fff; }
.motion-source > span { font-size:11px; color:#008ccc; }
@media(max-width:760px) { .product-motion { max-width:390px; height:540px; font-size:14px; } .motion-bubble,.motion-result { padding:15px 16px; } }
@media(prefers-reduced-motion:reduce) { .motion-open { opacity:0; } .motion-done { opacity:1; } }