/* ============================================================
   TwinKnowledge — mobile layer
   All layout rules live inside @media (max-width:860px) so the
   desktop (PC / Mac browser) experience is byte-for-byte unchanged
   above the breakpoint. Overrides use !important to beat inline
   styles. NOTE: the DC runtime re-serializes inline styles as
   "prop: value; " (space after colon), so [style*=] selectors below
   MUST match that spaced form.
   ============================================================ */

/* --- Nav base (desktop): hamburger + mobile-demo hidden --------- */
[data-tknav]{position:relative}
[data-navtoggle]{display:none}
[data-navmobiledemo]{display:none}

@media (max-width: 860px){

  /* ---------- page shell: tighten side gutters ---------- */
  [style*="max-width: 1280px"]{padding-left:20px !important;padding-right:20px !important}
  [style*="max-width: 1200px"]{padding-left:20px !important;padding-right:20px !important}

  /* big hero vertical padding trims down */
  [style*="padding: 76px 32px 88px"]{padding-top:44px !important;padding-bottom:48px !important}

  /* ---------- grids: stack everything by default ---------- */
  [style*="display: grid"]{grid-template-columns:1fr !important}

  /* …but keep compact stat / icon grids multi-up so they don't tower.
     Declared AFTER the blanket rule so they win (equal specificity). */
  [style*="grid-template-columns: repeat(4, 1fr)"]{grid-template-columns:1fr 1fr !important}
  [style*="grid-template-columns: repeat(3, 1fr)"]{grid-template-columns:1fr 1fr !important}
  [style*="grid-template-columns: repeat(5, 1fr)"]{grid-template-columns:1fr 1fr 1fr !important}

  /* ---------- typography: scale display sizes down ---------- */
  [style*="font-size: 50px"]{font-size:30px !important}
  [style*="font-size: 48px"]{font-size:30px !important}
  [style*="font-size: 44px"]{font-size:29px !important}
  [style*="font-size: 40px"]{font-size:30px !important}
  [style*="font-size: 38px"]{font-size:27px !important}
  [style*="font-size: 34px"]{font-size:24px !important}

  /* let forced-single-line copy wrap on small screens */
  [style*="white-space: nowrap"]{white-space:normal !important}

  /* ---------- hero video: natural aspect, no stretched crop ---------- */
  [data-herovideo]{margin-top:20px !important;margin-bottom:0 !important}
  [data-herovideo] > div{height:auto !important}
  [data-herovideo] video{height:auto !important;object-fit:contain !important}

  /* ---------- legal / case-study side TOC: hide on mobile ---------- */
  .toc{display:none !important}

  /* ---------- Nav: collapse links into a dropdown panel ---------- */
  [data-navcta]{display:none !important}
  [data-navtoggle]{display:inline-flex !important}

  [data-navlinks]{
    position:absolute !important;
    top:60px; left:0; right:0;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:2px !important;
    background:rgba(10,16,26,0.98);
    -webkit-backdrop-filter:blur(16px) saturate(140%);
    backdrop-filter:blur(16px) saturate(140%);
    border-bottom:1px solid rgba(255,255,255,0.08);
    box-shadow:0 16px 32px rgba(0,0,0,0.45);
    padding:10px 16px 18px !important;
    z-index:70;
  }
  [data-tknav][data-open="false"] [data-navlinks]{display:none !important}
  [data-navlinks] > div{width:100%}
  [data-navlinks] a{
    width:100%;
    justify-content:flex-start !important;
    text-align:left !important;
    padding:12px 12px !important;
    font-size:15px !important;
    border-radius:6px;
  }
  [data-navmobiledemo]{display:flex !important}
}