/* ============================================================================
   Design Partner application form.

   Replaces the mailto stopgap, which itself replaced a Calendly link that
   returned 404. Posts cross-origin to the app host's /api/leads.
   ============================================================================ */
.lead-backdrop { position: fixed; inset: 0; z-index: 1800; background: rgba(6,26,40,.55); backdrop-filter: blur(2px); }
.lead-modal {
  position: fixed; z-index: 1801; inset-block-start: 50%; inset-inline-start: 50%;
  transform: translate(-50%,-50%);
  width: min(520px, 94vw); max-height: 90vh; overflow-y: auto;
  background: #fff; color: #0B2536; border-radius: 18px;
  box-shadow: 0 24px 70px rgba(6,26,40,.35);
  font-family: 'Rubik', system-ui, sans-serif;
}
/* The page flips direction with the language; translate(-50%) is direction
   agnostic, but inset-inline-start is not — pin to left in both. */
html[dir="rtl"] .lead-modal, html[dir="ltr"] .lead-modal { left: 50%; right: auto; }

@media (max-width: 560px) {
  /* A sheet is reachable with one thumb; a centred card on a phone is not. */
  .lead-modal {
    inset: auto 0 0 0; transform: none; width: auto;
    max-height: 92vh; border-radius: 18px 18px 0 0;
  }
}
.lead-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px 22px 8px; }
.lead-head h2 { margin: 0; font-size: 20px; font-weight: 800; line-height: 1.3; }
.lead-head p  { margin: 6px 0 0; font-size: 13.5px; color: #3B5162; line-height: 1.6; }
.lead-x { flex-shrink: 0; width: 40px; height: 40px; border: 0; border-radius: 10px; background: transparent; cursor: pointer; color: #3B5162; font-size: 22px; line-height: 1; }
.lead-form { padding: 8px 22px 22px; display: grid; gap: 12px; }
.lead-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 460px) { .lead-two { grid-template-columns: 1fr; } }
.lead-field label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 5px; }
.lead-field .req { color: #E0604F; }
.lead-field input, .lead-field textarea, .lead-field select {
  width: 100%; box-sizing: border-box; min-height: 46px;
  padding: 11px 13px; border: 1px solid #D8E6EE; border-radius: 10px;
  /* 16px floor: iOS zooms a focused control that computes under it, and inside
     the app's WKWebView that zoom is a one-way trip. Same rule the app applies. */
  font: inherit; font-size: 16px; background: #fff; color: #0B2536;
}
.lead-field textarea { min-height: 92px; resize: vertical; }
.lead-field input:focus-visible, .lead-field textarea:focus-visible { outline: 2px solid #0E6FA9; outline-offset: 2px; }
/* The honeypot. Hidden from people, reachable by anything that fills forms
   mechanically. Not `display:none` — some bots skip those. */
.lead-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lead-submit {
  min-height: 50px; border: 0; border-radius: 12px; cursor: pointer;
  background: #0E6FA9; color: #fff; font: inherit; font-size: 16px; font-weight: 700;
}
.lead-submit[disabled] { opacity: .6; cursor: progress; }
.lead-msg { margin: 0; font-size: 13.5px; line-height: 1.6; min-height: 1.2em; }
.lead-msg[data-tone="err"] { color: #B03A2B; font-weight: 600; }
.lead-msg[data-tone="ok"]  { color: #1E7A4F; font-weight: 600; }
.lead-fine { margin: 0; font-size: 12px; color: #67808F; line-height: 1.6; }
.lead-done { padding: 30px 22px 34px; text-align: center; }
.lead-done h3 { margin: 0 0 8px; font-size: 19px; font-weight: 800; }
.lead-done p  { margin: 0; font-size: 14px; color: #3B5162; line-height: 1.7; }