/* ======================================================================
   GLASS FORM STYLES  (form-styles-google.css)

   Standalone replacement for marketo-forms-styles.css on the glass
   template. Load this INSTEAD of marketo-forms-styles.css.
   lp-styles-rebrand.css is still loaded alongside it.

   !important is only used where it is needed. Each use is marked:
     keep: inline    Marketo writes an inline style on the element
     keep: marketo   Marketo's own injected <style> is stronger
   Chosen rules (sections 7-8) keep theirs until Chosen is removed.

   Everything old is kept, commented out, in the RETIRED section at the
   bottom of this file.
   ====================================================================== */


/* ------------------------------------------------------
   1. VARIABLES
   ------------------------------------------------------ */
:root {
  --form-text: #ffffff;
  --form-heading: #ffffff;
  --form-line: #ffffff;
  --form-focus: #ffffff;
  --form-error: #EAC106;
  --button-background: #ffffff;
  --button-text: #000000;
  --glass-background: rgba(4, 9, 32, 0.55);
  --glass-border: rgba(255, 255, 255, 0.35);

  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------
   2. CARD, HEADING AND INTRO TEXT  (.inner-form.glass)

   The template swaps "white-bg" for "glass" on .inner-form.
   .inner-form comes from lp-styles-rebrand.css, so the
   two-class selector below wins over its padding and h4 rules.
   ------------------------------------------------------ */
.inner-form.glass {
  padding: 48px 40px 56px;
  color: var(--form-heading);
  background: var(--glass-background);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.inner-form.glass h4 {
  margin: 0 0 14px;
  padding: 0;
  color: var(--form-heading);
  line-height: 1.15;
  text-align: center;
}

.inner-form.glass > p {
  margin: 0 0 44px;
  color: var(--form-heading);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.3;
  text-align: center;
}

/* ------------------------------------------------------
   3. FORM BASE AND RESET
   ------------------------------------------------------ */
.mktoForm *,
.mktoForm *::before,
.mktoForm *::after {
  box-sizing: border-box;
}

form.mktoForm {
  color: var(--form-text) !important;                     /* keep: inline (rgb(51,51,51)) */
  font-family: 'Poppins', Arial, sans-serif !important;   /* keep: inline (Helvetica) */
}

.mktoForm {
  width: 100% !important;                                 /* keep: inline (988px) */
  max-width: none;
  margin: 0;
  padding: 0;
  font-size: 16px !important;                             /* keep: inline (13px) */
  line-height: 1.4;
  background: transparent;
}

.mktoForm .mktoOffset,
.mktoForm .mktoGutter {
  display: none;
}

.mktoForm .mktoAsterix {
  display: none !important;                               /* keep: marketo */
}

.mktoForm strong {
  padding-left: 0;
}

/* ------------------------------------------------------
   4. ROWS, COLUMNS AND FIELD WRAPS
   ------------------------------------------------------ */
.mktoForm .mktoFormRow {
  display: flex;
  align-items: flex-start;
  width: 100%;
  min-height: 0;
  gap: 0;
  margin: 0 0 26px;
  padding: 0;
}

.mktoForm .mktoFormCol {
  flex: 1 1 100%;
  width: 100%;
  max-width: none;
  min-width: 0;
  min-height: 0;
  margin: 0 !important;                                   /* keep: inline (margin-bottom:10px) */
  padding: 0;
}

.mktoForm .mktoFieldDescriptor {
  margin-bottom: 0 !important;                            /* keep: inline (margin-bottom:10px) */
}

.mktoForm .mktoFieldWrap {
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  float: none;
}

/* First Name + Last Name sit side by side (class added by JS) */
.mktoForm .page-name-row {
  gap: 25px;
}

.mktoForm .page-name-row > .mktoFormCol {
  flex: 1 1 0;
  width: 50%;
}

/* Consent rows (class added by JS) keep their own spacing */
.mktoForm .homepage-consent-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 24px;
  min-height: 0;
  margin: 8px 0 18px;
  padding: 0;
}

/* Each consent option is as wide as its content, not a full line */
.mktoForm .homepage-consent-row > .mktoFormCol {
  flex: 0 0 auto;
  width: auto;
}

/* ------------------------------------------------------
   5. FIELD LABELS

   Labels are visually hidden on standard fields, the
   placeholder replaces them. Added by JS:
   .homepage-standard-field
   ------------------------------------------------------ */
.mktoForm .homepage-standard-field > .mktoLabel {
  position: absolute;
  width: 1px !important;                                  /* keep: inline (width:200px) */
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------
   6. TEXT INPUTS, TEXTAREAS, SELECTS
   ------------------------------------------------------ */
.mktoForm input.mktoField:not([type="checkbox"]):not([type="radio"]),
.mktoForm textarea.mktoField,
.mktoForm select.mktoField {
  display: block;
  float: none;                                            /* base .mktoField is float:left */
  width: 100% !important;                                /* keep: inline (width:150px) */
  min-width: 0;
  height: 48px;
  margin: 0;
  padding: 8px 16px 10px;
  color: var(--form-text);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--form-line);
  border-radius: 0;
  box-shadow: none;
  outline: none;
  transition:
    border-color 160ms ease,
    color 160ms ease;
}

.mktoForm input.mktoField::placeholder,
.mktoForm textarea.mktoField::placeholder {
  color: var(--form-text);
  opacity: 1;
}

.mktoForm input.mktoField:not([type="checkbox"]):not([type="radio"]):focus,
.mktoForm textarea.mktoField:focus,
.mktoForm select.mktoField:focus {
  border-bottom-color: var(--form-focus);
  border-bottom-width: 2px;
}

/* Browser autofill */
.mktoForm input.mktoField:-webkit-autofill,
.mktoForm input.mktoField:-webkit-autofill:hover,
.mktoForm input.mktoField:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--form-text);
  transition: background-color 9999s ease-out 0s;
  box-shadow: 0 0 0 1000px transparent inset;
}

/* Native option list is drawn by the browser on a white panel */
.mktoForm select.mktoField option {
  color: #222222;
  background: #ffffff;
}

/* ------------------------------------------------------
   7. NATIVE SELECT HIDDEN WHILE CHOSEN IS USED

   Chosen draws the visible control. This section and
   section 8 go when Chosen is removed (jQuery section).
   ------------------------------------------------------ */
.mktoForm select.mktoField:has(+ .chosen-container) {
  position: absolute;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}

/* Phones: Chosen does not run on iPhone/Android phones, so the browser's own select is
   what people see. Style it to match the text fields. */
.mktoForm select.mktoField:not(:has(+ .chosen-container)) {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* Marketo's own phone rules (height 1.5em, 18px text) are as strong as the shared
     select rule, so the full look is repeated here at a higher strength. */
  height: 48px;
  padding: 8px 40px 10px 16px;
  line-height: 1.3;
  text-overflow: ellipsis;
  cursor: pointer;
  background-image: var(--chevron);
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px 8px;
}

.mktoForm select.mktoField:not(:has(+ .chosen-container))::-ms-expand {
  display: none;
}

/* ------------------------------------------------------
   8. CHOSEN DROPDOWN (temporary)
   ------------------------------------------------------ */
.mktoForm .chosen-container {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  font-family: inherit !important;
}

.mktoForm .chosen-container-single .chosen-single {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  height: 48px !important;
  margin: 0 !important;
  padding: 8px 16px 10px !important;
  color: var(--form-text) !important;
  font-size: 14px !important;
  line-height: 1.3 !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--form-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.mktoForm .chosen-container-single .chosen-single span {
  margin-right: 28px !important;
  color: var(--form-text) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 48px !important;
}

.mktoForm .chosen-container-single .chosen-single div {
  top: 50% !important;
  right: 8px !important;
  width: 22px !important;
  transform: translateY(-50%);
}

/* White chevron instead of the Chosen sprite (fixes stray dot) */
.mktoForm .chosen-container-single .chosen-single div b {
  background: var(--chevron) no-repeat center / 12px 8px !important;
}

.mktoForm .chosen-container-active.chosen-with-drop .chosen-single div b {
  transform: rotate(180deg);
}

.mktoForm .chosen-container-active .chosen-single {
  border-bottom: 2px solid var(--form-focus) !important;
  box-shadow: none !important;
}

.mktoForm .chosen-drop {
  margin-top: 5px !important;
  background: #ffffff !important;
  border: 1px solid #d7d7d7 !important;
  border-radius: 8px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16) !important;
  overflow: hidden !important;
}

/* Everything inside the drop is dark text on white */
.mktoForm .chosen-drop,
.mktoForm .chosen-drop * {
  color: #222222 !important;
  font-size: 15px !important;
}

.mktoForm .chosen-results li {
  padding: 10px 14px !important;
  font-weight: 400 !important;
}

.mktoForm .chosen-results li.highlighted {
  color: #ffffff !important;
  background: #000000 !important;
}

/* ------------------------------------------------------
   9. CONSENT CHECKBOXES AND RADIOS
   (class added by JS: .homepage-consent-field)
   ------------------------------------------------------ */
.mktoForm .homepage-consent-field {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: center;
  width: auto;
  min-height: 0;
  gap: 8px;
  margin: 0;
  padding: 0;
}

.mktoForm .homepage-consent-field > .mktoLabel {
  position: static;
  display: inline-block;
  width: auto !important;                                 /* keep: inline (width:200px) */
  height: auto;
  margin: 0;
  padding: 0;
  overflow: visible;
  clip: auto;
  white-space: nowrap;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.4;
}

.mktoForm .mktoCheckboxList,
.mktoForm .mktoRadioList {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  float: none;
  width: auto;
  min-height: 0;
  gap: 0;
  margin: 0;
  padding: 0;
}

.mktoForm input[type="checkbox"],
.mktoForm input[type="radio"] {
  flex: 0 0 auto;
  width: 18px !important;                                 /* keep: inline possible */
  height: 18px !important;                                /* keep: inline possible */
  margin: 0;
  padding: 0;
  accent-color: var(--form-line);
}

.mktoForm .mktoCheckboxList label,
.mktoForm .mktoRadioList label {
  width: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

/* ------------------------------------------------------
   10. LEGAL AND SUPPORTING TEXT
   ------------------------------------------------------ */
.mktoForm .mktoHtmlText {
  display: block;
  width: 100% !important;                                 /* keep: inline */
  max-width: none;
  min-height: 0;
  height: auto !important;                                /* keep: inline */
  max-height: none !important;                            /* keep: inline */
  margin: 0;
  padding: 0;
}

/* Marketo's rich text puts spans/divs/p inside, so size every child */
.mktoForm .mktoHtmlText,
.mktoForm .mktoHtmlText * {
  font-size: 10px !important;                             /* keep: inline (rich text) */
  font-weight: 300;
  line-height: 20px;
  text-align: center;
}

.mktoForm .mktoHtmlText p {
  margin: 0 0 12px;
}

.mktoForm .mktoHtmlText p:last-child {
  margin-bottom: 0;
}

.mktoForm .mktoHtmlText a {
  padding: 0;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.mktoForm .mktoHtmlText strong {
  font-weight: 600;
}

/* reCAPTCHA notice (outside .mktoHtmlText) */
.mktoForm .mktoCaptchaDisclaimer,
.mktoForm .mktoCaptchaDisclaimer * {
  font-size: 10px;
  font-weight: 300;
  line-height: 20px;
  text-align: center;
}

.mktoForm .mktoCaptchaDisclaimer {
  min-height: 0;
}

/* Rows that only hold legal text (class added by JS) */
.mktoForm .homepage-legal-row {
  display: block;
  width: 100%;
  min-height: 0;
  height: auto;
  max-height: none;
  margin: 14px 0;
  padding: 0;
}

.mktoForm .homepage-legal-row .mktoFormCol,
.mktoForm .homepage-legal-row .mktoFieldWrap {
  display: block;
  width: 100%;
  min-height: 0;
  height: auto;
  max-height: none;
  margin: 0;
  padding: 0;
  float: none;
}

/* ------------------------------------------------------
   11. FIELDSETS
   ------------------------------------------------------ */
.mktoForm fieldset {
  display: block;
  width: 100%;
  min-height: 0;
  height: auto;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
}

.mktoForm fieldset legend:empty {
  display: none;
}

/* ------------------------------------------------------
   12. EMPTY CONDITIONAL ROWS
   (class added by JS after each Marketo render)
   ------------------------------------------------------ */
.mktoForm .horizon-form__empty-row {
  display: none;
  margin: 0;
  padding: 0;
}

/* ------------------------------------------------------
   13. SUBMIT BUTTON

   Marketo's injected <style> sets the button colour, border and a
   gradient on .mktoSimple .mktoButton (and :hover / :active), so the
   colour, background and border keep !important.
   ------------------------------------------------------ */
.mktoForm .mktoButtonRow {
  display: block;
  width: 100%;
  min-height: 0;
  margin: 28px 0 0;
  padding: 0;
}

.mktoForm .mktoButtonWrap {
  display: block;
  width: 100%;
  margin: 0 !important;                                   /* keep: inline (margin-left) */
  padding: 0;
}

.mktoForm button.mktoButton {
  display: block;
  width: 100%;
  height: auto;
  min-height: 48px;
  margin: 0;
  padding: 12px 28px;
  color: var(--button-text) !important;                   /* keep: marketo */
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  cursor: pointer;
  opacity: 1;
  background: var(--button-background) !important;        /* keep: marketo */
  background-image: none !important;                      /* keep: marketo (gradient) */
  border: 1px solid var(--button-background) !important;  /* keep: marketo */
  border-radius: 999px;
  box-shadow: none;
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    transform 160ms ease;
}

.mktoForm button.mktoButton:hover {
  color: var(--button-background) !important;             /* keep: marketo */
  background: var(--button-text) !important;              /* keep: marketo */
  border-color: var(--button-background) !important;      /* keep: marketo */
  transform: translateY(-1px);
}

.mktoForm button.mktoButton:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
}

/* ------------------------------------------------------
   14. VALIDATION MESSAGES
   ------------------------------------------------------ */
.mktoForm .mktoError {
  position: relative !important;                          /* keep: marketo (base is absolute) */
  right: auto !important;                                /* keep: inline (right:55px) */
  bottom: auto !important;                                /* keep: inline (bottom:-57px) */
  z-index: 2;
  margin-top: 7px;
}

.mktoForm .mktoError .mktoErrorArrowWrap {
  display: none;
}

/* Marketo's default error bubble has the same specificity, so keep !important */
.mktoForm .mktoError .mktoErrorMsg {
  max-width: none !important;
  padding: 0 !important;
  color: var(--form-error) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
  text-align: left !important;
  text-shadow: none !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* ------------------------------------------------------
   15. CONFIRMATION MESSAGE (#confirmform)
   Shown by formOverride() after a successful submit.
   ------------------------------------------------------ */
.inner-form.glass #confirmform {
  color: var(--form-heading);
  font-size: 20px;
  line-height: 1.45;
  text-align: center;
}

.inner-form.glass #confirmform p {
  margin: 0;
  color: inherit;
  font-size: inherit;
}

/* ------------------------------------------------------
   16. MOBILE  (max-width: 767px)
   Same left-aligned look as desktop, one column,
   consistent spacing.
   ------------------------------------------------------ */
@media (max-width: 767px) {
  /* 16px stops iOS Safari zooming the page when a field is tapped */
  .mktoForm input.mktoField:not([type="checkbox"]):not([type="radio"]),
  .mktoForm textarea.mktoField,
  .mktoForm select.mktoField:not(:has(+ .chosen-container)) {
    font-size: 16px;
  }

  .inner-form.glass {
    padding: 32px 20px 36px;
  }

  .inner-form.glass h4 {
    font-size: 24px;
    line-height: 1.18;
  }

  .inner-form.glass > p {
    margin-bottom: 32px;
    font-size: 16px;
  }

  .mktoForm .mktoFormRow {
    margin-bottom: 20px;
  }

  .mktoForm .page-name-row {
    display: block;
  }

  .mktoForm .page-name-row > .mktoFormCol {
    width: 100%;
  }

  .mktoForm .page-name-row > .mktoFormCol ~ .mktoFormCol {
    margin-top: 20px !important;                          /* keep: beats .mktoFormCol margin */
  }

  .mktoForm .homepage-consent-row {
    justify-content: center;
    margin-top: 10px;
    margin-bottom: 18px;
  }

  .mktoForm .homepage-legal-row {
    margin: 16px 0;
  }

  .mktoForm .mktoButtonRow {
    margin-top: 28px;
  }
}