/* SLM marketing — mobile overrides (v3, surgical)
   Loaded after style.css. Avoids blanket transform/position resets
   (they collapsed hero panels). Targets known bad selectors. */

html, body { max-width: 100vw; overflow-x: hidden; }
*, *::before, *::after { box-sizing: border-box; }
img, svg, video, canvas, iframe { max-width: 100%; height: auto; }

/* ============================================================
   <= 900px  (tablet softening)
   ============================================================ */
@media (max-width: 900px) {
  main, section, header, footer, nav { max-width: 100vw; overflow-x: clip; }
  .max-w-6xl, .max-w-7xl, .max-w-5xl, .max-w-4xl { padding-left: 16px; padding-right: 16px; }
  nav .slm-motto { font-size: 11px; }
  nav img[src*="slm-logo"] { height: 88px !important; margin-top: -14px !important; margin-bottom: -10px !important; }
}

/* ============================================================
   <= 768px  (PHONE)
   ============================================================ */
@media (max-width: 768px) {

  /* Container clip per top-level block */
  section, header, footer, nav, article, aside, main > * {
    max-width: 100vw;
    overflow-x: clip;
  }

  /* ---- NAV ---- */
  nav > div { gap: 6px !important; padding-left: 10px !important; padding-right: 10px !important; padding-bottom: 8px !important; }
  nav img[src*="slm-logo"] { height: 56px !important; margin-top: -8px !important; margin-bottom: -6px !important; }
  nav .slm-motto { font-size: 9px !important; line-height: 1.05; }
  .np-nav-promo { display: none !important; }
  nav a[href="#cta"], nav a[data-dl-cta] { padding: 7px 11px !important; font-size: 11px !important; }

  /* ---- Universal: kill white-space:nowrap on long inline content ---- */
  .slm-suffix, .type-priv, .type-priv-inner, .type-priv-txt,
  .ebg-wow, .ebg-text {
    white-space: normal !important;
  }

  /* ---- Heading clamps ---- */
  h1 { font-size: clamp(22px, 6.5vw, 30px) !important; line-height: 1.18 !important; }
  h2 { font-size: clamp(20px, 6vw, 28px) !important; line-height: 1.2 !important; }
  h3 { font-size: clamp(17px, 5vw, 22px) !important; line-height: 1.25 !important; }
  h1, h2, h3, p, li { overflow-wrap: break-word; }

  /* Inline clamp() headings that scale too high */
  [style*="clamp(32"], [style*="clamp(34"], [style*="clamp(36"],
  [style*="clamp(40"], [style*="clamp(44"], [style*="clamp(48"],
  [style*="clamp(52"], [style*="clamp(56"], [style*="clamp(60"] {
    font-size: clamp(20px, 6vw, 28px) !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
  }

  /* ---- HOW-IT-WORKS hero (t3-head) ---- */
  .t3-section, #how {
    padding-left: 6px !important; padding-right: 6px !important;
    margin-top: 0 !important;
    padding-top: 24px !important;
  }
  .t3-section::before { top: 0 !important; height: 100% !important; }
  .t3-wrap { padding: 0 10px !important; max-width: 100vw !important; }
  .t3-head { margin-bottom: 24px !important; padding: 0 8px !important; }
  .t3-head h1, .t3-head h2 {
    margin: 24px 0 0 0 !important;
    font-size: clamp(18px, 5.5vw, 24px) !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
  }
  .t3-head p {
    font-size: clamp(20px, 6vw, 28px) !important;
    line-height: 1.2 !important;
    max-width: 100% !important;
    padding: 0 6px !important;
    transform: none !important;
  }
  .t3-head h1 em, .t3-head h2 em { font-size: clamp(14px, 4.5vw, 18px) !important; }
  .ebg-wow, .ebg-text { flex-wrap: wrap; font-size: clamp(14px, 4.5vw, 18px) !important; }
  .slm-l1 { display: inline-block; font-size: .7em; }
  .slm-suffix { display: inline !important; font-size: .55em !important; }
  .type-priv-txt { font-size: 1em !important; line-height: 1.15 !important; }
  .slm-wallet-wrap { margin: 8px auto !important; max-width: 100% !important; }
  .slm-wallet { width: 100% !important; max-width: 320px !important; margin: 0 auto !important; }

  /* ---- HOW grid 1-col (already 1-col below 760, force) ---- */
  .t3-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .t3-card { padding: 16px !important; }

  /* ---- PROBLEM STRIP 3-act — reflow absolute text boxes ---- */
  .ps-act { height: auto !important; padding: 16px !important; display: block !important; border-radius: 18px !important; }
  .ps-a1 .ps-a1-text, .ps-a2-text, .ps-a3-text {
    position: relative !important;
    top: auto !important; left: auto !important;
    transform: none !important;
    max-width: 100% !important;
    padding: 0 0 14px !important;
  }
  /* Chaos pile — kill absolute positioning, lay out as 1-col stack with gap */
  .ps-chaos {
    height: auto !important; min-height: 0 !important;
    padding: 12px !important;
    mask-image: none !important; -webkit-mask-image: none !important;
    display: flex !important; flex-direction: column !important; gap: 8px !important;
    overflow: visible !important;
  }
  .ps-chaos .ps-card {
    position: relative !important;
    top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
    transform: none !important;
    max-width: 100% !important; width: 100% !important;
    margin: 0 !important;
    font-size: 12px !important;
    animation: none !important;
  }
  .ps-chaos .ps-csv {
    position: relative !important;
    top: auto !important; left: auto !important; right: auto !important;
    transform: none !important;
    max-width: 100% !important; width: 100% !important;
    margin: 0 !important; font-size: 10px !important;
  }
  .ps-chaos .ps-particles { display: none !important; }
  .ps-flow {
    height: auto !important;
    min-height: 0 !important;
    padding: 16px !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
  }
  /* ps-a2 .ps-flow has padding:24px 230px 24px 36% on desktop — kill it */
  .ps-a2 .ps-flow { padding: 16px !important; }
  /* Tabs row: 6 nodes overflow on phone — wrap to 3 per row */
  .ps-flow-row {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 10px !important;
  }
  .ps-flow-row .ps-node { flex: 0 0 28% !important; min-width: 0 !important; }
  .ps-flow-row .ps-arrow { display: none !important; }
  .ps-flow-row .ps-circle { width: 34px !important; height: 34px !important; font-size: 13px !important; }
  /* Kill outward pulse rings on phone — they balloon ~2x and overlap neighbors */
  .ps-flow-row .ps-node .ps-circle::after,
  .ps-flow-row .ps-node .ps-circle::before {
    inset: -2px !important;
    animation: none !important;
    opacity: .55 !important;
    box-shadow: none !important;
  }
  .ps-flow-row .ps-lbl { font-size: 12px !important; }
  .ps-flow-row .ps-ts { font-size: 10px !important; }
  /* ps-cap (time lost) — relative under flow */
  .ps-a2 .ps-cap {
    position: relative !important;
    right: auto !important; top: auto !important;
    transform: none !important;
    width: auto !important; margin-top: 14px !important;
  }
  .ps-wrap { padding: 0 12px !important; max-width: 100vw !important; }

  /* Problem 3 — leak stage: orb + 6 ps-leak labels in 2-col grid, no overlap */
  .ps-a3 .ps-leakstage {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 16px 12px !important;
  }
  .ps-a3 .ps-svglines { display: none !important; }
  .ps-a3 .ps-orb {
    position: relative !important;
    top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
    transform: none !important;
    width: 130px !important; height: 130px !important;
    margin: 8px auto !important;
    grid-column: 1 / -1 !important;
    justify-self: center !important;
  }
  .ps-a3 .ps-orb::before, .ps-a3 .ps-orb::after {
    inset: -10px !important; animation: none !important; opacity: .5 !important;
  }
  .ps-a3 .ps-leakstage .ps-leak {
    position: relative !important;
    top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  /* HOW step-2 mapping engine (t3-fall) — particles overlap cards */
  .t3-fall { min-height: 320px !important; height: auto !important; }
  .t3-fall-particles, .t3-fallsvg { opacity: .35 !important; }
  /* keep droppad's translateX(-50%) centering — do NOT null it */
  .t3-droppad { left: 50% !important; transform: translateX(-50%) !important; }

  /* Step-2 mapping: cards left col, SLM badge right col (side-by-side), Unified full-row below */
  .t3-map {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 0 !important;
  }
  .t3-map-col {
    flex: 1 1 60% !important;
    width: auto !important;
    min-width: 0 !important;
  }
  .t3-slm {
    flex: 0 0 34% !important;
    width: 34% !important;
    display: flex !important;
    justify-content: center !important;
    align-self: center !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .t3-slm-box { margin: 0 auto !important; }
  .t3-unified { flex: 0 0 100% !important; width: 100% !important; }

  /* Bottom DCAT pill (Drop / Compute / Act / Track) — was scrolling off */
  .t3-strip {
    flex-wrap: wrap !important;
    justify-content: center !important;
    border-radius: 22px !important;
    padding: 14px !important;
    gap: 12px 8px !important;
    margin-top: 24px !important;
  }
  .t3-strip .t3-conn { display: none !important; }
  .t3-strip .t3-stage {
    flex: 0 0 calc(50% - 6px) !important;
    min-width: 0 !important;
    justify-content: flex-start !important;
    gap: 8px !important;
  }
  .t3-stage-lbl b { font-size: 13px !important; }
  .t3-stage-lbl span { font-size: 10px !important; }
  .t3-stage-ico { width: 36px !important; height: 36px !important; font-size: 14px !important; flex: 0 0 36px !important; }

  /* ---- INSIDE-SLM / DECISION-MODEL ---- */
  .is-section, .dm-section, #decision-model { padding-left: 8px !important; padding-right: 8px !important; }
  .is-mega { grid-template-columns: 1fr !important; gap: 14px !important; }
  /* Decision engine panel — restore 4-quadrant layout (was collapsed to 1-col at 1100) */
  .is-engine {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto auto auto !important;
    gap: 12px 8px !important;
    min-height: 0 !important;
  }
  .is-elbl.tl { grid-column: 1 !important; grid-row: 1 !important; justify-self: start !important; }
  .is-elbl.tr { grid-column: 2 !important; grid-row: 1 !important; justify-self: end !important; }
  .is-orb     { grid-column: 1 / -1 !important; grid-row: 2 !important; justify-self: center !important; }
  .is-elbl.bl { grid-column: 1 !important; grid-row: 3 !important; justify-self: start !important; }
  .is-elbl.br { grid-column: 2 !important; grid-row: 3 !important; justify-self: end !important; }
  .is-elbl { font-size: 10.5px !important; padding: 5px 9px !important; white-space: normal !important; max-width: 46vw !important; }
  .dm-wrap { padding: 32px 16px !important; max-width: 100% !important; }
  .dm-stage { margin-top: 24px !important; gap: 12px !important; }
  .dm-node {
    position: relative !important;
    width: 100% !important; max-width: 100% !important;
    top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
    transform: none !important;
    margin-left: 0 !important; margin-right: 0 !important;
    opacity: 1 !important; filter: none !important;
  }
  .dm-engine {
    position: relative !important;
    top: auto !important; left: auto !important;
    transform: none !important;
    width: 200px !important; height: 200px !important;
    margin: 12px auto !important;
    opacity: 1 !important;
  }
  .dm-head { font-size: clamp(22px, 6vw, 30px) !important; line-height: 1.15 !important; }

  /* ---- Tailwind grid collapse to 1 col on phone ---- */
  [class*="grid-cols-2"], [class*="grid-cols-3"], [class*="grid-cols-4"] {
    grid-template-columns: 1fr !important;
  }
  /* Exception: privacy strip 4 feature cells — keep 2 columns so they aren't stretched ugly */
  section.relative .grid.grid-cols-2 { grid-template-columns: repeat(2, 1fr) !important; }

  /* ---- Tables ---- */
  table { display: block; max-width: 100%; overflow-x: auto; }
  table tbody tr td, table thead tr th { white-space: normal; font-size: 12px; }
  table tbody tr td:first-child, table thead tr th:first-child { min-width: 140px; }

  /* ---- CTAs full width ---- */
  a[data-dl-cta] { width: 100%; justify-content: center; }
  .btn-download, .btn-primary { width: 100%; max-width: 100%; }

  /* ---- Hero badge image (hero-bg section) ---- */
  .hero-img { width: 92% !important; }
  .hero-bg { padding-left: 8px !important; padding-right: 8px !important; }

  /* ---- Pricing plans grid ---- */
  .plan-grid { grid-template-columns: 1fr !important; }

  /* ---- Inline width:1100/1280/1600 forced widths ---- */
  [style*="width:1100px"], [style*="width:1280px"], [style*="width:1600px"],
  [style*="min-width:1100px"], [style*="min-width:1280px"] {
    width: 100% !important; min-width: 0 !important; max-width: 100% !important;
  }

  /* ---- Section vertical padding ---- */
  section { padding-top: 24px !important; padding-bottom: 24px !important; }

  /* ---- Footer cols stack ---- */
  footer [class*="grid-cols"], footer .row { grid-template-columns: 1fr !important; }
  footer { padding-left: 16px !important; padding-right: 16px !important; }

  /* ---- Bootstrap (how-to-use) ---- */
  .container, .container-fluid, .container-lg, .container-md, .container-sm {
    padding-left: 14px !important; padding-right: 14px !important;
    max-width: 100% !important;
  }
  .row { margin-left: 0 !important; margin-right: 0 !important; }
  [class*="col-"] { padding-left: 6px !important; padding-right: 6px !important; }

  /* ---- Privacy strip golden card pad shrink ---- */
  section.relative [style*="border:2px solid #D4A017"],
  section.relative [style*="border: 2px solid #D4A017"] {
    padding: 12px !important;
    border-radius: 16px !important;
  }
}

/* ============================================================
   <= 420px  (small phones)
   ============================================================ */
@media (max-width: 420px) {
  h1 { font-size: clamp(20px, 6vw, 26px) !important; }
  h2 { font-size: clamp(18px, 5.5vw, 24px) !important; }
  nav img[src*="slm-logo"] { height: 48px !important; }
  nav a[href="#cta"], nav a[data-dl-cta] { padding: 5px 8px !important; font-size: 10px !important; }
  .t3-head p { font-size: clamp(18px, 5.5vw, 24px) !important; }
  section { padding-top: 18px !important; padding-bottom: 18px !important; }
}