/* FraudGate — responsive / mobile layer.
   Loaded in every site page's <helmet>. Overrides the inline styles via
   attribute selectors that match React's NORMALIZED serialization
   ("font-size: 82px", "repeat(3, 1fr)" — spaces after colon/comma). */

html, body { max-width: 100%; }

/* ---------------------------------------------------------------- */
/* HAMBURGER (created by mobile-nav.js, styled here)                 */
/* ---------------------------------------------------------------- */
.fg-burger{
  display:none; width:44px; height:44px; flex:none;
  align-items:center; justify-content:center; flex-direction:column; gap:5px;
  background:transparent; border:1px solid var(--border-2,#24476B);
  border-radius:10px; cursor:pointer; padding:0; margin-left:auto;
}
.fg-burger span{
  display:block; width:22px; height:2px; border-radius:2px;
  background:var(--text,#EAF6FF);
  transition:transform .22s ease, opacity .18s ease;
}
.fg-burger.fg-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.fg-burger.fg-open span:nth-child(2){ opacity:0; }
.fg-burger.fg-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ================================================================ */
/* NAV → dropdown panel                                              */
/* ================================================================ */
@media (max-width: 900px){
  .fg-burger{ display:flex; }

  header nav{ padding:14px 18px !important; position:relative !important; }

  /* the link cluster is the single <div> child of <nav> */
  header nav > div{
    position:absolute !important; top:100% !important; left:0 !important; right:0 !important;
    display:flex !important; flex-direction:column !important; align-items:stretch !important;
    gap:2px !important;
    background:var(--nav-bg,rgba(7,15,28,.94)) !important;
    -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
    border-bottom:1px solid var(--border,#16304C);
    padding:12px 18px 20px !important;
    max-height:calc(100vh - 62px); overflow-y:auto;
    font-size:16px !important;
    transform:translateY(-10px); opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .22s ease, transform .22s ease, visibility .22s ease;
    z-index:120; box-shadow:0 26px 60px rgba(0,0,0,.45);
  }
  header.fg-nav-open nav > div{
    transform:none !important; opacity:1 !important; visibility:visible !important; pointer-events:auto !important;
  }

  header nav > div > a{ display:block !important; padding:13px 4px !important; font-size:18px !important; }
  header nav > div > a[href="#contato"],
  header nav > div > a[href="Contato.dc.html"]{
    text-align:center !important; margin-top:10px !important; padding:15px !important; border-radius:10px !important;
  }

  /* Plataforma dropdown → shown inline */
  header nav > div > .fg-drop{ padding:0 !important; position:static !important; }
  header nav > div > .fg-drop > a{ display:block !important; padding:13px 4px !important; font-size:18px !important; }
  .fg-drop-menu{
    position:static !important; transform:none !important;
    opacity:1 !important; visibility:visible !important; padding-top:2px !important;
  }
  .fg-drop-menu > div{
    min-width:0 !important; box-shadow:none !important; border:none !important;
    background:transparent !important; padding:2px 0 6px 8px !important;
  }

  /* language / theme toggles align left in the stack */
  header nav [data-fg-chrome],
  header nav button[data-noi18n]{ align-self:flex-start !important; }
}

/* ================================================================ */
/* GRID COLLAPSE                                                     */
/* ================================================================ */
/* tablet: 4- and 5-col → 2-col */
@media (min-width: 721px) and (max-width: 1024px){
  [style*="grid-template-columns: repeat(4, 1fr)"],
  [style*="grid-template-columns: repeat(5, 1fr)"]{ grid-template-columns:repeat(2,1fr) !important; }
}
/* phone: everything → single column (except explicitly kept) */
@media (max-width: 720px){
  [style*="grid-template-columns: repeat(2, 1fr)"]:not([data-keepgrid]),
  [style*="grid-template-columns: repeat(3, 1fr)"]:not([data-keepgrid]),
  [style*="grid-template-columns: repeat(4, 1fr)"]:not([data-keepgrid]),
  [style*="grid-template-columns: repeat(5, 1fr)"]:not([data-keepgrid]),
  [style*="grid-template-columns: 1fr 1fr"]:not([data-keepgrid]),
  [style*="grid-template-columns: 0.92fr 1.08fr"]:not([data-keepgrid]){
    grid-template-columns:1fr !important;
  }
}

/* ================================================================ */
/* FLEX / FIXED-WIDTH children that force horizontal overflow        */
/* ================================================================ */
@media (max-width: 720px){
  [style*="min-width: 440px"], [style*="min-width: 460px"],
  [style*="min-width: 420px"], [style*="min-width: 400px"],
  [style*="min-width: 380px"], [style*="min-width: 360px"],
  [style*="min-width: 340px"], [style*="min-width: 320px"],
  [style*="min-width: 300px"], [style*="min-width: 280px"],
  [style*="min-width: 260px"], [style*="min-width: 240px"],
  [style*="min-width: 220px"]{ min-width:0 !important; }

  /* section side padding */
  section{ padding-left:20px !important; padding-right:20px !important; }

  /* modal overlay padding */
  [style*="position: fixed"][style*="inset: 0px"]{ padding:12px !important; }
}

/* ================================================================ */
/* TYPE SCALE — clamp big inline sizes (max = original)              */
/* ================================================================ */
@media (max-width: 1024px){
  [style*="font-size: 132px"]{ font-size:clamp(52px, 15vw, 132px) !important; }
  [style*="font-size: 110px"]{ font-size:clamp(56px, 15vw, 110px) !important; }
  [style*="font-size: 88px"]{ font-size:clamp(40px, 11vw, 88px) !important; }
  [style*="font-size: 82px"]{ font-size:clamp(37px, 10vw, 82px) !important; }
  [style*="font-size: 78px"]{ font-size:clamp(36px, 9.6vw, 78px) !important; }
  [style*="font-size: 76px"]{ font-size:clamp(35px, 9.4vw, 76px) !important; }
  [style*="font-size: 66px"]{ font-size:clamp(32px, 8vw, 66px) !important; }
  [style*="font-size: 64px"]{ font-size:clamp(32px, 8vw, 64px) !important; }
  [style*="font-size: 60px"]{ font-size:clamp(30px, 7.4vw, 60px) !important; }
  [style*="font-size: 56px"]{ font-size:clamp(30px, 7vw, 56px) !important; }
  [style*="font-size: 54px"]{ font-size:clamp(29px, 6.8vw, 54px) !important; }
  [style*="font-size: 52px"]{ font-size:clamp(28px, 6.6vw, 52px) !important; }
  [style*="font-size: 50px"]{ font-size:clamp(28px, 6.4vw, 50px) !important; }
  [style*="font-size: 48px"]{ font-size:clamp(27px, 6.2vw, 48px) !important; }
  [style*="font-size: 46px"]{ font-size:clamp(26px, 6vw, 46px) !important; }
  [style*="font-size: 40px"]{ font-size:clamp(24px, 5.4vw, 40px) !important; }
  [style*="font-size: 38px"]{ font-size:clamp(23px, 5.2vw, 38px) !important; }
  [style*="font-size: 36px"]{ font-size:clamp(22px, 5vw, 36px) !important; }
  [style*="font-size: 34px"]{ font-size:clamp(22px, 4.8vw, 34px) !important; }
  [style*="font-size: 32px"]{ font-size:clamp(21px, 4.6vw, 32px) !important; }
  [style*="font-size: 30px"]{ font-size:clamp(20px, 4.4vw, 30px) !important; }
  [style*="font-size: 29px"]{ font-size:clamp(20px, 4.3vw, 29px) !important; }
  [style*="font-size: 28px"]{ font-size:clamp(20px, 4.2vw, 28px) !important; }
  [style*="font-size: 26px"]{ font-size:clamp(19px, 3.9vw, 26px) !important; }
}
/* ================================================================ */
/* ANIMATED PANELS — keep the "live" animations legible on phones    */
/* ================================================================ */
@media (max-width: 720px){
  /* HOME pipeline: rotate the horizontal lane into a vertical flow    */
  [data-lane]{ height:430px !important; margin:14px 16px 0 !important; }
  [data-lane] > [style*="left: 14%"]{ left:50% !important; top:16% !important; }
  [data-lane] > [style*="left: 86%"]{ left:50% !important; top:84% !important; }
  /* the track line (only element that is 3px tall) → vertical */
  [data-lane] > [style*="top: 50%"][style*="height: 3px"]{
    left:50% !important; right:auto !important; top:0 !important; bottom:0 !important;
    width:3px !important; height:auto !important; transform:translateX(-50%) !important;
    background:linear-gradient(180deg,#8CE4FF,#FF5656,#FFA239) !important;
  }
  [data-lane] > [style*="top: 0px"][style*="right: 0px"]{ transform:scale(.86) !important; transform-origin:top right; }
  /* stacked pipeline header labels align left, above the vertical lane */
  [data-pipehead] > div{ justify-content:flex-start !important; }

  /* CORTEX live stream: let rows wrap and drop their fixed column widths */
  [data-stream] > div{ flex-wrap:wrap !important; gap:4px 10px !important; }
  [data-stream] > div > span{ width:auto !important; text-align:left !important; }

  /* AUTOPILOT: stack the two agent columns */
  [data-stack]{ flex-direction:column !important; }
}

/* body copy — only tighten on phones so tablets keep it comfy */
@media (max-width: 560px){
  [style*="font-size: 24px"]{ font-size:19px !important; }
  [style*="font-size: 23px"]{ font-size:18px !important; }
  [style*="font-size: 22px"]{ font-size:18px !important; }
}