/* Mobile partner experience: signup first, legible amounts, comfortable touch targets. */
@media(max-width:620px){
 html:has(#app){scroll-padding-bottom:90px}
 #app{width:100%;overflow-wrap:break-word}
 #app .app-top{padding-top:max(12px,env(safe-area-inset-top));height:auto;min-height:64px}
 #app[data-screen="welcome"] .app-top{min-height:62px;height:auto;padding:12px 18px}
 #app[data-screen="welcome"] .brand{font-size:22px}
 #app[data-screen="welcome"] .brand small{font-size:7px;letter-spacing:1.7px}
 #app .icon-button{width:44px;height:44px}
 #welcome{padding:0 16px}
 #welcome .phone-hero{padding-top:8px;padding-bottom:18px}
 #welcome .phone-heading{margin-bottom:18px}
 #welcome .phone-heading h1{font-size:clamp(32px,9.2vw,42px);letter-spacing:-1.7px;line-height:1.08;margin:10px 0 12px}
 #welcome .phone-heading>p{font-size:13px;line-height:1.6;margin:0 auto;max-width:350px}
 .phone-heading>p br{display:none}
 .hero-highlights{margin-top:12px;gap:7px 10px}
 .hero-highlights span{font-size:10px}
 .hero-highlights span:last-child{display:none}
 .phone-stage{gap:20px}
 .phone-card{padding:22px 20px 18px;border-radius:22px;max-width:440px;box-shadow:0 12px 30px #2262a312}
 #welcome .phone-card h2{font-size:25px;margin:12px 0 8px;line-height:1.15}
 .phone-card>p{margin:8px 0;font-size:12px}
 .phone-card label{margin:16px 0 8px;font-size:13px}
 #join-phone{height:52px;font-size:17px}
 #welcome #show-signup{min-height:52px;margin-top:14px;font-size:15px}
 .phone-card .phone-note{margin:10px 0 12px;font-size:11px}
 .phone-login{padding-top:10px;font-size:12px}
 #show-login{min-height:44px;margin:0 auto;padding:8px;font-size:13px}
 .rider-scene{max-width:440px}
 .rider-scene>img{height:230px;border-radius:22px;object-position:center 43%}
 .scene-label{bottom:14px;left:12px;right:12px;font-size:11px;padding:12px}
 #welcome .cl-modalities{padding:26px 0 16px}
 #welcome .cl-modalities>h2{font-size:27px;line-height:1.2;margin-top:12px}
 #welcome .cl-modality-grid{margin-top:18px}
 #welcome .cl-modality-grid article{padding:20px}
 #welcome .cl-modality-grid .cl-vehicle-photo{max-height:180px;margin-bottom:16px}
 #welcome .cl-modality-grid h3{font-size:24px}
 #welcome .cl-modality-grid button{min-height:48px;width:100%;font-size:13px}
 #welcome .cl-benefits{gap:18px;margin:0 0 28px;padding:18px 0}
 #welcome .cl-benefits strong{font-size:13px}
 #welcome .cl-benefits p{font-size:12px;line-height:1.6}
 #welcome .cl-step-grid{gap:10px;margin:20px 0 30px}
 #welcome .cl-step-grid article{padding:18px;border-radius:16px;box-shadow:none}
 #welcome .cl-step-grid h3{font-size:15px;line-height:1.4}
 #welcome .cl-step-grid p{font-size:13px;line-height:1.65}
 #welcome .cl-bottom{margin:0 -16px;padding:30px 20px;gap:20px}
 #welcome .cl-bottom h2{font-size:30px}
 #welcome .cl-bottom .primary{min-height:50px;font-size:14px}
 #welcome .cl-faq{margin:30px 0}
 #welcome .cl-faq summary{font-size:14px;line-height:1.6;min-height:30px}
 #welcome .cl-faq p{font-size:13px;line-height:1.7}
 #welcome .cl-footer{padding:10px 0 24px}
 #app[data-screen="auth"]{border-radius:0;min-height:100dvh}
 #auth{padding:10px 22px max(24px,env(safe-area-inset-bottom))}
 #auth-back,#auth-help,.auth-footer button{min-height:44px}
 #auth .eyebrow{margin-top:10px}
 #auth-title{font-size:26px;line-height:1.2}
 #auth-caption{margin-bottom:18px}
 #auth .check{font-size:12px;gap:10px;line-height:1.65;align-items:flex-start}
 #auth .check span{min-width:0;flex:1}
 #auth .check input{flex:0 0 20px;width:20px;height:20px}
 #auth-submit{min-height:52px;font-size:15px}
 #dashboard .map{height:clamp(175px,28svh,235px)}
 #dashboard .home-sheet{padding:16px 16px calc(100px + env(safe-area-inset-bottom));border-radius:22px 22px 0 0}
 #dashboard .greeting h1{font-size:22px}
 #dashboard .offer-card{padding:16px;border-radius:18px;background:linear-gradient(145deg,#eef7ff,#fff);border-color:#bddcfa}
 #dashboard .offer-head{display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px}
 #dashboard .offer-head small{max-width:none;font-size:10px;letter-spacing:.4px}
 #dashboard .offer-head strong{font-size:26px;line-height:1.2;letter-spacing:-.7px;white-space:nowrap}
 #dashboard .route-line{font-size:13px;line-height:1.6}
 #dashboard .route-line strong{font-size:14px}
 #dashboard .offer-actions{display:grid;grid-template-columns:1fr 1.4fr;gap:8px}
 #dashboard .offer-actions button{min-height:50px;font-size:13px}
 #dashboard .ride-card>strong{font-size:25px;letter-spacing:-.5px}
 #dashboard .ride-card .primary{min-height:50px;font-size:14px}
 #dashboard .online-button{min-height:50px;font-size:14px}
 #dashboard .bottom-nav{padding:7px 10px calc(7px + env(safe-area-inset-bottom));width:min(500px,100%)}
 #dashboard .bottom-nav button{position:relative;min-height:50px;font-size:11px;gap:5px}
 #dashboard .bottom-nav button.selected{background:#edf6ff;border-radius:13px}
 #dashboard .bottom-nav button.selected:before{display:none}
 #dashboard .pane{padding:20px 18px calc(100px + env(safe-area-inset-bottom))}
 #dashboard .settlement-row{gap:10px}
 #dashboard .settlement-row b{font-size:16px}
 #dashboard .earnings-card>strong{font-size:38px;font-variant-numeric:tabular-nums}
 #dashboard #earnings-pane>.fine{font-size:12px;line-height:1.7}
 #dashboard .profile-card p{font-size:14px}
 #dashboard #profile-push,#dashboard #logout{min-height:48px}
 #dashboard #sandbox-list .offer-head{grid-template-columns:1fr}
 #dashboard #sandbox-list .offer-head strong{text-align:left;white-space:normal}
}
@media(max-width:350px){.hero-highlights{display:none}.phone-card{padding:20px 17px 16px}#welcome .phone-heading>p{font-size:12px}#dashboard .offer-head{grid-template-columns:1fr}#dashboard .offer-head strong{text-align:left}#auth{padding-inline:18px}}

.signup-mobile-title{display:none}
@media(max-width:620px){
 #app[data-screen="welcome"]{background:#f5f9ff;min-height:100dvh}
 #app[data-screen="welcome"] .app-top,#app[data-screen="auth"] .app-top{justify-content:center;min-height:92px;padding:24px 60px 16px;background:transparent;border:0}
 #app[data-screen="welcome"] .app-top .brand,#app[data-screen="auth"] .app-top .brand{font-size:29px;text-align:center}
 #app[data-screen="welcome"] .app-top .brand small,#app[data-screen="auth"] .app-top .brand small{display:none}
 #app[data-screen="welcome"] #help,#app[data-screen="auth"] #help{position:absolute;right:16px;top:24px}
 #welcome .phone-heading,#welcome .rider-scene,#welcome .phone-side,#welcome>section:not(.phone-hero),#welcome>.cl-benefits,#welcome>.cl-footer{display:none}
 #welcome .phone-hero{padding:0 0 24px}
 #welcome .phone-stage{display:block}
 #welcome .phone-card{margin:0 auto;padding:24px 20px 18px;background:white;border:1px solid #e0ebf7;border-radius:20px;box-shadow:0 10px 35px #244f7510}
 #welcome .phone-step,#welcome .phone-card>p,#welcome .signup-desktop-title{display:none}
 #welcome .signup-mobile-title{display:inline}
 #welcome .phone-card h2{font-size:23px;letter-spacing:-.6px;margin:0 0 22px;line-height:1.25}
 #welcome .phone-card label{margin:0 0 8px}
 #welcome .phone-login{margin-top:22px;padding-top:16px}
 #auth .eyebrow,#auth-caption,#auth-phone-hint,#auth .fine.signup-only{display:none}
 #auth-title{font-size:24px;margin:10px 0 22px}
 #auth{padding-top:0}
 #auth .auth-footer{padding-top:16px;margin-top:20px}
}