Customize numbered lists with circles and rules?

Site URL: https://ascend-together.squarespace.com/

Hey y'all, can somebody help me get this CSS to work right? I'm attempting to make my numbered lists have colored circles behind the numbers with rules between each row. I've got the code working, sort of, but only seems to work when I have the CSS side panel open. Otherwise, it loads all janky (see attachment) with the circles distorted and not aligned center and middle. Maybe there's a conflict somewhere in my CSS or am I missing an outer container property? I had ChatGPT help me write this code so it might of screwed things up 🤪

Site: https://ascend-together.squarespace.com
Password: RiseUp

Page the numbered list is on: https://ascend-together.squarespace.com/firms

/* Custom Numbered List */
ol[data-rte-list] {
  padding-inline-start: 40px !important;
  list-style-type: none;
  counter-reset: list-counter;
}

ol[data-rte-list] li {
  position: relative !important;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(16, 37, 86, 0.2);
}

ol[data-rte-list] li > :first-child::before {
  counter-increment: list-counter;
  content: counter(list-counter);

  /* Position */
  margin-left: -60px;
  min-width: 35px;
  height: 35px;
  left: 0;
  top: -8px;
  position: absolute;
  display: inline-grid;
  place-items: center;

  /* Styles */
  border: none;
  border-radius: 50%;
  font-size: 1.2rem;
  line-height: 0;
  background: #89FFC7;
  color: #102556;
}

Btw, this is how the list looks when it does load correctly when the CSS side window is open.

I see it already fine to me