/* Shared fit and touch targets for every page that loads /lead-forms.js.
   Selectors outrank each page's inline form.lead rules. */

/* Phone or email: one hint for both fields. */
form .lead-either{margin:0 0 10px;font-size:.92rem;line-height:1.45;color:var(--ink-soft,#4b544d)}

/* Timeline and notes stay folded until the visitor asks for them. */
form .lead-more{margin:0 0 18px;padding:0 14px;border:1px solid var(--line,#d9d2c3);border-radius:2px;background:#fff}
form .lead-more>summary{cursor:pointer;min-height:44px;padding:12px 0;font-size:.95rem;font-weight:700;line-height:1.35;color:var(--ink,#1f2a24)}
form .lead-more>summary:focus-visible{outline:3px solid #795b2f;outline-offset:2px}
form .lead-more[open]>summary{margin-bottom:6px}

/* The consent box is a 20px target, not the 13px browser default. */
form[action="/lead"] .consent input[type=checkbox]{width:20px;height:20px;min-width:20px;flex:0 0 20px;margin-top:2px}

/* Confirmation and recovery links are easy to tap. */
form .form-status a{display:inline-block;padding:4px 0;text-decoration:underline;text-underline-offset:2px}

/* Turnstile's flexible widget never renders narrower than 300px. On phones keep it
   whole and centred instead of clipped against the card edge. */
@media (max-width:400px){
  form[action="/lead"] div.cf-turnstile[data-sitekey]{width:300px;max-width:none;margin-left:calc((100% - 300px) / 2);margin-right:calc((100% - 300px) / 2)}
}
/* Below 360px the card runs edge to edge so the widget and the inputs fit inside it. */
@media (max-width:359px){
  form.lead[action="/lead"]{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);padding-left:10px;padding-right:10px;border-left-width:0;border-right-width:0}
}
/* The bond-check card (.magnet) does the same, so its 300px widget sits inside the card. */
@media (max-width:359px){
  div.magnet{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);padding-left:10px;padding-right:10px;border-left-width:0;border-right-width:0}
}