/* Demo-request form at the foot of buyer landing pages - includes/demo-form.php.
 *
 * Self-contained on purpose: the form goes onto Elementor-era pages (index.php, the
 * solution pages, the locale homepages) and onto tzc pages (pricing,
 * /mailroom-management-software/), so it cannot lean on either commercial.css or the
 * page-scoped contact-page rules. Tokens and field styling follow trust.css's form,
 * which solved the same problem first; see the IMPORTANT note there about what
 * style.css does to an unstyled Elementor form.
 *
 * Headings run to the 1140px menu width and sit on one line at desktop width.
 */
.tzd{
  --tzd-primary:#1C6BA6;
  --tzd-primary-border:#0B6BB1;
  --tzd-navy:#185B8D;
  --tzd-text:#40596B;
  --tzd-muted:#616F7D;
  --tzd-border:#AED4F0;
  --tzd-wash:#F0F5FF;
  --tzd-shadow:0 0 10px 0 rgba(0,0,0,.1);
  background:var(--tzd-wash);padding:64px 0;color:var(--tzd-text);
  font-family:"Inter Tight","Inter",system-ui,sans-serif;
  scroll-margin-top:90px}
@media(max-width:767px){.tzd{padding:44px 0}}
.tzd__wrap{max-width:1140px;margin:0 auto;padding:0 20px}
.tzd__head{text-align:center;margin:0 0 30px}
/* style.css gives h2 its own size plus padding-top:20px */
.tzd h2{font-size:clamp(26px,3.6vw,38px);font-weight:700;line-height:1.2;color:var(--tzd-navy);
  margin:0 0 12px;padding-top:0}
.tzd__lede{font-size:18px;line-height:1.65;color:var(--tzd-muted);margin:0 auto;max-width:860px}

/* Navy variant: continues the footer-coloured wave of the band above it (see
   includes/demo-form.php). #185B8D is --e-global-color-4207d84, the footer and wave fill. */
.tzd--navy{background:#185B8D;padding-top:40px;border-bottom:1px solid rgba(255,255,255,.14)}
.tzd--navy h2{color:#fff}
.tzd--navy .tzd__lede{color:#DCEEFA}

.tzd__form{background:#fff;border:.5px solid var(--tzd-border);border-radius:18px;
  box-shadow:var(--tzd-shadow);padding:34px 34px 30px;max-width:860px;margin:0 auto}
@media(max-width:767px){.tzd__form{padding:26px 20px 24px;border-radius:14px}}

.tzd__form .elementor-form-fields-wrapper{display:flex;flex-wrap:wrap;align-items:flex-start;margin:0 -8px}
/* Elementor's base .elementor-field-group is display:flex + align-items:center + flex-wrap:wrap.
   All three are overridden so label and input stack. */
.tzd__form .elementor-field-group{padding:0 8px;margin:0 0 18px;flex:0 0 100%;max-width:100%;
  display:flex;flex-direction:column;align-items:stretch;flex-wrap:nowrap}
.tzd__form .elementor-col-50{flex:0 0 50%;max-width:50%}
@media(max-width:640px){.tzd__form .elementor-col-50{flex:0 0 100%;max-width:100%}}

.tzd__form .elementor-field-label{display:block;width:100%;text-align:left;
  font-family:"Inter",sans-serif;font-size:14px;font-weight:600;
  color:var(--tzd-navy);padding:0 0 6px;line-height:1.4}
.tzd__form .elementor-field-required .elementor-field-label::after{content:" *";color:var(--tzd-primary)}

.tzd__form .elementor-field-textual{width:100%;border:1px solid var(--tzd-border);border-radius:12px;
  min-height:46px;padding:11px 16px;background:#fff;color:var(--tzd-text);
  font-family:inherit;font-size:15px;line-height:1.5;
  transition:border-color .15s,box-shadow .15s}
.tzd__form select.elementor-field-textual{appearance:none;-webkit-appearance:none;padding-right:42px;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23185B8D' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 16px center/12px 8px}
.tzd__form .elementor-field-textual::placeholder{color:#8CA3B5}
.tzd__form .elementor-field-textual:hover{border-color:#8FBFE4}
.tzd__form .elementor-field-textual:focus{outline:none;border-color:var(--tzd-primary);
  box-shadow:0 0 0 3px rgba(28,107,166,.14)}
.tzd__form textarea.elementor-field-textual{min-height:104px;resize:vertical}

.tzd__check{display:flex;align-items:flex-start;gap:11px;cursor:pointer;font-size:14.5px;line-height:1.5;color:var(--tzd-text)}
.tzd__check input{flex:0 0 auto;width:17px;height:17px;margin:2px 0 0;accent-color:var(--tzd-primary);cursor:pointer}
.tzd__check strong{color:var(--tzd-navy);font-weight:600}
.tzd__check small{font-size:13.5px;color:var(--tzd-muted)}

.tzd__form .e-form__buttons{margin:8px 0 0}
/* align-self keeps the pill its own width. :focus is restated because the theme sets
   button:focus{background:#CC3366}. */
.tzd__form button[type="submit"],.tzd__form button[type="submit"]:focus{align-self:flex-start;display:inline-flex;
  align-items:center;justify-content:center;font-family:"Inter",sans-serif;font-size:16px;font-weight:600;
  color:#fff;background:var(--tzd-primary);border:2px solid var(--tzd-primary-border);border-radius:50px;
  padding:12px 34px;min-height:44px;cursor:pointer;box-shadow:var(--tzd-shadow);transition:transform .3s}
.tzd__form button[type="submit"]:hover{transform:scale(1.04);background:var(--tzd-primary)}
.tzd__form button[type="submit"]:focus-visible{outline:2px solid var(--tzd-navy);outline-offset:3px}
.tzd__form button[type="submit"]:disabled{opacity:.6;cursor:default;transform:none}
@media(prefers-reduced-motion:reduce){.tzd__form button[type="submit"]{transition:none}
  .tzd__form button[type="submit"]:hover{transform:none}}

/* .tzr-form-msg / .tzr-ok / .tzr-err / .tzr-invalid are global in style.css - do not redefine. */