/* Main site on phones: one tidy set of floating buttons, a compact top, readable giant words, no sideways scrolling. */
html,body{overflow-x:clip}
@media (max-width:760px){
  /* top: the offer bar on one compact line */
  .sqm-bar{padding:7px 40px 7px 12px;gap:8px;font-size:12.5px;line-height:1.35}
  .sqm-bar .sqm-cd{font-size:12px}
  .sqm-bar a,.sqm-bar button:not(.sqm-x){padding:4px 10px!important;font-size:12px!important}
  /* the look switch stays in the header (with its colour dots); the floating dock is hidden on phones */
  .sqx-dock{display:none!important}
  .sqx-era-btn .sqx-sws{display:inline-flex!important;gap:2px;padding:0 6px}
  .sqx-era-btn{min-width:44px;justify-content:center}
  /* floating buttons: one column on the side, above the sticky bar */
  .wa-float{width:50px;height:50px;bottom:calc(16px + env(safe-area-inset-bottom));inset-inline-end:14px}
  .sqm-fab{width:50px;height:50px;bottom:calc(76px + env(safe-area-inset-bottom));inset-inline-end:14px}
  html.sqm-sticky-on .wa-float{bottom:calc(84px + env(safe-area-inset-bottom))}
  html.sqm-sticky-on .sqm-fab{bottom:calc(144px + env(safe-area-inset-bottom))}
  .sqm-sticky{padding:8px 12px calc(8px + env(safe-area-inset-bottom))}
  .sqm-sticky b,.sqm-sticky strong{font-size:14px}
  /* when the chat is open it takes the whole screen and everything else steps aside */
  html.mob-chat .sqm-chat{inset:0!important;width:auto!important;height:100%!important;height:100dvh!important;border-radius:0!important;bottom:0!important}
  html.mob-chat .sqm-sticky,html.mob-chat .wa-float,html.mob-chat .sqm-fab,html.mob-chat .sqx-dock,html.mob-chat .sqtour-help{display:none!important}
  html.mob-chat body{overflow:hidden}
  .sqm-chat input{font-size:16px}
  /* popups slide up from the bottom instead of covering the page */
  .sqm-pop{align-items:flex-end!important}
  .sqm-pop .sqm-card{width:100%!important;max-width:none!important;border-radius:22px 22px 0 0!important;margin:0!important;max-height:86vh;overflow:auto;padding-bottom:env(safe-area-inset-bottom)}
  /* giant chapter words and hero titles fit the screen */
  .sqx-giant,.sqr-giant{font-size:clamp(54px,19vw,120px)!important;line-height:.9!important;white-space:normal!important;overflow-wrap:anywhere}
  .sqx-h1,.sqx-mega,.sqr-big{font-size:clamp(34px,10vw,56px)!important;line-height:1.05!important}
  .sqr-line{font-size:clamp(24px,7vw,36px)!important}
  /* forms: 16px text so iPhone does not zoom in, and full-width buttons */
  input,select,textarea{font-size:16px!important}
  .sqx-claim{flex-direction:column}
  .sqx-claim .sqx-btn,.sqx-claim button{width:100%;justify-content:center}
  /* tap targets */
  .nav a,.nav button,.foot a{min-height:40px;display:inline-flex;align-items:center}
  /* wide tables scroll inside their box */
  .sqp2-wrap,.sqx-compare,.sqp2-tw{overflow-x:auto;-webkit-overflow-scrolling:touch}
  /* sign-up / log-in: smaller logo box */
  body.sqs .auth-logo{padding:6px 12px}
  .auth-logo img{width:120px!important;height:auto}
  .auth{padding:18px 12px}
  .auth-card{padding:22px 18px!important;border-radius:20px!important}
  .types-pick{gap:8px}
  .pick span{padding:12px 4px;font-size:13px}
  .row2{grid-template-columns:1fr!important}
}
@media (max-width:760px){html.mob-chat .sqm-chat{z-index:300!important;padding-top:env(safe-area-inset-top)}html.mob-chat .sqx-side,html.mob-chat .nav{visibility:hidden}}
/* "Choose the look" panel on phones: a bottom sheet with the three looks as one tidy list */
@media (max-width:760px){
  .sqx-era{align-items:flex-end!important;padding:0!important}
  .sqx-era-box{width:100%!important;border-radius:24px 24px 0 0!important;padding:18px 16px calc(18px + env(safe-area-inset-bottom))!important;max-height:88vh;overflow:auto;animation:sqxSheet .35s cubic-bezier(.2,.8,.2,1) both!important}
  .sqx-era-box::before{content:"";display:block;width:44px;height:5px;border-radius:3px;background:rgba(0,0,0,.18);margin:0 auto 12px}
  .sqx-era-h{margin-bottom:12px}
  .sqx-era-h b{font-size:20px!important}
  .sqx-era-h small{font-size:13.5px}
  .sqx-era-g{grid-template-columns:1fr!important;gap:10px!important}
  .sqx-era-card{display:grid!important;grid-template-columns:76px 1fr;grid-template-rows:auto auto;column-gap:14px;row-gap:2px;align-items:center;padding:10px!important;min-height:0}
  .sqx-era-pv{grid-row:1/3;width:76px!important;height:76px;aspect-ratio:auto!important}
  .sqx-era-pv i{font-size:26px!important}
  .sqx-era-pv em{display:none}
  .sqx-era-card b{align-self:end;font-size:17px!important;padding:0!important;margin:0!important}
  .sqx-era-card small{align-self:start;font-size:13px!important;line-height:1.4;padding:0!important;margin:0!important}
  .sqx-era-card u{position:absolute;top:8px;inset-inline-end:10px}
}
@keyframes sqxSheet{from{transform:translateY(100%)}to{transform:none}}
@media (max-width:760px){.sqx-era-pv-sp i::after{content:none!important}.sqx-era-pv-sp em{display:block!important}}