:root {
  --header-height: 48px;
  --logo-dim: 48px;
  --global-side-padding: 16px;

  --background-primary: #000B25;
  --light-content-color: #E5E5E5;
  --highlight-background-primary: #003C50;
  --highlight-background-secondary: #001A30;
  --warning-color: #FD7E14;
  --success-color: #28A745;

  --default-radius: 4px;
  --input-height: 48px;
  --input-padding: 16px;
}

html, body {
  color: var(--light-content-color);
  background: var(--background-primary);
  font-family: "Noto Sans Display", sans-serif;
  line-height: 1.7;
}

header, section {
  padding: 0 var(--global-side-padding);
}

/* Header */

header {
  font-weight: bold;
  text-transform: uppercase;
  height: var(--header-height);
  font-size: var(--logo-text-size);

  display: flex;
  align-items: center;
}

.header-content {
  display: flex;
  align-items: center;
}

header .logo {
  position: relative;
  height: var(--logo-dim);
}

/* Splash  */

.splash {
  background: var(--highlight-background-primary);
  background: linear-gradient(200deg, var(--highlight-background-primary), var(--highlight-background-secondary));
  border: solid thin transparent;
  height: 40vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.splash .greeting {
  font-size: 5vh;
  line-height: 1;
}

.splash p {
  max-width: 400px;
}

/* Pitch */

.elevator-pitch {
  gap: 16px;
  display: grid;
  margin: 0 auto;
  grid-template-columns: 1fr;
  grid-template-rows: max-content;
  padding: 5vh var(--global-side-padding);
}

.pitch-step {
  margin: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
}

.pitch-step img {
  max-width: 80%;
}

.pitch-step .pitch-content {
  max-width: 80%;
}

/* Waitlist */

.waitlist {
  gap: 24px;
  display: flex;
  padding: 48px var(--global-side-padding);
  min-height: 240px;
  text-align: center;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  background: var(--highlight-background-primary);
}

.waitlist-hook,
.waitlist-assurances {
  max-width: 480px;
}

.waitlist-assurances {
  opacity: 0.5;
  font-size: 0.8em;
}

.waitlist-assurances:hover {
  opacity: 0.9;
}

.waitlist-enrollment {
  gap: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#waitlist-messaging {
  overflow: hidden;
  max-width: 480px;
  padding: 8px 16px;
  box-sizing: border-box;
  border-radius: var(--default-radius);
}

#waitlist-messaging:not(.is-visible) {
  display: none;
}

#waitlist-messaging.is-error {
  background: var(--warning-color);
}

#waitlist-messaging.is-success {
  background: var(--success-color);
}

/* Forms */

input, button {
  box-sizing: border-box;
  height: var(--input-height);
  padding: 0 var(--input-padding);
}

input {
  border: none;
  background: none;
  border-radius: 0;
  color: var(--light-content-color);
  border-bottom: solid thin var(--light-content-color);
}

input:focus {
  border: none;
  outline: none;
  border-bottom: solid 2px var(--light-content-color);
}

button {
  background: none;
  color: var(--light-content-color);
  border-radius: var(--default-radius);
  border: solid thin var(--light-content-color);
}

button:focus {
  outline: none;
  border-width: 2px;
}

button:hover {
  background: linear-gradient(200deg, var(--highlight-background-primary), var(--highlight-background-secondary));
  cursor: pointer;
}

button:active {
  background: var(--highlight-background-secondary);
}

@media (min-width: 560px) and (max-width: 1100px) {
  :root {
    --header-height: 60px;
    --log-dim: 48px;
  }

  .elevator-pitch {
    max-width: 650px;
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1101px) {
  :root {
    --header-height: 60px;
    --log-dim: 48px;
  }

  .elevator-pitch {
    max-width: 1200px;
    grid-template-columns: repeat(4, 1fr);
  }
}