/**
 * Marketo form styles
 *
 * Structure:
 * 1. Theme tokens & variables
 * 2. Fonts
 * 3. Reset & base
 * 4. Layout
 * 5. Labels
 * 6. Inputs, selects, textareas (incl. focus/active)
 * 7. Error states
 * 8. Checkboxes & radios
 * 9. Submit button
 * 10. Rich text
 * 11. Custom select dropdown
 * 12. Form container
 */

@font-face {
  font-family: "Agile Sans Variable";
  src: url("../fonts/agile-sans-variable.woff2") format("woff2");
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Agile Mono Variable";
  src:
    url("../fonts/AgileMono/agile-mono-variable.woff2") format("woff2"),
    url("../fonts/AgileMono/agile-mono-variable.woff") format("woff");
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}

/* Knox tokens (spacing, colors, etc.) are loaded from ./knox.css via @1password/knox. */

/* ── 1. Theme tokens (from projects/vision/tailwind.config.js @ 1password.com repo) ── */
:root {
  /* ── Marketo form custom properties ── */
  --mkto-font-family: "Agile Sans Variable", sans-serif;
  --mkto-mono-font-family: "Agile Mono Variable", monospace;
  --mkto-text-color: var(--iron-ore-700);
  /* Theme-aware colors passed from the parent via postMessage (marketoInjectTheme).
     Each falls back to the embed default when the parent doesn't supply one. */
  --mkto-label-color: var(--marketo-form-label-color, var(--mkto-text-color));
  --mkto-body-text-color: var(
    --marketo-form-text-color,
    var(--mkto-text-color)
  );
  --mkto-field-error-color: var(
    --marketo-form-error-color,
    var(--knox-field-sub-text-color-error)
  );
  --mkto-bg: var(--pure-white);
  --mkto-border-color: var(--iron-ore-new-950);
  --mkto-focus-color: var(--secure-blue);
  --mkto-link-color: var(--marketo-form-link-color, var(--secure-blue));
  --mkto-radio-border: var(--iron-ore-new-600);
  --mkto-form-container-bg: var(--iron-ore-new-50);
  --mkto-button-bg: var(--marketo-btn-bg, var(--secure-blue));
  --mkto-button-text: var(--marketo-btn-text, var(--pure-white));
  --mkto-button-hover-bg: var(--marketo-btn-hover-bg, transparent);
  --mkto-button-hover-text: var(--marketo-btn-hover-text, var(--secure-blue));
  --mkto-button-hover-border: var(--marketo-btn-border, var(--secure-blue));
  --mkto-select-chevron: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m3.99976 6.5 4 4 4.00004-4' stroke='%23303136' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.75'/%3E%3C/svg%3E");

  /* ── Shared form field tokens ── */
  --mkto-field-height: 53px;
  --mkto-field-padding: 12px;
  --mkto-field-font-size: 16px;
  --mkto-field-font-weight: 300;
  --mkto-field-letter-spacing: -0.32px;
  --mkto-field-transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* ── Reset & base ── */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 0;
}

.mktoForm.mktoForm,
.mktoForm.mktoForm * {
  font-family: var(--mkto-font-family) !important;
  line-height: 1.5 !important;
  font-weight: var(--knox-field-font-weight) !important;
}

.mktoForm.mktoForm {
  display: flex !important;
  flex-direction: column !important;
  color: var(--mkto-body-text-color) !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  gap: 32px !important;
}

/* ── Layout ── */

#form-container {
  padding: 0 !important;
}

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

/* Rows that only hold a hidden field (e.g. UTM tracking) still render as flex
   items, so the parent's column gap adds stray vertical space around them.
   Remove them from layout entirely — display:none items don't create a gap. */
.mktoForm.mktoForm
  .mktoFormRow:has(> input[type="hidden"]):not(
    :has(.mktoField:not([type="hidden"]))
  ) {
  display: none !important;
}

.mktoForm.mktoForm .mktoFieldDescriptor {
  margin-bottom: 0 !important;
  width: 100% !important;
}

.mktoForm.mktoForm .mktoFieldWrap {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  gap: var(--knox-spacing-xs) !important;
}

.mktoForm.mktoForm .mktoLogicalField {
  width: 100% !important;
}

.mktoForm.mktoForm * {
  box-sizing: border-box !important;
}

.mktoForm .mktoLabel {
  padding: 0 !important;
}

/* ── Labels ── */

/* Field labels use the "eyebrow-16" type style from the parent's redesign
   Typography (redesign-components/Typography/Heading → NewHeadingSizeKeys.Eyebrow:
   "text-base !leading-[125%] uppercase font-light tracking-normal"). There's no
   shared eyebrow token on the embed side, so the values are reproduced here:
   Agile Sans 16px / weight 300 / 4% tracking (Figma) / 125% line-height /
   uppercase. Letter-spacing is 0.04em to match Figma's 4% (percent of font
   size). line-height has no matching Knox token (heading-large is 1.15), so
   both are set directly. */
.mktoForm.mktoForm label.mktoLabel {
  text-transform: uppercase !important;
  color: var(--mkto-label-color) !important;
  width: var(--knox-field-width) !important;
  display: flex !important;
  align-items: baseline !important;
  font-family: var(--mkto-font-family) !important;
  font-weight: var(--knox-font-weight-body-default) !important;
  letter-spacing: 0.04em !important;
  font-size: var(--knox-font-size-body-large) !important;
  line-height: 1.25 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.mktoForm.mktoForm label.mktoLabel .mktoAsterix {
  color: var(--mkto-label-color) !important;
  float: none !important;
  padding-left: 8px !important;
  order: 1 !important;
}

.mktoForm.mktoForm label.mktoLabel .mkto-label-text {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

/* ── Inputs, selects, textareas ── */

.mktoForm.mktoForm
  :is(
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="url"],
    input[type="number"],
    input[type="date"],
    textarea.mktoField,
    select.mktoField
  ) {
  font-size: var(--mkto-field-font-size) !important;
  font-weight: var(--mkto-field-font-weight) !important;
  letter-spacing: var(--mkto-field-letter-spacing) !important;
  color: var(--mkto-text-color) !important;
  background-color: var(--mkto-bg) !important;
  background-image: none !important;
  border: 1px solid var(--mkto-border-color) !important;
  border-radius: var(--knox-field-border-radius) !important;
  box-shadow: none !important;
  height: var(--mkto-field-height) !important;
  padding: var(--mkto-field-padding) !important;
  width: 100% !important;
  outline: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  transition: var(--mkto-field-transition) !important;
}

.mktoForm.mktoForm textarea.mktoField {
  height: auto !important;
}

.mktoForm.mktoForm select.mktoField {
  padding-right: 40px !important;
  cursor: pointer !important;
  background-image: var(--mkto-select-chevron) !important;
  background-repeat: no-repeat !important;
  background-position: right var(--mkto-field-padding) center !important;
  background-size: 16px 16px !important;
}

.mktoForm.mktoForm select.mktoField:hover {
  background-color: var(--knox-select-background-hover) !important;
}

.mktoForm.mktoForm input::placeholder,
.mktoForm.mktoForm textarea::placeholder {
  color: var(--knox-field-placeholder-color) !important;
}

.mktoForm.mktoForm select.mktoField:invalid {
  color: var(--knox-field-placeholder-color) !important;
}

/* Focus & active states */
.mktoForm.mktoForm
  :is(
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="url"],
    input[type="number"],
    input[type="date"],
    textarea.mktoField
  ):focus,
.mktoForm.mktoForm .mkto-select-trigger:focus {
  border-color: var(--mkto-focus-color) !important;
}

.mktoForm.mktoForm
  :is(
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="url"],
    input[type="number"],
    input[type="date"],
    textarea.mktoField,
    .mkto-select-trigger
  ):focus-visible {
  outline: var(--knox-focus-outline) !important;
  outline-offset: calc(-2 * var(--knox-focus-offset)) !important;
}

.mktoForm.mktoForm
  :is(
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="url"],
    input[type="number"],
    input[type="date"],
    textarea.mktoField,
    select.mktoField
  ):active {
  border-color: var(--knox-field-border-active) !important;
}

/* Invalid field focus (after submit attempt) */
.mktoForm.mktoForm.mkto-submitted
  :is(
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="url"],
    input[type="number"],
    input[type="date"],
    textarea.mktoField
  ):focus.mktoInvalid {
  box-shadow:
    var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
  outline: var(--knox-focus-outline) !important;
  outline-offset: calc(-2 * var(--knox-focus-offset)) !important;
}

.mktoForm.mktoForm.mkto-submitted select.mktoField:focus.mktoInvalid,
.mktoForm.mktoForm.mkto-submitted
  .mkto-select-wrapper.mkto-select-invalid
  .mkto-select-trigger:focus {
  outline: var(--knox-focus-outline) !important;
  outline-offset: calc(-2 * var(--knox-focus-offset)) !important;
  z-index: 1 !important;
}

.mktoForm.mktoForm.mkto-submitted
  .mkto-select-wrapper.mkto-select-invalid
  .mkto-select-trigger:focus {
  box-shadow:
    var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
}

/* ── Error states ── */

.mktoForm.mktoForm .mktoInvalid,
.mktoForm.mktoForm .mktoField.mktoInvalid {
  box-shadow: none !important;
  background-color: var(--mkto-bg) !important;
}

.mktoForm.mktoForm.mkto-submitted .mktoInvalid,
.mktoForm.mktoForm.mkto-submitted .mktoField.mktoInvalid,
.mktoForm.mktoForm.mkto-submitted
  .mktoFieldWrap:has(> .mktoError[data-mkto-custom-error="1"])
  .mktoField {
  z-index: 1 !important;
  border: 1px solid #ee593a !important;
}

.mktoForm.mktoForm.mkto-submitted .mktoError {
  display: block !important;
  right: auto !important;
  bottom: auto !important;
  left: 0 !important;
  position: relative !important;
  color: var(--knox-field-sub-text-color-error) !important;
  margin-bottom: 0 !important;
}

/* Per-field error: filled tangerine banner attached directly below the field.
   The negative top margin closes the field wrap's gap so the banner tucks
   flush against the input's (now square) bottom edge. */
.mktoForm.mktoForm.mkto-submitted .mktoError[data-mkto-custom-error="1"] {
  z-index: 0 !important;
  margin-top: calc(-1.5 * var(--knox-spacing-xs)) !important;
  padding: 10px 10px 6px !important;
  background-color: #ee593a !important;
  border: none !important;
  border-radius: 0 0 var(--knox-field-border-radius)
    var(--knox-field-border-radius) !important;
}

/* Hide Marketo’s error divs (they show on focus); only our single custom error shows */
.mktoForm.mktoForm
  .mktoError:not([data-mkto-custom-error]):not(.mkto-error-callout) {
  display: none !important;
  visibility: hidden !important;
}

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

.mktoForm.mktoForm.mkto-submitted
  .mktoFieldWrap:has(.mktoError[data-mkto-custom-error="1"])
  .mktoInstruction {
  display: none !important;
}

.mktoForm.mktoForm.mkto-submitted .mktoErrorMsg {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
}

.mktoForm.mktoForm.mkto-submitted
  .mktoError[data-mkto-custom-error="1"]
  .mktoErrorMsg {
  display: block !important;
  font-size: 13px !important;
  font-weight: 350 !important;
  line-height: 1.5 !important;
  letter-spacing: -0.26px !important;
  color: var(--pure-white, #fff) !important;
}

.mktoForm.mktoForm.mkto-submitted
  .mkto-select-wrapper.mkto-select-invalid
  .mkto-select-trigger,
.mktoForm.mktoForm.mkto-submitted
  .mktoFieldWrap:has(> .mktoError[data-mkto-custom-error="1"])
  .mkto-select-trigger {
  border: 1px solid #ee593a !important;
  box-shadow: none !important;
}

/* Submission-failed callout (Knox critical callout style) */
.mktoForm.mktoForm .mktoError.mkto-error-callout {
  /* Marketo positions .mktoError absolutely by default; force in-flow layout so
     the callout sits below the form and spans the column instead of overflowing. */
  position: static !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: var(--knox-spacing-xs) !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: var(--knox-spacing-medium) !important;
  border: 1px solid var(--knox-callout-critical-border-color) !important;
  border-radius: var(--knox-corner-radius-medium) !important;
  background-color: var(--knox-callout-critical-background-color) !important;
  margin-top: 0 !important;
}

.mktoForm.mktoForm .mktoError.mkto-error-callout .mkto-error-callout-icon {
  flex-shrink: 0 !important;
  color: var(--knox-text-icon-critical) !important;
}

.mktoForm.mktoForm .mktoError.mkto-error-callout .mktoErrorMsg {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--knox-spacing-xs) !important;
  font-size: 14px !important;
  color: var(--knox-text-icon-neutral) !important;
  margin: 0 !important;
  /* Strip Marketo's default red error-bubble styling so only the outer callout
     shows. This reset is otherwise gated on .mkto-submitted, which isn't
     present for the form-level submission error. */
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  padding: 0 !important;
  max-width: 100% !important;
}

.mktoForm.mktoForm .mktoError.mkto-error-callout .mktoErrorMsg span,
.mktoForm.mktoForm .mktoError.mkto-error-callout .mktoErrorMsg a {
  font-weight: var(--knox-text-font-weight-bold) !important;
  color: var(--knox-text-icon-neutral) !important;
  text-shadow: none !important;
}

.mktoForm.mktoForm .mktoError.mkto-error-callout .mktoErrorMsg a {
  color: var(--knox-text-icon-neutral) !important;
  text-decoration: none !important;
}

.mktoForm.mktoForm .mktoCheckboxList,
.mktoForm.mktoForm .mktoRadioList {
  padding: 0 !important;
}

/* ── Checkboxes & radios ── */

.mktoForm.mktoForm .mktoFieldWrap:has(.mktoCheckboxList),
.mktoForm.mktoForm .mktoFieldWrap:has(.mktoRadioList) {
  flex-direction: row !important;
  align-items: center !important;
  gap: var(--mkto-field-padding) !important;
}

.mktoForm.mktoForm .mktoFieldWrap:has(.mktoCheckboxList) .mktoCheckboxList,
.mktoForm.mktoForm .mktoFieldWrap:has(.mktoRadioList) .mktoRadioList {
  order: -1 !important;
  width: var(--knox-field-width) !important;
  min-width: 0 !important;
}

.mktoForm.mktoForm .mktoFieldWrap:has(.mktoCheckboxList) label.mktoLabel,
.mktoForm.mktoForm .mktoFieldWrap:has(.mktoRadioList) label.mktoLabel {
  text-transform: none !important;
  margin-bottom: 0 !important;
  flex: 1 0 0 !important;
  letter-spacing: var(--knox-checkable-items-label-letter-spacing) !important;
}

.mktoForm.mktoForm .mktoCheckboxList label,
.mktoForm.mktoForm .mktoRadioList label {
  font-size: 14px !important;
  font-weight: var(--mkto-field-font-weight) !important;
  letter-spacing: -0.28px !important;
  color: var(--mkto-body-text-color) !important;
  cursor: pointer !important;
  text-transform: none !important;
}

.mktoForm.mktoForm .mktoCheckboxList label.mktoLabel,
.mktoForm.mktoForm .mktoRadioList label.mktoLabel,
.mktoForm.mktoForm .mktoCheckboxList label.mktoLabel *,
.mktoForm.mktoForm .mktoRadioList label.mktoLabel * {
  text-transform: none !important;
}

.mktoForm.mktoForm .mktoLabel .mkto-label-link {
  color: var(--mkto-link-color) !important;
  text-decoration: underline !important;
  padding: 0;
}

.mktoForm.mktoForm .mktoLabel .mkto-label-link:hover {
  text-decoration: underline !important;
}

.mktoForm.mktoForm input[type="checkbox"],
.mktoForm.mktoForm input[type="radio"] {
  width: 18px !important;
  height: 18px !important;
  border-radius: var(--knox-checkbox-border-radius) !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  cursor: pointer !important;
  vertical-align: middle !important;
  position: relative !important;
  flex-shrink: 0 !important;
  opacity: 1 !important;
}

.mktoForm.mktoForm input[type="checkbox"] {
  border: 1px solid var(--mkto-border-color) !important;
  background: var(--mkto-bg) !important;
  margin-right: var(--mkto-field-padding) !important;
}

.mktoForm.mktoForm
  .mktoFieldWrap:has(.mktoCheckboxList)
  input[type="checkbox"] {
  margin-right: 0 !important;
}

.mktoForm.mktoForm input[type="checkbox"]:checked {
  background: var(--knox-checkbox-checked-background)
    url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.1247 4.21917C12.556 4.56418 12.6259 5.19347 12.2809 5.62473L7.28087 11.6247C7.10318 11.8468 6.83931 11.9828 6.5553 11.9985C6.27129 12.0142 5.99402 11.9083 5.79289 11.7071L3.79289 9.70714C3.40237 9.31662 3.40237 8.68345 3.79289 8.29293C4.18342 7.90241 4.75617 7.97407 5.20711 8.29293C5.5 8.50004 6.5 9.00004 6.5 9.00004L10.7191 4.37534C11.0641 3.94408 11.6934 3.87416 12.1247 4.21917Z' fill='%23ffffff'/%3E%3C/svg%3E")
    center / 16px 16px no-repeat !important;
  border: none !important;
}

.mktoForm.mktoForm input[type="checkbox"]:focus-visible,
.mktoForm.mktoForm input[type="radio"]:focus-visible {
  outline: var(--knox-focus-outline) !important;
  outline-offset: calc(-2 * var(--knox-focus-offset)) !important;
}

.mktoForm.mktoForm input[type="radio"] {
  border: 1px solid var(--mkto-radio-border) !important;
  margin-right: 8px !important;
}

.mktoForm.mktoForm input[type="radio"]:checked {
  border: none !important;
  background: var(--knox-checkbox-checked-background) !important;
}

/* ── Submit button and disclaimer (responsive: side-by-side on desktop, stacked on tablet/mobile) ── */

.mktoForm.mktoForm .mktoButtonRow {
  display: flex !important;
  align-items: center !important;
  margin: 0 4px 4px !important;
}

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

.mktoForm.mktoForm button.mktoButton,
.mktoForm.mktoForm .mktoButton {
  position: relative !important;
  font-size: var(--mkto-field-font-size) !important;
  font-weight: 350 !important;
  letter-spacing: 0.32px !important;
  color: var(--mkto-button-text) !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 10px 24px !important;
  min-width: 152px !important;
  width: var(--knox-field-width) !important;
  cursor: pointer !important;
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease !important;
  text-shadow: none !important;
  text-align: center !important;
  box-shadow: none !important;
  text-transform: none !important;
}

.mktoForm.mktoForm button.mktoButton:hover,
.mktoForm.mktoForm .mktoButton:hover {
  background-color: var(--mkto-button-hover-bg) !important;
  color: var(--mkto-button-hover-text) !important;
  border-color: transparent !important;
}

.mktoForm.mktoForm button.mktoButton::before,
.mktoForm.mktoForm .mktoButton::before {
  position: absolute;
  inset: 0px;
  z-index: -2;
  content: "";
  border-radius: inherit;
  background-color: var(--mkto-button-bg) !important;
  opacity: 1;
  transition:
    inset 0.3s ease,
    opacity 0.3s ease;
}

.mktoForm.mktoForm button.mktoButton:hover::before,
.mktoForm.mktoForm .mktoButton:hover::before {
  opacity: 0 !important;
  inset: -4px;
}

.mktoForm.mktoForm button.mktoButton::after,
.mktoForm.mktoForm .mktoButton::after {
  position: absolute;
  inset: 0px;
  z-index: 1;
  content: "";
  border-radius: inherit;
  border: 1px solid var(--mkto-button-bg);
  transition:
    inset 0.3s ease,
    border-color 0.3s ease;
}

.mktoForm.mktoForm button.mktoButton:hover::after,
.mktoForm.mktoForm .mktoButton:hover::after {
  border-color: var(--mkto-button-hover-border) !important;
  inset: -4px;
}

.mktoForm.mktoForm button.mktoButton:focus-visible,
.mktoForm.mktoForm .mktoButton:focus-visible {
  outline: var(--knox-focus-outline) !important;
  outline-color: var(--mkto-button-hover-border) !important;
  outline-offset: calc(-2 * var(--knox-focus-offset)) !important;
}

.mktoForm.mktoForm .mkto-form-submit-area {
  display: flex !important;
  flex-direction: column !important;
  gap: 32px !important;
}

.mktoForm.mktoForm .mktoButtonWrap,
.mktoForm .mktoButtonWrap.mktoRound .mktoButton {
  width: 100% !important;
}

/* Parent page viewport (iframe receives via postMessage) — overrides media query when set */
body[data-viewport="desktop"] .mktoForm.mktoForm .mkto-form-submit-area {
  flex-direction: row !important;
  align-items: center !important;
}

:is(body[data-viewport="desktop"], body[data-viewport="tablet"])
  .mktoForm.mktoForm
  .mkto-form-submit-area
  .mktoButtonWrap,
:is(body[data-viewport="desktop"], body[data-viewport="tablet"])
  .mktoForm.mktoForm
  .mkto-form-submit-area
  .mktoButton {
  width: auto !important;
}

/* Newsletter forms: stack the disclaimer above the submit button at every
   viewport (contact/other forms keep the beside-or-below layout above). The
   desktop selector below outranks the generic desktop row rule so the column
   layout is preserved on wide viewports. */
.mktoForm.mktoForm .mkto-form-submit-area[data-form-type="newsletter"],
body[data-viewport="desktop"]
  .mktoForm.mktoForm
  .mkto-form-submit-area[data-form-type="newsletter"] {
  flex-direction: column !important;
  align-items: stretch !important;
}

.mktoForm.mktoForm .mkto-form-submit-area[data-form-type="newsletter"] {
  margin-top: -24px;
}

.mktoForm.mktoForm
  .mkto-form-submit-area[data-form-type="newsletter"]
  #marketo-disclaimer-container {
  order: -1 !important;
}

/* ── Rich text ── */

.mktoForm.mktoForm .mktoHtmlText {
  font-size: 14px !important;
  font-weight: var(--mkto-field-font-weight) !important;
  letter-spacing: -0.28px !important;
  color: var(--mkto-body-text-color) !important;
}

.mktoForm.mktoForm .mktoHtmlText a {
  color: var(--mkto-link-color) !important;
  text-decoration: underline !important;
}

.mktoForm.mktoForm .mktoHtmlText a:hover {
  text-decoration: none !important;
}

/* ── Custom select dropdown ── */

.mktoForm.mktoForm .mkto-select-wrapper + select.mktoField {
  display: none !important;
}

.mktoForm.mktoForm .mkto-select-wrapper {
  position: relative !important;
  width: 100% !important;
}

.mktoForm.mktoForm .mkto-select-trigger {
  position: relative !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  height: var(--mkto-field-height) !important;
  border-radius: var(--knox-field-border-radius) !important;
  border: 1px solid var(--mkto-border-color) !important;
  box-shadow: none !important;
  background-color: var(--mkto-bg) !important;
  color: var(--mkto-text-color) !important;
  font-size: var(--mkto-field-font-size) !important;
  font-weight: var(--mkto-field-font-weight) !important;
  letter-spacing: var(--mkto-field-letter-spacing) !important;
  padding: var(--mkto-field-padding) !important;
  padding-right: 40px !important;
  cursor: pointer !important;
  text-align: start !important;
  outline: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

.mktoForm.mktoForm .mkto-select-trigger:hover {
  background-color: var(--knox-select-background-hover) !important;
}

.mktoForm.mktoForm .mkto-select-trigger:focus,
.mktoForm.mktoForm .mkto-select-trigger:focus-visible {
  outline: var(--knox-focus-outline) !important;
  outline-offset: calc(-2 * var(--knox-focus-offset)) !important;
}

.mktoForm.mktoForm .mkto-select-trigger:active {
  border-color: var(--knox-field-border-active) !important;
}

.mktoForm.mktoForm
  .mkto-select-wrapper
  .mkto-select-trigger[data-placeholder="true"] {
  color: var(--knox-field-placeholder-color) !important;
}

.mktoForm.mktoForm .mkto-select-value {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  flex: 1 !important;
}

.mktoForm.mktoForm .mkto-select-icon {
  position: absolute !important;
  display: flex !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  height: 16px !important;
  width: 16px !important;
  pointer-events: none !important;
  inset-inline-end: var(--mkto-field-padding) !important;
  transition: transform 0.2s ease !important;
  color: var(--iron-ore-new-500) !important;
}

.mktoForm.mktoForm .mkto-select-wrapper.mkto-select-open .mkto-select-icon {
  transform: translateY(-50%) rotate(180deg) !important;
}

.mktoForm.mktoForm
  .mkto-select-wrapper.mkto-select-open
  .mkto-select-trigger:focus,
.mktoForm.mktoForm
  .mkto-select-wrapper.mkto-select-open
  .mkto-select-trigger:focus-visible {
  outline: none !important;
}

.mktoForm.mktoForm .mkto-select-dropdown {
  display: none !important;
  position: absolute !important;
  top: calc(100% + 4px) !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-height: 240px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  background-color: var(--mkto-bg) !important;
  border-radius: var(--knox-field-border-radius) !important;
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -2px rgba(0, 0, 0, 0.1) !important;
  border: 1px solid var(--mkto-border-color) !important;
  padding: var(--knox-select-popover-padding) !important;
  z-index: 1000 !important;
}

.mktoForm.mktoForm .mkto-select-wrapper.mkto-select-open .mkto-select-dropdown {
  display: block !important;
}

.mktoForm.mktoForm .mkto-select-option {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  color: var(--mkto-text-color) !important;
  font-size: var(--mkto-field-font-size) !important;
  font-weight: var(--mkto-field-font-weight) !important;
  letter-spacing: var(--mkto-field-letter-spacing) !important;
  border-radius: var(--knox-field-border-radius) !important;
  padding-block: var(--knox-select-option-padding-block);
  padding-inline: var(--knox-select-option-padding-inline);
  cursor: pointer !important;
  user-select: none !important;
  min-height: var(--knox-select-option-min-height);
}

.mktoForm.mktoForm .mkto-select-option:hover,
.mktoForm.mktoForm .mkto-select-option.mkto-select-highlighted {
  background-color: var(--knox-select-background-hover) !important;
  color: var(--knox-select-option-focused-color) !important;
}

.mktoForm.mktoForm .mkto-select-option[aria-selected="true"] {
  background-color: var(--knox-select-option-checked) !important;
}

.mktoForm.mktoForm .mkto-select-option-check {
  display: none !important;
  flex-shrink: 0 !important;
  margin-inline-start: 8px !important;
  color: var(--knox-select-option-icon-color) !important;
}

.mktoForm.mktoForm
  .mkto-select-option[aria-selected="true"]
  .mkto-select-option-check {
  display: block !important;
}

.mktoForm.mktoForm .mkto-select-option:hover .mkto-select-option-check,
.mktoForm.mktoForm
  .mkto-select-option.mkto-select-highlighted
  .mkto-select-option-check {
  color: var(--knox-select-option-focused-color) !important;
}

.mktoForm.mktoForm .mkto-select-option[aria-selected="true"]:hover,
.mktoForm.mktoForm
  .mkto-select-option[aria-selected="true"].mkto-select-highlighted {
  background-color: var(--knox-select-option-checked) !important;
}

.mktoForm.mktoForm .mkto-select-option:focus-visible {
  outline: var(--knox-select-option-outline) !important;
  outline-offset: -3px !important;
}

/* ── Helper text ── */

.mktoForm .mktoFieldWrap .mktoInstruction {
  letter-spacing: var(--knox-field-sub-text-letter-spacing);
  font-size: var(--knox-field-sub-text-font-size) !important;
}

.mktoForm .mktoFieldWrap .mktoInstruction:not(:empty) {
  display: block !important;
  margin-top: 0;
}

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

/* ── Disclaimer (injected from parent via postMessage) ── */

#marketo-disclaimer-container {
  font-size: 14px;
  font-weight: var(--mkto-field-font-weight);
  letter-spacing: -0.28px;
  color: var(--mkto-body-text-color);
  line-height: 1.5;
}

#marketo-disclaimer-container a {
  color: var(--mkto-link-color);
  text-decoration: underline;
  padding: 0 !important;
}

#marketo-disclaimer-container a:hover {
  text-decoration: none;
}