/* Mobile onboarding.
   The desktop wizard is a 300px sidebar + main grid (.onboarding-split). On a
   phone the sidebar (steps list + help box) fills the ENTIRE first screen and
   pushes the actual step content far below the fold — funnel data showed
   visitors looping home ↔ step 1 without ever progressing. The header already
   shows "Step N of 8", so on small screens: drop the sidebar, tighten main
   padding, and keep the Back/Continue row sticky so the primary action is
   always in view while long option lists scroll.
   NOTE: these selectors must match the real markup in web-account.jsx
   (.onboarding-split wrapper, direct <aside>/<main> children, .step-actions) —
   an earlier version of this file targeted class names that no longer existed,
   which silently disabled every rule. */
@media (max-width: 720px) {
  .onboarding-split {
    display: block !important;
    min-height: auto !important;
  }

  .onboarding-split > aside {
    display: none !important;
  }

  .onboarding-split > main {
    padding: 20px 16px 32px !important;
    /* The desktop layout scrolls <main> internally (overflow-y: auto). On
       mobile the WINDOW scrolls instead — but a scrollable ancestor becomes
       the sticky containing scrollport, which silently disables the sticky
       Continue bar below. Let overflow be visible so sticky pins to the
       viewport. */
    overflow: visible !important;
  }

  .step-actions {
    position: sticky;
    bottom: 0;
    z-index: 40;
    background: var(--bg);
    padding: 12px 0 max(12px, env(safe-area-inset-bottom));
    margin-top: 28px !important;
    border-top: 1px solid var(--line);
  }
}