/* === 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}
}

/* === E-E-A-T byline + author bio === */
.page-byline{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13.5px;color:var(--text-2);margin:8px 0 0;padding:14px 0 0;border-top:1px solid var(--border);max-width:760px}
.page-byline a{color:var(--ink);text-decoration:none;font-weight:600;border-bottom:1px solid transparent;transition:border-color .15s var(--ease,ease)}
.page-byline a:hover{border-bottom-color:var(--accent)}
.page-byline .byline-sep{color:var(--text-3);user-select:none}
.page-byline time{color:var(--text-2)}
.page-byline .byline-author-link{color:var(--ink);font-weight:700}

.author-bio{margin:64px auto;padding:48px 0;border-top:1px solid var(--border);max-width:1200px}
.author-bio-grid{display:grid;grid-template-columns:120px 1fr;gap:32px;align-items:start}
.author-bio-photo{width:120px;height:120px;border-radius:50%;flex-shrink:0;box-shadow:0 8px 24px rgba(109,40,217,.20);overflow:hidden}div.author-bio-photo{background:linear-gradient(135deg,var(--accent) 0%,var(--accent-deep) 100%);display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--sans-d);font-size:42px;font-weight:700;letter-spacing:-.02em}img.author-bio-photo{object-fit:cover;display:block;background:#f6f9fc}
.author-bio-content{min-width:0}
.author-bio-content h2{font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--accent);margin:0 0 6px;padding:0;border:0}
.author-bio-content h3{font-size:24px;font-weight:700;color:var(--ink);margin:0 0 6px;letter-spacing:-.01em}
.author-bio-content .author-roles{font-size:14px;color:var(--text-2);margin:0 0 16px;font-weight:500}
.author-bio-content p{font-size:15.5px;line-height:1.6;color:var(--text);margin:0 0 14px}
.author-credentials{margin:0 0 14px;padding-left:18px;font-size:14px;color:var(--text);line-height:1.55}
.author-credentials li{margin-bottom:4px}
.author-links{display:flex;flex-wrap:wrap;gap:8px 16px;list-style:none;padding:0;margin:0 0 14px;font-size:14px}
.author-links li{margin:0}
.author-links a{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid var(--border);border-radius:8px;background:var(--surface-2);color:var(--ink);text-decoration:none;font-weight:500;transition:border-color .15s var(--ease,ease),color .15s var(--ease,ease)}
.author-links a:hover{border-color:var(--accent);color:var(--accent)}
.author-meta{font-size:13.5px;color:var(--text-2);margin-top:14px}
.author-meta a{color:var(--accent);text-decoration:none;font-weight:600}
.author-meta a:hover{text-decoration:underline}

@media(max-width:640px){
  .author-bio-grid{grid-template-columns:1fr;gap:20px}
  .author-bio-photo{width:80px;height:80px}div.author-bio-photo{font-size:30px}
}