.ps {
	--ps-step: 117px;
	--ps-gap: 15px;
	--ps-w: 115px;
	--ps-h: 124px;
	--ps-ctl: 29px;
	--ps-cbr: 30px;
	--ps-ow: 1px;
	--ps-outline: #f5d78f;
	--ps-bar-d: block;
	--ps-bar-w: 3px;
	--ps-bar-color: #c6a255;
	--ps-bar-gap: 18px;
	--ps-line-w: 1px;
	width: 100%;
}

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

.ps .ps-items {
	display: flex;
	flex-direction: column;
	gap: var(--ps-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ps .ps-item {
	display: flex;
	align-items: center;
	gap: 17px;
	width: fit-content;
	max-width: calc(100% - var(--i) * var(--ps-step));
	margin: 0;
	padding: 0;
	margin-inline-start: calc(var(--i) * var(--ps-step));
	list-style: none;
}

.ps .ps-item::marker {
	content: none;
}

/* ---------- Number box: chamfered (top-left + bottom-right) with thin outline ---------- */
.ps-num {
	position: relative;
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: var(--ps-w);
	height: var(--ps-h);
}

.ps-num__ring,
.ps-num__fill {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

/* outer shape = outline colour */
.ps-num__ring {
	background-color: var(--ps-outline);
	clip-path: polygon(
		var(--ps-ctl) 0,
		100% 0,
		100% calc(100% - var(--ps-cbr)),
		calc(100% - var(--ps-cbr)) 100%,
		0 100%,
		0 var(--ps-ctl)
	);
}

/* inner shape = slide fill, inset by the outline width (diagonals compensated by 0.414) */
.ps-num__fill {
	background-color: var(--ps-fill, #c6a255);
	clip-path: polygon(
		calc(var(--ps-ctl) + var(--ps-ow) * 0.414) var(--ps-ow),
		calc(100% - var(--ps-ow)) var(--ps-ow),
		calc(100% - var(--ps-ow)) calc(100% - var(--ps-cbr) - var(--ps-ow) * 0.414),
		calc(100% - var(--ps-cbr) - var(--ps-ow) * 0.414) calc(100% - var(--ps-ow)),
		var(--ps-ow) calc(100% - var(--ps-ow)),
		var(--ps-ow) calc(var(--ps-ctl) + var(--ps-ow) * 0.414)
	);
}

.ps-num__text {
	position: relative;
	z-index: 1;
	color: #ffffff;
	font-size: 40px;
	font-weight: 700;
	line-height: 1;
	text-align: center;
	direction: ltr;
	font-variant-numeric: lining-nums;
}

/* ---------- Content ---------- */
.ps-content {
	display: flex;
	flex: 0 1 auto;
	flex-direction: column;
	align-self: stretch;
	justify-content: center;
	min-width: 0;
	padding-inline-end: 36px;
	border-top: var(--ps-line-w) solid #e4e0d6;
}

.ps:not(.ps--line-first) .ps-item:first-child .ps-content {
	border-top-color: transparent;
}

.ps-text {
	position: relative;
	padding-block: 6px;
	padding-inline-start: calc(var(--ps-bar-w) + var(--ps-bar-gap));
}

.ps-text::before {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	display: var(--ps-bar-d);
	width: var(--ps-bar-w);
	border-radius: 999px;
	background-color: var(--ps-bar-color);
}

.ps .ps-title {
	margin: 0 0 6px;
	color: #1f1f1f;
	font-size: 26px;
	font-weight: 700;
	line-height: 1.4;
}

.ps .ps-desc {
	margin: 0;
	color: #2b2b2b;
	font-size: 17px;
	line-height: 1.7;
}
