/* Mobile overrides — applied AFTER each page's inline <style>.
   IMPORTANT: React renders into #root, so all selectors here must NOT
   use the `body > nav` / `body > footer` pattern (which never matches).
   Use `nav`, `footer`, `main` directly. */

@media (max-width: 720px) {
  /* Hide the middle nav links — robust against React structure shifts. */
  nav > div > div[style*="flex: 1"][style*="gap: 22"],
  nav > div > div[style*="justifyContent"][style*="center"][style*="gap: 22"] {
    display: none !important;
  }

  /* Nav: tighter padding; wordmark centered, hamburger on left.
     The middle nav links are already hidden above. The Book-a-demo
     button is moved INTO the drawer on mobile; hide it on the nav bar. */
  nav > div {
    padding: 0 14px !important;
    gap: 8px !important;
    justify-content: flex-start !important;
    position: relative !important;
  }
  nav img { max-height: 30px !important; width: auto !important; }
  nav { height: 60px !important; }

  /* Hide the Book-a-demo CTA on the nav bar (it lives in the drawer).
     `nav a` is fine — hero CTAs live in `main section`, not `nav`. */
  nav > div > div[style*="flexShrink: 0"],
  nav a[style*="background: rgb(0, 53, 146)"],
  nav a[style*="background: #003592"] {
    display: none !important;
  }

  /* Wordmark anchor: absolute-center it within the nav */
  nav > div > a:first-child {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
  }

  /* Hamburger button: pinned to the RIGHT of the nav */
  nav .dmm-btn {
    margin-left: auto !important;
    margin-right: 0 !important;
  }

  /* Lock layout width to viewport so meta viewport doesn't expand */
  html, body { overflow-x: hidden !important; max-width: 100vw !important; }
  body, main, main > section { max-width: 100vw !important; }

  /* Industries matrix override — per-page CSS sets min-width:600px for
     horizontal-scroll, but the wrapper doesn't scroll. Strip + stack. */
  main section > div[style*="grid-template-columns: 1.6fr repeat(4, 1fr)"] {
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    white-space: normal !important;
  }

  /* Per-page CSS only collapses GRIDS that are DIRECT children of <section>;
     many grids are nested inside wrappers. Collapse them at any depth. */
  main section div[style*="grid-template-columns: repeat(6"],
  main section div[style*="grid-template-columns: repeat(4"],
  main section div[style*="grid-template-columns: repeat(3"],
  main section div[style*="grid-template-columns: repeat(2"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 18px !important;
  }

  /* Catch-all: no inline element can exceed viewport */
  main *, footer *, nav * { max-width: 100% !important; }

  /* Tap targets ≥ 44px per Apple HIG */
  main section a[style*="border-radius: 8"],
  main section a[style*="border-radius: 10"],
  main section a[style*="border-radius: 12"] {
    min-height: 44px !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  /* Hide the "SCROLL" indicator under the hero CTAs on mobile */
  main section > div[style*="doluntsBounce"] {
    display: none !important;
  }

  /* ── HERO (mobile) — clean, organised, everything above the fold ── */
  /* Section: cap height so CTAs always sit above the Safari toolbar.
     Original inline is `height: 92vh; min-height: 640px`. */
  main section[data-screen-label*="Hero"] {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }
  main section[data-screen-label*="Hero"] > div[style*="z-index: 2"] {
    padding: 64px 18px 28px !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    height: auto !important;
    min-height: calc(100dvh - 60px) !important;
  }

  /* Eyebrow chip — hide on mobile; the headline says the same thing.
     Scope strictly to `div` with the subtle color so we don't clobber the
     ButtonPrimary anchor (which also has uppercase/letter-spacing). */
  main section[data-screen-label*="Hero"] > div[style*="z-index: 2"] > div[style*="color: rgb(154, 160, 172)"][style*="text-transform"][style*="uppercase"] {
    display: none !important;
  }

  /* Headline — fit on 2 lines, tighter spacing, sits near the top */
  main section[data-screen-label*="Hero"] h1 {
    font-size: clamp(30px, 8.6vw, 40px) !important;
    line-height: 1.04 !important;
    letter-spacing: -1.2px !important;
    margin: 8px 0 12px !important;
  }

  /* Description — short, tight */
  main section[data-screen-label*="Hero"] p {
    font-size: 13px !important;
    line-height: 1.45 !important;
    max-width: 320px !important;
    margin: 0 auto 16px !important;
    opacity: 0.86;
  }

  /* CTA row (Hero AND the bottom "Book a demo / See the platform" banner).
     The per-page CSS forces `flex-wrap: wrap` on every `gap: 12` flex row;
     here we force them back to nowrap + center so the two buttons sit
     side-by-side, pretty and balanced. */
  main section[data-screen-label*="Hero"] div[style*="display: flex"][style*="gap"],
  main section div[style*="display: flex"][style*="gap: 12"] {
    flex-wrap: nowrap !important;
    gap: 10px !important;
    justify-content: center !important;
    align-items: center !important;
    margin-top: 4px !important;
    width: auto !important;
  }
  main section[data-screen-label*="Hero"] div[style*="display: flex"][style*="gap"] > a,
  main section[data-screen-label*="Hero"] div[style*="display: flex"][style*="gap"] > button,
  main section div[style*="display: flex"][style*="gap: 12"] > a,
  main section div[style*="display: flex"][style*="gap: 12"] > button {
    flex: 0 1 auto !important;
    padding: 12px 18px !important;
    font-size: 11px !important;
    letter-spacing: 1px !important;
    white-space: nowrap !important;
    min-width: 0 !important;
    min-height: 44px !important;
    border-radius: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Stronger vignette over the background drone so copy reads cleanly */
  main section[data-screen-label*="Hero"] > div[style*="background:"][style*="linear-gradient"]:first-of-type,
  main section[data-screen-label*="Hero"] > div[style*="z-index: 1"]:first-of-type {
    background: linear-gradient(180deg,
      rgba(29,29,29,0.85) 0%,
      rgba(29,29,29,0.55) 30%,
      rgba(29,29,29,0.45) 60%,
      rgba(29,29,29,0.9) 100%) !important;
  }

  /* Marquee section: collapse outer top padding so the strip sits right
     under the result counts. */
  main section[data-screen-label*="Industries marquee"] {
    padding-top: 0 !important;
    padding-bottom: 32px !important;
    margin-top: -32px !important;
  }
  main section[data-screen-label*="Industries marquee"] > div {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    border-top: 0 !important;
  }

  /* Product tile cards (SafetyVision/AssetIQ/Sentinel/StockFlight on home):
     much less wasted vertical space on mobile. */
  main section a[style*="min-height: 240px"],
  main section a[style*="minHeight: 240"] {
    min-height: 0 !important;
    padding: 18px 16px !important;
    gap: 10px !important;
  }
  main section a[style*="min-height: 240px"] h3,
  main section a[style*="minHeight: 240"] h3 {
    font-size: 17px !important;
    line-height: 1.25 !important;
  }

  /* "Where the fleet flies" panel — show the whole drone, not a crop.
     Also drop the big min-height so the section doesn't waste space. */
  main section > div[style*="min-height: 460px"],
  main section > div[style*="minHeight: 460"] {
    min-height: 0 !important;
  }
  main section > div[style*="min-height: 460px"] > img,
  main section > div[style*="minHeight: 460"] > img {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    max-height: 240px !important;
    object-fit: contain !important;
    object-position: center !important;
    opacity: 1 !important;
    display: block !important;
  }
  /* The dark gradient overlay above the image stops covering content */
  main section > div[style*="min-height: 460px"] > div:nth-child(2),
  main section > div[style*="minHeight: 460"] > div:nth-child(2) {
    display: none !important;
  }
  /* Inner copy block: not absolute on mobile, sits below the image */
  main section > div[style*="min-height: 460px"] > div:last-child,
  main section > div[style*="minHeight: 460"] > div:last-child {
    padding: 22px 18px 26px !important;
    max-width: 100% !important;
  }

  /* Footer: compact, 2x logo, tighter padding, no right whitespace */
  footer > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 22px 14px !important;
    padding: 36px 18px 22px !important;
    max-width: 100% !important;
  }
  /* First column (brand + address) spans full width above the link cols */
  footer > div[style*="grid-template-columns"] > div:first-child {
    grid-column: 1 / -1 !important;
  }
  /* 2x bigger wordmark in footer */
  footer img { height: 44px !important; max-height: 44px !important; margin-bottom: 14px !important; }
  /* Tighter column titles + link rows */
  footer > div[style*="grid-template-columns"] > div > div:first-child {
    margin-bottom: 10px !important;
    font-size: 9px !important;
  }
  footer ul { gap: 6px !important; }
  footer ul li a { font-size: 13px !important; }
  /* Legal row */
  footer > div:last-child {
    padding: 14px 18px !important;
    flex-direction: column !important;
    gap: 6px !important;
    text-align: center !important;
    max-width: 100% !important;
  }

  /* Industries: leading-product pills ("SafetyVision · AssetIQ · …") — turn
     them into full-width stripes that fill the row on mobile. */
  main section a[style*="border-radius: 999"] {
    flex: 1 1 100% !important;
    justify-content: center !important;
    padding: 12px 14px !important;
    font-size: 13px !important;
    border-radius: 12px !important;
  }

  /* Platform: "Ask the fleet what it saw last night" dashboard buttons row.
     Make the four ButtonSecondary CTAs more compact (smaller font + 2-up). */
  main section div[style*="display: flex"][style*="flex-wrap: wrap"] > a[style*="border-radius"] {
    padding: 10px 12px !important;
    font-size: 11px !important;
    letter-spacing: 0.6px !important;
    flex: 1 1 calc(50% - 6px) !important;
    min-width: 0 !important;
    justify-content: center !important;
    text-align: center !important;
  }

  /* Industries chip strip, etc. — let flex rows wrap */
  main section [style*="display: flex"][style*="gap"][style*="flex-wrap"],
  main section ul[style*="display: flex"] {
    flex-wrap: wrap !important;
  }
}

@media (max-width: 480px) {
  /* Collapse nested grids fully to 1-col on narrow phones */
  main section div[style*="grid-template-columns: repeat(6"],
  main section div[style*="grid-template-columns: repeat(4"],
  main section div[style*="grid-template-columns: repeat(3"],
  main section div[style*="grid-template-columns: repeat(2"] {
    grid-template-columns: 1fr !important;
  }
}

/* ─── "Deployed across" — conveyor marquee (mobile + desktop) ─────── */
/* The chips are in a `display: grid; grid-template-columns: repeat(6, 1fr)`.
   We override to a horizontal flex strip that auto-scrolls. The dmm-marquee
   JS clones the children so the loop is seamless. */
main section div[style*="grid-template-columns: repeat(6, 1fr)"][data-marquee="1"] {
  display: flex !important;
  grid-template-columns: none !important;
  gap: 0 !important;
  width: 100% !important;
  overflow: hidden !important;
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  position: relative;
}
/* One inner track containing 2× the chip list, side-by-side at a uniform
   gap. We translate by -50% so the second half slides in exactly where
   the first half started, making the loop perfectly seamless. */
main section div[data-marquee="1"] > .dmm-track {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 28px !important;
  padding-right: 28px !important;
  animation: dmm-marquee 40s linear infinite;
  white-space: nowrap;
}
/* Each chip — equal spacing comes from the track's gap (no margins!) */
main section div[data-marquee="1"] .dmm-track > div {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  padding: 12px 22px !important;
  margin: 0 !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.03) !important;
  font-family: "Jost", "Avantgarde", system-ui, sans-serif !important;
  letter-spacing: 0.4px !important;
  color: #d9dce3 !important;
  font-size: 14px !important;
  position: relative;
}
main section div[data-marquee="1"] .dmm-track > div::before {
  content: "";
  width: 7px; height: 7px; border-radius: 50%;
  background: #003592;
  box-shadow: 0 0 10px rgba(0,53,146,0.6);
}
@keyframes dmm-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (max-width: 720px) {
  /* Consistent inter-chip spacing across track boundaries: the gap on the
     track is the same as the margin between the two tracks. */
  main section div[data-marquee="1"] {
    padding: 14px 0 !important;
    gap: 0 !important;
    align-items: center !important;
  }
  main section div[data-marquee="1"] > .dmm-track {
    gap: 14px !important;
    padding: 0 !important;
    margin-right: 14px !important;
    animation-duration: 36s !important; /* slow enough to read */
  }
  main section div[data-marquee="1"] .dmm-track > div {
    padding: 11px 18px !important;
    font-size: 13px !important;
    background: rgba(255,255,255,0.04) !important;
    border-color: rgba(255,255,255,0.16) !important;
  }
}

@supports (padding: env(safe-area-inset-top)) {
  @media (max-width: 720px) {
    nav { padding-top: env(safe-area-inset-top) !important; }
  }
}