/*
 * AH Price Ladder: rungs in one row (any count), the best rung in navy, a thin gold line on top of
 * each rung that grows with the level, then the dashed showcase line.
 */
.ah-pl {
	display: grid;
	gap: 22px;
	font-family: var(--ah-f-body);
	font-size: 17px;
	line-height: 1.75;
	color: var(--ah-ink);
}
.ah-pl .ah-pl__ladder {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	margin: 0;
	padding: 0;
	list-style: none;
	overflow: hidden;
	border: 1px solid var(--ah-card-line);
	border-radius: var(--ah-r-card);
	background: var(--ah-card);
	box-shadow: var(--ah-shadow);
}
.ah-pl .ah-pl__rung {
	position: relative;
	margin: 0;
	padding: 0;
	border-inline-start: 1px solid var(--ah-line);
	background: var(--ah-paper);
	color: var(--ah-ink);
	transition: background-color .3s;
}
.ah-pl .ah-pl__rung:first-child { border-inline-start: 0; }
.ah-pl .ah-pl__rung::before {
	content: "";
	position: absolute;
	top: 0;
	inset-inline-start: 0;
	width: calc((var(--k, 0) + 1) / var(--n, 4) * 100%);
	height: 2px;
	background: var(--ah-gold);
	opacity: .7;
	transform-origin: var(--ah-pl-from, left);
}
[dir="rtl"] .ah-pl { --ah-pl-from: right; }
.ah-pl .ah-pl__rung--best::before { width: 100%; background: var(--ah-gold-hi); opacity: 1; }
.ah-motion .ah-pl .ah-rv .ah-pl__rung::before { transform: scaleX(0); transition: transform 1s var(--ah-ease) calc(.35s + var(--k, 0) * 140ms); }
.ah-motion .ah-pl .ah-rv.seen .ah-pl__rung::before { transform: none; }

.ah-pl .ah-pl__in { display: grid; gap: 8px; align-content: start; height: 100%; padding: 22px; color: inherit; text-decoration: none; }
.ah-pl a.ah-pl__in:hover { color: inherit; }
.ah-pl a.ah-pl__in:focus-visible { outline: 2px solid var(--ah-gold); outline-offset: -4px; border-radius: 8px; }
.ah-pl .ah-pl__rung:has(a.ah-pl__in):not(.ah-pl__rung--best):hover { background: var(--ah-ivory); }
.ah-pl .ah-pl__lv { font-family: var(--ah-f-mono); font-size: .7rem; letter-spacing: .16em; line-height: 1.6; color: var(--ah-soft); }
.ah-pl .ah-pl__title { font-family: var(--ah-f-display); font-weight: 700; font-size: 1.08rem; line-height: 1.5; color: inherit; }
.ah-pl .ah-pl__price { font-family: var(--ah-f-mono); font-size: 1.05rem; line-height: 1.5; direction: ltr; unicode-bidi: isolate; text-align: start; justify-self: start; color: var(--ah-ink-gold); }
/* Arabic words ("مجاناً", "2,500 جنيه", "المستوى 1") in the page's faces, right to left */
.ah-pl .ah-pl__price:not([lang]) { font-family: var(--ah-f-display); font-weight: 700; direction: rtl; }
.ah-pl .ah-pl__lv:not([lang]) { font-family: var(--ah-f-body); font-weight: 600; letter-spacing: 0; font-size: .78rem; }
.ah-pl .ah-pl__text { font-size: .86rem; line-height: 1.7; color: var(--ah-muted); }

.ah-pl .ah-pl__rung--best { background: var(--ah-navy); color: var(--ah-on-navy); }
.ah-pl .ah-pl__rung--best .ah-pl__lv,
.ah-pl .ah-pl__rung--best .ah-pl__price { color: var(--ah-gold-hi); }
.ah-pl .ah-pl__rung--best .ah-pl__text { color: var(--ah-on-navy-muted); }

.ah-pl .ah-pl__show {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 16px;
	padding: 18px 20px;
	border: 1px dashed var(--ah-ink-gold);
	border-radius: 10px;
}
.ah-pl .ah-pl__line { margin: 0; font-size: 1rem; line-height: 1.7; color: inherit; }
.ah-pl .ah-pl__line b { font-weight: 700; }
.ah-pl a.ah-pl__more { flex: none; white-space: nowrap; }
.ah-pl a.ah-pl__more:focus-visible { outline: 2px solid var(--ah-gold); outline-offset: 3px; }
.ah-pl .ah-pl__more .ah-btn__arr { flex: none; width: 1em; height: 1em; transition: translate .35s var(--ah-ease); }
[dir="rtl"] .ah-pl .ah-pl__more .ah-btn__arr { scale: -1 1; }
.ah-pl a.ah-pl__more:hover .ah-btn__arr { translate: calc(var(--ah-dir) * 4px) 0; }

.ah-pl.ah-on-dark { color: var(--ah-on-navy); }
.ah-pl.ah-on-dark .ah-pl__show { border-color: rgba(232, 201, 136, .55); }

@media (max-width: 1024px) {
	.ah-pl .ah-pl__ladder { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ah-pl .ah-pl__rung:nth-child(odd) { border-inline-start: 0; }
	.ah-pl .ah-pl__rung:nth-child(n + 3) { border-top: 1px solid var(--ah-line); }
}
@media (max-width: 767px) {
	.ah-pl { font-size: 16.5px; }
	.ah-pl .ah-pl__ladder { grid-template-columns: minmax(0, 1fr); }
	.ah-pl .ah-pl__rung { border-inline-start: 0; }
	.ah-pl .ah-pl__rung:nth-child(n + 2) { border-top: 1px solid var(--ah-line); }
	.ah-pl a.ah-pl__more { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
	.ah-motion .ah-pl .ah-rv .ah-pl__rung::before { transform: none; transition: none; }
	.ah-pl .ah-pl__more .ah-btn__arr { transition: none; }
}