.c-roadmap-section {
  padding-block-start: calc(40 * var(--etest-section-unit));

  @media (min-width: 1024px) {
    padding-block-start: calc(80 * var(--etest-section-unit));
  }
}

.c-roadmap-section p,
.c-roadmap-section ul,
.c-roadmap-section ol,
.c-roadmap-section li,
.c-roadmap-section h2 {
  margin-block-end: 0;
}

.c-roadmap-section input.c-roadmap-section__tab-toggle {
  margin: 0;
}

.c-roadmap-section .c-roadmap-section__container {
  max-width: var(--etest-content-max-width, 1440px);
  margin-inline: auto;
  overflow: hidden;
  background: #fff;
  box-shadow: calc(0 * var(--etest-section-unit)) calc(0 * var(--etest-section-unit)) calc(12 * var(--etest-section-unit)) rgba(0, 0, 0, 0.1);
  width: calc(100% - 32px);
  padding: calc(6 * var(--etest-section-unit));
  border-radius: calc(20 * var(--etest-section-unit));

  @media (767px < width) {
    width: calc(100% - 48px);
  }

  @media (min-width: 1024px) {
    padding: calc(10 * var(--etest-section-unit));
    border-radius: calc(24 * var(--etest-section-unit));
  }
}

.c-roadmap-section .c-roadmap-section__wrapper {
  border: calc(1 * var(--etest-section-unit)) solid #d6d6d6;
  display: flex;
  flex-direction: column;
  row-gap: calc(16 * var(--etest-section-unit));
  border-radius: calc(20 * var(--etest-section-unit));
  padding: calc(32 * var(--etest-section-unit)) calc(16 * var(--etest-section-unit));

  @media (min-width: 1024px) {
    row-gap: calc(40 * var(--etest-section-unit));
    border-radius: calc(24 * var(--etest-section-unit));
    padding: calc(60 * var(--etest-section-unit));
  }
}

.c-roadmap-section .c-roadmap-section__heading-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: calc(12 * var(--etest-section-unit));

  @media (min-width: 1024px) {
    row-gap: calc(20 * var(--etest-section-unit));
  }
}

.c-roadmap-section .c-roadmap-section__title {
  font-weight: 700;
  color: #0e0e0e;
  text-align: center;
  font-size: calc(28 * var(--etest-section-unit));
  
  @media (min-width: 1024px) {
    font-size: calc(42 * var(--etest-section-unit));
    line-height: calc(51 * var(--etest-section-unit));
  }
}

.c-roadmap-section .c-roadmap-section__description {
  color: #0e0e0e;
  text-wrap: balance;
  line-height: 1.5;
  font-size: calc(15 * var(--etest-section-unit));
  text-align: justify;

  @media (min-width: 1024px) {
    font-size: calc(16 * var(--etest-section-unit));
    text-align: center;
  }
}

.c-roadmap-section .c-roadmap-section__tab {
  display: flex;
  flex-direction: column;
  row-gap: calc(12 * var(--etest-section-unit));

  @media (min-width: 1024px) {
    row-gap: calc(24 * var(--etest-section-unit));
  }
}

.c-roadmap-section .c-roadmap-section__tab-toggle-list {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  column-gap: calc(8 * var(--etest-section-unit));

  @media (min-width: 1024px) {
    column-gap: calc(12 * var(--etest-section-unit));
  }
}

.c-roadmap-section .c-roadmap-section__tab-content-list {
  display: grid;
  grid-template-areas: "single";
}

.c-roadmap-section .c-roadmap-section__tab-toggle-item {
  flex: 1;
  display: grid;
  grid-template-areas: "single";
}

.c-roadmap-section .c-roadmap-section__tab-toggle {
  grid-area: single;
  appearance: none;
}

.c-roadmap-section .c-roadmap-section__tab-toggle-wrapper {
  cursor: pointer;
  grid-area: single;
  display: flex;
  flex-direction: column;
  row-gap: calc(8 * var(--etest-section-unit));

  @media (min-width: 1024px) {
    row-gap: calc(12 * var(--etest-section-unit));
  }
}

.c-roadmap-section .c-roadmap-section__tab-toggle-title {
  font-weight: 700;
  color: #0e0e0e;
  text-align: center;
  white-space: nowrap;
  font-size: calc(15 * var(--etest-section-unit));
  padding-inline: calc(12 * var(--etest-section-unit));

  @media (prefers-reduced-motion: no-preference) {
    transition: all 0.3s; 
  }

  @media (min-width: 1024px) {
    font-size: calc(16 * var(--etest-section-unit));
    padding-inline: 0;
  }
}

.c-roadmap-section .c-roadmap-section__tab-toggle-indicator {
  height: calc(4 * var(--etest-section-unit));
  border-radius: calc(9999 * var(--etest-section-unit));
  background-color: #d6d6d6;

  @media (prefers-reduced-motion: no-preference) {
    transition: all 0.3s; 
  }

  @media (min-width: 1024px) {
    height: calc(8 * var(--etest-section-unit));
  }
}

.c-roadmap-section .c-roadmap-section__tab-toggle-item:has(.c-roadmap-section__tab-toggle:checked) .c-roadmap-section__tab-toggle-title {
  color: #9A1B1D;
}

.c-roadmap-section .c-roadmap-section__tab-toggle-item:has(.c-roadmap-section__tab-toggle:checked) .c-roadmap-section__tab-toggle-indicator {
  background-color: #9A1B1D;
}

.c-roadmap-section .c-roadmap-section__tab-content-item {
  grid-area: single;
  display: flex;
  flex-direction: column;
  row-gap: calc(16 * var(--etest-section-unit));

  @media (min-width: 1024px) {
    row-gap: calc(40 * var(--etest-section-unit));
  }

  @media (prefers-reduced-motion: no-preference) {
    transition: all 0.3s;
  }
}

.c-roadmap-section .c-roadmap-section__content-list {
  margin: 0;
  display: flex;
  flex-direction: column;
  row-gap: calc(8 * var(--etest-section-unit));
  column-gap: calc(16 * var(--etest-section-unit));

  @media (prefers-reduced-motion: no-preference) {
    transition: all 0.3s;
  }

  @media (min-width: 1024px) {
    flex-direction: row;
  }
}

.c-roadmap-section .c-roadmap-section__tab-content {
  flex: 1;
  border: calc(1 * var(--etest-section-unit)) solid #d6d6d6;
  color: #0e0e0e;
  border-radius: calc(12 * var(--etest-section-unit));
  padding: calc(12 * var(--etest-section-unit));

  @media (min-width: 1024px) {
    border-radius: calc(20 * var(--etest-section-unit));
    padding: calc(24 * var(--etest-section-unit));
    height: 178px;
    overflow-y: auto;
  }
}

.c-roadmap-section .c-roadmap-section__link-container {
  display: flex;
  justify-content: center;
}

.c-roadmap-section .c-roadmap-section__link {
  border: calc(1 * var(--etest-section-unit)) solid #d6d6d6;
  border-radius: calc(9999 * var(--etest-section-unit));
  padding: calc(12 * var(--etest-section-unit)) calc(24 * var(--etest-section-unit));
  display: flex;
  align-items: center;
  column-gap: calc(4 * var(--etest-section-unit));
}

.c-roadmap-section .c-roadmap-section__link-text {
  font-weight: 600;
  color: #0e0e0e;
  font-size: calc(14 * var(--etest-section-unit));

  @media (min-width: 1024px) {
    font-size: calc(16 * var(--etest-section-unit));
  }
}

.c-roadmap-section .c-roadmap-section__icon {
  width: calc(20 * var(--etest-section-unit));
  height: calc(20 * var(--etest-section-unit));

  @media (min-width: 1024px) {
    width: calc(24 * var(--etest-section-unit));
    height: calc(24 * var(--etest-section-unit));
  }
}