/* Lead form panel, shared by / and /lp. Tokens come from tokens.css. */
.f-form {
  scroll-margin-top: calc(var(--nav-h) + var(--s-2));
  background: var(--c-gray);
  padding: clamp(2.25rem, 4vw, 3.5rem) var(--pad-panel) clamp(2.5rem, 4vw, 3.5rem);
}
.f-form h2 {
  margin: 0 0 var(--s-2);
  font-family: var(--f-display); font-weight: 400;
  font-size: var(--t-h2); line-height: 1.05; letter-spacing: var(--track-display);
  text-transform: uppercase; color: var(--c-heading);
}
.f-form h2 .f-pop { color: var(--c-red); }
.f-form__note { margin: 0 0 var(--s-4); font-size: var(--t-sm); }
.f-form__where { margin: 0 0 var(--s-3); font-size: var(--t-sm); }
.f-form__where strong { display: block; font-weight: 600; color: var(--c-heading); }
.f-form__where span { color: var(--c-red); font-weight: 600; }

.f-field { display: block; margin-bottom: var(--s-2); -webkit-tap-highlight-color: transparent; }
.f-field input {
  width: 100%; padding: 1rem 1.1rem;
  font-family: inherit; font-size: var(--t-body); color: var(--c-heading);
  background: var(--c-field);
  border: 1px solid var(--c-field-line); border-radius: var(--r-field);
  transition: border-color .15s ease, background-color .15s ease;
}
.f-field input::placeholder { color: #7c838c; }
.f-field input:focus {
  outline: none; background: #fff;
  border-color: var(--c-heading);
}
.f-field input:user-invalid { border-color: var(--c-red); }

.f-consent { display: flex; gap: var(--s-2); margin: var(--s-3) 0; font-size: var(--t-xs); line-height: 1.5; }
.f-consent input { margin: 2px 0 0; width: 16px; height: 16px; flex: none; accent-color: var(--c-red); }

.f-submit {
  display: block; width: 100%; margin-top: var(--s-3);
  padding: 1.05rem 1.25rem;
  font-family: var(--f-body); font-size: var(--t-sm); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; text-align: center;
  color: #fff; background: var(--c-red);
  border: 0; border-radius: var(--r-btn); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .15s ease;
}
.f-submit:hover { background: var(--c-red-hover); }
.f-submit[aria-busy="true"] { opacity: .65; pointer-events: none; }
.f-fine { margin: var(--s-3) 0 0; font-size: var(--t-xs); color: #6c737c; }
.f-fine a { color: var(--c-red); }
.f-error { margin: var(--s-2) 0 0; font-size: var(--t-xs); color: var(--c-red); font-weight: 600; }

.f-done h2 {
  margin: 0 0 var(--s-2);
  font-family: var(--f-display); font-weight: 400;
  font-size: var(--t-h2); line-height: 1.05; letter-spacing: var(--track-display);
  text-transform: uppercase; color: var(--c-heading);
}
.f-done p { margin: 0; font-size: var(--t-sm); }
.f-done a { color: var(--c-red); font-weight: 600; }
.f-done a.f-gbp {
  display: block; margin-top: var(--s-3);
  padding: .95rem 1.25rem;
  font-size: var(--t-sm); font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; text-align: center; text-decoration: none;
  color: var(--c-heading); background: var(--c-paper);
  border: 1px solid var(--c-field-line); border-radius: var(--r-btn);
  -webkit-tap-highlight-color: transparent;
  transition: border-color .15s ease;
}
.f-done a.f-gbp:hover { border-color: var(--c-heading); }
.f-done p.f-gbp-note { margin-top: var(--s-2); font-size: var(--t-xs); text-align: center; }

@media (max-width: 560px) {
  /* tighten so the first field clears the fold on a 390x844 phone */
  .f-form { padding-top: 1.75rem; }
  .f-form__note { margin-bottom: var(--s-3); }
  .f-form__where { margin-bottom: var(--s-2); }
}