main {
  min-height: 100vh;
}

.intro {
  display: grid;
  place-items: center;
  height: 60vh;
  background-color: var(--color-accent);
  color: var(--color-accent-light);
  align-content: center;
  text-align: center;
}

.mast {
  padding: 80px 10% 0;
}


button.request-a-demo:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 30px var(--color-shadow), 0 4px 6px var(--color-shadow);
}

.mast > .request-a-demo {
  margin: auto;
  margin-top: 42px;
  height: 46px;
  font-size: 18px;
  text-transform: uppercase;
  padding: 4px 20px;
  border-radius: 8px;
  font-weight: 900;
  background-color: var(--color-yield);
  color: var(--color-dark);
  outline: solid 2px;
  cursor: pointer !important;
  position: relative;
  z-index: 2;
  outline-color: rgb(251, 215, 30);
  border: 2px solid var(--color-window);
  box-shadow: 0 4px 6px var(--color-shadow);
  transform: scale(1);
  transition: transform .2s ease-in-out, box-shadow .2s ease-in-out;
}

.intro h1 {
  font-size: 32px;
  font-weight: 200;
  font-family: var(--font-header);
  text-transform: uppercase;
  margin: 32px 0 6px;
  line-height: 36px;
  letter-spacing: 4px;
}

.intro > h3 {
  font-family: var(--font-monospace);
  letter-spacing: 2px;
  margin: 0;
}

.intro svg {
  padding: 6px;
  margin-left: -14px;
}

#editor-support {
  display: grid;
  place-items: center;
  width: 100%;
  margin: 60px 0;
  opacity: 0.55;
  text-align: center;
  gap: 20px;
}

.download {
  display: grid;
  place-items: center;
  padding: 6% 10% 0;
  gap: 10px;
  text-align: center;
}

.download .generate-link {
  display: grid;
  place-items: center;
  grid-template-columns: auto auto;
}

.download .generate-link input {
  background-color: var(--color-input-background);
  color: var(--color-primary);
  padding: 8px 3px 8px 8px;
  border: 1px solid var(--color-border);
  font-family: var(--font-monospace);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 8px;
  border-radius: 6px;
}

.download .generate-link button {
  background-color: var(--color-input-border);
  color: var(--color-primary);
  border-radius: 6px;
  padding: 8px 3px 8px 8px;
  height: 36px;
  font-size: 12px;
  text-transform: uppercase;
  transition: background-color .1s ease-in-out;
}

.download .generate-link button:hover {
  background-color: var(--color-button-shadow);
}

.demo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 10%;
  margin-bottom: 120px;
  margin-top: 32px;
  grid-template-areas:
    "title-a title-b"
    "content-a content-b";
}

.title-a {
  grid-area: title-a;
}
.title-b {
  grid-area: title-b;
}
.content-a {
  grid-area: content-a;
}
.content-b {
  grid-area: content-b;
}

.demo .value-prop {
  text-align: center;
  width: 75%;
  margin: 40px auto;
}

.demo .value-prop p {
  color: var(--color-secondary);
  line-height: 20px;
}

.demo p {
  margin: 4px 0;
  letter-spacing: 0.6px;
}


.feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 40px;
  margin: 10%;
}

.feature-grid .feature h4 {
  text-transform: uppercase;
  margin-bottom: 0;
  font-weight: 200;
  font-family: var(--x-display);
}

.feature-grid .feature p {
  color: var(--x-secondary);
  margin-top: 6px;
  line-height: 20px;
}

#feature-header {
  display: none;
}

.feature {
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 20px;
  box-shadow: 0 6px 19px -8px var(--color-shadow);
}

@media (max-width: 768px) {
  .demo {
    grid-template-columns: 1fr;
    grid-template-areas:
      "title-a"
      "content-a"
      "title-b"
      "content-b";
  }

  .feature-grid {
    grid-template-columns: 1fr;
  }

  .download {
    padding: 10% 10% 0;
  }
}