/* B423 · home hero: the sample caption (B403) sat in the hero grid's second cell and pushed the product figure (hx5)
   into a row below, leaving the right half empty from 1101px. The figure takes the right column again, with the caption
   under it. Phone and tablet keep their stacked order. */
@media (min-width:1101px){
  html.px-page body .sx-hero.hx2 .sx-hero-g>.sx-copy{grid-column:1;grid-row:1 / span 2}
  html.px-page body .sx-hero.hx2 .sx-hero-g>.hx5{grid-column:2;grid-row:1}
  html.px-page body .sx-hero.hx2 .sx-hero-g>.b-sample{grid-column:2;grid-row:2;justify-self:start;align-self:start;margin:28px 0 0 24px}
}
@media (min-width:601px) and (max-width:1100px){
  html.px-page body .sx-hero.hx2 .sx-hero-g{grid-template-columns:minmax(0,1fr)!important}
  html.px-page body .sx-hero.hx2 .sx-hero-g>.hx5{grid-row:2;justify-self:start;width:100%;max-width:640px}
  html.px-page body .sx-hero.hx2 .sx-hero-g>.b-sample{grid-row:3;justify-self:start;margin:4px 0 0}
}
/* Phone shell: app-b327 dresses every hero child but the words as a white figure card, which made the sample caption
   white on white. The caption stays a small pill on navy. */
html.sh-on.sh-on main>.sx-hero.hx2:first-child .sx-hero-g>.b-sample{justify-self:start;margin:8px 0 0!important;padding:6px 12px!important;background:rgba(255,255,255,.1)!important;color:#dbe5ff!important;border:0!important;box-shadow:none!important;border-radius:999px!important;width:auto!important}