/*
 * BASLA demo key request page. Layout ported from the original (a centred form grid with
 * 32px row gaps; 50% wide above 1000px, 70% on tablet, 85% on mobile).
 */
.demo {
  display: grid;
  grid-template: 1fr / 1fr;
  min-height: 85vh;
  background: var(--black);
}
.demo__wrap {
  display: grid;
  grid-template: 1fr / 1fr;
  grid-area: 1 / 1;
  align-self: center;
  justify-self: center;
  width: 50%;
}
.demo__form {
  display: grid;
  grid-area: 1 / 1;
  grid-template-rows: minmax(141.99px, max-content) minmax(25.02px, max-content) minmax(60px, max-content)
    minmax(60px, max-content) minmax(50px, max-content) minmax(50px, max-content) minmax(120px, max-content);
  grid-template-columns: 1fr;
  row-gap: 32px;
}
.demo__title {
  grid-area: 1 / 1 / 2 / 2;
  align-self: end;
  justify-self: start;
  width: 100%;
  margin-bottom: 3.91%;
  --fs-min: 10;
  --fs-max: 40;
  font-weight: 400;
  line-height: normal;
  color: var(--white);
  text-align: left;
}
.demo__first { grid-area: 2 / 1 / 3 / 2; align-self: start; justify-self: start; width: 50%; min-height: 60px; }
.demo__last { grid-area: 2 / 1 / 3 / 2; align-self: start; justify-self: end; width: 49.86%; min-height: 60px; margin-right: 1.61px; }
.demo__email { grid-area: 3 / 1 / 4 / 2; align-self: start; justify-self: start; width: 100%; min-height: 60px; }
.demo__company { grid-area: 4 / 1 / 5 / 2; width: 100%; min-height: 60px; }
.demo__why { grid-area: 5 / 1 / 7 / 2; width: 100%; min-height: 60px; }
.demo__submit { grid-area: 6 / 1 / 8 / 2; align-self: start; justify-self: end; display: grid; width: 229.75px; min-height: 54px; margin-top: 50.82px; }
.demo__status {
  grid-area: 7 / 1 / 8 / 2;
  align-self: start;
  justify-self: end;
  margin-top: 64px;
  color: var(--blue);
  font-style: italic;
  text-align: right;
}

/* Fields: 22px labels, 17px italic input text with 15px indent, blue placeholders. */
.demo__form .field { --label-size: 22px; --input-size: 17px; --req-color: var(--white); }
.demo__form .field label { padding-left: 0; }
.demo__form .field input { padding-left: 15px; font-style: italic; }
.demo__submit button {
  justify-content: center;
  border: 2px solid rgba(225, 191, 51, 0);
  border-radius: 30px;
  font-size: 21px;
  line-height: 1.4;
  color: var(--white);
  transition: border-color .2s ease;
}
.demo__submit button:hover { border-color: var(--yellow); }

@media (max-width: 1000px) {
  .demo__wrap { width: 70%; align-self: start; margin-top: 9.01px; }
}
@media (max-width: 750px) {
  .demo__wrap { width: 85%; }
}