/* ============================================================
   blog-lead.css — the short form placed mid-article on blog posts.
   Added 2026-10-05: articles answered the question and left the
   only ask at the very end, so "read and leave" was the designed
   outcome. The form now sits right after the first real answer.

   Delivery is lead-capture.js's inline path (data-mdt-inline), the
   same as the homes-for-sale pages: AJAX, success shown in place,
   conversion only on a confirmed CRM write.
   ============================================================ */
.bl-band { background: var(--cream, #EDE8DF); padding: 80px 60px; scroll-margin-top: 90px; }
.bl-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.bl-copy .section-label { margin-bottom: 14px; }
.bl-title { font-family: var(--font-serif); font-size: clamp(28px, 3.2vw, 38px); font-weight: 400; line-height: 1.15; color: #1C1C1C; margin: 0 0 16px; }
.bl-title em { font-style: italic; font-weight: 500; color: #1C1C1C; }
.bl-copy p { font-family: var(--font-sans); font-size: 15.5px; font-weight: 300; line-height: 1.8; color: #2A2A2A; margin: 0 0 14px; max-width: 46ch; }
.bl-copy .bl-alt { font-size: 14px; color: #3F3A34; }
.bl-copy .bl-alt a { color: #1C1C1C; text-decoration: underline; text-decoration-color: #E8C9C1; text-underline-offset: 3px; }

.bl-card { background: #F8F4EE; padding: 32px 30px 28px; box-shadow: 0 18px 46px rgba(28,28,28,0.10); }
.bl-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bl-full { grid-column: 1 / -1; }
.bl-field { display: flex; flex-direction: column; gap: 5px; }
.bl-field label { font-family: var(--font-sans); font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: #3F3A34; }
.bl-field .bl-opt { text-transform: none; letter-spacing: 0; font-weight: 400; color: #6A6259; }
.bl-form input[type="text"], .bl-form input[type="email"], .bl-form input[type="tel"], .bl-form select {
  width: 100%; padding: 13px 14px; background: #FFFFFF; border: 1px solid rgba(28,28,28,0.2); border-radius: 4px;
  font-family: var(--font-sans); font-size: 16px; color: #1C1C1C; outline: none; transition: border-color 0.2s, box-shadow 0.2s; }
.bl-form input:focus, .bl-form select:focus { border-color: #1C1C1C; box-shadow: 0 0 0 3px rgba(232,201,193,0.55); }
.bl-form select { appearance: none; -webkit-appearance: none; padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%231C1C1C' fill='none' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; }
.bl-consent { display: flex; gap: 10px; align-items: flex-start; font-family: var(--font-sans); font-size: 12px; font-weight: 300; line-height: 1.55; color: #3F3A34; cursor: pointer; }
.bl-consent input { margin-top: 3px; flex: none; width: 16px; height: 16px; accent-color: #1C1C1C; }
.bl-submit { width: 100%; padding: 16px 18px; background: #1C1C1C; color: #FFFFFF; border: 1px solid #1C1C1C; border-radius: 4px;
  font-family: var(--font-sans); font-size: 12px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; cursor: pointer;
  transition: background 0.25s, color 0.25s, border-color 0.25s; }
.bl-submit:hover, .bl-submit:focus-visible { background: #E8C9C1; border-color: #E8C9C1; color: #1C1C1C; }
.bl-submit:disabled { opacity: 0.7; cursor: wait; }
.bl-fine { font-family: var(--font-sans); font-size: 11.5px; font-weight: 300; line-height: 1.55; color: #5E574F; margin: 0; }
.bl-error { font-family: var(--font-sans); font-size: 13px; line-height: 1.5; color: #8E2A1E; background: #FBEDEB; border-radius: 4px; padding: 10px 12px; }
.bl-success { text-align: center; padding: 20px 6px; outline: none; }
.bl-success-title { font-family: var(--font-serif); font-size: 24px; font-weight: 400; color: #1C1C1C; margin-bottom: 8px; }
.bl-success p { font-family: var(--font-sans); font-size: 14.5px; font-weight: 300; line-height: 1.7; color: #2A2A2A; margin: 0; }

@media (max-width: 900px) {
  .bl-band { padding: 64px 28px; }
  .bl-inner { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 600px) {
  .bl-band { padding: 52px 20px; }
  .bl-card { padding: 24px 18px 22px; }
  .bl-form { grid-template-columns: 1fr; }
  /* site-responsive.css sets every section p to 19px !important on phones */
  .bl-band .bl-copy p { font-size: 16px !important; }
  .bl-band .bl-fine, .bl-band .bl-success p { font-size: 13px !important; }
}