Lead capture

<!-- SaveForm.io: lead-capture (soft) -->
<style>
[data-sf-tpl="lead-capture"] {
  all: revert;
  box-sizing: border-box;
  display: block;
  width: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #18181b;
  -webkit-font-smoothing: antialiased;
}
[data-sf-tpl="lead-capture"] *,
[data-sf-tpl="lead-capture"] *::before,
[data-sf-tpl="lead-capture"] *::after {
  box-sizing: border-box;
}
[data-sf-tpl="lead-capture"] input,
[data-sf-tpl="lead-capture"] textarea,
[data-sf-tpl="lead-capture"] select,
[data-sf-tpl="lead-capture"] button {
  font: inherit;
  color: inherit;
  margin: 0;
}
[data-sf-tpl="lead-capture"] button {
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
[data-sf-tpl="lead-capture"] label {
  display: block;
}
[data-sf-tpl="lead-capture"].sf-lead-capture--soft {
  max-width: 520px;
  background: #ffffff;
  border-radius: 20px;
  padding: 36px;
  box-shadow: 0 20px 50px -20px rgba(15, 23, 42, 0.18), 0 0 0 1px rgba(15, 23, 42, 0.05);
}
[data-sf-tpl="lead-capture"] .sf-lead-capture__eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #4338ca;
  margin: 0 0 8px 0;
}
[data-sf-tpl="lead-capture"] .sf-lead-capture__title {
  font-size: 26px;
  font-weight: 700;
  margin: 0 0 6px 0;
  color: #0f172a;
  letter-spacing: -0.02em;
}
[data-sf-tpl="lead-capture"] .sf-lead-capture__lede {
  font-size: 14px;
  color: #64748b;
  margin: 0 0 24px 0;
}
[data-sf-tpl="lead-capture"] .sf-lead-capture__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}
[data-sf-tpl="lead-capture"] .sf-lead-capture__field {
  margin-bottom: 14px;
}
[data-sf-tpl="lead-capture"] .sf-lead-capture__label {
  font-size: 13px;
  font-weight: 500;
  color: #475569;
  margin-bottom: 6px;
}
[data-sf-tpl="lead-capture"] .sf-lead-capture__input,
[data-sf-tpl="lead-capture"] .sf-lead-capture__textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #f8fafc;
  font-size: 14px;
  outline: none;
  transition: border-color 120ms ease, background 120ms ease, box-shadow 120ms ease;
}
[data-sf-tpl="lead-capture"] .sf-lead-capture__textarea {
  resize: vertical;
  min-height: 90px;
}
[data-sf-tpl="lead-capture"] .sf-lead-capture__input:focus,
[data-sf-tpl="lead-capture"] .sf-lead-capture__textarea:focus {
  border-color: #818cf8;
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(129, 140, 248, 0.18);
}
[data-sf-tpl="lead-capture"] .sf-lead-capture__button {
  width: 100%;
  padding: 12px 18px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #ffffff;
  font-weight: 600;
  font-size: 14px;
  border-radius: 10px;
  border: 0;
  transition: filter 120ms ease, transform 120ms ease;
}
[data-sf-tpl="lead-capture"] .sf-lead-capture__button:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}
[data-sf-tpl="lead-capture"] .sf-lead-capture__fine {
  font-size: 12px;
  color: #94a3b8;
  margin: 12px 0 0 0;
  text-align: center;
}
[data-sf-tpl="lead-capture"] .sf-lead-capture__honey {
  position: absolute;
  left: -9999px;
}
</style>
<form
  class="sf-lead-capture--soft"
  data-sf-tpl="lead-capture"
  action="https://saveform.io/api/submit/YOUR_FORM_ID"
  method="POST"
>
  <p class="sf-lead-capture__eyebrow">Talk to sales</p>
  <h2 class="sf-lead-capture__title">Get a 20-minute walkthrough</h2>
  <p class="sf-lead-capture__lede">Tell us about your stack and we&apos;ll tailor the call to it.</p>

  <input type="text" name="_honey" class="sf-lead-capture__honey" tabindex="-1" autocomplete="off" />

  <div class="sf-lead-capture__grid">
    <div>
      <label class="sf-lead-capture__label" for="sf-lead-capture-name-s">Name</label>
      <input id="sf-lead-capture-name-s" class="sf-lead-capture__input" type="text" name="name" required />
    </div>
    <div>
      <label class="sf-lead-capture__label" for="sf-lead-capture-email-s">Work email</label>
      <input id="sf-lead-capture-email-s" class="sf-lead-capture__input" type="email" name="email" required />
    </div>
  </div>

  <div class="sf-lead-capture__grid">
    <div>
      <label class="sf-lead-capture__label" for="sf-lead-capture-company-s">Company</label>
      <input id="sf-lead-capture-company-s" class="sf-lead-capture__input" type="text" name="company" required />
    </div>
    <div>
      <label class="sf-lead-capture__label" for="sf-lead-capture-role-s">Role</label>
      <input id="sf-lead-capture-role-s" class="sf-lead-capture__input" type="text" name="role" required />
    </div>
  </div>

  <div class="sf-lead-capture__field">
    <label class="sf-lead-capture__label" for="sf-lead-capture-msg-s">What are you trying to do?</label>
    <textarea id="sf-lead-capture-msg-s" class="sf-lead-capture__textarea" name="message" required></textarea>
  </div>

  <button class="sf-lead-capture__button" type="submit">Request a demo</button>
  <p class="sf-lead-capture__fine">We respond within one business day.</p>
</form>