/* NotifyForm — local form styles only (BEM: pf-notify__*), no global redesign */
/* T10 (B) — the field and the submit button are one ROW (they were a column, which is why
   a width-limited form grew in height). The field claims the width, capped so the input
   never becomes a full-bleed bar; the button keeps its own width beside it. */
.pf-notify {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 12px;
}

/* T12 (D32) — one field left: the input is capped at ~320 px (was 420) and the label row
   is gone, so the field is exactly the input's width and the freed space went to the
   text column. Field + button still share one line at 1440 and 768.
   flex-grow 0 matters: with grow 1 the field's intrinsic max-content collapsed to the
   input's ~200 px default, the content-sized column resolved to ~376 px and the button
   wrapped to a second line at 1440. Pinning the basis (still shrinkable for phones)
   makes the column resolve to field + gap + button, so they share one line. */
.pf-notify__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 0 1 320px;
  min-width: 0;
  max-width: 320px;
}

.pf-notify__field label {
  font-size: 13px;
  color: #a8b8c6;
}

.pf-notify__field input[type="email"] {
  border: 0;
  background: rgba(255, 255, 255, .08);
  color: #fff;
  font-family: var(--font);
  font-size: 15px;
  padding: 0 16px;
  height: 48px;
  border-radius: 0;
  /* T12 — a definite 320 px: the input's default intrinsic width (~173 px) was what the
     content-sized form column resolved to, which wrapped the button at 1440. */
  width: 320px;
  max-width: 100%;
}

.pf-notify__field input[type="email"]::placeholder {
  color: #7d8fa0;
}

.pf-notify__field input[type="email"]:focus {
  outline: 2px solid var(--blue);
  outline-offset: -2px;
}

.pf-notify__field input[type="email"][aria-invalid="true"] {
  outline: 2px solid #d64545;
  outline-offset: -2px;
}

.pf-notify__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.pf-notify__submit {
  flex: 0 0 auto;
  height: 48px;
}

.pf-notify__submit[aria-busy="true"] {
  opacity: .7;
  pointer-events: none;
}

.pf-notify__error {
  display: none;
  font-size: 13px;
  color: #f28b8b;
}

.pf-notify__error.pf-notify__error--visible {
  display: block;
}

.pf-notify__status {
  display: none;
  flex: 0 0 100%;
  font-size: 14px;
  margin-top: 2px;
}

.pf-notify__status.pf-notify__status--visible {
  display: block;
}

.pf-notify__status--success {
  color: #8fd6ae;
}

.pf-notify__status--error {
  color: #f28b8b;
}

/* T10 (B) — below 880px the notify section stacks to one column, so the form gets the
   full container width and the field + button still share one line (768 included);
   the button only wraps under ~500px, where a 300px field cannot fit beside it. */