/* A single eight-second search-to-map sequence inside the Android illustration. */
#nowAvailableSection .app-phone-screen { gap: 8px; padding-bottom: 10px; background: #f6f9ff; }
#nowAvailableSection .app-phone-screen::before { content: none; }
#nowAvailableSection .app-phone-status-row,
#nowAvailableSection .app-phone-brand-row { flex: none; }
#nowAvailableSection .ms-phone-stage { position: relative; flex: 1 1 0; width: calc(100% + 8px); min-height: 0; overflow: hidden; isolation: isolate; border-radius: 15px; background: #edf3fa; }
#nowAvailableSection .ms-phone-map { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
#nowAvailableSection .ms-phone-camera { transform-origin: 120px 135px; }
#nowAvailableSection .ms-phone-search { --ms-phone-query-size: 8px; --ms-phone-search-height: 37px; position: absolute; z-index: 3; top: 13px; left: 10px; right: 10px; display: flex; align-items: center; gap: 7px; min-height: var(--ms-phone-search-height); padding: 8px; border: 1px solid #dce6f4; border-radius: 11px; background: #ffffffed; color: #193d67; font-size: var(--ms-phone-query-size); box-shadow: 0 7px 18px #24477514; transform-origin: center; }
#nowAvailableSection .ms-phone-search > svg { width: 14px; height: 14px; flex: none; fill: none; stroke: #5480b7; stroke-width: 1.8; stroke-linecap: round; }
#nowAvailableSection .ms-phone-query { min-width: 0; font-size: inherit; font-weight: 650; white-space: nowrap; letter-spacing: -.02em; }
#nowAvailableSection .ms-phone-search-go { display: grid; place-items: center; flex: none; width: 21px; height: 21px; margin-left: auto; border-radius: 7px; background: #0f63ff; color: white; }
#nowAvailableSection .ms-phone-search-go svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#nowAvailableSection .ms-phone-map-label { font-family: 'Inter', sans-serif; font-size: 6px; font-weight: 550; fill: #7186a0; paint-order: stroke; stroke: #f5f9fc; stroke-width: 2px; stroke-linejoin: round; }
#nowAvailableSection .ms-phone-route { stroke-dasharray: 1; stroke-dashoffset: 0; }
#nowAvailableSection .ms-phone-found-ring { opacity: 0; transform-box: fill-box; transform-origin: center; }
#nowAvailableSection .ms-phone-pin-pop { transform-origin: 0 0; }
#nowAvailableSection .ms-phone-result { position: absolute; z-index: 3; left: 10px; right: 10px; bottom: 13px; display: grid; gap: 9px; padding: 12px 10px 10px; border: 1px solid #fff; border-radius: 13px; background: #ffffffed; box-shadow: 0 8px 25px #2447751f; backdrop-filter: blur(10px); }
#nowAvailableSection .ms-phone-result-head { display: flex; gap: 8px; align-items: center; }
#nowAvailableSection .ms-phone-result-head > svg { width: 33px; height: 33px; flex: none; }
#nowAvailableSection .ms-phone-result-head > span { display: grid; gap: 4px; min-width: 0; }
#nowAvailableSection .ms-phone-result b { color: #183a64; font-size: 9px; font-weight: 750; }
#nowAvailableSection .ms-phone-result small { display: flex; align-items: center; gap: 4px; color: #248479; font-size: 7px; font-weight: 550; }
#nowAvailableSection .ms-phone-result small i { width: 4px; height: 4px; border-radius: 50%; background: #20a68d; }
#nowAvailableSection .ms-phone-result-meta { display: flex; align-items: center; justify-content: space-between; padding-top: 8px; border-top: 1px solid #eaf0f8; color: #6b7f9b; font-size: 7px; }
#nowAvailableSection .ms-phone-result-meta b { display: flex; align-items: center; gap: 4px; color: #0f63ff; font-size: 9px; }
#nowAvailableSection .ms-phone-result-meta svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
#nowAvailableSection .ms-phone-nav { flex: none; display: flex; justify-content: space-around; width: 100%; padding: 2px 7px 1px; }
#nowAvailableSection .ms-phone-nav span { display: grid; justify-items: center; gap: 3px; color: #7b8ea8; font-size: 6px; font-weight: 650; }
#nowAvailableSection .ms-phone-nav svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#nowAvailableSection .ms-phone-nav span:nth-child(2) { color: #0f63ff; }

/* All tracks share a clock, so typing, camera, route and result stay in sequence. */
#nowAvailableSection .is-playing .ms-phone-camera { animation: msPhoneCamera 8s cubic-bezier(.4, 0, .2, 1) infinite; }
#nowAvailableSection .is-playing .ms-phone-search { animation: msPhoneSearch 8s cubic-bezier(.4, 0, .2, 1) infinite; }
#nowAvailableSection .is-playing .ms-phone-query { animation: msPhoneTyping 8s linear infinite; }
#nowAvailableSection .is-playing .ms-phone-search-go { animation: msPhoneSubmit 8s ease-in-out infinite; }
#nowAvailableSection .is-playing .ms-phone-route { animation: msPhoneRoute 8s cubic-bezier(.4, 0, .2, 1) infinite; }
#nowAvailableSection .is-playing .ms-phone-origin { animation: msPhoneOrigin 8s ease infinite; }
#nowAvailableSection .is-playing .ms-phone-pin-pop { animation: msPhonePin 8s cubic-bezier(.22, .8, .3, 1) infinite; }
#nowAvailableSection .is-playing .ms-phone-found-ring { animation: msPhoneFound 8s ease-out infinite; }
#nowAvailableSection .is-playing .ms-phone-result { animation: msPhoneResult 8s ease infinite; }
#nowAvailableSection .is-playing .ms-phone-nav span:first-child { animation: msPhoneSearchTab 8s linear infinite; }
#nowAvailableSection .is-playing .ms-phone-nav span:nth-child(2) { animation: msPhoneLocateTab 8s linear infinite; }
/* 25% of the shared eight-second loop is the full two-second typing close-up. */
@keyframes msPhoneCamera { 0%, 25%, 100% { transform: translateY(32px) scale(1.8); opacity: .1; } 48%, 92% { transform: translateY(0) scale(1); opacity: 1; } }
@keyframes msPhoneSearch { 0%, 25%, 100% { transform: translateY(94px) scale(1.06); font-size: calc(var(--ms-phone-query-size) * 1.5); min-height: calc(var(--ms-phone-search-height) + 20px); box-shadow: 0 12px 32px #24477529; } 48%, 92% { transform: translateY(0) scale(1); font-size: var(--ms-phone-query-size); min-height: var(--ms-phone-search-height); box-shadow: 0 7px 18px #24477514; } }
@keyframes msPhoneTyping { 0%, 100% { clip-path: inset(0 100% 0 0); animation-timing-function: steps(18, end); } 25%, 94% { clip-path: inset(0); } }
@keyframes msPhoneSubmit { 0%, 25%, 32%, 100% { transform: scale(1); background: #0f63ff; } 28% { transform: scale(.87); background: #1747bc; } }
@keyframes msPhoneRoute { 0%, 42%, 100% { stroke-dashoffset: 1; opacity: 0; } 45% { opacity: 1; } 67%, 94% { stroke-dashoffset: 0; opacity: 1; } 98% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes msPhoneOrigin { 0%, 40%, 100% { opacity: 0; } 46%, 93% { opacity: 1; } 98% { opacity: 0; } }
@keyframes msPhonePin { 0%, 60%, 100% { opacity: 0; transform: translateY(-12px) scale(.72); } 70%, 94% { opacity: 1; transform: translateY(0) scale(1); } 99% { opacity: 0; transform: translateY(0) scale(1); } }
@keyframes msPhoneFound { 0%, 66%, 85%, 100% { opacity: 0; transform: scale(.35); } 68% { opacity: .75; } 84% { opacity: 0; transform: scale(2.2); } }
@keyframes msPhoneResult { 0%, 70%, 100% { opacity: 0; transform: translateY(14px); } 79%, 94% { opacity: 1; transform: translateY(0); } 99% { opacity: 0; transform: translateY(6px); } }
@keyframes msPhoneSearchTab { 0%, 40%, 100% { color: #0f63ff; } 50%, 94% { color: #7b8ea8; } }
@keyframes msPhoneLocateTab { 0%, 40%, 100% { color: #7b8ea8; } 50%, 94% { color: #0f63ff; } }
@media (max-width: 520px) {
  #nowAvailableSection .ms-phone-search { --ms-phone-query-size: 6.8px; --ms-phone-search-height: 32px; left: 7px; right: 7px; padding: 6px; gap: 3px; }
  #nowAvailableSection .ms-phone-search-go { width: 18px; height: 18px; }
  #nowAvailableSection .ms-phone-result { left: 7px; right: 7px; padding: 9px 7px; gap: 6px; }
  #nowAvailableSection .ms-phone-result-head { gap: 6px; }
  #nowAvailableSection .ms-phone-result-head > svg { width: 27px; height: 27px; }
  #nowAvailableSection .ms-phone-result b { font-size: 8px; }
  #nowAvailableSection .ms-phone-result small, #nowAvailableSection .ms-phone-result-meta { font-size: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  #nowAvailableSection [data-phone-demo] *,
  #nowAvailableSection [data-phone-demo] *::before,
  #nowAvailableSection [data-phone-demo] *::after { animation: none !important; transition: none !important; }
  #nowAvailableSection .ms-phone-camera, #nowAvailableSection .ms-phone-search,
  #nowAvailableSection .ms-phone-result, #nowAvailableSection .ms-phone-pin-pop { transform: none !important; opacity: 1 !important; }
  #nowAvailableSection .ms-phone-query { clip-path: none !important; }
  #nowAvailableSection .ms-phone-found-ring { display: none; }
}