/* Mobile layout containment: content wraps, tables scroll in their own regions. */
html,body{max-width:100%;overflow-x:clip}
@media(max-width:720px){
 .nav .wrap{min-width:0;flex-wrap:wrap;gap:12px}
 .nav .links{min-width:0;max-width:100%}
 .pub-body,.pub-content,.pub-body>*{min-width:0;max-width:100%}
 .tablewrap,.mobile-table-scroll{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
 .mobile-table-scroll:focus-visible{outline:2px solid var(--emerald)}
 footer .slogan,.meta{white-space:normal;overflow-wrap:anywhere}
 main p,main li,.pill{overflow-wrap:anywhere}
 img,video{max-width:100%;height:auto}
}

/* Keep intrinsic CTA text and native popovers inside the mobile layout viewport. */
@media(max-width:720px){
 .cta{max-width:100%;flex-wrap:wrap}
 .btn{max-width:100%;min-width:0;white-space:normal;overflow-wrap:anywhere;text-align:center;justify-content:center}
 #depthmenu{left:16px!important;right:16px!important;width:auto!important;min-width:0;max-width:calc(100% - 32px);box-sizing:border-box}
 #depthmenu a,#depthmenu .mh{white-space:normal;overflow-wrap:anywhere}
}