/* Contact modal styles — extracted from the landing page so every
   marketing page renders the identical "Get in touch" modal. Tokens are
   scoped to .demo-modal so it keeps the landing's palette regardless of
   the host page's own :root. Paired with /contact-modal.js. */
.demo-modal {
  --accent: #3498db;
  --body: "Outfit", sans-serif;
  --heading: "Outfit", sans-serif;
  --border: #e8e8ec;
  --text: #1a1a1f;
  --text-dim: #6b6b76;
  --text-muted: #a0a0ab;
}
.section-title {
  font-family: var(--heading);
  font-weight: 700;
  font-size: 32px;
  color: var(--text);
  line-height: 1.2;
  letter-spacing: -0.5px;
}
.btn-submit {
  width: 100%;
  padding: 14px;
  font-family: var(--body);
  font-size: 14px;
  font-weight: 600;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 4px;
}
.btn-submit:hover {
  background: #2980b9;
  transform: translateY(-1px);
}
.demo-modal {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.demo-modal.open {
  display: flex;
}
.demo-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(4px);
}
.demo-modal__panel {
  position: relative;
  width: 100%;
  max-width: 780px;
  max-height: 90vh;
  overflow-y: auto;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 30px 80px rgba(15, 23, 42, 0.28);
  animation: demoModalIn 0.24s ease;
}
@keyframes demoModalIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.demo-modal__body {
  padding: 48px 44px 40px;
}
.demo-modal__close {
  /* Sticky (not absolute) so the X stays reachable when the
     panel content scrolls -- previously the button was
     anchored to the panel's TOP and scrolled out of view with
     the form, leaving mobile users unable to close the modal
     without swiping all the way back to the top. Sticky pins
     it to the panel's scroll viewport at top:14px, always. */
  position: sticky;
  top: 14px;
  margin: 14px 14px -34px auto;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: #f1f5f9;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  transition:
    background 0.2s ease,
    color 0.2s ease;
  /* Small ring so the button reads as clickable when it sits
     over form content that scrolls beneath it. */
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.9);
}
.demo-modal__close:hover {
  background: #e2e8f0;
  color: var(--text);
}
.demo-modal__close svg {
  width: 16px;
  height: 16px;
}
body.demo-modal-open {
  overflow: hidden;
}
/* Simplified demo request form (inside .demo-modal) */
.demo-form {
  display: grid;
  gap: 14px;
}
.demo-form__row--two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.demo-form__field {
  display: grid;
  gap: 6px;
}
.demo-form__label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
  letter-spacing: 0.2px;
}
.demo-form input[type="text"],
.demo-form input[type="email"],
.demo-form textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: var(--body);
  font-size: 14px;
  color: var(--text);
  background: #fff;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}
.demo-form input:focus,
.demo-form textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.12);
}

/* Custom dropdown — replaces native <select> so we're not
   stuck with the OS-default macOS popup styling. Trigger
   is styled to match .demo-form inputs; menu is absolutely
   positioned below, styled to match the rest of the form. */
.cdd {
  position: relative;
}
.cdd__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #ffffff;
  font-family: var(--body);
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}
.cdd__trigger:focus,
.cdd.is-open .cdd__trigger {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.12);
}
.cdd__value {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
}
.cdd__value.is-placeholder {
  color: #94a3b8;
}
.cdd__caret {
  width: 12px;
  height: 8px;
  color: #94a3b8;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.cdd.is-open .cdd__caret {
  transform: rotate(180deg);
}
.cdd__menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 260px;
  overflow-y: auto;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 12px 28px -12px rgba(15, 23, 42, 0.18);
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition:
    opacity 0.15s ease,
    transform 0.15s ease;
  z-index: 10;
}
.cdd.is-open .cdd__menu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.cdd__opt {
  padding: 9px 12px;
  border-radius: 6px;
  font-family: var(--body);
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
  transition:
    background 0.12s ease,
    color 0.12s ease;
}
.cdd__opt:hover,
.cdd__opt.is-active {
  background: rgba(47, 107, 255, 0.08);
  color: #2f6bff;
}
.cdd__opt.is-selected {
  background: rgba(47, 107, 255, 0.14);
  color: #2f6bff;
  font-weight: 600;
}
.demo-form__check {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 4px;
  font-size: 13px;
  color: var(--text-dim);
  cursor: pointer;
  user-select: none;
}
.demo-form__check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #2f6bff;
  cursor: pointer;
}
.demo-form textarea {
  resize: vertical;
  min-height: 72px;
  font-family: var(--body);
}
.demo-form .btn-submit {
  margin-top: 6px;
  padding: 13px 22px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-family: var(--body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: background 0.2s ease;
}
.demo-form .btn-submit:hover {
  background: #2980b9;
}
.demo-form__alt {
  margin-top: 14px;
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
}
.demo-form__alt-copy {
  color: #2f6bff;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: rgba(47, 107, 255, 0.3);
  text-underline-offset: 3px;
  cursor: pointer;
}
.demo-form__alt-copy:hover {
  text-decoration-color: #2f6bff;
}
.demo-form__alt-copy .close-footer__copy-toast {
  color: #ffffff;
  background: #2f6bff;
  border-color: #2f6bff;
}
/* Success card — SAMS-branded panel. Soft blue radial glow
   behind the check + gentle top-to-bottom tint so the surface
   has depth instead of reading as a stock white component.
   No top accent bar; the check is the single focal point. */
.demo-form__success {
  display: none;
  position: relative;
  margin: -12px -8px -12px;
  padding: 32px 28px 24px;
  text-align: center;
  background:
    radial-gradient(
      ellipse 70% 50% at 50% 0%,
      rgba(47, 107, 255, 0.1),
      transparent 70%
    ),
    linear-gradient(180deg, rgba(47, 107, 255, 0.04) 0%, #ffffff 100%);
  border-radius: 12px;
  overflow: hidden;
}
.demo-form__success-icon {
  width: 68px;
  height: 68px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: #2f6bff;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 0 0 8px rgba(47, 107, 255, 0.12),
    0 14px 32px -12px rgba(47, 107, 255, 0.5);
}
.demo-form__success-icon svg {
  width: 32px;
  height: 32px;
}
.demo-form__success-title {
  font-family: var(--heading);
  font-size: 26px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.5px;
  margin-bottom: 10px;
}
.demo-form__success-title span {
  color: #2f6bff;
}
.demo-form__success-sub {
  font-size: 14.5px;
  color: var(--text-dim);
  line-height: 1.6;
  max-width: 400px;
  margin: 0 auto 22px;
}
.demo-form__success-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.demo-form__success-alt {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 4px;
}
.demo-form__success-copy {
  color: #2f6bff;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: rgba(47, 107, 255, 0.3);
  text-underline-offset: 3px;
  cursor: pointer;
}
.demo-form__success-copy:hover {
  text-decoration-color: #2f6bff;
}
.demo-form__success-copy .close-footer__copy-toast {
  color: #ffffff;
  background: #2f6bff;
  border-color: #2f6bff;
}
.demo-form__success-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: 7px;
  font-family: var(--body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.3px;
  cursor: pointer;
  text-decoration: none;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    transform 0.15s ease;
}
.demo-form__success-btn svg {
  width: 15px;
  height: 15px;
}
.demo-form__success-btn--primary {
  background: #2f6bff;
  color: #ffffff;
  border: 1px solid #2f6bff;
}
.demo-form__success-btn--primary:hover {
  background: #2557d8;
  border-color: #2557d8;
  transform: translateY(-1px);
}
.demo-form__success-btn--secondary {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}
.demo-form__success-btn--secondary:hover {
  border-color: #2f6bff;
  color: #2f6bff;
  transform: translateY(-1px);
}
@media (max-width: 560px) {
  .demo-form__row--two {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 720px) {
  .demo-modal {
    padding: 12px;
  }
  .demo-modal__body {
    padding: 40px 20px 28px;
  }
}