/* Illustrated offline-draft journey, layered over the real mobile screenshot. */
.mobile-demo{position:absolute;z-index:2;right:14px;bottom:14px;left:14px;height:245px;overflow:hidden;border:1px solid #d9e9ee;border-radius:19px;background:#f8fcfd;box-shadow:0 -8px 24px #06365d30;color:#153f60;direction:rtl}
.mobile-demo-heading{height:43px;display:flex;align-items:center;justify-content:space-between;gap:4px;padding:0 12px;border-bottom:1px solid #e4eff1;background:#fff}
.mobile-demo-heading span{font-size:10px;font-weight:700}
.mobile-demo-heading small{font-size:8px;color:#688894}
.mobile-demo-scenes{position:relative;height:165px}
.mobile-demo-scene{position:absolute;inset:0;padding:11px 13px;opacity:0}
.mobile-demo-entry{opacity:1}
.mobile-demo-scene strong{display:block;margin-top:8px;font-size:12px;line-height:1.65}
.mobile-demo-scene small{display:block;margin-top:5px;color:#718d97;font-size:9px;line-height:1.8}
.mobile-demo-badge{display:inline-flex;align-items:center;gap:5px;padding:3px 7px;border-radius:20px;font-size:8px;font-weight:700}
.mobile-demo-badge i{width:5px;height:5px;border-radius:50%;background:currentColor}
.mobile-demo-offline{background:#fff2dd;color:#ad7324}
.mobile-demo-online{background:#e0f8ee;color:#0b9875}
.mobile-demo-field{display:flex;align-items:center;justify-content:space-between;gap:7px;margin-top:7px;padding:4px 7px;border:1px solid #e0ebed;border-radius:6px;background:white;color:#78919b;font-size:9px}
.mobile-demo-field i{width:42%;height:4px;border-radius:5px;background:#61bfca;transform-origin:right}
.mobile-demo-field:nth-of-type(2) i{width:31%}
.mobile-demo-action{margin-top:8px;padding:4px;border-radius:6px;background:#0f9aab;color:#fff;text-align:center;font-size:9px;font-weight:700}
.mobile-demo-saved,.mobile-demo-sync{text-align:center}
.mobile-demo-saved .mobile-demo-badge,.mobile-demo-sync .mobile-demo-badge{float:right}
.mobile-demo-symbol{clear:both;display:grid;place-items:center;width:42px;height:42px;margin:30px auto 4px;border-radius:14px;background:#e1f4f7;color:#108ea2}
.mobile-demo-symbol svg{width:21px;height:21px}
.mobile-demo-signal{background:#dff8ee;color:#0a9a78}
.mobile-demo-saved strong,.mobile-demo-sync strong{margin-top:5px}
.mobile-demo-steps{display:flex;justify-content:center;gap:6px;padding:8px}
.mobile-demo-steps i{width:6px;height:6px;border-radius:6px;background:#c9e0e5}
.mobile-demo-steps i:first-child{background:#139aab}
 .mobile-demo-entry{animation:mobile-scene-entry 15s ease-in-out infinite}
 .mobile-demo-saved{animation:mobile-scene-saved 15s ease-in-out infinite}
 .mobile-demo-sync{animation:mobile-scene-sync 15s ease-in-out infinite}
 .mobile-demo-field i{animation:mobile-fill 15s ease-out infinite}
 .mobile-demo-field:nth-of-type(2) i{animation-delay:.5s}
 .mobile-demo-steps i:nth-child(1){animation:mobile-dot-one 15s ease-in-out infinite}
 .mobile-demo-steps i:nth-child(2){animation:mobile-dot-two 15s ease-in-out infinite}
 .mobile-demo-steps i:nth-child(3){animation:mobile-dot-three 15s ease-in-out infinite}
@keyframes mobile-scene-entry{0%,27%{opacity:1;transform:translateY(0)}33%,96%{opacity:0;transform:translateY(5px)}100%{opacity:1;transform:translateY(0)}}
@keyframes mobile-scene-saved{0%,29%{opacity:0;transform:translateY(5px)}35%,60%{opacity:1;transform:translateY(0)}66%,100%{opacity:0;transform:translateY(5px)}}
@keyframes mobile-scene-sync{0%,62%{opacity:0;transform:translateY(5px)}68%,94%{opacity:1;transform:translateY(0)}99%,100%{opacity:0;transform:translateY(5px)}}
@keyframes mobile-fill{0%{transform:scaleX(0)}17%,100%{transform:scaleX(1)}}
@keyframes mobile-dot-one{0%,28%{background:#139aab}33%,96%{background:#c9e0e5}100%{background:#139aab}}
@keyframes mobile-dot-two{0%,30%{background:#c9e0e5}35%,61%{background:#139aab}66%,100%{background:#c9e0e5}}
@keyframes mobile-dot-three{0%,63%{background:#c9e0e5}68%,95%{background:#139aab}100%{background:#c9e0e5}}
@media(max-width:760px){.mobile-demo{right:12px;bottom:12px;left:12px;height:230px}.mobile-demo-heading{height:39px}.mobile-demo-scenes{height:158px}.mobile-demo-scene{padding:9px 10px}.mobile-demo-symbol{margin-top:25px}}