/* === Mobile responsive fixes (Round 13) === */

/* Footer grid: defeat the !important cascade so mobile properly stacks */
@media(max-width:1080px){
  .footer-grid{grid-template-columns:1fr 1fr !important;gap:40px 32px !important}
}
@media(max-width:640px){
  .footer-grid{grid-template-columns:1fr !important;gap:36px !important;padding-bottom:36px !important}
}

/* Tables: ensure they scroll horizontally on narrow viewports rather than overflow */
@media(max-width:760px){
  .comparison-table{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .comparison-table table{min-width:600px}
  table.score-bands{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
  .matrix-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .matrix-wrap table.matrix{min-width:900px}
}

/* SVG infographics: contain wide infographics in their own scrollable region on mobile */
@media(max-width:760px){
  figure.infographic{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-left:12px;padding-right:12px}
  figure.infographic svg{min-width:680px;max-width:none}
  /* Specific: maturity bands need extra width to avoid label truncation */
  .infographic svg[viewBox*="1080 320"]{min-width:920px}
  .infographic svg[viewBox*="1080 280"]{min-width:920px}
}

/* Ensure document never horizontally scrolls past viewport on body */
html,body{max-width:100%;overflow-x:clip}

/* Slight padding adjustments for mobile readability */
@media(max-width:480px){
  .wrap{padding-left:18px;padding-right:18px}
  .hero h1, .hero-title{font-size:clamp(34px,9vw,48px) !important;line-height:1.05 !important}
}