/* Button geometry shared by the five site pages; load after other overrides. */
body[data-page] .page-wrapper :is(a.button, button.button, input.button, .nav-login.w-nav-link) {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 0;
  max-width: 100%;
  min-height: 48px;
  height: auto;
  padding: 12px 20px;
  font-family: Montserrat, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0;
  text-align: center;
  text-transform: none;
  text-decoration: none;
  white-space: normal;
  vertical-align: middle;
  cursor: pointer;
}

/* Exported label classes otherwise override the button's color and font size. */
body[data-page] .page-wrapper .button > :is(div, span) {
  min-width: 0;
  max-width: 100%;
  margin: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: inherit;
  text-transform: inherit;
}

/* Preserve the existing soft outline around these filled buttons. */
body[data-page] .page-wrapper .outline-btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: stretch;
  justify-content: center;
  max-width: 100%;
  padding: 3px;
  vertical-align: middle;
}

body[data-page] .page-wrapper .outline-btn > .button {
  width: 100%;
  margin: 0;
}

body[data-page] .page-wrapper :is(.buttons-wrapper, .button-nav-wrapper) {
  align-items: center;
  gap: 12px;
}

body[data-page] .page-wrapper .buttons-wrapper {
  flex-wrap: wrap;
}

body[data-page] .page-wrapper :is(.hero-wrapper, .parner-cta-right) > .button {
  align-self: flex-start;
  width: fit-content;
  margin-top: 0;
}

body[data-page="home"] .hero-home-wrapper .button.green:hover {
  background-color: #e9f2ee;
  color: #164d3f;
}

body[data-page] .page-wrapper .cta-bg-wrapper > :is(.button, .outline-btn) {
  align-self: center;
  width: fit-content;
  margin-top: 0;
}

body[data-page="contact-us"] .contact-us-right input.button[type="submit"] {
  width: 100%;
  margin: 0;
}

/* Arrow controls keep their SVGs and existing rotation/slide animations. */
body[data-page] .page-wrapper :is(.testimonial-lines__button, .centered-slider-button) {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 48px;
  width: 48px;
  min-width: 48px;
  height: 48px;
  min-height: 48px;
  padding: 0;
  cursor: pointer;
}

body[data-page] .page-wrapper :is(.testimonial-lines__arrow, .slider-button-arrow) {
  flex: none;
  width: 16px;
  height: 16px;
}

body[data-page] .page-wrapper .centered-slider-bullet {
  min-width: 44px;
  min-height: 44px;
  cursor: pointer;
}

/* One focus token for buttons, links and menu toggles. #b36494 is 4.06:1 on white;
   the green footers swap in the light brand pink, 3.04:1 on #056356. */
:root {
  --focus-ring-color: #b36494;
}

body[data-page] :is(.footer, .demo-footer) {
  --focus-ring-color: #d198b6;
}

body[data-page] .page-wrapper :is(.button, .nav-login, .testimonial-lines__button, .centered-slider-button, .centered-slider-bullet, .w-nav-button):focus-visible {
  outline: 3px solid var(--focus-ring-color);
  outline-offset: 3px;
}

@media screen and (max-width: 991px) {
  /* Collapsed nav bars and open menus are white surfaces at these widths. */
  body[data-page] .page-wrapper :is(.w-nav-brand, .nav-bar a, .nav-menu-2 a, .nav-footer-link):focus-visible {
    outline: 3px solid var(--focus-ring-color);
    outline-offset: 3px;
  }

  /* Original Webflow behavior: row actions belong to desktop hover only. */
  body[data-page] .page-wrapper .single-customer-feature > .button.customer-feature-cta {
    display: none;
  }

  body[data-page] .page-wrapper .nav-menu .button-nav-wrapper {
    align-items: stretch;
  }

  body[data-page] .page-wrapper :is(.nav-menu, .nav-menu-2) .outline-btn,
  body[data-page] .page-wrapper :is(.nav-menu, .nav-menu-2) .button,
  body[data-page] .page-wrapper :is(.nav-menu, .nav-menu-2) .nav-login.w-nav-link,
  body[data-page] .navigation.version-white .nav-menu-2 .nav-login.w-nav-link {
    width: 100%;
    min-height: 48px;
    height: auto;
    font-size: 16px;
    line-height: 1.25;
  }

  body[data-page] .page-wrapper :is(.nav-menu, .nav-menu-2) .nav-login.w-nav-link {
    margin: 12px 0 0;
  }

  body[data-page] .page-wrapper .single-customer-feature > .button {
    align-self: flex-start;
    width: fit-content;
  }
}

@media screen and (max-width: 767px) {
  body[data-page] .page-wrapper .button.green {
    margin-top: 0;
  }

  body[data-page="about-us"] .buttons-wrapper > .outline-btn {
    width: 100%;
  }
}