/* Paysense Marketing — cross-cutting responsive rules for React-rendered elements.
   Component-specific responsive styles live in scoped <style> blocks inside
   each Astro component. This file holds rules targeting class-based selectors
   used by React components (unreachable by Astro scoped styles).

   !important is used only where a React component sets the same property via
   inline style={{}}. Each such rule is noted with the component name. */

/* ContactForm.tsx: stack name/company fields on mobile.
   !important needed — element sets gridTemplateColumns via inline style={{}}. */
@media (max-width: 680px) {
  .contact-form-row {
    grid-template-columns: 1fr !important;
  }
}

/* HeroVisual.tsx: simplify payrun table on mobile. */
@media (max-width: 600px) {
  /* !important needed — .payrun-row elements set gridTemplateColumns via inline style={{}}. */
  .payrun-row {
    grid-template-columns: 1fr 1fr !important;
  }
  /* No inline display set on these spans — !important not needed. */
  .payrun-col-hide-mobile {
    display: none;
  }
}