/* ==========================================================================
   NEXTESCAYPE — CODED APP SCREENS + PHONE/MOBILE POLISH
   Loaded last. Sharp HTML/CSS app screens (no screenshots), dark device bezels,
   flow demo, logo colour fix, no label overlaps, improved mobile UX.
   ========================================================================== */

:root {
  --u-blue: #2563EB; --u-blue-d: #2264D2; --u-ink: #18202E; --u-slate: #64748B;
  --u-line: #E2E8F0; --u-bg: #F8FAFC; --u-sun: #FFD930; --u-ember: #FC4F05;
  --u-green: #16A34A; --u-green-l: #DCFCE7; --u-bezel: #18202E;
}

/* ---------- 1. Logo colour (white artwork on light UI → brand blue) ---------- */
.cts-logo, .footer-logo-img,
.ecosystem-center-logo, .tg-hub-logo, img[src*="brand-logo-bike-white"] {
  filter: brightness(0) saturate(100%) invert(33%) sepia(98%) saturate(2200%) hue-rotate(216deg) brightness(96%);
}
.tg-hub img[src*="brand-logo-bike-white"], .ecosystem-hub img[src*="brand-logo-bike-white"],
[class*="hub"] img[src*="brand-logo-bike-white"] { filter: none; }
.cts-tagline { color: var(--u-slate) !important; opacity: 1; letter-spacing: .24em; font-weight: 600; }
.cts-wordmark { color: var(--u-ink); }
.cts-logo { filter: drop-shadow(0 8px 24px rgba(37,99,235,.35)) brightness(0) saturate(100%) invert(33%) sepia(98%) saturate(2200%) hue-rotate(216deg) brightness(96%); }

/* ---------- 2. Device frames: real dark bezels so they never melt into the page ---------- */
.android-phone, .story-device, .hero-mini-preview {
  background: var(--u-bezel) !important;
  border: 0 !important;
  box-shadow: 0 0 0 2px #0B1120, 0 0 0 4px rgba(37,99,235,.10), 0 28px 60px -18px rgba(24,32,46,.45), 0 10px 24px -8px rgba(24,32,46,.25) !important;
}
.android-phone::before, .android-phone::after { background: #0B1120 !important; box-shadow: none !important; }
.sec-understand .android-phone, #product-story .android-phone, .sec-journey .android-phone,
.sec-everyone .android-phone, .sec-showcase .android-phone, .hero-phone-stage .android-phone.phone-hero {
  box-shadow: 0 0 0 2px #0B1120, 0 0 0 4px rgba(37,99,235,.10), 0 34px 70px -20px rgba(24,32,46,.5), 0 12px 28px -10px rgba(24,32,46,.3) !important;
}
.phone-screen, .sd-screen { background: var(--u-bg) !important; }
.story-device .sd-glare, .phone-glare { opacity: .5; }
.hero-mini-preview { overflow: visible !important; opacity: 1 !important; }
.hero-mini-preview .phone-screen { background: var(--u-bg) !important; }

/* ---------- 3. ui-screen base ---------- */
.ui-screen {
  position: relative; width: 100%; height: 100%;
  container-type: inline-size;
  background: var(--u-bg); overflow: hidden; text-align: left; display: block;
}
.u-root {
  position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; overflow: hidden;
  font-family: var(--ne-font-body, Inter, system-ui, sans-serif);
  font-size: 4.5cqw; line-height: 1.25; color: var(--u-ink);
  -webkit-font-smoothing: antialiased;
}
.ui-screen * { box-sizing: border-box; margin: 0; }
.ui-screen b { font-weight: 700; }
.ui-screen small { font-size: .82em; color: var(--u-slate); display: block; }
.ui-screen em { font-style: normal; }

/* story device: crossfade stack */
.story-device .sd-screen .ui-screen {
  position: absolute; inset: 0; opacity: 0; transform: translateY(14px) scale(1.015);
  transition: opacity .5s cubic-bezier(.16,1,.3,1), transform .5s cubic-bezier(.16,1,.3,1);
}
.story-device .sd-screen .ui-screen.is-shown { opacity: 1; transform: none; }

/* mobile story cards */
.story-chapter .ui-screen.story-mobile-shot {
  display: none; width: min(250px, 72%); height: auto; aspect-ratio: 460 / 960; margin: 1.4rem auto 0;
  border-radius: 28px; border: 6px solid var(--u-bezel); box-shadow: 0 0 0 1.5px #0B1120, 0 24px 48px -16px rgba(24,32,46,.4);
}
@media (max-width: 991px) { .story-chapter .ui-screen.story-mobile-shot { display: flex; } }
@media (min-width: 992px) { .story-chapter .ui-screen.story-mobile-shot { display: none !important; } }

/* ---------- 4. screen parts ---------- */
.u-status { display: flex; justify-content: space-between; align-items: center; padding: 3.2em 5.5% .4em; padding: 2.4em 6% .3em; font-size: .86em; flex: none; }
.u-sb-r { display: inline-flex; gap: .35em; align-items: center; }
.u-sig, .u-wifi, .u-bat { display: inline-block; height: .8em; background: var(--u-ink); border-radius: 2px; }
.u-sig { width: 1.1em; clip-path: polygon(0 100%, 0 70%, 25% 70%, 25% 45%, 50% 45%, 50% 20%, 75% 20%, 75% 0, 100% 0, 100% 100%); }
.u-wifi { width: 1em; border-radius: 50% 50% 0 0; height: .7em; }
.u-bat { width: 1.5em; border-radius: 3px; opacity: .85; }
.u-bar { display: flex; align-items: center; gap: .6em; padding: .5em 6% .6em; flex: none; }
.u-bar-t { font-size: 1.12em; font-family: var(--ne-font-heading, Poppins, sans-serif); }
.u-logo { font-family: var(--ne-font-heading, Poppins, sans-serif); font-size: 1.05em; letter-spacing: -.01em; color: var(--u-ink); }
.u-logo em { color: var(--u-blue); }
.u-avatar { margin-left: auto; width: 2.1em; height: 2.1em; border-radius: 50%; background: linear-gradient(135deg,#CBD5E1,#94A3B8); }
.u-back { width: 1.9em; height: 1.9em; border-radius: 50%; background: #fff; border: 1px solid var(--u-line); position: relative; flex: none; }
.u-back::after { content: ""; position: absolute; left: 52%; top: 50%; width: .5em; height: .5em; border-left: 2px solid var(--u-ink); border-bottom: 2px solid var(--u-ink); transform: translate(-50%,-50%) rotate(45deg); }
.u-loc { padding: 0 6%; font-size: .8em; color: var(--u-slate); display: flex; align-items: center; gap: .4em; }
.u-loc::before { content: ""; width: .6em; height: .6em; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--u-ember); }
.u-search { margin: .6em 6% .2em; padding: .8em 1em; background: #fff; border: 1px solid var(--u-line); border-radius: 1em; font-size: .86em; color: var(--u-slate); flex: none; }
.u-pad { padding: 0 8%; } .u-pad-s { padding: .2em 6% 0; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.u-center { text-align: center; }
.u-feed { flex: 1; overflow: hidden; position: relative; }
.u-feed > * { }
.u-sec { display: flex; justify-content: space-between; align-items: baseline; margin: .9em 6% .45em; font-size: .95em; }
.u-pad-s .u-sec { margin-left: 0; margin-right: 0; }
.u-sec small { color: var(--u-blue); }
.u-row { display: flex; gap: .6em; padding: 0 6%; overflow: hidden; }
.u-row-g { gap: .5em; }
.u-photo { flex: 0 0 62%; height: 8.6em; border-radius: 1em; position: relative; overflow: hidden; display: flex; align-items: flex-end; }
.u-photo span { position: relative; z-index: 1; color: #fff; font-weight: 700; font-size: .78em; padding: .7em .8em; text-shadow: 0 1px 6px rgba(0,0,0,.5); line-height: 1.2; }
.u-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(15,23,42,.55)); }
.p-araku { background: radial-gradient(60% 40% at 20% 78%, #1F7A4C 0 60%, transparent 62%), radial-gradient(70% 45% at 78% 82%, #2E9E63 0 60%, transparent 62%), radial-gradient(circle at 78% 22%, #FFE08A 0 9%, transparent 10%), linear-gradient(180deg, #7CC4F2 0%, #C9E8F7 58%, #5DB57A 100%); }
.p-beach { background: radial-gradient(circle at 80% 20%, #FFF0A8 0 8%, transparent 9%), linear-gradient(180deg, #8FD3FF 0 48%, #38A3E8 48% 70%, #F3D9A0 70% 100%); }
.p-hill { background: linear-gradient(180deg, #A9C7F5 0, #E8DCC8 55%, #6C8F5E 100%); }
.p-gimbal { background: radial-gradient(circle at 50% 45%, #475569 0 22%, transparent 23%), linear-gradient(135deg, #E2E8F0, #CBD5E1); }
.p-bike { background: linear-gradient(135deg, #E8EEF9, #CFE0FA); }
.p-ninja { background: radial-gradient(circle at 50% 50%, #22C55E 0 18%, transparent 19%), linear-gradient(135deg, #1F2937, #0F172A); }
.u-gcard { flex: 1; background: #fff; border: 1px solid var(--u-line); border-radius: 1em; padding: .8em .4em; text-align: center; font-size: .82em; display: flex; flex-direction: column; align-items: center; gap: .25em; }
.u-av { width: 2.9em; height: 2.9em; border-radius: 50%; display: inline-grid; place-items: center; color: #fff; font-weight: 800; font-size: 1em; background: linear-gradient(135deg, var(--a), var(--b)); flex: none; box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--u-line); }
.u-star { color: #D97706; font-size: .82em; font-weight: 700; }
.u-ver { display: inline-block; width: .95em; height: .95em; background: var(--u-blue); border-radius: 50%; vertical-align: -.12em; position: relative; }
.u-ver::after { content: ""; position: absolute; left: 32%; top: 18%; width: 26%; height: 50%; border-right: 1.5px solid #fff; border-bottom: 1.5px solid #fff; transform: rotate(40deg); }
.u-nav { margin-top: auto; display: flex; justify-content: space-around; padding: .7em 0 1em; background: #fff; border-top: 1px solid var(--u-line); font-size: .72em; color: var(--u-slate); flex: none; }
.u-nav span { display: flex; flex-direction: column; align-items: center; gap: .3em; }
.u-nav span.on { color: var(--u-blue); font-weight: 700; }
.u-ni { width: 1.6em; height: 1.6em; border-radius: .5em; border: 2px solid currentColor; opacity: .8; }
.u-btn { display: block; text-align: center; background: var(--u-blue); color: #fff; font-weight: 700; padding: .85em; border-radius: .9em; margin-top: .7em; font-size: .92em; }
.u-btn-s { padding: .45em .9em; font-size: .78em; margin: 0; align-self: center; }
.u-card { background: #fff; border: 1px solid var(--u-line); border-radius: 1em; padding: .8em .9em; margin-bottom: .6em; box-shadow: 0 1px 2px rgba(24,32,46,.04); }
.u-card small { margin-top: .15em; } .u-card em { color: var(--u-slate); font-size: .78em; }
.u-guide { display: flex; gap: .7em; align-items: center; } .u-guide .u-gt { flex: 1; min-width: 0; } .u-gt b { font-size: .95em; } .u-gt div { display: flex; gap: .6em; align-items: center; margin-top: .2em; } .u-gt em { color: var(--u-blue); font-weight: 700; font-size: .8em; }
.u-hero { margin: 0 6% .5em; height: 9.6em; border-radius: 1.1em; position: relative; flex: none; overflow: hidden; display: grid; place-items: center; }
.u-chip { position: absolute; left: .7em; bottom: .7em; background: rgba(255,255,255,.92); color: var(--u-ink); padding: .35em .75em; border-radius: 99px; font-size: .74em; font-weight: 700; }
.u-moto { width: 62%; }
.u-day { margin: .4em 0 .2em; font-size: .92em; } .u-day b { color: var(--u-blue-d); }
.u-tl { border-left: 2px solid #BFD3FA; margin: .2em 0 .4em .5em; padding-left: .9em; }
.u-tl p { position: relative; font-size: .86em; padding: .28em 0; color: #334155; }
.u-tl p::before { content: ""; position: absolute; left: -1.28em; top: .8em; width: .6em; height: .6em; border-radius: 50%; background: var(--u-blue); box-shadow: 0 0 0 3px #fff; }
.u-cta { margin: auto 6% 1.1em; padding: .95em; text-align: center; background: var(--u-blue); color: #fff; font-weight: 700; border-radius: 1em; font-size: .95em; flex: none; box-shadow: 0 10px 22px -8px rgba(37,99,235,.6); }
.u-pulse { animation: u-pulse 2s ease-in-out infinite; }
.u-month { display: flex; justify-content: space-between; align-items: center; margin: .3em 0 .5em; font-size: .98em; } .u-month span { color: var(--u-slate); }
.u-dow, .u-cal { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; }
.u-dow i { font-style: normal; font-size: .74em; color: var(--u-slate); padding: .3em 0; }
.u-cal i { font-style: normal; font-size: .84em; padding: .62em 0; margin: .1em; border-radius: .7em; color: var(--u-ink); position: relative; }
.u-cal i.x { color: #CBD5E1; } .u-cal i.full { color: #94A3B8; text-decoration: line-through; background: #F1F5F9; }
.u-cal i.pick { animation: u-pick 4.4s ease-in-out infinite; font-weight: 700; }
.u-legend { display: flex; gap: 1em; font-size: .72em; color: var(--u-slate); margin: .6em 0; } .u-legend span { display: flex; align-items: center; gap: .35em; } .u-legend i { width: .8em; height: .8em; border-radius: 50%; background: #CBD5E1; } .u-legend i.g { background: var(--u-green); } .u-legend i.s { background: var(--u-blue); }
.u-cta-late { animation: u-ctalate 4.4s ease-in-out infinite; }
.u-prof { text-align: center; display: flex; flex-direction: column; align-items: center; gap: .25em; padding: .3em 6% .6em; } .u-prof .u-av { width: 4em; height: 4em; font-size: 1.1em; }
.u-stats { display: flex; margin: 0 6% .6em; background: #fff; border: 1px solid var(--u-line); border-radius: 1em; } .u-stats div { flex: 1; text-align: center; padding: .6em 0; border-right: 1px solid var(--u-line); } .u-stats div:last-child { border: 0; } .u-stats b { font-size: 1.1em; color: var(--u-blue); }
.u-chips { display: flex; gap: .4em; flex-wrap: wrap; } .u-chips span { background: #E0EBFD; color: var(--u-blue-d); font-size: .76em; font-weight: 600; padding: .3em .8em; border-radius: 99px; }
.u-card div { color: #D97706; letter-spacing: .1em; font-size: .8em; }
.u-price { display: flex; align-items: baseline; gap: .5em; margin: .2em 0 .5em; } .u-price b { font-size: 1.6em; color: var(--u-blue); font-family: var(--ne-font-heading, Poppins, sans-serif); }
.u-spec p { display: flex; justify-content: space-between; padding: .55em 0; border-bottom: 1px solid var(--u-line); font-size: .86em; } .u-spec span { color: var(--u-slate); } .u-spec b.g { color: var(--u-green); }
.u-fare p { display: flex; justify-content: space-between; padding: .6em 0; font-size: .9em; border-bottom: 1px dashed var(--u-line); } .u-fare span { color: #475569; }
.u-coupon b, .u-coupon span { color: var(--u-green) !important; }
.u-total { border: 0 !important; font-size: 1.05em !important; } .u-total b { position: relative; min-width: 4.4em; text-align: right; } .u-total s { color: #94A3B8; font-weight: 500; font-size: .85em; margin-right: .4em; } .u-total em { color: var(--u-ink); font-size: 1.1em; animation: u-total 5s ease-in-out infinite; display: inline-block; }
.u-pay { display: flex; gap: .45em; } .u-pay span { flex: 1; text-align: center; padding: .7em 0; border: 1px solid var(--u-line); background: #fff; border-radius: .9em; font-size: .82em; font-weight: 600; } .u-pay span.on { border-color: var(--u-blue); color: var(--u-blue); background: #EFF5FF; }
.u-ok { position: absolute; inset: 0; background: rgba(248,250,252,.96); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .8em; opacity: 0; pointer-events: none; text-align: center; padding: 0 12%; font-size: 1.05em; }
.u-ok i { width: 3.6em; height: 3.6em; border-radius: 50%; background: var(--u-green); position: relative; box-shadow: 0 0 0 .6em var(--u-green-l); } .u-ok i::after { content: ""; position: absolute; left: 33%; top: 22%; width: 28%; height: 50%; border-right: 3px solid #fff; border-bottom: 3px solid #fff; transform: rotate(40deg); }
.u-ok-late { animation: u-okshow 5s ease-in-out infinite; } .u-ok:not(.u-ok-late) { animation: u-okshow 8s ease-in-out infinite; }
.u-mark { width: 4em; height: 4em; margin: .6em auto .5em; border-radius: 1.2em; background: linear-gradient(135deg, var(--u-blue), #82B1FF); position: relative; box-shadow: 0 12px 24px -10px rgba(37,99,235,.6); } .u-mark i { position: absolute; inset: 28%; border-radius: 50% 50% 50% 8%; background: #fff; transform: rotate(-12deg); }
.u-h { font-family: var(--ne-font-heading, Poppins, sans-serif); font-size: 1.3em; margin-top: .1em; } .u-sub { font-size: .84em; color: var(--u-slate); margin: .25em 0 .8em; }
.u-input { display: flex; gap: .6em; align-items: center; background: #fff; border: 1.5px solid var(--u-blue); border-radius: .9em; padding: .8em 1em; text-align: left; font-size: .95em; } .u-input span { color: var(--u-slate); } .u-type { overflow: hidden; white-space: nowrap; border-right: 2px solid var(--u-blue); animation: u-typing 8s steps(11) infinite; max-width: 7em; }
.u-or { margin: .8em 0 .5em; }
.u-otp { display: flex; justify-content: center; gap: .5em; margin-bottom: .6em; } .u-otp i { font-style: normal; width: 2.6em; height: 2.9em; border: 1.5px solid #BFD3FA; background: #F3F7FE; border-radius: .8em; display: grid; place-items: center; font-weight: 800; font-size: 1.05em; color: transparent; animation: u-digit 8s infinite; animation-delay: calc(var(--k) * .35s); }
.u-or-row { display: flex; align-items: center; gap: .6em; margin: .5em 0; color: var(--u-slate); font-size: .78em; } .u-or-row span { flex: 1; height: 1px; background: var(--u-line); }
.u-g { display: flex; gap: .6em; justify-content: center; align-items: center; background: #fff; border: 1px solid var(--u-line); border-radius: .9em; padding: .7em; font-size: .86em; font-weight: 600; } .u-gl { width: 1.2em; height: 1.2em; border-radius: 50%; background: conic-gradient(#EA4335 0 25%, #FBBC05 0 50%, #34A853 0 75%, #4285F4 0); }
.u-shield { align-self: center; margin: .8em auto .6em; width: 6.2em; height: 6.2em; position: relative; display: grid; place-items: center; }
.u-shield i { width: 3.6em; height: 4.1em; background: linear-gradient(160deg, var(--u-blue), #1D4ED8); clip-path: polygon(50% 0, 100% 16%, 100% 58%, 50% 100%, 0 58%, 0 16%); position: relative; z-index: 1; animation: u-beat 2.2s ease-in-out infinite; }
.u-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(37,99,235,.35); animation: u-ripple 2.4s ease-out infinite; } .u-ring.r2 { animation-delay: 1.2s; }
.u-ms { margin-bottom: .6em; } .u-ms p { display: flex; justify-content: space-between; font-size: .84em; margin-bottom: .25em; } .u-ms span { color: #475569; } .u-ms b { color: var(--u-blue); }
.u-bar-f { height: .55em; background: #E0EBFD; border-radius: 99px; overflow: hidden; } .u-bar-f i { display: block; height: 100%; width: var(--w); background: linear-gradient(90deg, var(--u-blue), #82B1FF); border-radius: 99px; transform-origin: left; animation: u-fill 6s ease-out infinite; animation-delay: calc(var(--j) * .5s); }
.u-sos { margin: auto auto 1.2em; width: 4em; height: 4em; border-radius: 50%; background: var(--u-ember); color: #fff; font-weight: 800; display: grid; place-items: center; box-shadow: 0 0 0 .5em rgba(252,79,5,.16); animation: u-pulse 2s ease-in-out infinite; flex: none; }
.u-field { background: #fff; border: 1px solid var(--u-line); border-radius: .9em; padding: .6em .8em; margin-bottom: .5em; } .u-field b { font-size: .92em; } .u-two { display: grid; grid-template-columns: 1fr 1fr; gap: .5em; }
.u-item { display: flex; gap: .7em; align-items: center; } .u-item .u-thumb { width: 3.6em; height: 3.2em; border-radius: .8em; flex: none; } .u-item b { font-size: .9em; } .u-item em { color: var(--u-blue); font-weight: 700; font-size: .8em; }
.u-tap { position: absolute; left: var(--tx); top: var(--ty); width: 2.6em; height: 2.6em; margin: -1.3em 0 0 -1.3em; border-radius: 50%; background: rgba(37,99,235,.28); border: 2px solid var(--u-blue); opacity: 0; pointer-events: none; z-index: 5; }

/* ---------- 5. motion (loops: reveal → hold → reset) ---------- */
.u-in { animation: u-rise 7s cubic-bezier(.16,1,.3,1) infinite; animation-delay: calc(var(--i, 0) * .14s); }
.u-feed-in { animation: u-feed 11s ease-in-out infinite alternate; }
.u-tap { animation: u-tap 4s ease-out infinite 1.4s; }
@keyframes u-rise { 0% { opacity: 0; transform: translateY(10px); } 7%, 86% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: translateY(-4px); } }
@keyframes u-feed { 0%, 12% { transform: translateY(0); } 100% { transform: translateY(-26%); } }
@keyframes u-tap { 0% { opacity: 0; transform: scale(.4); } 12% { opacity: 1; transform: scale(1); } 40% { opacity: 0; transform: scale(1.7); } 100% { opacity: 0; } }
@keyframes u-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
@keyframes u-pick { 0%, 30% { background: transparent; color: var(--u-ink); } 40%, 90% { background: var(--u-blue); color: #fff; box-shadow: 0 6px 14px -4px rgba(37,99,235,.7); } 100% { background: transparent; color: var(--u-ink); } }
@keyframes u-ctalate { 0%, 36% { background: #CBD5E1; box-shadow: none; } 44%, 90% { background: var(--u-blue); box-shadow: 0 10px 22px -8px rgba(37,99,235,.6); } 100% { background: #CBD5E1; } }
@keyframes u-total { 0%, 22% { opacity: 0; transform: scale(.9); } 34%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes u-okshow { 0%, 62% { opacity: 0; } 72%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes u-typing { 0% { max-width: 0; } 22%, 100% { max-width: 7em; } }
@keyframes u-digit { 0%, 25% { color: transparent; background: #F3F7FE; } 32%, 88% { color: var(--u-blue); background: #E0EBFD; border-color: var(--u-blue); } 100% { color: transparent; } }
@keyframes u-beat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
@keyframes u-ripple { 0% { transform: scale(.7); opacity: .9; } 100% { transform: scale(1.5); opacity: 0; } }
@keyframes u-fill { 0% { transform: scaleX(0); } 30%, 92% { transform: scaleX(1); } 100% { transform: scaleX(0); } }

/* Sync: screens only animate while they are the visible one (restart on entry) */
.story-device .sd-screen .ui-screen:not(.is-shown) *,
.ui-flow .ui-screen:not(.is-on) * { animation: none !important; }
.story-device .sd-screen .ui-screen:not(.is-shown) .u-ok, .ui-flow .ui-screen:not(.is-on) .u-ok { opacity: 0; }

/* ---------- 6. hero flow phone ---------- */
.ui-flow { position: absolute; inset: 0; }
.ui-flow .ui-screen { position: absolute; inset: 0; opacity: 0; transform: scale(1.04) translateX(14px); transition: opacity .55s ease, transform .55s cubic-bezier(.16,1,.3,1); }
.ui-flow .ui-screen.is-on { opacity: 1; transform: none; }
.ui-flow-cap { position: absolute; left: 50%; bottom: -46px; transform: translateX(-50%) rotate(-7deg); display: flex; align-items: center; gap: .55rem; background: #fff; border: 1px solid rgba(37,99,235,.18); box-shadow: 0 10px 24px -10px rgba(24,32,46,.3); border-radius: 999px; padding: .38rem .8rem .38rem .4rem; white-space: nowrap; font-family: var(--ne-font-heading); font-size: .72rem; font-weight: 700; color: var(--u-ink); }
.ufc-step { width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--u-blue); color: #fff; display: grid; place-items: center; font-size: .72rem; }
.ufc-dots { display: inline-flex; gap: 3px; } .ufc-dots i { width: 5px; height: 5px; border-radius: 50%; background: #CBD5E1; transition: .3s; } .ufc-dots i.on { background: var(--u-blue); width: 12px; border-radius: 3px; }

/* ---------- 7. proof strip (labels below, never overlapping) ---------- */
.proof-cell { background: #fff !important; padding: .8rem .8rem .6rem; display: flex; flex-direction: column; gap: .6rem; }
.proof-cell figcaption { position: static !important; align-self: flex-start; background: #E0EBFD !important; border: 0 !important; color: var(--u-blue-d) !important; }
.ui-mini-wrap { container-type: inline-size; border-radius: 12px; overflow: hidden; background: var(--u-bg); padding: .6em; }
.ui-mini { display: flex; gap: .6em; font-size: 3.4cqw; } .ui-mini .u-photo { flex: 1; height: 8em; } .ui-mini .u-gcard { padding: .9em .3em; font-size: .9em; }
.ui-mini-wrap .u-av { width: 3em; height: 3em; }

/* ---------- 8. hero labels: no overlap with the phone video / badge ---------- */
.hero-video-badge { top: auto !important; bottom: -42px !important; left: 50% !important; transform: translateX(-50%); background: #fff !important; color: var(--u-ink) !important; border: 1px solid rgba(37,99,235,.18) !important; box-shadow: 0 10px 24px -10px rgba(24,32,46,.3); white-space: nowrap; z-index: 6; }
@media (max-width: 1023px) {
  .hero-phone-stage { display: flex !important; flex-direction: column; align-items: center; gap: .8rem; height: auto !important; min-height: 0 !important; padding-bottom: 1.4rem; }
  .hero-phone-stage .android-phone.phone-hero { position: relative !important; left: auto !important; top: auto !important; transform: none !important; margin-top: 0; }
  .hero-phone-stage .hero-video-phone, .hero-phone-stage .android-phone.phone-hero { order: 1; }
  .hero-phone-stage .hero-mini-preview { display: none !important; }
  .hero-phone-stage .hero-floating-card {
    position: relative !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important;
    order: 3; margin: 0 !important; transform: none !important; width: min(320px, 92%); justify-content: flex-start;
  }
  .hero-phone-stage .hero-floating-card .hero-card-info p { display: block !important; }
  .hero-phone-stage .hero-floating-card::after { display: none !important; }
  .hero-phone-stage .hero-card-left { order: 3; } .hero-phone-stage .hero-card-top-right { order: 4; } .hero-phone-stage .hero-card-right { order: 5; }
  .hero-video-badge { bottom: -40px !important; }
  .hero-phone-stage .android-phone.phone-hero { margin-bottom: 2.4rem; }
}

/* ---------- 9. Mobile UX ---------- */
.m-dock { display: none; }
@media (max-width: 767px) {
  html { scroll-padding-top: 72px; }
  .ne-container { padding-left: 1.1rem; padding-right: 1.1rem; }
  .ne-section { padding-top: 3.4rem; padding-bottom: 3.4rem; }
  .section-header h2 { font-size: clamp(1.7rem, 7vw, 2.1rem); line-height: 1.15; }
  .section-header p { font-size: 1rem; line-height: 1.6; }
  .btn-playstore, .btn-ne-call, .btn-google-review, .hero-cta-secondary, .ne-btn { min-height: 52px; }

  /* swipeable cards instead of long stacks */
  .problem-grid, .proof-strip, .steps-phone-grid {
    display: flex !important; overflow-x: auto; gap: .9rem; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    margin-left: -1.1rem; margin-right: -1.1rem; padding: .4rem 1.1rem 1.2rem; scrollbar-width: none;
  }
  .problem-grid::-webkit-scrollbar, .proof-strip::-webkit-scrollbar, .steps-phone-grid::-webkit-scrollbar { display: none; }
  .problem-grid > *, .proof-strip > *, .steps-phone-grid > * { flex: 0 0 82%; scroll-snap-align: center; min-width: 0; }
  .proof-strip > * { flex-basis: 78%; }
  .steps-phone-grid .step-phone-card { flex-basis: 86%; }

  .hero-title { letter-spacing: -.02em; }
  .m-dock {
    display: flex; gap: .6rem; position: fixed; left: .8rem; right: .8rem; bottom: calc(.8rem + env(safe-area-inset-bottom));
    z-index: 1500; padding: .55rem; border-radius: 18px; background: rgba(255,255,255,.92);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid rgba(37,99,235,.16);
    box-shadow: 0 18px 40px -12px rgba(24,32,46,.35); transform: translateY(140%); transition: transform .45s cubic-bezier(.16,1,.3,1);
  }
  .m-dock.is-up { transform: none; }
  .m-dock a { display: flex; align-items: center; justify-content: center; min-height: 48px; border-radius: 13px; font-weight: 700; font-family: var(--ne-font-heading); font-size: .95rem; text-decoration: none; }
  .m-dock-play { flex: 1; background: var(--u-blue); color: #fff; box-shadow: 0 10px 22px -8px rgba(37,99,235,.6); }
  .m-dock-call { flex: 0 0 30%; background: #E0EBFD; color: var(--u-blue-d); }
  body { padding-bottom: 0; }
  .ne-footer { padding-bottom: 6rem; }
  .story-chapter .ui-screen.story-mobile-shot { width: min(260px, 74%); }
}

/* ---------- 10. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .ui-screen *, .ui-flow-cap * { animation: none !important; }
  .u-in { opacity: 1 !important; transform: none !important; }
  .u-ok, .u-tap { display: none; }
  .u-feed { transform: none; }
  .m-dock { transition: none; }
}

/* flow phone: peek out clearly from behind the video phone (desktop) */
@media (min-width: 1024px) {
  .hero-phone-stage .hero-mini-preview { right: -112px !important; bottom: 34px !important; transform: rotate(6deg); }
  .hero-phone-stage .hero-mini-preview:hover { transform: rotate(2deg) scale(1.03); }
}
.u-card.u-guide, .u-card.u-item { color: var(--u-ink); }
.u-card.u-guide .u-gt, .u-card.u-guide .u-gt div, .u-card.u-item > div { color: inherit; letter-spacing: 0; font-size: inherit; }

.hero-phone-stage .hero-card-info { text-align: left; }
.ui-flow-cap { bottom: auto !important; top: -46px; transform: translateX(-50%) rotate(-6deg) !important; }

.film-phone { flex: none; width: 82px; height: 150px; border-radius: 12px; border: 3px solid var(--u-bezel); overflow: hidden; background: var(--u-bezel); box-shadow: 0 8px 18px -8px rgba(24,32,46,.45); transition: transform .3s; }
.film-phone:hover { transform: translateY(-4px) scale(1.04); }
.film-phone .ui-screen { border-radius: 9px; } .film-phone * { animation: none !important; }
.film-phone .u-ok, .film-phone .u-tap { display: none; }
@media (max-width: 767px) { .film-phone { width: 66px; height: 120px; } }

.u-map { margin: 0 6% .6em; height: 11em; border-radius: 1.1em; position: relative; flex: none; overflow: hidden; background: linear-gradient(135deg,#DCEBFF,#EAF6EE 60%,#FDF3D6); border: 1px solid var(--u-line); }
.u-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.u-path { stroke-dashoffset: 0; animation: u-dash 3s linear infinite; }
.u-pin { position: absolute; width: 1.1em; height: 1.1em; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--u-ember); box-shadow: 0 0 0 .25em rgba(252,79,5,.2); }
.u-pin.a { left: 6%; top: 74%; } .u-pin.b { left: 44%; top: 38%; background: var(--u-blue); box-shadow: 0 0 0 .25em rgba(37,99,235,.2); } .u-pin.c { left: 88%; top: 16%; background: var(--u-green); box-shadow: 0 0 0 .25em rgba(22,163,74,.2); }
.u-rider { position: absolute; width: .9em; height: .9em; border-radius: 50%; background: #fff; border: 3px solid var(--u-blue); left: 8%; top: 76%; animation: u-ride 6s ease-in-out infinite; }
@keyframes u-dash { to { stroke-dashoffset: -12; } }
@keyframes u-ride { 0% { left: 6%; top: 74%; } 35% { left: 44%; top: 40%; } 100% { left: 88%; top: 16%; } }

/* Flywheel on phones: larger, readable, fully inside the screen */
@media (max-width: 767px) {
  :root { --ne-fw-scale: 0.66; }
  .flywheel-wrapper { min-height: 400px !important; }
  .flywheel-node-item { font-size: 0.98rem !important; width: 138px !important; padding: .55rem .6rem !important; line-height: 1.2; }
  .flywheel-center-badge { width: 150px !important; height: 150px !important; }
  .flywheel-center-badge * { font-size: inherit; }
}
@media (max-width: 420px) { :root { --ne-fw-scale: 0.62; } }

/* Hero stack spacing on tablet/mobile: badge, then evenly spaced callouts */
@media (max-width: 1023px) {
  .hero-phone-stage .android-phone.phone-hero { margin-bottom: 4.4rem !important; }
  .hero-video-badge { bottom: -50px !important; font-size: .68rem !important; padding: .5rem .9rem !important; }
  .hero-phone-stage { gap: .85rem !important; }
  .hero-phone-stage .hero-floating-card {
    width: min(340px, 100%) !important; padding: .75rem 1rem .75rem .8rem !important; gap: .85rem !important;
    border-radius: 16px !important; margin: 0 !important; box-sizing: border-box;
  }
  .hero-phone-stage .hero-card-icon { width: 38px !important; height: 38px !important; flex: none; margin: 0 !important; }
  .hero-phone-stage .hero-card-icon::after { display: none !important; }
  .hero-phone-stage .hero-floating-card::before { inset: 0 !important; border-radius: inherit; }
  .hero-phone-stage .hero-card-info h4 { font-size: .9rem !important; margin: 0 0 .15rem !important; line-height: 1.2; }
  .hero-phone-stage .hero-card-info p { font-size: .78rem !important; margin: 0 !important; line-height: 1.3; }
}
.hero-video-badge { width: max-content !important; max-width: 92vw; display: inline-flex !important; align-items: center; justify-content: center; gap: .45rem; text-align: center; right: auto !important; }

/* ---- Showcase step grid: keep all four phones on one baseline (no stacked hover lift) ---- */
.steps-phone-grid { align-items: stretch; }
.steps-phone-grid .step-phone-card { justify-content: flex-start; }
.steps-phone-grid .step-phone-card:hover,
.steps-phone-grid .step-phone-card:hover .android-phone,
.steps-phone-grid .android-phone.phone-step:hover { transform: none !important; }
.steps-phone-grid .step-phone-card .step-card-header { min-height: 7.2rem; display:flex; flex-direction:column; align-items:center; }
.steps-phone-grid .step-phone-card .android-phone { margin-top: auto; }
@media (max-width: 1023px) { .steps-phone-grid .step-phone-card .step-card-header { min-height: 0; } }

/* ---- Audience cards: align role notes + phones across the three cards ---- */
.audience-card { height: 100%; }
.audience-card .audience-features { flex: 1 1 auto; }
.audience-card .audience-role-note { margin-top: 0; margin-bottom: 1.5rem; }
.audience-card:hover { transform: none; }