@media (max-width: 768px){
  html, body { overflow-x: hidden; max-width: 100vw; }
  /* item 10: the nav's inner link group is a nowrap flex row that overflowed off-screen and got
     clipped by overflow-x:hidden — items were unreachable on a phone. Let it wrap onto multiple
     lines, tighten padding/gaps, and let the search take the full row so nothing is cut off. */
  .ff-nav-left { flex-wrap: wrap !important; gap: 8px !important; }
  .ff-nav-left > div:first-of-type,
  .ff-nav-left > a:first-of-type + div { display: none; }   /* drop the decorative divider on phones */
  nav .ffdd-top, .ff-nav-left .ffdd-top { font-size: 12px !important; padding: 5px 8px !important; }
  .ffns, #ff-nav-search { width: 100% !important; max-width: 100% !important; }
  .card-container { width: 100% !important; max-width: 100% !important; padding: 14px !important; }
  [class*="w-[1400px]"], [class*="w-[1000px]"], [class*="w-[850px]"] { width: 100% !important; max-width: 100% !important; }
  [class*="max-w-[1400px]"], [class*="max-w-[1000px]"] { max-width: 100% !important; }
  [class*="px-8"] { padding-left: 12px !important; padding-right: 12px !important; }
  [class*="px-10"], [class*="p-10"] { padding-left: 14px !important; padding-right: 14px !important; }
  img, svg, canvas, video, iframe { max-width: 100% !important; height: auto; }
  /* horizontal rows inside the big cards wrap instead of overflowing (leave flex-col alone) */
  .card-container .flex:not(.flex-col) { flex-wrap: wrap; }
  /* wide tables scroll within their own box rather than pushing the page wide */
  table { max-width: 100%; }

  /* ── round-118 item 3: the recent INLINE-styled redesigns overflowed on phones. The rules
     above only catch Tailwind CLASSES; these catch inline style= (they use !important, which
     beats an element's inline style) so nothing forces horizontal page scroll. ── */

  /* director profile: the two-up Career|3-Year performance panel stacks to one column */
  .ff-perf-grid { grid-template-columns: 1fr !important; }
  /* director profile: the connection map scrolls INSIDE its own box, never widening the page */
  .ff-connmap-wrap { display: block !important; }
  .ff-connmap-wrap > div { min-width: 0 !important; max-width: 100% !important; }

  /* any inline-built table (voting recs / calendar / scenarios) scrolls in its own box */
  table[style*="border-collapse"] { display: block !important; overflow-x: auto !important;
                                    max-width: 100% !important; }

  /* fixed pixel widths / min-widths baked into inline styles → fit the viewport */
  [style*="width:560px"], [style*="width: 560px"] { width: 100% !important; max-width: 100% !important; }
  [style*="width:180px"], [style*="width: 180px"] { width: 100% !important; max-width: 100% !important; }
  [style*="min-width:220px"], [style*="min-width: 220px"] { min-width: 0 !important; }
  /* the company-page director hover card container (mouse-only, but keep it on-screen if shown) */
  #global-hover-card { width: 94vw !important; max-width: 94vw !important; }
  /* round-123 item 3: a long single-word GRADE (e.g. BENCHWARMER) must stay INSIDE its box on the
     smaller hover card + mobile — shrink it and let it break rather than spill. */
  .ff-grade-val { font-size: 18px !important; overflow-wrap: anywhere !important; word-break: break-word !important; }
}