/* The contact-sales form — GTS-84.
 *
 * SEPARATE FILE, for the same reason as a11y.css: the approved page
 * (design/style-v1/index.html) is self-contained and is not ours to edit
 * (§4.4), so an addition to a CEO-approved design lives where a reviewer can
 * see exactly what was added and a v2 of the package can replace the theme
 * without discarding it.
 *
 * EVERY COLOUR IS AN EXISTING TOKEN from the approved set — --surface-2,
 * --line, --text, --muted, --green, --grad, --radius. No new colour is
 * introduced, which keeps the "no off-token colours" check meaningful and
 * keeps the form visually part of the approved design rather than bolted on.
 *
 * --muted is #8A97A8, measured at 6.64:1 against the page background #070B12
 * and therefore above the 4.5:1 WCAG AA threshold. The theme's other greys
 * (#4A5568 at 2.62:1, #56637a at 3.25:1, #5A6778 at 3.42:1) all FAIL it, so
 * none of them is used for text here — see a11y.css for the measurements.
 */

.contact-form {
  margin: 32px auto 0;
  max-width: 760px;
  text-align: left;
}

/* LAYOUT (owner fix 2026-10-07, from his screenshot: a 460 px column inside a
 * 900 px card and a very tall page). The short fields sit in a two-column
 * grid — Name | Work email, Company | Role, Country | Phone — and the message
 * spans both columns; below 640 px everything is one column. Turnstile and
 * the button stay outside the grid, left-aligned under it. The grid's gap
 * replaces the inter-field margin inside it. */
.contact-form .fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 20px;
}

.contact-form .fields .field + .field {
  margin-top: 0;
}

.contact-form .field-wide {
  grid-column: 1 / -1;
}

.contact-form .fields + .field {
  margin-top: 16px;
}

.contact-form .field + .field {
  margin-top: 16px;
}

/* The card around the form (.cta in the approved page) centres its <p>
 * children at 480 px and pads 40 px each side. The form's own status line and
 * privacy note span the form instead, and the card's side padding is trimmed
 * where it holds the form. `:has` is supported by every current browser; an
 * older one simply keeps the approved padding. No inline style is touched, so
 * the CSP hash of the page does not move. */
.contact-form .form-status,
.contact-form .form-note {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

#cta .cta:has(.contact-form) {
  padding-left: 32px;
  padding-right: 32px;
}

@media (max-width: 640px) {
  .contact-form .fields {
    grid-template-columns: minmax(0, 1fr);
  }

  #cta .cta:has(.contact-form) {
    padding-left: 20px;
    padding-right: 20px;
  }
}

.contact-form label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted, #8A97A8);
}

/* The asterisk is DECORATION ONLY and is marked aria-hidden in the partial.
 * What actually conveys "required" is the `required` attribute on the input,
 * which assistive technology announces — so the information does not depend
 * on seeing a green glyph. A colour-only required marker would convey nothing
 * to a non-sighted or colour-blind user, which is why the attribute carries
 * the meaning and this rule only styles the hint. */
.contact-form .req {
  color: var(--green, #00E88F);
  margin-left: 4px;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  padding: 12px 14px;
  background: var(--surface-2, #131C2B);
  border: 1px solid var(--line, #1E2A3D);
  border-radius: 10px;
  color: var(--text, #E8EEF7);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.5;
}

.contact-form textarea {
  min-height: 120px;
  resize: vertical;
}

/* The country <select> (owner GO 2026-10-07). Same box as the inputs; the
 * native arrow is kept (no custom glyph, no background image, so the CSP's
 * img-src is untouched) and the dropdown list uses the theme's surface and
 * text tokens where the browser lets a page style it. */
.contact-form select {
  appearance: auto;
  cursor: pointer;
}

.contact-form select option {
  background: var(--surface-2, #131C2B);
  color: var(--text, #E8EEF7);
}

/* "(optional)" next to the one label that is: lower-case, not shouting. */
.contact-form .opt {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  margin-left: 4px;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: var(--muted, #8A97A8);
  opacity: 1; /* Firefox dims placeholders by default, which would drop the
               * measured contrast below AA. */
}

/* No `outline: none` anywhere in this file. The focus ring comes from
 * a11y.css (2px solid #00E88F), and overriding it here is how the GTS-3
 * correction gets silently undone for exactly the elements that need it most
 * — the ones a keyboard user must tab through to convert. */
.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--green, #00E88F);
}

/* Under the grid, the Turnstile widget, the button, the status line and the
 * privacy note are CENTRED (owner tweak 2026-10-07): the card is centred
 * text, and a left-hung widget under a two-column grid read as unfinished. */
.contact-form .field-turnstile {
  display: flex;
  justify-content: center;
}

.contact-form .actions {
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.contact-form button[type='submit'] {
  background: var(--grad, linear-gradient(120deg, #00E88F, #2E7CF6));
  color: #04110B;
  border: 0;
  padding: 13px 30px;
  border-radius: 10px;
  font-family: inherit;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
}

.contact-form button[type='submit']:disabled {
  opacity: 0.6;
  cursor: progress;
}

/* THE STATUS REGION IS ALWAYS IN THE DOM, never created on submit.
 *
 * An aria-live region that is inserted at the same moment its text appears is
 * frequently not announced at all — the screen reader has nothing to observe
 * changing. So it ships empty and is filled in place.
 *
 * It is also NOT hidden with `display: none` while empty, for the same
 * reason; an empty element with no padding occupies nothing visually. */
.contact-form .form-status {
  margin-top: 16px;
  font-size: 14.5px;
  min-height: 1.5em;
  text-align: center;
}

.contact-form .form-status[data-state='error'] {
  color: var(--text, #E8EEF7);
}

.contact-form .form-status[data-state='ok'] {
  color: var(--green, #00E88F);
}

.contact-form .form-note {
  margin-top: 14px;
  font-size: 12.5px;
  color: var(--muted, #8A97A8);
  text-align: center;
}

.contact-form .form-note a {
  text-decoration: underline;
}

@media (max-width: 560px) {
  .contact-form .actions {
    flex-direction: column;
    align-items: stretch;
  }
}