/*
  Makes the 1440px page designs adapt to laptops, tablets and phones. Every page links this file after its own
  <style>. The designs set their layout with inline styles, so the rules below use !important and attribute
  selectors ([style*="..."]) to override them; edit a layout in the page, and only touch this file to change
  how it collapses.

  Breakpoints:  <= 1500px  the header wraps (menu moves to its own scrolling row)
                <= 1100px  tablets: side gutters shrink, two-column sections stack, 3-4 column grids become 2
                <=  820px  phones: everything is one column, type scales down
*/

/* ---- all sizes: no fixed page width -------------------------------------------------------------- */
html, body { min-width: 0 !important; }
.pg { width: 100% !important; max-width: 1440px; overflow-x: clip; overflow-y: visible; }
img, svg { max-width: 100%; }

/* A nav link's words must never wrap onto a second line - if a link's own width ever gets squeezed
   (wrong breakpoint, unusual browser chrome, an OS zoom level), it overflows instead of breaking
   mid-word ("Android" / "debug"), which is the only way a real user has actually hit this. */
.pg > .in:first-child nav a { white-space: nowrap; }
.pg > .in:first-child > div:last-child a { white-space: nowrap; }

/* ---- header: brand + buttons on the first row, the menu on a row of its own ------------------------ */
/* 1500px, not 1240px: at the page's own 1440px design width minus a scrollbar minus the language
   select's width, the nav's 9 links no longer fit on one line and individual links start breaking
   mid-word instead of wrapping as a row - this must switch to the two-row header before that happens,
   comfortably above every common laptop width (1280/1366/1440). */
@media (max-width: 1500px) {
  .pg > .in:first-child { height: auto !important; flex-wrap: wrap; row-gap: 10px; padding-top: 16px !important; padding-bottom: 0 !important; }
  .pg > .in:first-child > div:first-child { display: contents !important; }
  .pg > .in:first-child > div:first-child > .disp { order: 1; }
  .pg > .in:first-child > div:last-child { order: 2; margin-left: auto; }
  .pg > .in:first-child > div:first-child > nav {
    order: 3; flex: 1 1 100%; overflow-x: auto; white-space: nowrap; gap: 20px !important;
    padding: 4px 0 12px; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .pg > .in:first-child > div:first-child > nav::-webkit-scrollbar { display: none; }
  .pg > .in:first-child nav a { padding: 8px 0; }
}

/* ---- tablets ------------------------------------------------------------------------------------ */
@media (max-width: 1100px) {
  .in { padding-left: 40px !important; padding-right: 40px !important; }
  h1 { font-size: clamp(38px, 7.2vw, 64px) !important; line-height: 1.04 !important; }
  h2 { font-size: clamp(30px, 5.4vw, 44px) !important; line-height: 1.08 !important; }

  /* text + visual sections stack */
  .brow, .brow.flip { grid-template-columns: 1fr !important; gap: 32px !important; padding: 48px 0 !important; }
  .brow.flip .btext { order: 0 !important; }
  [style*="minmax(0,1fr) minmax(0,1.08fr)"],
  [style*="minmax(0,.7fr) minmax(0,1.3fr)"],
  [style*="minmax(0,.8fr) minmax(0,1.2fr)"],
  [style*="minmax(0,1fr) minmax(0,1fr)"] { grid-template-columns: 1fr !important; gap: 36px !important; }

  /* wide card grids become two columns */
  [style*="repeat(4,minmax(0,1fr))"], [style*="repeat(3,minmax(0,1fr))"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .feat { padding-right: 0 !important; }

  /* the two diagrams (Android debug, On-Premise) run top to bottom */
  .flow, .map { display: flex !important; flex-direction: column; gap: 0; }
  .flow > *, .map > * { align-self: stretch !important; }
  .flow > .link, .map > .link { position: relative; flex-direction: row; justify-content: flex-start; height: 64px; padding: 0 0 0 48px; }
  .flow > .link i, .map > .link i { position: absolute; left: 28px; top: 0; width: 0; height: 100%; border-top: 0 !important; border-left: 2px solid #6C9BFF; }
  .map > .link.dash i { border-left-style: dashed; }
  .flow > .link i:after, .map > .link i:after {
    right: auto; left: -6px; top: auto; bottom: -1px;
    border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 9px solid #6C9BFF; border-bottom: 0;
  }
  .map > .link.both i:before {
    left: -6px; top: -1px; border-right: 5px solid transparent; border-left: 5px solid transparent;
    border-bottom: 9px solid #6C9BFF; border-top: 0;
  }
  .map > .link.rev i:before { display: none; }
  .map > .link.rev i:after { display: block; }
  /* On-Premise: You -> (Wi-Fi/VPN) -> PC -> (USB) -> test phone, then the optional cloud */
  .map > :nth-child(1) { order: 1; }   /* you */
  .map > :nth-child(4) { order: 2; }   /* Wi-Fi / VPN */
  .map > :nth-child(6) { order: 3; }   /* your PC */
  .map > :nth-child(7) { order: 4; }   /* USB */
  .map > :nth-child(8) { order: 5; }   /* test phone */
  .map > :nth-child(5) { order: 6; }   /* PC dials out */
  .map > :nth-child(3) { order: 7; }   /* MultAi Cloud */
  .map > :nth-child(2) { display: none; }
}

/* ---- phones ------------------------------------------------------------------------------------- */
@media (max-width: 820px) {
  body { font-size: 16px; }
  .in { padding-left: 20px !important; padding-right: 20px !important; }
  .pg > .in:not(:first-child) { padding-top: 52px !important; padding-bottom: 52px !important; }
  h1 { font-size: clamp(34px, 10.5vw, 46px) !important; }
  h2 { font-size: clamp(27px, 8vw, 36px) !important; }
  .btext h3 { font-size: 30px !important; }
  p[style*="font-size:21px"], p[style*="font-size:20px"], p[style*="font-size:19px"], p[style*="font-size:22px"] { font-size: 17.5px !important; }
  div[style*="font-size:19px"], div[style*="font-size:26px"] { font-size: 17.5px !important; }

  /* one column everywhere */
  [style*="repeat(4,minmax(0,1fr))"], [style*="repeat(3,minmax(0,1fr))"], [style*="repeat(2,minmax(0,1fr))"],
  [style*="1.15fr 1fr"], [style*="340px minmax(0,1fr)"], .pair, .two { grid-template-columns: 1fr !important; }
  [style*="64px minmax(0,1fr)"], .step, .setup { grid-template-columns: 48px minmax(0,1fr) !important; gap: 14px !important; }
  [style*="340px minmax(0,1fr)"] > :first-child { border-right: 0 !important; border-bottom: 1px solid #243049; }

  /* bands with a headline and buttons, and the footer, stack */
  .pg > .in[style*="justify-content:space-between"]:not(:first-child) { flex-direction: column !important; align-items: flex-start !important; gap: 24px !important; }
  div:has(> .btn) { flex-wrap: wrap; }
  .btn { max-width: 100%; }
  [style*="gap:56px"] { gap: 12px 28px !important; flex-wrap: wrap; }
  .pg > .in[style*="align-items:center;gap:40px"] { flex-wrap: wrap; gap: 12px 20px !important; }

  /* phone-frame and tall mock pieces should not force sideways scrolling */
  .phone { width: 100% !important; max-width: 310px; }
  .mono, .log { overflow-wrap: anywhere; }

  /* comparison tables keep their columns and scroll sideways, with the row label pinned */
  .tbl, .cmp, .roles { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tbl { grid-template-columns: minmax(170px, 1.1fr) minmax(190px, 1fr) minmax(190px, 1fr) !important; }
  .cmp { grid-template-columns: minmax(150px, .8fr) repeat(2, minmax(190px, 1fr)) !important; }
  .roles { grid-template-columns: minmax(190px, 1.3fr) repeat(4, minmax(112px, 1fr)) !important; }
  .tbl > .k, .cmp > .k, .roles > .k { position: sticky; left: 0; background: #121926; z-index: 1; }
  .tbl > .head:first-child, .cmp > .h:first-child, .roles > .h:first-child { position: sticky; left: 0; z-index: 1; }
  .tbl > div, .cmp > div, .roles > div { padding: 12px 14px !important; font-size: 14px !important; }
}

@media (max-width: 380px) {
  .in { padding-left: 16px !important; padding-right: 16px !important; }
  .btn { padding: 0 18px; font-size: 15px; }
}