/* SUMA — site-wide mobile safety net. Desktop (>760px) is untouched. React serializes inline styles with a space after the colon, so attribute selectors match on the value fragment only. */
@media (max-width:980px) {
  h1 [style*="nowrap"], h2 [style*="nowrap"], h3 [style*="nowrap"], h1[style*="nowrap"], h2[style*="nowrap"], h3[style*="nowrap"] { white-space:normal !important; }
}
@media (max-width:900px) {
  [data-stagger][style*="repeat(4,"], [data-stagger][style*="repeat(5,"], [data-stagger][style*="repeat(6,"] { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}
@media (max-width:860px) {
  .hiw-grid { grid-template-columns:minmax(0,1fr) !important; }
  .hiw-side, .hiw-stage, .hiw-panel, .hiw-tabs, .demo-frame { min-width:0 !important; max-width:100%; }
  .hiw-tabs > .hiw-tab { width:200px !important; }
}
@media (max-width:760px) {
  [data-stagger][style*="repeat(3,"], [data-stagger][style*="repeat(4,"], [data-stagger][style*="repeat(5,"], [data-stagger][style*="repeat(6,"], .sys-top, .sys-why, .sys-cards, .sb-hero { grid-template-columns:1fr !important; }
  section > div > [style*="grid-template-columns"][style*="minmax(0,"][style*="fr) minmax(0,"] { grid-template-columns:minmax(0,1fr) !important; }
  section > div > [style*="grid-template-columns"][style*="1.15fr"], section > div > [style*="grid-template-columns"][style*="0.85fr"], section > div > [style*="grid-template-columns"][style*="1.1fr"], section > div > [style*="grid-template-columns"][style*="0.9fr"] { grid-template-columns:minmax(0,1fr) !important; }
  img, svg, figure, canvas { max-width:100%; }
  figure { margin-left:0 !important; margin-right:0 !important; }
}
@media (max-width:560px) {
  [data-stagger][style*="repeat(2,"] { grid-template-columns:1fr !important; }
}

/* ——— refinement pass 2: alignment + ordering ——— */
@media (max-width:760px) {
  /* section heads, hero copy and stand-alone intros read centered on a phone */
  .m-c { text-align:center !important; margin-left:auto !important; margin-right:auto !important; }
  .m-c[style*="fit-content"] { display:block !important; }
  .m-cta { justify-content:center !important; }
  /* the pre-footer invitation */
  [data-suma-cta-skyline] h2 { text-align:center !important; margin-left:auto !important; margin-right:auto !important; }
  [data-suma-cta-skyline] h2 + div { justify-content:center !important; }
  /* Experiential Productivity block: copy and link centered, the paired graphic centered beneath */
  .ep-grid > div:first-child { text-align:center; }
  .ep-grid > .ep-mini { margin-left:auto !important; margin-right:auto !important; }
}
@media (max-width:820px) {
  /* rows that alternate graphic/text on desktop stack the same way on a phone: copy first, then the graphic */
  .hw-row > .hw-vis { order:2; }
}
@media (max-width:560px) {
  /* team cards: portrait is centered at this width, so the name and link follow it */
  .tm-card { text-align:center; }
  .tm-card > * { margin-left:auto !important; margin-right:auto !important; }
  .tm-card a[style*="inline-flex"] { justify-content:center; }
  /* footer: two link columns instead of one long stack; brand block spans the row */
  footer [style*="auto-fit"] { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  footer [style*="auto-fit"] > div:first-child { grid-column:1 / -1; }
}

/* footer link columns: bigger tap targets at the same visual rhythm */
@media (max-width:760px) {
  footer div[style*="flex-direction: column"][style*="gap: 11px"] { gap:0 !important; }
  footer div[style*="flex-direction: column"][style*="gap: 11px"] > a { padding:6px 0; }
}

/* pill links never push past the screen edge: long labels wrap inside the pill */
@media (max-width:760px) {
  a[style*="border-radius: 999px"][style*="white-space: nowrap"], button[style*="border-radius: 999px"][style*="white-space: nowrap"] { white-space:normal !important; max-width:100%; box-sizing:border-box; text-align:center; justify-content:center; }
  h1, h2, h3 { overflow-wrap:break-word; }
}

/* three-pane comparisons (CHARTER, INSIGHT, CONNECT): centered on phones */
@media (max-width:760px) {
  .tri3 { justify-items:center; }
  .tri3 > figure { width:100%; max-width:420px; text-align:center; align-items:center; }
  .tri3 > figure > div:first-child { width:100%; max-width:300px; margin:0 auto; }
  .tri3 figcaption { width:100%; }
  .tri3 figcaption p { margin-left:auto !important; margin-right:auto !important; min-height:0 !important; }
}

/* SUMA System "how it works": People pills one per row on phones */
@media (max-width:760px) { .hw-people { flex-direction:column; align-items:flex-start; } }

/* INSIGHT + Concierge step-through demos on phones: every step visible as a numbered row, content, then Back / Next */
@media (max-width:860px) {
  .demo-frame .hiw-grid { gap:18px !important; }
  .demo-frame .hiw-side { display:contents !important; }
  .demo-frame .hiw-tabs { order:0; display:grid !important; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:6px !important; overflow:visible !important; padding-bottom:0 !important; }
  .demo-frame .hiw-tabs > .hiw-tab { width:auto !important; flex:none !important; min-height:44px; padding:0 !important; justify-content:center; align-items:center; gap:0; border-radius:999px; background:rgba(255,253,246,0.5); border:1px solid rgba(16,49,42,0.16); }
  .demo-frame .hiw-tabs > .hiw-tab > span:last-child { display:none; }
  .demo-frame .hiw-tabs > .hiw-tab .hiw-num { width:auto; font-size:15px; }
  .demo-frame .hiw-tabs > .hiw-tab[data-done="true"] { background:rgba(139,165,140,0.28); border-color:rgba(77,101,93,0.35); }
  .demo-frame .hiw-tabs > .hiw-tab[data-on="true"] { background:#10312a; border-color:#10312a; box-shadow:none; }
  .demo-frame .hiw-tabs > .hiw-tab[data-on="true"] .hiw-num { color:#e6dcc8; }
  .demo-frame .hiw-stage { order:1; }
  .demo-frame .hiw-foot { order:2; margin-top:0 !important; flex-direction:row !important; align-items:center !important; justify-content:space-between; flex-wrap:wrap; }
  .demo-frame .hiw-stage > div:first-child p:first-child { margin-bottom:8px !important; }
}

/* hero/CTA button pairs on phones: equal width, centered, never touching */
@media (max-width:560px) {
  .m-cta { gap:12px !important; }
  .m-cta > a, .m-cta > button { flex:0 0 auto; width:min(100%,280px); box-sizing:border-box; justify-content:center !important; text-align:center; }
}

/* button rows and stand-alone links that sit under centered heads */
@media (max-width:760px) {
  .cta-c { display:flex !important; flex-wrap:wrap; justify-content:center !important; text-align:center !important; margin-left:auto !important; margin-right:auto !important; }
  .m-l, .m-l * { text-align:left !important; }
}

/* Who We Serve pages: tighter hero, concise decisions and product notes */
@media (max-width:760px) {
  .ws-hero-copy { padding-bottom:28px !important; }
  .ws-hero-art { max-width:360px !important; justify-self:center !important; }
  #decisions { padding:56px 0 !important; }
  #decisions h2 { margin-bottom:22px !important; }
  #decisions .ws-row { grid-template-columns:minmax(0,1fr) !important; gap:8px !important; padding:20px 0 !important; }
  #decisions .ws-row > div:nth-child(2) { display:none !important; }
  #decisions .ws-row > div:nth-child(1) { gap:12px !important; }
  #decisions .ws-row h3 { font-size:1.18rem !important; line-height:1.3 !important; }
  #decisions .ws-row > div:nth-child(3) { padding-left:32px; }
  #decisions .ws-row > div:nth-child(3) > p:first-child { display:none !important; }
  #decisions .ws-row > div:nth-child(3) > p:last-child { font-size:15px !important; line-height:1.55 !important; color:#4a534d !important; }
  #product { padding:56px 0 !important; }
  #product .ws-fit { gap:6px !important; margin-top:18px !important; }
  #product .ws-fit > div > p { display:none !important; }
  #product .ws-fit > div > a { margin-top:0 !important; }
}