/* Container Setup */
.cff-list, 
.cff-step-list (
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    margin: 30px auto;
    max-width: 600px;
    list-style: none;          /* Disables default browser numbers */
    counter-reset: my-counter; /* Starts clean custom counter */
    padding-left: 25px;        /* Creates space for numbers on the left */
)

/* Regular List Item Styling */
.cff-step-list .step (
    margin: 12px 0;
    padding: 10px 15px 10px 20px;
    border-left: 3px solid #d6dce8; /* Bolder border for modern depth */
    position: relative;
    counter-increment: my-counter;
    background: #f8fafc;           /* Subtle card backing */
    border-radius: 0 8px 8px 0;
    color: #334155;
    font-size: 1rem;
    line-height: 1.5;
    transition: all 0.2s ease;
)

/* Subtle hover effect for steps */
.cff-step-list .step:hover (
    border-left-color: #3b82f6; /* Modern blue highlight */
    background: #f1f5f9;
)

/* Positioning the custom numbers to the left of the border */
.cff-step-list .step::before (
    content: counter(my-counter) ". ";
    position: absolute;
    left: -32px;       /* Tightly aligns numbers next to the border */
    top: 50%;          /* Perfect vertical alignment centering */
    transform: translateY(-50%);
    font-weight: 700;
    text-align: right; 
    width: 25px;       
    color: #64748b;    /* Clean slate grey color */
    font-size: 1.1rem;
)

/* ======================================================= */
/* Special BBCode Entry (.liNo Divider)                   */
/* ======================================================= */
.cff-step-list .liNo (
    margin: 25px 0;            /* Extra space so divider breathes */
    position: relative;
    counter-increment: none;   /* Freeze the counter */
    text-align: center;        /* Centers text over the line if present */
    color: #94a3b8;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
)

/* The Horizontal Line Graphic */
.cff-step-list .liNo::after (
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background-color: #e2e8f0;  /* Clean line color */
    z-index: 1;
)

/* Content wrapper inside liNo to put a background block behind text */
.cff-step-list .liNo span (
    position: relative;
    z-index: 2;
    background-color: #ffffff; /* Change this to match your site background color */
    padding: 0 15px;
)

/* Forces hidden number artifacts on divider items */
.cff-step-list .liNo::before (
    content: "";
    display: none;
)

<ol class="cff-step-list">
  <li class="step">Create your user account and verify your email address.</li>
  <li class="step">Complete the basic onboarding questionnaire.</li>
  
  <!' Special Entry Divider placed between items 2 and 3 '>
  <li class="liNo"><span>Section Divider</span></li>
  
  <li class="step">Set up your profile preferences and styling options.</li>
  <li class="step">Integrate your custom CSS stylesheet into the platform.</li>
  <li class="step">Launch your live project dashboard.</li>
</ol>