/* Styling for the <ul> container */
.clean-list {
    list-style-type: disc; /* The default filled circle. Others: 'circle', 'square' */
    padding-left: 20px;  /* Adjusts the indentation of the entire list */
    margin: 1.5em 0;     /* Adds space above and below the list */
}

/* Styling for each <li> list item */
.clean-list li {
    padding-left: 10px;    /* Space between the bullet and the text */
    margin-bottom: 0.75em; /* Vertical space between list items. Crucial for readability! */
    line-height: 1.5;      /* Improves readability for multi-line items */
    color: #333;           /* A dark grey for the text, softer than pure black */
}

/*
  We remove all default list styling from the <ul>
*/
.custom-marker-list {
    list-style: none; /* Removes the default bullet point */
    padding-left: 0;    /* Removes the default indentation */
    margin: 1.5em 0;
}

/*
  We style the <li> and use a ::before pseudo-element for the marker
*/
.custom-marker-list li {
    position: relative;    /* This is CRUCIAL for positioning the ::before element */
    padding-left: 30px;    /* Creates space for our custom marker */
    margin-bottom: 0.75em;
    line-height: 1.5;
    color: #333;
    display: inline-block;
}

/*
  This is where the magic happens! We create the custom marker.
*/
.custom-marker-list li::before {
    content: 'Ψ'; /* You can use any character, like '→', '›', or even an emoji */
    position: absolute;  /* Positions the marker relative to the <li> */
    left: 0;
    top: 0;

    /* Style the marker itself */
    color: #ffffff; /* A success green color */
    font-size: 1.2em;
    font-weight: bold;
}

/* Example with a different marker */
/*
.custom-marker-list.arrows li::before {
    content: '›';
    color: #007bff;
}
*/