/* AGI Automations — responsive layer. Page styles are inline, so overrides
   need !important. Hooks (r-*) are added to the markup by class. */
html, body { overflow-x: hidden; }
img { max-width: 100%; }

/* Tablet */
@media (max-width: 1024px) {
  .r-g3 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .r-xl { font-size: 44px !important; }
  .r-pad { padding-left: 32px !important; padding-right: 32px !important; }
}

@media (max-width: 900px) {
  .r-g2 { grid-template-columns: minmax(0, 1fr) !important; gap: 40px !important; }
  .r-padt { padding-top: 64px !important; }
  .r-padb { padding-bottom: 64px !important; }
}

/* Phone */
@media (max-width: 680px) {
  .r-g3 { grid-template-columns: minmax(0, 1fr) !important; gap: 16px !important; }
  .r-g2 { gap: 28px !important; }
  .r-tr { grid-template-columns: minmax(0, 1fr) !important; gap: 4px !important; padding-left: 20px !important; padding-right: 20px !important; }
  .r-thead { display: none !important; }

  .r-pad { padding-left: 20px !important; padding-right: 20px !important; }
  .r-padt { padding-top: 48px !important; }
  .r-padb { padding-bottom: 48px !important; }

  .r-xl { font-size: 34px !important; line-height: 1.1 !important; }
  .r-lg { font-size: 28px !important; line-height: 1.18 !important; }
  .r-md { font-size: 24px !important; }

  /* Nav: logo on the first row, links scroll sideways on the second. */
  .r-navin { position: relative; height: auto !important; flex-wrap: wrap; gap: 10px !important; padding-top: 12px !important; padding-bottom: 10px !important; }
  .r-navin img { height: 30px !important; }
  .r-navlinks { width: 100%; gap: 22px !important; overflow-x: auto; white-space: nowrap; scrollbar-width: none; padding-bottom: 2px; }
  .r-navlinks::-webkit-scrollbar { display: none; }
  /* CTA sits top-right beside the logo rather than scrolling off-screen. */
  .r-navlinks a:last-child { position: absolute; top: 12px; right: 20px; font-size: 13px !important; padding: 7px 12px !important; }
}