/* =========================================
1) Make the section/container use wide screens better
========================================= */
.padding-0px-384px-0px-384px {
  /* Override the huge fixed padding on wide screens */
  padding-left: clamp(16px, 4vw, 72px) !important;
  padding-right: clamp(16px, 4vw, 72px) !important;
}

/* Optional: keep the form area from becoming too wide (readability) */
#form-4089tln9f,
#mktoForm_3132 {
  max-width: 980px;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
}

/* =========================================
   2) Base form sizing (safe defaults after your destyle)
   ========================================= */
#mktoForm_3132,
#mktoForm_3132 * {
  box-sizing: border-box;
}

#mktoForm_3132 .mktoFormRow {
  width: 100%;
}

#mktoForm_3132 .mktoFieldWrap,
#mktoForm_3132 .mktoFormCol,
#mktoForm_3132 .mktoField {
  width: 100%;
}

/* Make inputs/textarea fill nicely */
#mktoForm_3132 input.mktoField,
#mktoForm_3132 select.mktoField,
#mktoForm_3132 textarea.mktoField {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
}

/* =========================================
   3) Two columns on wider screens, stacked on small screens
   ========================================= */
@media (min-width: 768px) {
  #mktoForm_3132 {
    display: flex;
    flex-wrap: wrap;
    column-gap: 24px;
    row-gap: 10px;
  }

  /* Each row becomes half-width => 2 per row */
  #mktoForm_3132 .mktoFormRow {
    flex: 0 0 calc(50% - 12px); /* 2 columns */
    margin: 0 !important;
  }

  /* Force “full width” rows (adjust these as needed) */
  #mktoForm_3132 .mktoFormRow:nth-of-type(5),
  #mktoForm_3132 .mktoFormRow:nth-of-type(6) {
    flex: 0 0 100%;
  }

  /* Captcha/disclaimer/button row should be full width */
  #mktoForm_3132 #captcha,
  #mktoForm_3132 .mktoCaptchaDisclaimer,
  #mktoForm_3132 .mktoButtonRow {
    flex: 0 0 100%;
  }
}

/* =========================================
   4) Two buttons per row (Submit + Reset), still OK with 1 button
   ========================================= */
#mktoForm_3132 .mktoButtonRow {
  margin-top: 12px;
}

#mktoForm_3132 .mktoButtonRow {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Each button wrapper takes half width when there are 2 */
#mktoForm_3132 .mktoButtonRow .mktoButtonWrap {
  flex: 1 1 calc(50% - 6px);
}

/* Buttons fill their wrapper */
#mktoForm_3132 .mktoButtonRow .mktoButton {
  width: 100%;
}

/* If there is only one button, let it be a nice, full width CTA */
#mktoForm_3132 .mktoButtonRow .mktoButtonWrap:only-child {
  flex: 1 1 100%;
}
/* =========================================================
   Marketo button width fix (max 200px) + apply your styles
   ========================================================= */

/* Keep the row layout, but prevent the button from stretching weirdly */
#mktoForm_3132 .mktoButtonRow {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  justify-content: center !important; /* centers single button nicely */
}

/* Don't let the wrapper force full-width */
#mktoForm_3132 .mktoButtonRow .mktoButtonWrap {
  flex: 0 1 auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Cap button width */
#mktoForm_3132 .mktoButtonRow button.mktoButton {
  width: 100% !important;
  max-width: 200px !important;
  min-width: 200px !important; /* remove if you want it smaller on mobile */
  display: inline-block !important;
}

#mktoForm_3132 input {
  height: 40px;
  padding: 15px !important;
}

/* Optional: on very small screens let it be fluid instead of forcing 200px */
@media (max-width: 380px) {
  #mktoForm_3132 .mktoButtonRow button.mktoButton {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 200px !important;
  }
}

@media (max-width: 580px) {
  #mktoForm_3132 .mktoCaptchaDisclaimer,
  #mktoForm_3150 .mktoCaptchaDisclaimer {
    margin-top: 25px !important;
  }
}

/* =========================================================
   Apply your "ghost testimonials" button styles to Marketo
   ========================================================= */

/* Default state */
a.button.button-ghost-testimonials1,
#headline-copy-cta-cta-1F > div > a,
#mktoForm_3132 .mktoButtonRow button.mktoButton {
  border: solid 3px #bee546 !important;
  background-color: #bee546 !important;
  color: #000000 !important;
  border-radius: 40px !important;

  /* helpful extras so it looks like a CTA */
  padding: 12px 22px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  text-decoration: none !important;
}

/* Hover / focus states */
a.button.button-ghost-testimonials1:hover,
a.button.button-ghost-testimonials1:focus,
a.button.button-ghost-testimonials1:focus-visible,
#headline-copy-cta-cta-1F > div > a:hover,
#headline-copy-cta-cta-1F > div > a:focus,
#headline-copy-cta-cta-1F > div > a:focus-visible,
#mktoForm_3132 .mktoButtonRow button.mktoButton:hover,
#mktoForm_3132 .mktoButtonRow button.mktoButton:focus,
#mktoForm_3132 .mktoButtonRow button.mktoButton:focus-visible {
  border: solid 3px #93c822 !important;
  background-color: #93c822 !important;
  color: #000 !important;
  outline: none !important;
}

/* =========================================================
   mktoForm_3150: first 4 rows -> 2 per row on wide screens
   ========================================================= */

/* Keep mobile (stacked) by default — no changes outside the media query */

@media (min-width: 768px) {
  #mktoForm_3150 {
    display: flex;
    flex-wrap: wrap;
    column-gap: 24px;
    row-gap: 5px;
    width: 100%;
  }

  /* Default: full width rows (so textarea + rest remain 1 per row) */
  #mktoForm_3150 .mktoFormRow {
    flex: 0 0 100%;
    margin: 0 !important;
  }

  /* First 4 rows => 2 columns (2 per row) */
  #mktoForm_3150 .mktoFormRow:nth-of-type(-n + 4) {
    flex: 0 0 calc(50% - 12px);
  }

  /* Safety: keep captcha/disclaimer/button full width */
  #mktoForm_3150 #captcha,
  #mktoForm_3150 .mktoCaptchaDisclaimer,
  #mktoForm_3150 .mktoButtonRow {
    flex: 0 0 100%;
  }
}