.about-roadmap {
  margin-top: var(--spacing-80);
  padding: var(--spacing-20) 0 var(--spacing-40);
}

.about-roadmap-graphic {
  position: relative;
  min-height: 320px;
}

.about-roadmap-line {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  z-index: 0;
}

.about-roadmap-line-horizontal {
  display: block;
}

.about-roadmap-line-vertical {
  display: none;
  max-width: 200px;
  width: 140px;
}

.about-roadmap-trace {
  fill: none;
  stroke: #ffe0e0;
  stroke-width: 24;
  stroke-linecap: round;
}

.about-roadmap-stroke {
  fill: none;
  stroke: #1e1b1c;
  stroke-width: 3;
  stroke-linecap: round;
}

.about-roadmap-arrow path {
  fill: none;
  stroke: #1e1b1c;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.theme-hpower .about-roadmap {
  --theme-hpower-about-roadmap-trace-color: rgba(30, 75, 156, 0.25);
  --theme-hpower-about-roadmap-line-color: #1e1b1c;
  --theme-hpower-about-roadmap-arrow-color: rgba(30, 75, 156, 0.7);
}

.theme-hpower .about-roadmap .about-roadmap-trace {
  stroke: var(--theme-hpower-about-roadmap-trace-color);
}

.theme-hpower .about-roadmap .about-roadmap-stroke {
  stroke: var(--theme-hpower-about-roadmap-line-color);
}

.theme-hpower .about-roadmap .about-roadmap-arrow path {
  stroke: var(--theme-hpower-about-roadmap-arrow-color);
}


.about-roadmap-node {
  fill: var(--color-red);
  stroke: none;
}

.about-roadmap-steps {
  position: absolute;
  inset: 0;
}

.about-roadmap-step {
  position: absolute;
  display: flex;
  gap: var(--spacing-20);
  max-width: 280px;
  color: var(--color-black);
  align-items: center;
  text-align: left;
  z-index: 2;
}

.about-roadmap-step-number {
  font-size: calc(var(--font-size-40) * 2.6);
  font-weight: 900;
  color: var(--color-red);
  margin: 0;
  line-height: 1;
}

.about-roadmap-step-text {
  margin: 0;
  font-size: var(--font-size-16);
  line-height: 1.4;
}

.about-roadmap-step-1 {
  top: 0;
  left: 0;
}

.about-roadmap-step-2 {
  top: 200px;
  left: 165px;
}

.about-roadmap-step-3 {
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
}

.about-roadmap-step-4 {
  top: 250px;
  right: 215px;
}

.about-roadmap-step-5 {
  top: 0;
  right: 0;
}

.theme-hpower .about-roadmap {
  margin-top: var(--spacing-64);
  padding-top: var(--spacing-28);
  padding-bottom: var(--spacing-48);
}

.theme-hpower .about-roadmap-step {
  max-width: 320px;
}

.theme-hpower .about-roadmap-step-1 {
  top: -12px;
}

.theme-hpower .about-roadmap-step-2 {
  top: 212px;
  left: 150px;
}

.theme-hpower .about-roadmap-step-3 {
  top: -20px;
}

.theme-hpower .about-roadmap-step-4 {
  top: 270px;
  right: 205px;
}

.theme-hpower .about-roadmap-step-5 {
  top: -12px;
  right: 20px;
}

.about-roadmap-flag {
  pointer-events: none;
}

@media (max-width: 1023px) {
  .about-roadmap {
    margin-top: var(--spacing-60);
  }

  .about-roadmap-graphic {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0;
    align-items: center;
  }

  .about-roadmap-line-horizontal {
    display: none;
  }

  .about-roadmap-line-vertical {
    display: block;
    width: 140px;
    min-width: 70px;
    max-width: 140px;
    height: 100%;
    align-self: center;
    grid-column: 2;
    grid-row: 1;
  }

  .theme-hpower .about-roadmap {
    margin-top: 0;
    padding-top: var(--spacing-28);
    padding-bottom: 0;
  }

  .theme-hpower .about-roadmap-graphic {
    grid-template-columns: minmax(0, 1fr) 120px;
    column-gap: 0;
  }

  .theme-hpower .about-roadmap-line-vertical {
    width: 120px;
    min-width: 120px;
    max-width: 120px;
    transform: none;
  }

  .theme-hpower .about-roadmap-step {
    gap: var(--spacing-10);
    padding-right: 0;
  }

  .theme-hpower .about-roadmap-step-number {
    font-size: calc(var(--font-size-40) * 1.7);
  }

  .theme-hpower .about-roadmap-step-text {
    font-size: var(--font-size-12);
    line-height: 1.35;
  }

  .about-roadmap-steps {
    position: static;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--spacing-30);
    grid-column: 1;
    grid-row: 1;
  }

  .about-roadmap-step {
    position: static;
    transform: none;
    max-width: 100%;
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-16);
    padding-right: var(--spacing-10);
  }

  .about-roadmap-step-number {
    font-size: calc(var(--font-size-40) * 2.2);
  }

  .about-roadmap-step-text {
    font-size: var(--font-size-13);
  }

  .about-roadmap-line-vertical .about-roadmap-arrow {
    display: none;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .theme-hpower .about-roadmap-graphic {
    grid-template-columns: minmax(0, 1fr) 160px;
    column-gap: var(--spacing-8);
  }

  .theme-hpower .about-roadmap-steps {
    max-width: 100%;
  }

  .theme-hpower .about-roadmap-line-vertical {
    justify-self: center;
  }
}