/* Lead form for zendr.se content pages (pricing, comparison).
   Reuses /lp/_shared/lp.js verbatim — that file carries the click-ID attribution and the
   dataLayer `form_submit` push the Google Ads campaigns bid on, so it must not be forked.
   What differs here is only the look: the ad landing pages are a separate design system
   (see the 2026-10-08 decision) and must not bleed into the site. These styles follow the
   site's own tokens instead: Poppins, black buttons, #F64337 as the accent, 6px radii.

   lp.js expects this class contract: .formcard > form.f#leadform, .field (+.bad), .err,
   .formnote (+.bad), .btn, and .done shown when .formcard gets .sent. */

.zendr-leadform{margin:0 auto;max-width:720px;padding:0 20px}
.zendr-leadform .formcard{
  background:#fff;border:1px solid #E2E7EA;border-radius:16px;
  padding:34px 34px 28px;font-family:"Poppins",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:#1F1F1F;box-shadow:0 2px 14px rgba(31,31,31,.05)
}
.zendr-leadform .formcard>h2{font-size:24px;line-height:1.25;font-weight:600;margin:0 0 6px}
.zendr-leadform .formcard>p.intro{font-size:15px;color:#5F6B72;margin:0 0 22px;line-height:1.55}

.zendr-leadform .f{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px}
.zendr-leadform .field{display:flex;flex-direction:column;gap:6px;min-width:0}
.zendr-leadform .field.wide{grid-column:1/-1}
.zendr-leadform .field label{font-size:13.5px;font-weight:500;color:#1F1F1F}
.zendr-leadform .field input,
.zendr-leadform .field select{
  font-family:inherit;font-size:15px;color:#1F1F1F;background:#fff;
  border:1px solid #D7DEE2;border-radius:6px;padding:11px 13px;width:100%;
  transition:border-color .12s ease,box-shadow .12s ease
}
.zendr-leadform .field select{appearance:none;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235F6B72' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;padding-right:34px}
.zendr-leadform .field input:focus,
.zendr-leadform .field select:focus{outline:none;border-color:#1F1F1F;box-shadow:0 0 0 3px rgba(31,31,31,.08)}
.zendr-leadform .field.bad input,
.zendr-leadform .field.bad select{border-color:#F64337}
.zendr-leadform .field .err{font-size:12.5px;color:#C5281C;display:none}
.zendr-leadform .field.bad .err{display:block}

.zendr-leadform .formnote{grid-column:1/-1;font-size:14px;padding:11px 14px;border-radius:6px;display:none;margin:0}
.zendr-leadform .formnote.bad{display:block;background:#FDECEA;color:#C5281C}

.zendr-leadform .btn{
  grid-column:1/-1;justify-self:start;font-family:inherit;font-size:15px;font-weight:600;
  background:#000;color:#fff;border:none;border-radius:6px;padding:13px 30px;cursor:pointer;
  transition:opacity .12s ease
}
.zendr-leadform .btn:hover{opacity:.86}
.zendr-leadform .btn:disabled{opacity:.6;cursor:default}
.zendr-leadform .fine{grid-column:1/-1;font-size:12.5px;color:#5F6B72;margin:2px 0 0;line-height:1.5}
.zendr-leadform .fine a{color:#5F6B72;text-decoration:underline}

/* Honeypot. It must be off-screen and never display:none — a hidden-by-display field is
   skipped by browser autofill, which is the behaviour we want, but lp.js silently discards
   any submission where it is filled. A missing rule here renders it as a visible "leave
   blank" box and quietly drops real leads (that is exactly what happened on the ad landing
   pages: lp.css lost its .hp rule in a rebase and the loss went unnoticed for weeks). */
.zendr-leadform .hp{position:absolute !important;left:-9999px !important;top:auto !important;width:1px;height:1px;overflow:hidden;pointer-events:none}

/* Success state: lp.js adds .sent to .formcard */
.zendr-leadform .done{display:none;text-align:left}
.zendr-leadform .formcard.sent .f,
.zendr-leadform .formcard.sent>h2,
.zendr-leadform .formcard.sent>p.intro{display:none}
.zendr-leadform .formcard.sent .done{display:block}
.zendr-leadform .done svg{width:48px;height:48px;display:block;margin:0 0 14px}
.zendr-leadform .done h2{font-size:22px;font-weight:600;margin:0 0 8px}
.zendr-leadform .done p{font-size:15px;color:#5F6B72;margin:0;line-height:1.55}

@media(max-width:640px){
  .zendr-leadform{padding:0 16px}
  .zendr-leadform .formcard{padding:24px 20px 20px;border-radius:12px}
  .zendr-leadform .f{grid-template-columns:1fr}
  .zendr-leadform .formcard>h2{font-size:21px}
  .zendr-leadform .btn{justify-self:stretch;width:100%}
}