Stop drawing an errored field twice when it takes focus

Focusing a field that already had an error painted two rings at once:
the notched outline stayed in the error colour and the gradient focus
ring went on top of it in the brand's violet-to-cyan. Two rings, two
colours, one field -- and on the textarea at two different radii, which
is what made it visible enough to report.

The ring itself is worth keeping; it is how focus reads everywhere else.
It just has to agree with the state it decorates, so while the field is
invalid it is built from the warn colour. The result is one red
indication that brightens on focus, and valid fields keep the brand
gradient.

Verified in both themes: an errored focused field's ring and outline are
both the warn colour, a valid focused one still gets the brand gradient.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

landing/src/app/ui/contact-form.scss

@@ -127,3 +127,20 @@
     font-size: var(--pi-font-size-x-small, 0.75rem);
   }
 }
+
+// Focusing a field that already has an error drew it twice: the notched
+// outline stays in the error colour, and the gradient focus ring is painted on
+// top of it in the brand's violet-to-cyan. Two rings, two colours, one field —
+// and on the textarea, at two different radii, which is what made it obvious.
+//
+// The ring is worth keeping: it is how focus reads on every other field. It
+// just has to agree with the state it is decorating, so while the field is
+// invalid the ring is built from the warn colour instead of the brand one. The
+// field ends up with a single red indication that still brightens on focus.
+:host ::ng-deep .pi-field .mat-form-field-invalid {
+  --pi-theme-field-focus-gradient: linear-gradient(
+    120deg,
+    var(--pi-color-warn),
+    var(--pi-color-warn-200, var(--pi-color-warn))
+  );
+}