/* Phone/tablet scroll deck (founder 2026-11-16: "on the phone the scroll animation is not working well").
   The section pins under the sticky bar: heading on top, the active card's text, then the cards stacking. */
html.motion-m .deckscroll { height: 330vh; padding: 0; }
html.motion-m .deckscroll .pin { position: sticky; top: 60px; height: calc(100vh - 60px); height: calc(100svh - 60px); display: flex; flex-direction: column; justify-content: center; padding: 12px 16px 20px; overflow: hidden; }
html.motion-m .deck-h { font-size: clamp(20px, 5.4vw, 30px); margin: 0 0 14px; padding: 0; }
html.motion-m .deck-h br { display: none; }
html.motion-m .deckscroll .stage { position: relative; display: block; width: 100%; max-width: 640px; margin: 0 auto; height: min(500px, calc(100vh - 210px)); height: min(500px, calc(100svh - 210px)); }
html.motion-m .slide { position: absolute; inset: 0; }
html.motion-m .slide .side { position: absolute; left: 0; right: 0; top: 0; margin: 0; opacity: 0; transform: translateY(8px); transition: opacity .4s ease, transform .4s ease; pointer-events: none; }
html.motion-m .slide.on .side { opacity: 1; transform: none; }
html.motion-m .slide .side h3 { font-size: 22px; margin-bottom: 6px; }
html.motion-m .slide .side p { font-size: 14px; max-width: none; }
html.motion-m .slide .deck { position: absolute; left: 0; right: 0; top: 112px; bottom: 0; aspect-ratio: auto; border-radius: 22px; will-change: transform; transform-origin: 50% 100%; box-shadow: 0 24px 50px -30px rgba(10,20,60,.5); }
html.motion-m .slide .deck > .ui { width: 92% !important; }
/* inner cards come alive here too */
html.motion-m .work .ok { display: inline-grid; opacity: 0; transform: scale(.6); transition: opacity .3s, transform .3s; }
html.motion-m .slide.on .work .spin { animation: spin 1s linear infinite; }
html.motion-m .work .wrow.done .spin { opacity: 0; animation: none; }
html.motion-m .work .wrow.done .ok { opacity: 1; transform: none; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (min-width: 641px) { html.motion-m .deckscroll .pin { top: 68px; height: calc(100vh - 68px); } }