/* Homepage base scope. Scoped to #magtek-home; introduces no site-wide rules.
   Holds only the shell tokens the homepage reuses from the site chrome
   (typography base, container gutters, section headings) plus px pins for the
   shared MagTek button pack. */

#magtek-home {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 1.5;
  color: #263c50;
}

/* The shared button pack uses rem tokens that assume the 10px marketing root;
   the homepage shell runs on the browser 16px root, so pin the CTAs in px. */
#magtek-home .btn-primary,
#magtek-home .btn-secondary {
  height: 52px !important;
  min-height: 52px !important;
  padding: 0 28px !important;
  font-size: 16px !important;
  line-height: 1 !important;
}

#magtek-home .btn-text {
  font-size: 16px !important;
  line-height: 1.6 !important;
}

/* Trailing arrow icons in text links need a gutter (the shared .btn-text
   resets gap to 0). */
#magtek-home .btn-text i {
  margin-left: 0.5rem;
}

/* The production LayOutCSS bundle ships `.container{max-width:unset!important}`,
   which outranks a plain max-width here and would render every homepage
   `.container` full-bleed. Match the site's 1170px container with !important
   (the id prefix keeps it scoped to the homepage). */
#magtek-home .container {
  width: 100%;
  max-width: 1170px !important;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
}

/* Section headings — keep the classic MagTek header treatment (the global
   .section-title uses rem and would scale up on the 16px-root shell). */
#magtek-home .section-title {
  font-size: clamp(28px, 3.2vw, 45px) !important;
  line-height: 1.2 !important;
  margin-bottom: 16px !important;
  padding-bottom: 24px !important;
  font-weight: 700 !important;
}

#magtek-home .section-title::after {
  width: 80px !important;
  height: 4px !important;
  bottom: 0 !important;
}

#magtek-home .section-subtitle {
  font-size: clamp(16px, 1.5vw, 18px) !important;
  line-height: 1.65 !important;
}

#magtek-home .section-padding {
  padding-top: 60px;
  padding-bottom: 60px;
}