/* === LabelRIX – Mobile polish pack (append-only patch) === */

/* 0) Fluid spacing & type tokens on small screens */
@media (max-width: 720px){
  :root { --gutter:12px; --topbar-h:58px; }
  h1{ font-size: clamp(1.6rem, 6vw + .6rem, 2.2rem); }
  h2{ font-size: clamp(1.3rem, 3.5vw + .6rem, 1.6rem); }
  .btn{ padding:.8rem 1rem; }
}

/* 1) Global container & cards */
.container{ width:min(980px, calc(100% - var(--gutter)*2)); }
@media (max-width: 980px){
  .card{ padding: clamp(12px, 3vw, 16px); }
  .floating-card{ position: static; width: 100%; margin-top: 12px; }
}

/* 2) Layouts collapse */
@media (max-width: 1200px){ .grid.cols-3{ grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 980px){
  .hero{ padding: 36px 0 28px; }
  .hero-grid, .media-row, .grid.cols-2{ grid-template-columns: 1fr; }
  .steps{ grid-template-columns: repeat(2,1fr); }
  .pricing, .faq, .footgrid{ grid-template-columns: 1fr; }
}

/* 3) Navigation on phones */
@media (max-width: 980px){
  .nav .inner{ padding:.7rem 0; }
  .navlinks{ display:none; } /* keep links in the sidebar on mobile */
}

/* 4) Sidebar drawer niceties */
.sidebar{ width: min(88vw, var(--sidebar-w)); }
@media (hover:none){
  .sb-links a{ padding:.7rem .8rem; }
}

/* 5) Tables: horizontal scroll on narrow screens */
.table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.table{ min-width: 640px; } /* prevent squashing */

/* 6) Forms/touch targets */
input,select,textarea,.input{ min-height: 44px; }
.input-group>.addon{ padding: 0 12px; }

/* 7) Long tokens (API keys, URLs) should wrap */
.truncate, pre, code{ overflow-wrap:anywhere; }

/* 8) Faster first paint on mobile */
section, .card{ content-visibility:auto; contain-intrinsic-size: 1px 400px; }

/* 9) Safe area for iOS */
body{ padding-bottom: max(env(safe-area-inset-bottom), 0px); }