.cl-sl {
	--cl-sl-marker-size: 44px;
	--cl-sl-marker-gap: 18px;
	--cl-sl-step-gap: 26px;
	--cl-sl-marker-border: 1px;
	--cl-sl-heading: #061e21;
	--cl-sl-title: #061e21;
	--cl-sl-text: rgba(6, 30, 33, 0.7);
	--cl-sl-marker: rgba(6, 30, 33, 0.55);
	--cl-sl-marker-bg: #ffffff;
	--cl-sl-rule: rgba(6, 30, 33, 0.16);
}

.cl-sl *,
.cl-sl *::before,
.cl-sl *::after {
	box-sizing: border-box;
}

/**
 * No font-size here on purpose — the heading inherits its size from
 * whichever tag is chosen (h2/h3/h4), so it matches the theme. The
 * Typography tab's size fields emit a scoped override only when filled.
 */
html body .cl-sl .cl-sl__heading {
	color: var(--cl-sl-heading);
	font-family: var(--cl-sl-heading-font, inherit);
	font-weight: var(--cl-sl-heading-weight, inherit);
	margin: 0 0 var(--cl-sl-heading-gap, 28px) !important;
	padding: 0 !important;
}

.cl-sl .cl-sl__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

/**
 * Each step is a two-column grid: a fixed-width marker column and the text.
 * Grid rather than flex so the text column's start edge is identical on
 * every step regardless of marker content — with flex, a two-character
 * custom marker could nudge the text across on that row only.
 */
/**
 * Two columns, two rows: the marker and the title share row 1, the
 * description sits in row 2 under the title.
 *
 * Row 1 is at least the marker's height, and both the marker and the title
 * are centred within it — that is what puts the number on the same optical
 * line as the title. The previous version padded the text block by a
 * hardcoded approximation of the title's line height, which drifted out of
 * alignment as soon as the title size was changed from its default. Letting
 * the grid do it means it holds at any font size.
 */
.cl-sl .cl-sl__step {
	display: grid;
	grid-template-columns: var(--cl-sl-marker-size) 1fr;
	grid-template-rows: minmax(var(--cl-sl-marker-size), auto) auto;
	column-gap: var(--cl-sl-marker-gap);
	row-gap: var(--cl-sl-title-gap, 6px);
	padding: 0 0 var(--cl-sl-step-gap);
	position: relative;
	margin: 0;
}

.cl-sl .cl-sl__step:last-child {
	padding-bottom: 0;
}

/**
 * The connecting line, drawn per step rather than as one element behind the
 * whole list — see point 1 in the PHP file's docblock for why.
 *
 * It starts at the bottom of this step's marker and runs to the bottom of
 * the step, so it always spans exactly the gap to the next marker however
 * the copy wraps. Excluded on the last step so nothing dangles below the
 * final marker.
 */
.cl-sl .cl-sl__step:not(:last-child)::before {
	content: "";
	position: absolute;
	top: var(--cl-sl-marker-size);
	bottom: 0;
	left: calc(var(--cl-sl-marker-size) / 2);
	width: 1px;
	background: var(--cl-sl-rule);
	transform: translateX(-0.5px);
}

.cl-sl--no-line .cl-sl__step::before {
	display: none;
}

.cl-sl .cl-sl__marker {
	width: var(--cl-sl-marker-size);
	height: var(--cl-sl-marker-size);
	border-radius: 50%;
	border: var(--cl-sl-marker-border) solid var(--cl-sl-rule);
	background: var(--cl-sl-marker-bg);
	color: var(--cl-sl-marker);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.95rem;
	font-weight: var(--cl-sl-marker-weight, 400);
	line-height: 1;
	/**
	 * Sits above the connector so the line appears to stop at the marker's
	 * edge rather than running behind it — which matters as soon as the
	 * marker background is anything other than fully opaque white.
	 */
	position: relative;
	z-index: 1;
	flex: none;
	grid-column: 1;
	grid-row: 1;
	align-self: center;
}

.cl-sl .cl-sl__title {
	grid-column: 2;
	grid-row: 1;
	align-self: center;
	min-width: 0;
}

.cl-sl .cl-sl__text {
	grid-column: 2;
	grid-row: 2;
	min-width: 0;
}

/**
 * Over-specified and !important on line-height and margin on purpose.
 * Salient styles headings with compound selectors like `.row .col h4`,
 * which outrank a two-class selector — its `line-height: 36px` was winning
 * and giving an 18px title a 36px line box, so ~9px of half-leading sat
 * above and below the text and no spacing setting could remove it. The
 * same applies to its heading margins.
 */
html body .cl-sl .cl-sl__title {
	margin: 0 !important;
	padding: 0 !important;
	font-size: 1.05rem;
	font-weight: var(--cl-sl-title-weight, 500);
	line-height: var(--cl-sl-title-leading, 1.3) !important;
	color: var(--cl-sl-title);
}

html body .cl-sl .cl-sl__text {
	margin: 0 !important;
	padding: 0 !important;
	font-size: 0.96rem;
	font-weight: var(--cl-sl-text-weight, 400);
	line-height: var(--cl-sl-text-leading, 1.5) !important;
	color: var(--cl-sl-text);
}

.cl-sl .cl-sl__notice {
	margin: 0;
	padding: 12px 16px;
	background: #fcf9e8;
	border-left: 4px solid #dba617;
	border-radius: 4px;
	font-size: 0.9rem;
	color: #3c3c3c;
}

@media (max-width: 560px) {
	.cl-sl {
		--cl-sl-marker-gap: 14px;
	}
}