.stepper {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-weight: 600;
  }

  h3 {
    &[data-type='stepper-checkpoint'] {
      span {
        font-family: 'Geist Mono';
        color: var(--accent-indicator);
        border-radius: var(--radius-5);
        display: flex;
        align-items: center;
        justify-content: center;
        top: 0;
        position: absolute;
        left: calc(var(--space-7) * -1);
        font-weight: 500;
        line-height: var(--space-4);
        font-size: var(--font-size-2);
        width: var(--space-5);
        height: var(--space-5);
        border: 1px solid var(--focus-5);
        background: var(--focus-3);
        z-index: 1;
        user-select: none;

        &:before {
          content: '';
          display: block;
          position: absolute;
          z-index: 0;
          left: 10.5px;
          width: 1px;
          height: var(--step-height);
          top: calc(var(--step-title-height) + var(--space-2));
          background-image: linear-gradient(
            180deg,
            var(--focus-2),
            var(--focus-8)
          );
        }
      }
    }
  }
}
