/* Mobile-first refinement for the NEXT Help Center */
html,body{width:100%;overflow-x:hidden;-webkit-text-size-adjust:100%}
button,.trade,.choice{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
button{cursor:pointer}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid color-mix(in srgb,var(--green) 60%,white);outline-offset:3px}
.app-shell{overflow:hidden}
.urgent,.trade,.account-strip,.panel,.choice,.field input,.field select,.field textarea{border-radius:12px}
.trade strong,.trade small,.welcome h1,.welcome p{overflow-wrap:anywhere}

/* Phones: the assistant behaves like a native full-screen flow. */
@media(max-width:600px){
  body{padding:0;padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
  .app-shell{width:100%;min-height:100dvh;border:0}
  .topbar{height:auto;min-height:76px;padding:calc(9px + env(safe-area-inset-top)) 14px 9px;gap:10px}
  .brand{width:min(174px,54vw);align-items:flex-start}
  .next-master-mark{width:min(164px,51vw);height:34px;object-position:left center}
  .brand small{font-size:7px;letter-spacing:1.65px;margin-left:2px}
  .language{flex:0 0 auto;padding:2px}
  .language button{min-width:42px;min-height:42px;padding:8px 7px}
  .welcome{padding:34px 18px 24px}
  .eyebrow{font-size:11px;line-height:1.45}
  .welcome h1{font-size:clamp(38px,12.7vw,58px);line-height:.94;letter-spacing:-1.8px;margin:14px 0 16px}
  .welcome>p{font-size:16px;line-height:1.5}
  .urgent{grid-template-columns:42px minmax(0,1fr) 20px;min-height:76px;margin-top:22px;padding:13px}
  .urgent small{display:block;line-height:1.35}
  .trade-section{padding:10px 16px 28px}
  .section-label{margin-bottom:12px}
  .trades{gap:10px}
  .trade{min-width:0;min-height:142px;padding:15px}
  .trade-icon{width:44px;height:44px}
  .trade strong{font-size:15px;line-height:1.2}
  .trade small{font-size:12px;line-height:1.35}
  .account-strip{margin:0 16px calc(22px + env(safe-area-inset-bottom));padding:17px}
  .account-strip button{min-height:50px;font-size:15px}
  .overlay{align-items:stretch;padding:0}
  .panel,.rating-panel{width:100%;height:100dvh;max-height:none;margin:0;border:0;border-radius:0;overscroll-behavior:contain}
  .panel>header{position:sticky;top:0;z-index:6;min-height:74px;padding:calc(9px + env(safe-area-inset-top)) 14px 9px;background:#07191aed;backdrop-filter:blur(16px)}
  .progress{position:sticky;top:74px;z-index:7}
  .panel-body{padding:20px 16px calc(34px + env(safe-area-inset-bottom))}
  .choice{min-height:66px;padding:14px;font-size:16px}
  .field{gap:8px;margin-bottom:16px}
  .field span{font-size:14px}
  .field input,.field select,.field textarea{min-height:54px;padding:14px;font-size:16px}
  .field textarea{min-height:118px;resize:vertical}
  .field-row{grid-template-columns:1fr!important;gap:0}
  .address-row{grid-template-columns:minmax(0,1fr) 92px!important;gap:10px}
  .primary{position:sticky;bottom:calc(10px + env(safe-area-inset-bottom));z-index:5;min-height:54px;font-size:16px;box-shadow:0 10px 28px #000,0 0 0 6px #031011d9}
  .upload{min-height:140px;border-radius:12px}
  .summary div{grid-template-columns:1fr;gap:5px;font-size:14px}
  .stars{gap:2px;margin:20px 0}
  .stars button{width:48px;height:48px;padding:0;font-size:36px}
  .rating-grid{grid-template-columns:1fr}
  .rate-item{padding:14px;border-radius:10px}
  .rate-item button{width:38px;height:38px;font-size:24px}
  .notify{font-size:14px;grid-template-columns:28px 1fr}
  .notify input{width:22px;height:22px}
}

/* Very narrow phones keep every service card comfortably readable. */
@media(max-width:359px){
  .trades{grid-template-columns:1fr}
  .trade{min-height:120px}
  .language button{min-width:38px}
  .address-row{grid-template-columns:1fr!important}
}

/* Tablets: more information per screen without stretching the phone layout. */
@media(min-width:601px) and (max-width:1024px){
  body{padding:20px}
  .app-shell{width:min(860px,100%);min-height:calc(100dvh - 40px);border:1px solid #28413e;box-shadow:0 30px 100px #000}
  .topbar{padding-inline:24px}
  .welcome{padding:54px 34px 30px}
  .welcome h1{max-width:720px;font-size:clamp(54px,8vw,78px)}
  .welcome>p{max-width:680px}
  .trade-section{padding:16px 34px 38px}
  .trades{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .trade{min-width:0;min-height:150px;padding:17px}
  .account-strip{margin:0 34px 34px;padding:22px}
  .overlay{align-items:center;padding:24px}
  .panel,.rating-panel{width:min(720px,100%);max-height:90dvh;border-radius:22px}
  .panel>header{position:sticky;top:0;z-index:5;background:#07191aed;backdrop-filter:blur(16px)}
  .panel-body{padding:28px}
  .choice{min-height:68px}
  .field input,.field select,.field textarea{font-size:16px;min-height:52px}
  .primary{min-height:54px}
}

@media(min-width:601px) and (max-width:760px){.trades{grid-template-columns:1fr 1fr}}

/* Larger screens remain focused while gaining a little breathing room. */
@media(min-width:1025px){
  .app-shell{width:min(920px,100%)}
  .welcome,.trade-section{padding-left:40px;padding-right:40px}
  .trades{grid-template-columns:repeat(4,minmax(0,1fr))}
  .account-strip{margin-left:40px;margin-right:40px}
  .panel{width:min(680px,calc(100% - 48px));border-radius:22px}
}

@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}