/* Shared phone ergonomics. Desktop layout and media colors stay independent. */
@media(max-width:640px){
  html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:100px}
  .viewport-stage{min-height:100svh;padding:calc(92px + env(safe-area-inset-top,0px)) 16px calc(30px + env(safe-area-inset-bottom,0px));align-items:flex-start}
  .screen,.center-container,.step-layout,.checkout-two-cols,.goal-simulator-grid,.pricing-grid-3,.brief-fields>*,.platform-section{min-width:0;max-width:100%}
  .step-layout{padding-bottom:12px}
  .screen.active [style*="--stagger"]{animation-name:mobile-reveal;animation-duration:.28s;animation-delay:calc(var(--stagger) * 24ms)}
  .step-header{width:100%;margin-bottom:25px}
  .step-header h2{font-size:clamp(1.4rem,6.3vw,1.7rem);line-height:1.55;letter-spacing:-.3px;text-wrap:balance}
  .step-header p{font-size:.84rem;line-height:1.85}
  .step-badge{font-size:.66rem}
  .back-link{min-height:44px;display:inline-flex;align-items:center;font-size:.76rem;padding:8px 14px}
  .app-topbar-wrap{padding-top:env(safe-area-inset-top,0px)}
  .app-topbar{height:66px;min-height:66px;padding-inline:18px}
  .app-topbar .brand-logo{width:124px;height:42px}
  .header-utilities{gap:8px}.header-utilities .theme-toggle{width:44px;height:44px;min-height:44px;padding:10px;justify-content:center}
  .journey-beacon{top:calc(8px + env(safe-area-inset-top,0px));max-width:calc(100% - 32px)}
  .owner-fab{width:44px;height:44px;bottom:calc(14px + env(safe-area-inset-bottom,0px));left:14px;opacity:.85}
  #screen-0 .hero-layout{padding-inline:2px}
  .screen :is(input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),textarea,select),.modal-box :is(input,textarea,select){font-size:16px!important;min-height:48px;max-width:100%;border-radius:12px}
  input,textarea,select{scroll-margin-block:100px}
  textarea{line-height:1.8;resize:vertical;min-height:120px}
  button,a{touch-action:manipulation}
  .btn-primary-hero,.pkg-btn,.btn-ai-scan,.btn-pay-direct,.btn-wa-direct,.report-download{min-height:50px;white-space:normal;line-height:1.65}
  .screen .btn-primary-hero{width:100%;padding:14px 18px;font-size:.91rem}
  .quick-target-pills{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .qt-pill{min-height:44px;font-size:.8rem;padding:10px 8px}
  .luxury-slider{min-height:44px;touch-action:pan-y}
  .exact-amount{align-items:center;gap:8px;font-size:.76rem}
  .exact-amount input[type="number"]{width:100%;margin-top:3px}
  .gs-controls-card,.gs-visual-card{padding:22px 18px;border-radius:22px}
  .market-question{padding:18px;gap:10px}
  .market-question select{min-height:50px}
  .brief-fields{grid-template-columns:minmax(0,1fr);gap:18px;padding:20px 18px}
  .voice-studio-card{padding:0;gap:0;overflow:hidden}
  .vs-recommend-pill{margin:20px 18px}
  .mic-stage{padding:22px 18px}
  .vs-alternatives{padding:20px 18px}
  .ais-input-row{flex-direction:column;gap:10px}
  .ais-input-row .btn-ai-scan{width:100%;min-height:48px}
  .platform-section{padding:20px 18px}
  .platform-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .platform-grid button{min-height:90px;font-size:.8rem;padding:15px 8px}
  .platform-grid button.selected{box-shadow:0 0 0 1px #8b9fff}
  .btn-toggle-text,.btn-re-record{min-height:44px;line-height:1.7;white-space:normal}
  .vs-footer{padding:20px 18px}
  #store-url-input{width:100%;min-width:0}
  .reel-layout{padding-inline:0;max-width:420px;margin-inline:auto}
  .reel-phone{max-width:100%;border-radius:22px}
  .reel-feed{height:calc(100svh - 190px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));min-height:min(410px,65svh)}
  .reel-filter button{min-height:40px;padding-inline:16px}
  .reel-player-controls button,.sheet-close{min-width:44px;min-height:44px}
  .reel-rating-sheet{padding-bottom:calc(18px + env(safe-area-inset-bottom,0px))}
  .sheet-chips button,.reason-chips button{min-height:40px;line-height:1.5}
  .production-picker{padding:21px 17px;border-radius:22px}
  .production-options{grid-template-columns:minmax(0,1fr);gap:9px}
  .production-options button{min-height:62px;text-align:start;padding:13px 16px;line-height:1.6}
  .pkg-card{padding:24px 20px}
  .addon-row{min-height:64px;padding:15px 14px;gap:12px}
  .step-bottom-bar{padding:20px 18px;gap:16px;align-items:stretch;border-radius:20px}
  .sbb-summary{text-align:start}
  .checkout-two-cols{gap:18px}
  .receipt-card,.client-action-card{padding:23px 18px;border-radius:22px}
  .rc-pay-toggle{grid-template-columns:minmax(0,1fr);gap:9px}
  .rpt-btn{min-height:60px;font-size:.8rem;padding:12px}
  .clean-inputs{gap:15px}
  .creative-report{padding:22px 18px;overflow-wrap:anywhere}
  .creative-report :is(h3,h4){line-height:1.65}
  .report-heading{flex-wrap:wrap;gap:14px}
  .report-download{width:100%;text-align:center;padding:12px}
  .modal-overlay{align-items:flex-end;padding:10px 10px calc(10px + env(safe-area-inset-bottom,0px))}
  .modal-box{max-height:calc(100svh - 36px);max-height:calc(100dvh - 36px - env(safe-area-inset-top,0px));overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:27px 20px;border-radius:24px;scroll-padding:55px 0 20px}
  .modal-close{width:44px;height:44px;top:10px;left:10px;font-size:20px}
  html[dir="ltr"] .modal-close{left:auto;right:10px}
  .modal-box h3{padding-inline-end:28px;font-size:1.2rem;line-height:1.6}
  .payment-methods{gap:8px}.payment-methods button{min-height:52px;padding:12px}
  .copy-account-bar{flex-wrap:wrap;gap:10px;padding:14px}
  .copy-account-bar code{font-size:1rem;overflow-wrap:anywhere}
  .copy-account-bar button{min-height:44px;min-width:65px}
  .preference-row{min-height:76px}.preference-shortcuts button{min-height:46px}
  html:has(.modal-overlay:not(.hidden)){overflow:hidden}
}
@keyframes mobile-reveal{from{opacity:0;transform:translateY(8px);filter:none}to{opacity:1;transform:translateY(0);filter:none}}
@media(max-width:360px){.viewport-stage{padding-inline:12px}.app-topbar{padding-inline:14px}.step-header h2{font-size:1.35rem}.gs-controls-card,.receipt-card,.client-action-card{padding-inline:15px}}
@media(max-height:500px) and (max-width:950px){.modal-overlay{align-items:center}.modal-box{max-height:calc(100dvh - 20px);overflow-y:auto}.reel-feed{height:75svh;min-height:240px}}