/* Phones: the live desktop app is never loaded (it would render at ~0.27 scale). The demos
   become swipeable step cards captured from the real app by tools/capture-desktop2-cards.mjs.
   `.kmobile` is set in <head> from the same 719px breakpoint the page uses for its static layout. */
.kmobile [data-appbox], .kmobile [data-prevbox] { display: none !important }
[data-mcards], [data-mprev] { display: none }
.kmobile [data-mcards], .kmobile [data-mprev] { display: block }

.mc-track {
  display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 6px var(--mc-pad, 16px) 10px; scroll-padding: 0 var(--mc-pad, 16px); -webkit-overflow-scrolling: touch;
}
.mc-track::-webkit-scrollbar { display: none }
.mc-card {
  flex: 0 0 86%; scroll-snap-align: start; display: flex; flex-direction: column; border-radius: 18px;
  overflow: hidden; background: #B14842; color: #fff; box-shadow: 0 18px 40px rgba(80, 29, 26, .28);
}
.mc-shot { background: #FAF9F7; aspect-ratio: var(--ar, 1.28) }
.mc-shot img { display: block; width: 100%; height: 100%; object-fit: cover }
.mc-cap { padding: 14px 16px 18px; font: 500 15px/1.45 Manrope, sans-serif }
.mc-k {
  display: flex; justify-content: space-between; gap: 12px; margin-bottom: 6px; color: #FDE6DF;
  font: 800 12px Manrope, sans-serif; letter-spacing: .08em; text-transform: uppercase;
}
.mc-fin { justify-content: center; padding: 26px 20px; gap: 18px }
.mc-fin p { margin: 0; font: 700 18px/1.4 Manrope, sans-serif }
.mc-fin a {
  align-self: flex-start; display: inline-flex; align-items: center; height: 48px; padding: 0 22px; border-radius: 999px;
  background: #fff; color: #B14842; font: 800 15px Manrope, sans-serif; text-decoration: none;
}
.mc-dots { display: flex; justify-content: center; gap: 6px; margin-top: 6px }
.mc-dot { width: 6px; height: 6px; border-radius: 3px; background: rgba(80, 29, 26, .25); transition: width .2s, background .2s }
.mc-dot.on { width: 18px; background: #B14842 }
.mc-hint { margin-top: 8px; text-align: center; font: 700 13px Manrope, sans-serif; color: #3A1F1C }

.mp-shot {
  border-radius: 14px; overflow: hidden; background: #FAF9F7; border: 1px solid rgba(226, 232, 240, .9);
  box-shadow: 0 20px 45px rgba(80, 29, 26, .18); aspect-ratio: var(--ar, 1.14);
}
.mp-shot img { display: block; width: 100%; height: 100%; object-fit: cover; transition: opacity .2s }