/* Keep the inline demo optional: visible phone hardware and clear page-scroll gutters. */
@media (max-width: 760px) {
  #demo .nk-authentic-demo { grid-template-columns: minmax(0, 1fr); padding: 24px 0; gap: 24px; }
  #demo .nk-demo-copy { display: contents; }
  #demo .nk-demo-intro { grid-row: 1; padding-inline: 16px; }
  #demo .nk-journey-steps { display: none; }
  #demo .nk-walkthrough { grid-row: 2; min-width: 0; }
  #demo .nk-demo-support { grid-row: 3; padding-inline: 16px; }
  #demo .nk-business-picker { width: calc(100% - 32px); margin-bottom: 16px; }
  #demo .nk-live-dialog:not(.is-enlarged) .nk-walkthrough-phone { width: min(292px, calc(100% - 64px)); max-width: none; margin-inline: auto; }
  #demo .nk-preview-viewport { scroll-margin-top: 100px; }
  #demo .nk-live-dialog.is-enlarged { width: calc(100vw - 16px); max-width: none; max-height: calc(100svh - 16px); padding: 12px; }
  #demo .nk-live-dialog.is-enlarged .nk-walkthrough-phone { width: 100%; max-width: none; height: calc(100svh - 112px); min-height: 0; aspect-ratio: auto; border-radius: var(--radius); background: var(--site-cream); }
  #demo .nk-live-dialog.is-enlarged .nk-walkthrough-phone::before { content: none; }
  #demo .nk-live-dialog.is-enlarged .nk-walkthrough-phone > .nk-device-screen { inset: 0; width: 100%; height: 100%; border-radius: var(--radius); }
  #demo .nk-walkthrough-caption--live { font-size: .9rem; margin-top: 14px; padding-inline: 16px; }
  #demo .nk-live-controls { margin-top: 12px; }
}