/* OPAL Global v17.6 — Register Interest is vertically stacked at every
   viewport width (desktop, tablet and mobile): Work email, Your role, optional
   mobile number, optional SMS consent and Register interest always appear in
   that order. The two-column desktop Early Access layout (heading/intro on the
   left, this stacked form on the right) is set elsewhere and is untouched —
   this file only controls the form's own internal row layout, not the
   section's outer columns.
   A previous >=641px override here (Version 17.5) laid .form-row out as a
   single horizontal row via grid-template-areas: "email role submit". That
   override has been removed: the stacked layout below now applies
   unconditionally, matching opal.css's own unconditional base rule for
   .interest-form .form-row, so there is one unambiguous stacked
   implementation at every width instead of a horizontal override winning
   above 641px. */
.interest-form .form-row {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "email"
    "role"
    "mobile"
    "sms"
    "submit";
  gap: 18px;
}

.interest-form .form-row > button[type="submit"] {
  grid-area: submit;
  width: 100%;
}

.interest-form .form-row > .interest-field--email { grid-area: email; }
.interest-form .form-row > .interest-field--role { grid-area: role; }
.interest-form .form-row > .interest-field--mobile { grid-area: mobile; }
.interest-form .form-row > .interest-sms-consent { grid-area: sms; }

/* OPAL Global v17.5.1 — isolated Register Interest field-row placement.
   .interest-field (opal.css) is display:grid with only an implicit
   auto-placed row per child, sized by gap:8px between rows. With exactly
   two children (label, control) that is a harmless two-row stack — but a
   password manager (confirmed: LastPass) can insert a third, zero-height
   direct child (e.g. [data-lastpass-icon-root]) into .interest-field--email.
   Auto-placement puts that extra child in an implicit third row, adding one
   more 8px row gap that pushes the email input down relative to the role
   field and submit button it must stay aligned with.
   Explicit two-row placement removes the ambiguity auto-placement relies
   on: the label always occupies row 1, and the real control (input/select)
   always occupies row 2. Any other direct child — regardless of what a
   password manager injects, now or in future — is placed in that same row
   2 cell instead of being auto-placed into a new implicit row, so it can
   never add extra height or an extra gap. The icon itself is not hidden,
   removed, or disabled — it simply shares the control's existing cell.
   Retained unchanged in v17.5.2: this protection is independent of the
   .form-row stacking rule above and still applies at every width. */
.interest-form .interest-field {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(56px, auto);
}

.interest-form .interest-field--mobile {
  grid-template-rows: auto minmax(56px, auto) auto;
}

.interest-form .interest-field > label {
  grid-area: 1 / 1;
}

.interest-form .interest-field > input,
.interest-form .interest-field > select {
  grid-area: 2 / 1;
}

.interest-form .interest-field > small {
  grid-area: 3 / 1;
}

.interest-form .interest-field > :not(label):not(input):not(select):not(small) {
  grid-area: 2 / 1;
}