/* TRADE phone floor — loaded last, after any skin. Nothing may scroll sideways on a
   phone, and every action stays a thumb's width. */
@media (max-width:599px){
  html,body{ overflow-x:clip; }
  .btn{ min-height:52px; }
  .hero__actions .btn{ flex:1 1 auto; }
}

/* Gleam phone floor (loaded last). Short screens (an iPhone SE with Safari's bars is about 375 x 548): the lead stands
   aside so the price, the score and both actions stay on the first screen; decided from svh, never from a toolbar. */
@media (max-width:899px) and (max-height:700px){
  .hero__lead{ display:none; }
  .hero__media{ height:clamp(210px, 50svh, 520px); }
}
@media (max-width:374px){
  .stat{ padding:8px 10px; }
  .stat b{ font-size:19px; }
  .stat--price small{ font-size:9.5px; letter-spacing:.1em; }
  .stat--score small{ font-size:11.5px; }
  .stat--score .stars{ width:60px; height:12px; -webkit-mask-size:12px 12px; mask-size:12px 12px; }
  .hero__actions .btn{ font-size:15px; gap:8px; padding-inline:10px; }
  .promise{ font-size:13px; gap:8px; }
  .promise .sym{ width:32px; height:32px; }
  .tile__name{ font-size:14px; }
  .qjob__in{ gap:7px; padding-left:7px; }
  .qjob__ic{ width:30px; height:30px; }
  .qjob__name{ font-size:13px; }
  .dock__btn{ font-size:13px; gap:5px; }
}
@media (max-width:599px){
  .hero__actions .btn{ flex:none; }
}