/* Contact-sales modal (Enterprise inquiry). Shared by the public pricing page
   and the in-app upgrade page. Deliberately self-contained: hardcoded brand
   tokens + its own submit-button styling, so it renders identically whether the
   host page uses the marketing CSS or the in-app design system, with no
   dependency on either page's .btn classes or button reset. */
.contact-modal {
  border: none;
  border-radius: 20px;
  padding: 0;
  width: min(560px, calc(100vw - 32px));
  margin: auto;                 /* dialog centering, independent of any page's `* { margin:0 }` reset */
  background: #FFFFFF;
  color: #1D1D1F;
  box-shadow: 0 24px 64px rgba(0,0,0,0.22);
  font-family: 'Plus Jakarta Sans', -apple-system, system-ui, sans-serif;
}
.contact-modal::backdrop { background: rgba(20,20,25,0.45); backdrop-filter: blur(3px); }
.contact-modal[open] { animation: cm-pop 180ms ease; }
@keyframes cm-pop { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }
.contact-modal__inner { position: relative; padding: 32px; max-height: calc(100dvh - 48px); overflow-y: auto; }
.contact-modal__close {
  position: absolute; top: 16px; right: 16px; width: 34px; height: 34px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center; color: #6E6E73;
  background: transparent; border: none; cursor: pointer; transition: all 150ms ease;
}
.contact-modal__close:hover { background: rgba(0,0,0,0.05); color: #1D1D1F; }
.contact-modal__close svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2; fill: none; }
.contact-modal__title { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; margin: 0 36px 8px 0; }
.contact-modal__sub { font-size: 15px; color: #4A4A4F; line-height: 1.5; margin: 0 0 24px; }

/* form */
.cm-form { display: flex; flex-direction: column; gap: 16px; }
.cm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cm-field { display: flex; flex-direction: column; gap: 6px; }
.cm-field label { font-size: 13px; font-weight: 600; color: #1D1D1F; }
.cm-field label .req { color: #CB333B; }
.cm-input {
  height: 46px; padding: 0 16px; border-radius: 12px; border: 1.5px solid #E5E5EA;
  background: #FAFAFC; font: inherit; font-size: 15px; color: #1D1D1F;
  transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
}
.cm-input::placeholder { color: #A1A1A6; }
.cm-input:focus { outline: none; border-color: #CB333B; background: #FFFFFF; box-shadow: 0 0 0 3px rgba(203,51,59,0.12); }

/* notes textarea */
.cm-textarea {
  min-height: 100px; padding: 12px 16px; border-radius: 12px; border: 1.5px solid #E5E5EA;
  background: #FAFAFC; font: inherit; font-size: 15px; color: #1D1D1F; line-height: 1.5; resize: vertical;
  transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
}
.cm-textarea::placeholder { color: #A1A1A6; }
.cm-textarea:focus { outline: none; border-color: #CB333B; background: #FFFFFF; box-shadow: 0 0 0 3px rgba(203,51,59,0.12); }

/* self-contained submit button (no dependency on a page .btn / .btn-primary) */
.cm-submit {
  width: 100%; margin-top: 4px; height: 46px; border: none; border-radius: 999px;
  background: #CB333B; color: #FFFFFF; font: inherit; font-size: 15px; font-weight: 600;
  cursor: pointer; transition: background 150ms ease;
}
.cm-submit:hover { background: #AC2B32; }
.cm-submit[aria-disabled="true"] { opacity: 0.7; cursor: default; }

.cm-privacy { font-size: 12px; color: #8E8E93; text-align: center; line-height: 1.5; margin: 2px 0 0; }
.cm-privacy a { color: #6E6E73; text-decoration: underline; }
.cm-status { font-size: 14px; border-radius: 12px; padding: 12px 14px; display: none; }
.cm-status.is-error { display: block; background: rgba(203,51,59,0.08); color: #AC2B32; }
.cm-status.is-success { display: block; background: rgba(31,122,69,0.10); color: #1F7A45; }

/* modules checkbox group */
.cm-fieldset { border: none; padding: 0; margin: 0; min-width: 0; }
.cm-legend { font-size: 13px; font-weight: 600; color: #1D1D1F; padding: 0; margin: 0 0 8px; }
.cm-legend .req { color: #CB333B; }
.cm-checks { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.cm-check { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: #1D1D1F; cursor: pointer; }
.cm-check input { width: 16px; height: 16px; accent-color: #CB333B; cursor: pointer; }
.cm-check-sub { margin-top: 10px; padding-left: 2px; }
.cm-sub-label { display: block; font-size: 12px; font-weight: 600; color: #6E6E73; margin: 0 0 6px; }
.cm-fieldset[aria-invalid="true"] .cm-legend { color: #AC2B32; }

/* "About your setup" section header */
.cm-section-label { font-size: 13px; font-weight: 700; color: #1D1D1F; margin: 4px 0 -4px; }
.cm-optional { font-weight: 400; color: #8E8E93; }

/* selects reuse .cm-input; reset the native chrome and add a chevron */
select.cm-input {
  appearance: none; -webkit-appearance: none; -moz-appearance: none; cursor: pointer;
  padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236E6E73' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}

/* inline field errors */
.cm-field-error { font-size: 12px; color: #AC2B32; line-height: 1.4; }
.cm-field-error:empty { display: none; }
.cm-input[aria-invalid="true"], .cm-textarea[aria-invalid="true"] {
  border-color: #CB333B; box-shadow: 0 0 0 3px rgba(203,51,59,0.12);
}

@media (max-width: 520px) {
  .cm-grid { grid-template-columns: 1fr; }
  .contact-modal__inner { padding: 24px 20px; }
}