/* RC15.73 2026-09-07 — mobile overflow guard.
   Loaded late, phone widths only. Grid and flex children default to
   min-width:auto, which stops them shrinking below their content and pushes
   the whole document sideways on a phone. Tables are excluded: they set their
   own min-width on purpose and scroll inside their wrapper. */
@media (max-width:640px){
  main :where(section,article,div,ul,ol,nav,header,aside) > *:not(table):not(caption):not(colgroup):not(thead):not(tbody):not(tfoot):not(tr){min-width:0}
  h1,h2,h3,h4,h5,h6,p,li,dt,dd,figcaption,summary,blockquote,td,th{overflow-wrap:break-word}
  pre,code,kbd,samp{overflow-wrap:anywhere}
  img,svg,video,iframe,canvas{max-width:100%}
  /* width:min(900px,calc(100% - 36px)) plus 28px padding overflows a 390px
     viewport unless the box is border-box. */
  .rc1537-upgrade-path{box-sizing:border-box}

  /* .sec-head is a flex row whose h2 carries flex-shrink:0, so a long heading
     (routinely the case in ja/de/es) pushes the page wide instead of wrapping. */
  .sec-head{flex-wrap:wrap}
  .sec-head h2{flex-shrink:1;min-width:0;overflow-wrap:break-word}
  .sec-line{flex-basis:100%}
  /* the premium gate stacks on mobile but its text column still refuses to shrink */
  .ci-premium{box-sizing:border-box;max-width:100%}
  .ci-premium>*{min-width:0}
  .ci-premium-text,.ci-premium-headline,.ci-premium-desc{min-width:0;overflow-wrap:break-word}
  /* the CTA carries white-space:nowrap; on these pages its label is longer than
     a phone viewport, which stretches the whole stacked panel past 390px. */
  .ci-premium-cta{white-space:normal;text-align:center}
}