/* ===========================================================================
   Shared lead form modal (Request Demo / Contact / pricing calculator)
   Loaded site-wide from baseof.html.
   ======================================================================== */
.lf {
  --lf-accent: #E6007E;
  --lf-accent-dark: #C4006C;

  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
  font-family: 'Inter', system-ui, sans-serif;
}
.lf[hidden] { display: none; }

.lf__backdrop { position: fixed; inset: 0; background: rgba(15, 23, 42, .55); backdrop-filter: blur(3px); }

.lf__panel {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: auto;
  background: #fff;
  color: #111827;
  border-radius: 14px;
  padding: 28px;
  box-shadow: 0 24px 60px rgba(17, 24, 39, .28);
}

.lf__x { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border: 0; background: none; font-size: 24px; line-height: 1; color: #9CA3AF; cursor: pointer; border-radius: 50%; }
.lf__x:hover { background: #F3F4F6; color: #111827; }

.lf__title { font-size: 21px; font-weight: 700; margin: 0 0 6px; }
.lf__intro { font-size: 14px; line-height: 1.55; color: #6B7280; margin: 0 0 20px; }

.lf__field { display: block; margin-bottom: 14px; }
.lf__field[hidden] { display: none; }
.lf__label { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 5px; }
.lf__label em { font-style: normal; font-weight: 400; color: #9CA3AF; }
.lf__field input,
.lf__field textarea {
  width: 100%; padding: 10px 12px;
  border: 1px solid #E5E7EB; border-radius: 8px;
  font-size: 15px; font-family: inherit; color: #111827; background: #fff;
  box-sizing: border-box;
}
.lf__field input { height: 42px; padding: 0 12px; }
.lf__field textarea { resize: vertical; min-height: 90px; line-height: 1.5; }
.lf__field input:focus,
.lf__field textarea:focus { outline: 2px solid var(--lf-accent); outline-offset: 1px; border-color: transparent; }
.lf__field input.is-invalid,
.lf__field textarea.is-invalid { border-color: #DC2626; }
.lf__err { display: block; font-size: 12.5px; color: #DC2626; margin-top: 4px; min-height: 1em; }

.lf__summary { border: 1px solid #F3F4F6; background: #FAFAFA; border-radius: 10px; padding: 14px 16px; margin: 6px 0 16px; }
.lf__summary[hidden] { display: none; }
.lf__summary h3 { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #6B7280; margin: 0 0 8px; }
.lf__summary dl { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; margin: 0; font-size: 13.5px; }
.lf__summary dt { color: #6B7280; }
.lf__summary dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }

.lf__privacy { font-size: 12px; color: #9CA3AF; margin: 0 0 14px; }
.lf__privacy a { color: #9CA3AF; text-decoration: underline; }

.lf__submit {
  display: block; width: 100%; text-align: center;
  background: var(--lf-accent); color: #fff;
  padding: 13px 0; border: 0; border-radius: 10px;
  font-size: 15px; font-weight: 700; font-family: inherit; cursor: pointer;
}
.lf__submit:hover { background: var(--lf-accent-dark); }
.lf__submit:disabled { opacity: .65; cursor: default; }

.lf__status { font-size: 13.5px; line-height: 1.5; margin: 12px 0 0; text-align: center; }
.lf__status.is-ok { color: #047857; }
.lf__status.is-error { color: #B91C1C; }

.lf :focus-visible { outline: 2px solid var(--lf-accent); outline-offset: 2px; }

@media (max-width: 560px) {
  .lf { padding: 12px; }
  .lf__panel { padding: 22px 18px; }
}

/* --- Success state: replaces the form once a lead is accepted ------------ */
.lf__head[hidden],
.lf__form[hidden],
.lf__done[hidden] { display: none; }

.lf__done { text-align: center; padding: 8px 0 4px; }

.lf__done-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: #ECFDF5;
  color: #047857;
}
.lf__done-mark svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

.lf__done-title { font-size: 21px; font-weight: 700; margin: 0 0 8px; }
.lf__done-text { font-size: 14.5px; line-height: 1.6; color: #6B7280; margin: 0 auto 22px; max-width: 340px; }
.lf__done .lf__submit { margin-top: 0; }

@media (prefers-reduced-motion: no-preference) {
  .lf__done:not([hidden]) { animation: lf-done-in .22s ease-out; }
  @keyframes lf-done-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
  }
  .lf__done:not([hidden]) .lf__done-mark { animation: lf-mark-in .32s cubic-bezier(.2, .8, .3, 1.2); }
  @keyframes lf-mark-in {
    from { transform: scale(.6); opacity: 0; }
    to   { transform: none; opacity: 1; }
  }
}