:root{

  --cato-green: #2f7a5c;

  --cato-yellow: #f3c86b;

  --cato-text: #1f2d26;

  --cato-underline: rgba(47, 122, 92, 0.45);

  --cato-bg: rgba(245, 251, 249, 0.92);

}



/* Font (Cato-like) */

.mktoForm,

.mktoForm input,

.mktoForm select,

.mktoForm button,

.mktoForm label {

  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Helvetica, Arial, sans-serif !important;

}



/* ===== Card container ===== */

.mktoForm {

  width: 100% !important;

  max-width: 500px;

  margin: 0 auto;

  padding: 44px 44px 36px;

  background: var(--cato-bg);

  border-radius: 44px;

  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08);

}

/* Make underline span full available width */
.mktoForm .mktoFormCol,
.mktoForm .mktoFieldWrap,
.mktoForm .mktoField {
  width: 100% !important;
}


/* Keep Marketo settings intact, just remove visual gutters */

.mktoForm .mktoFormRow,

.mktoForm .mktoFieldWrap {

  margin: 0 !important;

}



/* ===== Title (optional if you added Rich Text h1/h2) ===== */

.mktoForm .mktoHtmlText h1,

.mktoForm .mktoHtmlText h2 {

  margin: 0 0 26px 0;

  font-size: 52px;

  line-height: 1.05;

  font-weight: 800;

  color: var(--cato-green);

}



/* =========================

   Fields: underline + big placeholder

   ========================= */

.mktoForm .mktoFieldWrap{

  position: relative !important;

  padding-top: 18px; /* space for small label when active */

}



.mktoForm .mktoField {

  width: 100% !important;

  float: none !important;

  box-sizing: border-box !important;



  border: none !important;

  border-bottom: 2px solid var(--cato-underline) !important;

  border-radius: 0 !important;



  background: transparent !important;



  /* IMPORTANT: big text like Cato */

  font-size: 24px !important;

  font-weight: 500 !important;

  color: var(--cato-text) !important;



  /* room for floating label above */

  padding: 18px 0 12px 0 !important;



  outline: none !important;

}



.mktoForm .mktoField:focus{

  border-bottom-color: var(--cato-green) !important;

}



/* Placeholder should look like the big “label” in the mock */

.mktoForm input.mktoField::placeholder,

.mktoForm textarea.mktoField::placeholder {

  color: rgba(31, 45, 38, 0.95) !important;

  opacity: 1 !important;

}



/* Dropdown styling */

.mktoForm select.mktoField {

  appearance: none;

  -webkit-appearance: none;

  -moz-appearance: none;

  padding-right: 34px !important;

}



/* =========================

   Floating label (small green) we inject via JS

   ========================= */

.mktoForm .cato-float-label{

  position: absolute;

  left: 0;

  top: 0;

  font-size: 14px;

  font-weight: 700;

  color: var(--cato-green);

  letter-spacing: 0.01em;

  opacity: 0;

  transform: translateY(10px);

  transition: opacity 180ms ease, transform 180ms ease;

  pointer-events: none;

}



/* show small green label when focused or has value */

.mktoForm .cato-field-wrap.cato-focused .cato-float-label,

.mktoForm .cato-field-wrap.cato-has-value .cato-float-label{

  opacity: 1;

  transform: translateY(35px);

}



/* Hide Marketo original labels visually (but keep them in DOM) */

.mktoForm .cato-hide-label{

  display: none !important;

}



/* Required asterisk */

.mktoForm .mktoAsterix{ display:none !important; }



/* ===== Button pill ===== */

.mktoForm .mktoButtonRow {

  width: 100% !important;

  margin-top: 28px !important;

}

.mktoForm .mktoButtonWrap { margin-left: 0 !important; }



.mktoForm .mktoButton {

  width: 100% !important;

  height: 78px !important;

  border: none !important;

  border-radius: 999px !important;



  background: var(--cato-yellow) !important;

  color: var(--cato-text) !important;



  font-size: 28px !important;

  font-weight: 700 !important;



  cursor: pointer !important;

  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.08);



  transition: background-color 180ms ease, color 180ms ease, transform 120ms ease, box-shadow 180ms ease;

}



/* Hover: yellow -> green (like Cato) */

.mktoForm .mktoButton:hover {

  background: var(--cato-green) !important;

  color: #fff !important;

}



.mktoForm .mktoButton:active { transform: translateY(1px); }

.mktoForm .mktoButton:focus-visible {

  outline: 3px solid rgba(47, 122, 92, 0.35);

  outline-offset: 3px;

}



/* ===== Errors ===== */

.mktoForm .mktoErrorMsg {

  font-size: 14px !important;

  margin-top: 6px !important;

  color: #ff6b57 !important; /* close to your screenshot */

}

.mktoForm .mktoError .mktoErrorMsg {

  border-radius: 12px !important;

}



/* =========================

   Country select: remove “Select Country...” duplication

   ========================= */

.mktoForm select.mktoField option[value=""],

.mktoForm select.mktoField option[disabled][selected] {

  display: none;

}

.mktoForm select.mktoField:invalid { color: transparent !important; }

.mktoForm select.mktoField:valid { color: var(--cato-text) !important; }



/* ===== Mobile ===== */

@media (max-width: 520px) {

  .mktoForm {

    padding: 28px 22px 22px;

    border-radius: 28px;

  }

  .mktoForm .mktoField {

    font-size: 20px !important;

  }

  .mktoForm .mktoButton {

    height: 66px !important;

    font-size: 22px !important;

  }

  .mktoForm .mktoHtmlText h1,

  .mktoForm .mktoHtmlText h2 {

    font-size: 38px;

  }

}