/* Calypsion — phone & small-tablet refinements, loaded last on every page.
   Page styles stay the source of truth for desktop; this file only tightens layouts at small widths. */

@media (max-width: 640px) {
  /* ---------- shell ---------- */
  .wrap { padding-left: 20px; padding-right: 20px; }
  .to-top { display: none !important; }                          /* phones scroll back up natively; frees the corner for the call button */
  footer.ft { padding-bottom: 92px; }                            /* keep footer links clear of the call button */

  /* floating "Talk to an engineer": compact round button on phones */
  .cbx-launch { right: 16px; bottom: 16px; width: 58px; height: 58px; padding: 0; gap: 0; justify-content: center; border-radius: 50%; border-color: rgba(111,227,227,.5); background: #0E9C9C; }
  .cbx-launch .cbx-ic { width: 58px; height: 58px; background: transparent; font-size: 20px; }
  .cbx-launch .cbx-lt { display: none; }

  /* ---------- vertical rhythm: shorter sections ---------- */
  .sec, .ak-sec { padding-top: 52px; padding-bottom: 52px; }
  .customers, .intro { padding-top: 52px; padding-bottom: 52px; }
  .whatis { padding: 56px 0 48px; }
  .rd-proto { padding: 48px 0; }
  .rd-sec-head, .ak-h { margin-bottom: 26px; }
  h2 { font-size: clamp(26px, 7.4vw, 32px); }

  /* ---------- tiny labels: keep everything readable (min ~11px) ---------- */
  .rd-metric-k, .rd-step-h, .rd-chip, .rd-core-badge, .rd-mx-label, .pb-l,
  .lt-dx-role, .lv-viz-tag, .lv-viz-live, .lv-ok, .lv-csv-count,
  .ls-note, .it-note, .it-bf, .ab-flow { font-size: 11px !important; }

  /* ---------- home ---------- */
  /* suite loop -> 3 x 2 grid of product buttons (same buttons, same card) */
  .lp-stage { aspect-ratio: auto; margin: 4px 0 18px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .lp-stage svg { display: none; }
  .lp-node { position: static; transform: none; padding: 12px 6px 10px; border-radius: 14px; background: var(--surface, #fff); border: 1px solid var(--border, #DCE3E7); gap: 6px; }
  .lp-node .dot { width: 42px; height: 42px; border-radius: 12px; font-size: 16px; box-shadow: none; }
  .lp-node.on { border-color: #0C2230; box-shadow: 0 0 0 3px rgba(111,227,227,.25); }
  .lp-node.on .dot { transform: none; box-shadow: none; }
  .lp-node .lb { position: static; transform: none; white-space: normal; }
  .lp-node .lb b { font-size: 12.5px; }
  .stats-grid { gap: 26px 18px; }
  .stat .num { font-size: 34px; white-space: nowrap; }
  .stat .num .u { font-size: 18px; }
  .stat .desc { font-size: 13.5px; margin-top: 8px; }
  .stat .rule { margin-top: 14px; }
  .logo-wall { gap: 10px; }
  .logo-tile { flex: 0 1 calc(33.333% - 7px); height: 74px; padding: 8px 10px; border-radius: 10px; }
  .logo-tile img { max-height: 46px; max-width: 100%; }
  .pipeline-grid { row-gap: 26px; }

  /* ---------- contact: two chips per row ---------- */
  .ct-chips { grid-template-columns: 1fr 1fr; gap: 8px; }
  .ct-chip { font-size: 13.5px; padding: 10px 10px; }

  /* ---------- comparison tables become stacked cards (mobile.js adds the labels) ---------- */
  .m-stack-wrap { overflow: visible !important; border: 0 !important; background: none !important; box-shadow: none !important; }
  table.m-stack { min-width: 0 !important; width: 100%; border: 0 !important; background: none !important; box-shadow: none !important; display: block; }
  table.m-stack thead { display: none; }
  table.m-stack tbody { display: grid; gap: 12px; }
  table.m-stack tr { display: block; background: var(--surface, #fff); border: 1px solid var(--border, #DCE3E7); border-radius: 14px; overflow: hidden; }
  table.m-stack tbody th { display: block; position: static !important; width: auto !important; min-width: 0 !important; padding: 14px 16px 10px; font-size: 15.5px; border-bottom: 1px solid var(--border, #DCE3E7); background: var(--canvas, #F6F8F9); }
  table.m-stack td { display: block; padding: 10px 16px; border-bottom: 1px dashed var(--border, #DCE3E7); font-size: 14px; }
  table.m-stack td:last-child { border-bottom: 0; }
  table.m-stack td[data-label]::before { content: attr(data-label); display: block; font-family: "IBM Plex Mono", monospace; font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted, #5A6B72); margin-bottom: 3px; }
  table.m-stack td.us { border-left: 0; border-bottom: 1px solid var(--border, #DCE3E7); }
  table.m-stack td.us::before { font-family: "IBM Plex Mono", monospace; font-weight: 600; margin: 0 0 3px; color: var(--teal, #0E9C9C); }

  /* ---------- horizontal strips: show there is more to swipe ---------- */
  .m-swipe { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); scroll-snap-type: x proximity; }
  .m-swipe.at-end { -webkit-mask-image: none; mask-image: none; }

  /* ---------- LinkSim hero line: give the stations room ---------- */
  .ls-vp { height: 300px; }
  .ls-st { min-width: 60px; padding: 6px; }
  .ls-st .nm { font-size: 10.5px; }
}

@media (max-width: 380px) {
  .wrap { padding-left: 16px; padding-right: 16px; }
  .stat .num { font-size: 30px; }
  .logo-tile { height: 64px; }
}