/* 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; }
}

/* COURSE phone floor — after the shared floor and any skin. The first screen is the
   photograph, the promise and the two actions, whole, on every phone; a short screen
   (an iPhone SE or 8 with Safari's bars is about 375 x 548) gives up the lead for them. */
@media (max-width:599px){
  /* 2026-10-11: a photograph as tall as the screen is only ever cropped at its sides there, so the job itself (the
     ground, the lower half of nearly every picture this trade takes) lay under the headline. On a phone the photograph
     is the top of the first screen, whole, and fades into the slate the words stand on. hero.slides follow it. */
  .hero--photo .hero__bg img{ height:66%; -webkit-mask-image:linear-gradient(#000 70%, transparent); mask-image:linear-gradient(#000 70%, transparent); }
  .hero__actions .btn{ flex:1 1 0; min-width:0; padding-inline:14px; }
  .hero__actions .hero__mail{ flex:1 1 100%; }
  .dock[data-always] ~ * .hero__in, body:has(.dock[data-always]) .hero__in{ padding-bottom:88px; }
  .hero__lead{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; }
  .score{ gap:14px; }
}
@media (max-width:899px) and (max-height:640px){
  .hero__in{ padding-block:14px 14px; }
  .hero__title{ font-size:clamp(38px,12.2vw,52px); }
  .hero__lead{ display:none; }
  .rate{ margin-bottom:12px; }
  .hero__actions{ margin-top:16px; }
  .hero__actions .btn{ min-height:52px; }
  .tape__run{ height:44px; font-size:17px; }
  .slab__vis{ aspect-ratio:2 / 1; }
}
@media (max-width:359px){
  .hero__title{ font-size:40px; }
  .jobs__grid{ grid-template-columns:1fr; }
  .plan{ --u:11px; }
}