/* ═══════════════════════════════════════════════════════════
   Industry-page hero on mobile — same stacked treatment as the
   homepage hero (media box collapses, copy left-aligned on black).
   Load LAST so it wins over the page's own !important rules.
   ═══════════════════════════════════════════════════════════ */
@media (max-width:760px){
  .di .hero{ padding-bottom:0 !important; }
  .di .hero .hero-media{ aspect-ratio:auto !important; height:auto !important; display:flex !important; flex-direction:column !important; background:#000 !important; border:0 !important; border-radius:24px !important; overflow:hidden !important; }
  .di .hero .hero-overlay{ position:static !important; inset:auto !important; height:auto !important; display:flex !important; flex-direction:column !important; align-items:stretch !important; justify-content:flex-start !important; background:#000 !important; padding:26px 18px 26px !important; gap:14px !important; }
  .di .hero .hero-overlay > *{ order:0 !important; }
  .di .hero .hero-overlay .hero-module-name{ font-size:12px !important; letter-spacing:.16em !important; text-align:left !important; margin:0 !important; }
  .di .hero .hero-overlay .hero-title{ font-size:clamp(26px,7.4vw,34px) !important; line-height:1.1 !important; text-align:left !important; max-width:none !important; margin:0 !important; }
  .di .hero .hero-overlay .hero-title br{ display:none; }
  .di .hero .hero-overlay .hero-sub{ font-size:16px !important; line-height:1.5 !important; text-align:left !important; max-width:none !important; margin:0 !important; }
  .di .hero .hero-overlay .hero-sub br{ display:none; }
  .di .hero .hero-overlay .hero-outcomes{ position:static !important; left:auto !important; right:auto !important; bottom:auto !important; display:flex !important; flex-direction:column !important; gap:0 !important; padding:2px 0 0 !important; margin:0 !important; width:auto !important; border-top:0 !important; }
  .di .hero .hero-overlay .outcome{ border:0 !important; padding:9px 0 0 !important; margin:0 !important; opacity:1 !important; transform:none !important; }
  .di .hero .hero-overlay .outcome .label{ font-size:16px !important; line-height:1.35 !important; }
  .di .hero .hero-overlay .hero-outcomes .oc-rail{ display:none !important; }
  .di .hero .hero-overlay .hero-live-badge{ position:static !important; align-self:flex-start !important; margin:4px 0 0 !important; font-size:14px !important; }
}

/* ── 761–1000px: the flowmap art is hidden here, so the hero must size to its
   copy instead of keeping the fixed 720px media height. ── */
@media (min-width:761px) and (max-width:1000px){
  .di .hero .hero-media{ height:auto !important; aspect-ratio:auto !important; display:flex !important; flex-direction:column !important; background:#000 !important; border:0 !important; border-radius:28px !important; overflow:hidden !important; }
  .di .hero .hero-overlay{ position:static !important; inset:auto !important; height:auto !important; display:flex !important; flex-direction:column !important; align-items:stretch !important; justify-content:flex-start !important; background:#000 !important; padding:40px 34px !important; gap:18px !important; }
  .di .hero .hero-overlay .hero-title, .di .hero .hero-overlay .hero-sub{ text-align:left !important; max-width:none !important; margin:0 !important; }
  .di .hero .hero-overlay .hero-outcomes{ position:static !important; left:auto !important; right:auto !important; bottom:auto !important; width:auto !important; margin:0 !important; }
  .di .hero .hero-overlay .hero-live-badge{ position:static !important; align-self:flex-start !important; margin:4px 0 0 !important; }
}

/* ── Mobile: bring the desktop hero flowmap back as a compact stacked
      composition — Lizzie core on top, the four product shots in a 2×2 grid,
      sitting above the copy inside the same black hero card. ── */
@media (max-width:760px){
  .di .hero .hero-overlay .hero-flow{ display:block !important; order:-1 !important; position:static !important; flex:0 0 auto !important; width:100% !important; min-height:0 !important; margin:0 0 10px !important; }
  .di .hero .hero-overlay .hero-flow .hm{ opacity:1 !important; position:static !important; left:auto !important; top:auto !important; width:100% !important; height:auto !important; transform:none !important; display:grid !important; grid-template-columns:1fr 1fr !important; gap:8px !important; }
  .di .hero .hero-overlay .hero-flow .hm-lines{ display:none !important; }
  .di .hero .hero-overlay .hero-flow .hm-node{ position:static !important; left:auto !important; top:auto !important; width:auto !important; border-radius:12px !important; box-shadow:none !important; transform:none !important; }
  .di .hero .hero-overlay .hero-flow .hm-core{ grid-column:1 / -1 !important; order:-1 !important; width:auto !important; padding:12px 16px !important; border-radius:12px !important; }
  .di .hero .hero-overlay .hero-flow .hm-core .hm-orb{ width:24px !important; height:24px !important; }
  .di .hero .hero-overlay .hero-flow .hm-core .hm-name{ font-size:20px !important; }
}