/* Launch Steps Section Styles */
.launch-steps-section {
  width: 100%;
  background: #fff;
  margin-left: calc(-1 * (100vw - 100%) / 2);
}
.launch-steps-container {
  margin: 0;
  padding: 32px 100px 0 100px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.launch-step-foundation {
  background-color: var(--black) !important;
  color: #fff;
  width: 100%;
  padding: 24px 0 18px 0;
  text-align: center;
  position: relative;
  margin-bottom: 24px;
  font-family: 'Oxanium', sans-serif;
  box-shadow: none;
  border-radius: 0;
}
.launch-step-foundation .launch-step-title {
  font-size: var(--text-subheading-size, 28px);
  font-weight: var(--text-subheading-weight, 800);
  margin-bottom: 6px;
  text-transform: uppercase;
}
.launch-step-desc-dark {
  font-size: var(--text-body-size, 24px);
  font-weight: var(--text-subtext-weight, 300);
  margin-bottom: 25px;
}
.launch-step-foundation .launch-step-index {
  position: absolute;
  right: 20px;
  font-size: 1.1rem;
  font-weight: 700;
  opacity: 0.7;
}
.launch-steps-row {
  display: flex;
  flex-direction: row;
  gap: 32px;
  width: 100%;
  justify-content: center;
  margin-bottom: 32px;
}
.launch-step {
  background: var(--orange);
  color: #fff;
  flex: 1 1 0;
  padding: 20px;
  border-radius: 0;
  position: relative;
  text-align: center;
  font-family: 'Oxanium', sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: none;
}
.launch-step-title {
  font-size: var(--text-subheading-size, 28px);
  font-weight: var(--text-subheading-weight, 800);
  text-transform: uppercase;
  margin-top: 20px;
}
.launch-step-desc {
  font-size: var(--text-body-size, 24px);
  font-weight: var(--text-subtext-weight, 300);
  margin-bottom: 70px;
}
.launch-step-index {
  position: absolute;
  right: 25px;
  bottom: 10px;

  display: flex;
  flex-direction: column;
  align-items: center;

  font-family: 'Oxanium', sans-serif;
  color: #fff;
  line-height: 1;
}

.step-top {
    transform: translateX(-10px) translateY(5px);
    font-weight: 600;
}
.step-bottom {
    transform: translateX(10px)translateY(-5px);
    font-weight: 700;
}

.step-slash {
    font-weight: 700;
}

.entity-icon {
  width: 100px;
  height: auto;
  margin-bottom: 18px;
  align-self: flex-start;
}
.presence-icon {
    width: 60px;
    height: auto;
    margin-bottom: 18px;
    align-self: flex-start;
}
.brand-icon-placeholder {
  display: block;
  height: 30px;
  margin-bottom: 18px;
  visibility: hidden;
}

/* CHANGE BACK LATER */
/* .launch-steps-summary {
  margin: 20px 240px ;
  font-size: var(--text-title-size, 40px);
  font-weight: var(--text-title-weight, 800);
  text-align: center;
  color: #232121;
  font-family: 'Oxanium', sans-serif;
  text-transform: uppercase;
}
.launch-steps-summary .orange {
  color: var(--orange);
  font-weight: var(--text-title-weight, 800);
} */

/* TEMPORARY */
.launch-steps-summary {
  margin-top: 50px;
  background-color: var(--black);
  padding: 60px 100px;
  font-size: var(--text-title-size, 40px);
  font-weight: var(--text-title-weight, 800);
  text-align: center;
  color: #fff;
  font-family: 'Oxanium', sans-serif;
  text-transform: uppercase;
}
.launch-steps-summary .orange {
  color: var(--orange);
  font-weight: var(--text-title-weight, 800);
}


.launch-step-brand {
  background-color: var(--orange);
  background-image: url('../assets/svgs/grid_background_ovelay.svg');
  background-size: 270%;
  background-position: calc(100% + 50px) calc(100% + 50px);
}

@media (max-width: 700px) {
  .launch-steps-container {
    padding: 16px 20px 0 20px;
  }
  .launch-steps-row {
    flex-direction: column;
    gap: 10px;
    margin-bottom: 10px;
    box-sizing: border-box;
  }
  .launch-step-foundation {
    padding: 16px 14px 18px 14px;
    margin-bottom: 10px;
    font-size: 1rem;
    box-sizing: border-box;
  }
  .launch-step {
    padding: 16px 14px 18px 14px;
    font-size: var(--mobile-body-size);
    align-items: flex-start;
    text-align: left;
  }
  .launch-step-foundation .launch-step-title {
    font-size: var(--mobile-subheading-size);
    margin-bottom: 4px;
    }
  .launch-step-title {
    font-size: var(--mobile-subheading-size);
    margin-top: 4px;
    margin-bottom: 2px;
    width: 100%;
  }
  .launch-step-desc, .launch-step-desc-dark {
    font-size: var(--mobile-subtext-size);
    margin-bottom: 6px;
    width: 80%;
  }
  .entity-icon {
    width: 48px;
    margin-bottom: 8px;
  }
  .presence-icon {
    width: 32px;
    margin-bottom: 8px;
  }
  .brand-icon-placeholder {
    height: 10px;
    margin-bottom: 8px;
  }
  .launch-step-index {
    margin: 5px;
  }

  .launch-steps-summary {
    margin-top: 30px;
    padding: 30px 30px ;
    font-size: var(--mobile-heading-size, 28px);
    font-weight: var(--mobile-heading-weight, 800);
    text-align: center;
    text-transform: uppercase;
    }
    .launch-steps-summary .orange {
    font-weight: var(--mobile-heading-weight, 800);
    }
}


@media (min-width: 769px) and (max-width: 1024px) {
  .launch-steps-summary {
    padding: 50px 100px;
  }
  .launch-steps-container {
    padding: 32px 32px 0 32px;
  }
  .launch-step-title {
    font-size: var(--tablet-subheading-size, 32px);
  }
  .launch-step-desc, .launch-step-desc-dark {
    font-size: var(--tablet-subtext-size, 20px);
  }
}

@media (min-width: 769px) and (max-width: 1280px) {
  .launch-steps-summary {
    padding: 50px 100px;
  }
}