/* "Talk to sales" Marketo lightbox (form 3157). Matches the styling used on the Activate tour pages.
   Marketo builds: .mktoModal > .mktoModalMask (backdrop) + .mktoModalContent (white box) > .mktoModalClose + .mktoModalMain (form) */

/* Backdrop */
.mktoModalMask { position: fixed !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; background: #0b0630 !important; opacity: .6 !important; }

/* The white box: centred on screen; only this box scrolls, the page behind stays still */
html:has(.mktoModal), body:has(.mktoModal) { overflow: hidden !important; }
.mktoModal .mktoModalContent {
    position: fixed !important; top: 50% !important; left: 50% !important; right: auto !important; bottom: auto !important;
    transform: translate(-50%, -50%) !important; margin: 0 !important;
    width: 600px !important; max-width: 94vw !important; max-height: 90vh !important; box-sizing: border-box !important;
    overflow-y: auto !important; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    padding: 48px 40px 36px !important; background: #fff !important; border-radius: 16px !important; box-shadow: 0 24px 60px rgba(11,6,48,.35);
}
.mktoModal .mktoModalMain { width: 100% !important; }

/* Scrollbar: light brand-purple gradient */
.mktoModal .mktoModalContent { scrollbar-width: thin; scrollbar-color: #c4b5ff #f7f5ff; }
.mktoModal .mktoModalContent::-webkit-scrollbar { width: 8px; }
.mktoModal .mktoModalContent::-webkit-scrollbar-track { background: #f7f5ff; border-radius: 8px; margin: 8px 0; }
.mktoModal .mktoModalContent::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #b6a4ff 0%, #d9d0ff 100%); border-radius: 8px; }
.mktoModal .mktoModalContent::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #a18cff 0%, #c9bdff 100%); }

/* Heading */
.mktoModal .vts-tts-head { text-align: center; margin: 0 0 28px; font-family: proximanova, Arial, sans-serif; }
.mktoModal .vts-tts-title { margin: 0 0 10px; font-size: 32px; line-height: 1.2; font-weight: 600; color: #1a0b4b; }
.mktoModal .vts-tts-subtitle { margin: 0; font-size: 16px; line-height: 1.5; color: #4a4a4a; }

/* Form */
.mktoModal form.mktoForm {
    width: 100% !important; padding: 0 !important; font-family: proximanova, Arial, sans-serif !important;
    display: grid !important; grid-template-columns: 1fr 1fr; column-gap: 16px; row-gap: 18px;
}
.mktoModal form.mktoForm .mktoFormRow { grid-column: 1 / -1; margin: 0 !important; width: 100% !important; }
.mktoModal form.mktoForm .mktoFormRow:has([name=FirstName]),
.mktoModal form.mktoForm .mktoFormRow:has([name=LastName]) { grid-column: auto; }
/* Rows that only hold hidden fields (ga.cid, UTM, referrer...) take no space */
.mktoModal form.mktoForm .mktoFormRow:not(:has(input:not([type=hidden]), select, textarea)) { display: none !important; }
.mktoModal form.mktoForm > input[type=hidden], .mktoModal form.mktoForm > .mktoClear { display: none !important; }
.mktoModal form.mktoForm .mktoFormCol, .mktoModal form.mktoForm .mktoFieldWrap { width: 100% !important; float: none !important; margin: 0 !important; position: relative; }
.mktoModal form.mktoForm .mktoClear, .mktoModal form.mktoForm .mktoGutter, .mktoModal form.mktoForm .mktoOffset { display: none !important; }

/* Labels: always visible above each field (the form is built with hidden / inside-the-field labels) */
.mktoModal form.mktoForm label.mktoLabel {
    display: block !important; position: static !important; visibility: visible !important; opacity: 1 !important;
    clip: auto !important; clip-path: none !important; text-indent: 0 !important; overflow: visible !important;
    width: 100% !important; height: auto !important; float: none !important; margin: 0 !important;
    padding: 0 0 7px !important; text-align: left !important;
    font-size: 13px !important; font-weight: 600 !important; letter-spacing: .01em; line-height: 1.3 !important; color: #2a1a66 !important;
}
.mktoModal form.mktoForm label.mktoLabel::after { content: none !important; }
/* The label text already ends in "*", so hide Marketo's extra leading asterisk */
.mktoModal form.mktoForm .mktoAsterix { display: none !important; }

/* Inputs + dropdowns */
.mktoModal form.mktoForm input.mktoField:not([type=checkbox]):not([type=radio]),
.mktoModal form.mktoForm select.mktoField,
.mktoModal form.mktoForm textarea.mktoField {
    width: 100% !important; box-sizing: border-box !important; height: 48px !important; margin: 0 !important; padding: 0 14px !important;
    font-family: inherit !important; font-size: 15px !important; color: #1a0b4b !important;
    background-color: #fff !important; border: 1px solid #ddd8ee !important; border-radius: 8px !important;
    box-shadow: none !important; outline: none !important; transition: border-color .15s ease, box-shadow .15s ease;
}
.mktoModal form.mktoForm textarea.mktoField { height: auto !important; padding: 12px 14px !important; }
.mktoModal form.mktoForm input.mktoField:hover, .mktoModal form.mktoForm select.mktoField:hover { border-color: #b9aef0 !important; }
.mktoModal form.mktoForm input.mktoField:focus, .mktoModal form.mktoForm select.mktoField:focus, .mktoModal form.mktoForm textarea.mktoField:focus {
    border-color: #673fff !important; box-shadow: 0 0 0 3px rgba(103,63,255,.15) !important;
}
.mktoModal form.mktoForm input.mktoField.mktoInvalid, .mktoModal form.mktoForm select.mktoField.mktoInvalid { border-color: #d93025 !important; box-shadow: 0 0 0 3px rgba(217,48,37,.12) !important; }
/* The same text is also inside the fields as a placeholder: hide it so it isn't shown twice */
.mktoModal form.mktoForm input.mktoField::placeholder, .mktoModal form.mktoForm textarea.mktoField::placeholder { color: transparent !important; }
/* Dropdowns: custom arrow, grey while nothing is chosen */
.mktoModal form.mktoForm select.mktoField {
    -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; cursor: pointer;
    padding-right: 40px !important; color: #8a85a0 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1.5l6 6 6-6' stroke='%23673fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important; background-position: right 16px center !important; background-size: 14px 9px !important;
}
.mktoModal form.mktoForm select.mktoField:valid:not(.mktoInvalid) { color: #1a0b4b !important; }
.mktoModal form.mktoForm select.mktoField option { color: #1a0b4b; }

/* Consent checkbox row */
.mktoModal form.mktoForm .mktoCheckboxList { display: flex !important; align-items: flex-start; gap: 12px; padding: 4px 0 0 !important; width: 100% !important; }
.mktoModal form.mktoForm .mktoCheckboxList input[type=checkbox] { flex: 0 0 auto; width: 18px !important; height: 18px !important; margin: 2px 0 0 !important; accent-color: #673fff; cursor: pointer; }
.mktoModal form.mktoForm .mktoCheckboxList label, .mktoModal form.mktoForm .mktoCheckboxList label.mktoLabel {
    display: block !important; flex: 1 1 auto; width: auto !important; padding: 0 !important;
    font-size: 12.5px !important; font-weight: 400 !important; line-height: 1.5 !important; color: #5a5575 !important; cursor: pointer;
}
.mktoModal form.mktoForm .mktoCheckboxList label a { color: #673fff !important; text-decoration: underline; }

/* Consent row. Marketo outputs: <label> (text) + gutter + .mktoCheckboxList (the box), so put the box first */
.mktoModal form.mktoForm .mktoFormCol:has(.mktoCheckboxList) { margin: 0 !important; padding: 0 !important; }
.mktoModal form.mktoForm .mktoFieldWrap:has(.mktoCheckboxList) {
    display: flex !important; flex-direction: row; align-items: flex-start; gap: 12px; width: 100% !important;
    padding: 0; background: none;
}
.mktoModal form.mktoForm .mktoFieldWrap:has(.mktoCheckboxList) > .mktoCheckboxList { position: static !important; order: 1; flex: 0 0 auto; width: auto !important; padding: 0 !important; margin: 0 !important; display: block !important; }
.mktoModal form.mktoForm .mktoFieldWrap:has(.mktoCheckboxList) > label.mktoLabel { order: 2; flex: 1 1 0; min-width: 0; width: auto !important; padding: 0 !important; }
.mktoModal form.mktoForm .mktoFieldWrap:has(.mktoCheckboxList) > .mktoGutter,
.mktoModal form.mktoForm .mktoFieldWrap:has(.mktoCheckboxList) > .mktoClear,
.mktoModal form.mktoForm .mktoFieldWrap:has(.mktoCheckboxList) > .mktoInstruction:empty { display: none !important; }
.mktoModal form.mktoForm .mktoFieldWrap:has(.mktoCheckboxList) > label.mktoLabel {
    font-size: 12.5px !important; font-weight: 400 !important; line-height: 1.55 !important; color: #5a5575 !important; cursor: pointer;
}
.mktoModal form.mktoForm .mktoFieldWrap:has(.mktoCheckboxList) > label.mktoLabel a { color: #673fff !important; text-decoration: underline; }
.mktoModal form.mktoForm .mktoFieldWrap:has(.mktoCheckboxList) input[type=checkbox] { width: 18px !important; height: 18px !important; margin: 1px 0 0 !important; accent-color: #673fff; cursor: pointer; }

/* Submit button */
.mktoModal form.mktoForm .mktoButtonRow { grid-column: 1 / -1; }
.mktoModal form.mktoForm .mktoButtonWrap { margin: 0 !important; }
.mktoModal form.mktoForm button.mktoButton {
    display: block !important; width: 100% !important; max-width: 280px !important; margin: 8px auto 0 !important; height: auto !important;
    padding: 15px 28px !important; font-family: inherit !important; font-size: 16px !important; font-weight: 600 !important; color: #fff !important;
    border: 0 !important; border-radius: 999px !important; cursor: pointer; box-shadow: 0 6px 16px rgba(103,63,255,.28);
    background: linear-gradient(45deg, #673fff 0%, #8c82ff 100%) !important; transition: transform .15s ease, box-shadow .15s ease;
}
.mktoModal form.mktoForm button.mktoButton:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(103,63,255,.35); }
.mktoModal form.mktoForm .mktoError, .mktoModal form.mktoForm .mktoErrorMsg { font-size: 12px !important; }

/* Close button: replace Marketo's black circle "X" with a clean cross */
.mktoModal .mktoModalClose {
    position: absolute !important; top: 14px !important; right: 14px !important; left: auto !important;
    width: 36px !important; height: 36px !important; padding: 0 !important;
    border: 0 !important; border-radius: 50% !important; background: transparent !important;
    box-shadow: none !important; font-size: 0 !important; line-height: 0 !important; color: transparent !important;
    cursor: pointer; transition: background .15s ease;
}
.mktoModal .mktoModalClose::before,
.mktoModal .mktoModalClose::after {
    content: ""; position: absolute; top: 50%; left: 50%; width: 18px; height: 2px;
    background: #6b6b7b; border-radius: 1px; transition: background .15s ease;
}
.mktoModal .mktoModalClose::before { transform: translate(-50%, -50%) rotate(45deg); }
.mktoModal .mktoModalClose::after { transform: translate(-50%, -50%) rotate(-45deg); }
.mktoModal .mktoModalClose:hover { background: #f1eefc !important; }
.mktoModal .mktoModalClose:hover::before,
.mktoModal .mktoModalClose:hover::after { background: #1a0b4b; }
.mktoModal .mktoModalClose:focus-visible { outline: 2px solid #673fff; outline-offset: 2px; }

@media (max-width: 600px) {
    .mktoModal .mktoModalContent { padding: 44px 20px 28px !important; }
    .mktoModal .vts-tts-title { font-size: 26px; }
    .mktoModal form.mktoForm { grid-template-columns: 1fr; }
}