/* ============================================================
   VALTRICS · Mobile optimization layer
   ------------------------------------------------------------
   Additive, mobile-only refinements shared across every
   user-facing page (marketing + engine tools). Loaded LAST so
   it wins over page-level <style> blocks and the other shared
   stylesheets. Desktop layout (>=1024px) is left untouched.

   What it does:
     - Prevents horizontal page overflow (a common mobile bug)
     - Makes wide data tables scroll horizontally in a container
       instead of breaking the layout
     - Enforces 44px minimum touch targets for links/buttons
     - Uses >=16px font on inputs to stop iOS auto-zoom on focus
     - Tightens typography and spacing on small screens
   ============================================================ */

/* ---- Global overflow + sizing guards (all viewports) ---- */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}
*, *::before, *::after {
  -webkit-tap-highlight-color: rgba(43, 127, 224, 0.18);
}
img, svg, video, canvas {
  max-width: 100%;
  height: auto;
}

/* Any element that opts in to horizontal scrolling for wide content */
.mobile-scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ============================================================
   TABLET / SMALL LAPTOP  (<= 900px)
   ============================================================ */
@media (max-width: 900px) {
  /* Let wide tables scroll rather than force the page wide. */
  table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  /* Tables explicitly marked as responsive keep normal table
     layout but scroll inside their own wrapper. */
  .table-wrap,
  .mobile-scroll-x table {
    display: table;
    white-space: normal;
  }
}

/* ============================================================
   PHONE  (<= 640px)
   ============================================================ */
@media (max-width: 640px) {
  /* Comfortable base reading size */
  body { font-size: 15px; }

  /* Reduce oversized headings a touch on narrow screens */
  h1 { font-size: clamp(1.7rem, 7vw, 2.4rem); line-height: 1.12; }
  h2 { font-size: clamp(1.4rem, 5.6vw, 2rem); }

  /* Touch targets: links & buttons should be easy to tap */
  a.btn, button, .btn, .nav-cta,
  input[type="submit"], input[type="button"] {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Full-width primary actions read better on phones */
  .hero-ctas .btn,
  .final-ctas .btn {
    width: 100%;
    justify-content: center;
  }
  .hero-ctas,
  .final-ctas {
    flex-direction: column;
    align-items: stretch;
  }

  /* Prevent iOS zoom-on-focus by keeping input text >= 16px */
  input, select, textarea {
    font-size: 16px;
  }

  /* Ease side padding so content isn't cramped */
  .wrap { padding-left: 18px; padding-right: 18px; }

  /* Tighten section rhythm */
  section { padding-top: 52px; padding-bottom: 52px; }

  /* Nav logo scale */
  .logo { font-size: 1rem; }

  /* Engine/tool layouts: stack any 2/3-col grids that pages set
     inline, and drop sticky rails so nothing is pinned off-screen */
  .grid-2, .grid-3, .inputs-pane, .dash-cols, .layout, .split {
    grid-template-columns: 1fr !important;
  }
  .inputs-rail {
    position: static !important;
    max-height: none !important;
  }

  /* KPI / metric rows to a single readable column */
  .kpi-row, .hero-kpis, .metrics-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   SMALL PHONE  (<= 400px)
   ============================================================ */
@media (max-width: 400px) {
  .wrap { padding-left: 14px; padding-right: 14px; }
  .nav-inner { padding-left: 16px; padding-right: 16px; }
}