/* mmt-fix.css: one shared grid for header, page content and footer (loaded on every page via header.php) */

/* 1. Same container on every page: content lines up with the logo and the footer */
html body .mp-wrap,html body .ma-wrap,html body .kb-wrap,html body .cs-wrap,html body .mc-wrap,html body .mh-w{
  max-width:1320px;padding-left:28px;padding-right:28px;box-sizing:border-box}
@media (max-width:900px){
  html body .mx-bar,html body .mp-wrap,html body .ma-wrap,html body .kb-wrap,html body .cs-wrap,
  html body .mc-wrap,html body .mh-w{padding-left:20px;padding-right:20px}
  html body .mx-nav{padding-left:20px;padding-right:20px}
  html body .mx-f-wrap{padding-left:20px;padding-right:20px}
  html body .mx-f-cta-in{padding-left:20px;padding-right:20px}
}

/* 2. Tables: no sideways scrolling on phones, rows stack into readable blocks */
@media (max-width:640px){
  html body .mp-tbl,html body .ma-tbl,html body .mmt-atable{min-width:0 !important;width:100%}
  html body .mp-tbl-wrap,html body .ma-tblwrap,html body .mmt-atable-wrap{overflow:visible}
  /* two-column spec tables: label above value */
  html body .mp-tbl-kv tr{display:block;padding:12px 16px;border-bottom:1px solid var(--line,#E7E1DC)}
  html body .mp-tbl-kv tr:last-child{border-bottom:0}
  html body .mp-tbl-kv td{display:block;width:auto !important;padding:0 !important;border:0 !important}
  html body .mp-tbl-kv td:first-child{font-size:12px;letter-spacing:.04em;margin-bottom:3px}
  /* multi-column tables: one card per row, each cell labelled with its column */
  html body table.mx-stack thead{display:none}
  html body table.mx-stack caption{display:block;width:100%;text-align:left}
  html body table.mx-stack,html body table.mx-stack tbody{display:block}
  html body table.mx-stack tr{display:block;padding:14px 16px;border-bottom:1px solid var(--line,#E7E1DC)}
  html body table.mx-stack tr:last-child{border-bottom:0}
  html body table.mx-stack td,html body table.mx-stack tbody th{display:block;padding:3px 0 !important;border:0 !important;white-space:normal !important;text-align:left}
  html body table.mx-stack td:first-child,html body table.mx-stack tbody th:first-child{font-weight:700;padding-bottom:6px !important;color:var(--ink,#15171A)}
  html body table.mx-stack td[data-label]:not(:first-child)::before{content:attr(data-label);display:block;
    font:700 11.5px 'Montserrat',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--muted,#6B6F76);margin:6px 0 2px}
  html body .mmt-atable.mx-stack tr{padding-left:0;padding-right:0}
}

/* 3. Small labels readable on phones */
@media (max-width:640px){
  html body .mx-f-label,html body .ma-key dt{font-size:12px}
  html body .mp-this{display:table;margin:6px 0 2px;font-size:11px}
}

/* 4. Case study hero: text readable over the photo on phones */
@media (max-width:640px){
  html body .cs-hero__scrim{background:linear-gradient(180deg,rgba(21,23,26,.45) 0%,rgba(21,23,26,.55) 30%,rgba(21,23,26,.82) 60%,rgba(21,23,26,.92) 100%)}
  html body .cs-hero__h i{line-height:1.3}
  html body .cs-hero__h{line-height:1.12}
}

/* 5. Long words never push the page sideways */
html body .mp-sec,html body .ma-sec,html body main{overflow-wrap:break-word}

/* 6. Product hero photo on tablets: keep the square image from filling the whole screen */
@media (min-width:641px) and (max-width:1000px){
  html body .mp-hero .mp-media{max-width:520px}
}