/*
 * CX early access (waitlist) page. One section grid; title, subtitle, form and text are
 * layered in the same cell and placed with alignment and margins, as in the original.
 */
.cx {
  display: grid;
  grid-template: 1fr / 1fr;
  min-height: 939.23px;
  background: var(--black);
}
.cx__title {
  grid-area: 1 / 1;
  align-self: start;
  justify-self: center;
  width: 71.94%;
  --fs-min: 10;
  --fs-max: 50;
  font-weight: 700;
  line-height: 2;
  color: var(--yellow);
  text-align: center;
}
.cx__accent { color: var(--blue); }
.cx__subtitle {
  grid-area: 1 / 1;
  align-self: start;
  justify-self: center;
  width: 54.52%;
  margin-top: 215.98px;
  --fs-min: 10;
  --fs-max: 30;
  font-family: var(--ff-regular);
  line-height: normal;
}
.cx__wrap {
  display: grid;
  grid-template: 1fr / 1fr;
  grid-area: 1 / 1;
  align-self: center;
  justify-self: center;
  width: 50%;
  min-width: 800px;
  min-height: 289.7px;
}
.cx__form {
  display: grid;
  grid-area: 1 / 1;
  grid-template-rows: minmax(60px, max-content) minmax(60px, max-content);
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.cx__name { grid-area: 1 / 1 / 2 / 2; align-self: start; justify-self: center; width: 100%; min-height: 60px; }
.cx__company { grid-area: 1 / 2 / 2 / 3; width: 100%; min-height: 60px; }
.cx__email { grid-area: 2 / 1 / 3 / 3; align-self: start; justify-self: start; width: 100%; min-height: 60px; }
.cx__submit { grid-area: 2 / 2 / 3 / 3; align-self: end; justify-self: end; display: grid; width: 200px; margin-bottom: -68.2px; transition: transform .2s ease-out; }
.cx__submit:hover { transform: scale(1.1); }
.cx__status {
  grid-area: 2 / 2 / 3 / 3;
  align-self: end;
  justify-self: end;
  width: 93.05%;
  margin-bottom: -94.91px;
  font-style: italic;
  text-align: right;
}
.cx__text {
  grid-area: 1 / 1;
  align-self: end;
  justify-self: center;
  width: 51.14%;
  margin: 0 0 78.08px 0.19%;
  --fs-min: 12;
  --fs-max: 24;
  line-height: 1.6;
}

/* Fields: Montserrat Medium labels, thick 5px blue underline. */
.cx__form .field { --label-size: 22px; --input-size: 27px; --line: 5px; --req-color: var(--white); }
.cx__form .field label { font-family: var(--ff-medium); }
.cx__form .field input { padding-left: 0; }
.cx__company { --input-size: 16px; }
.cx__submit button {
  justify-content: flex-end;
  border: 5px solid rgba(26, 45, 243, 0);
  border-radius: 30px;
  font-size: 18px;
  font-weight: 700;
  font-style: italic;
  line-height: 1.4;
  color: var(--yellow);
  text-align: right;
}

@media (max-width: 1000px) {
  .cx__subtitle { --vp-max: 1000; }
  .cx__wrap { min-width: 650px; min-height: 120px; }
}
@media (max-width: 750px) {
  .cx__subtitle { --vp-max: 750; }
  .cx__wrap { width: 90%; min-width: 300px; }
  .cx__form { grid-template-rows: repeat(4, minmax(60px, max-content)); }
  .cx__name { grid-area: 1 / 1 / 2 / 3; }
  .cx__email { justify-self: stretch; }
  .cx__company { grid-area: 3 / 1 / 4 / 2; }
  .cx__submit { grid-area: 4 / 1 / 5 / 3; align-self: start; justify-self: start; width: 170px; margin-bottom: 0; }
  .cx__status { grid-area: 4 / 1 / 5 / 3; align-self: start; justify-self: center; width: 98.52%; margin: 50px 1.48% 0 0; }
}