/* Technology of Austin — responsive parity layer.
   Same information, controls, hierarchy and interaction model on mobile + desktop.
   Geometry adapts to viewport; features never disappear just because the screen is smaller. */

/* Shared navigation: preserve the same destinations at every width. */
body.toa-one-tap-page #toa-nav .toa-nav-link,
body.toa-one-tap-page #toa-nav .toa-nav-cta{
  display:inline-flex!important;
}

/* Door progress is part of the experience on both mobile and desktop. */
#toa-customize-page .toa-door-progress,
#toa-plans-page .toa-door-progress{
  display:flex!important;
}

@media (max-width:767px){
  body.toa-one-tap-page #toa-header>div{
    flex-wrap:wrap!important;
    gap:8px!important;
    padding:9px 12px!important;
  }
  body.toa-one-tap-page #toa-header [data-tool="brand"]{
    flex:1 1 100%!important;
    min-width:0!important;
  }
  body.toa-one-tap-page #toa-header [data-tool="brand"]>div>div:last-child{
    display:block!important;
  }
  body.toa-one-tap-page #toa-nav{
    width:100%!important;
    max-width:100%!important;
    justify-content:flex-start!important;
    gap:6px!important;
    overflow-x:auto!important;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    padding-bottom:2px;
  }
  body.toa-one-tap-page #toa-nav::-webkit-scrollbar{display:none}
  body.toa-one-tap-page #toa-nav .toa-nav-link,
  body.toa-one-tap-page #toa-nav .toa-nav-cta{
    flex:0 0 auto!important;
    min-height:38px!important;
    padding:0 12px!important;
    font-size:9px!important;
  }

  /* Door 2/3 keep the same three-step context visible. */
  #toa-customize-page .toa-door-bar,
  #toa-plans-page .toa-door-bar{
    grid-template-columns:auto 1fr auto!important;
    gap:9px!important;
    padding:10px 12px!important;
  }
  #toa-customize-page .toa-door-progress,
  #toa-plans-page .toa-door-progress{
    justify-content:center!important;
    min-width:0;
  }
  #toa-customize-page .toa-door-progress span,
  #toa-plans-page .toa-door-progress span{
    width:clamp(18px,7vw,28px)!important;
  }

  /* Keep the live phone and full editor present; only stack them for the viewport. */
  #toa-customize-page .toa-studio{
    grid-template-columns:minmax(0,1fr)!important;
  }
  #toa-customize-page .toa-preview-wrap,
  #toa-customize-page .toa-editor{
    width:100%!important;
    max-width:100%!important;
  }

  /* Same plan cards and checkout content; responsive stacking only. */
  #toa-plans-page .toa-plan-grid,
  #toa-plans-page .toa-checkout-grid,
  #toa-plans-page .toa-after-order{
    grid-template-columns:minmax(0,1fr)!important;
  }
}

@media (max-width:520px){
  #toa-customize-page .toa-door-bar,
  #toa-plans-page .toa-door-bar{
    font-size:8px!important;
    letter-spacing:.07em!important;
  }
  #toa-customize-page .toa-door-bar>a,
  #toa-plans-page .toa-door-bar>a{
    white-space:nowrap;
  }
}