/*
 * AH Principles: six numbered principles in two columns (one on tablets), gold numbers, one colour
 * for the titles (an optional "X before Y" rule shows the connector and a muted second term). A gold
 * rule draws over the top line on hover.
 */
.ah-rules.ah-rules {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 56px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--ah-f-body);
	font-size: 17px;
	line-height: 1.75;
	color: var(--ah-ink);
	--ah-rules-line: var(--ah-line);
	--ah-rules-accent: var(--ah-ink-gold);
	--ah-rules-lo: var(--ah-soft);
	--ah-rules-muted: var(--ah-muted);
	--ah-rules-text: #2E2E2E;
}
.ah-rules.ah-on-dark {
	color: var(--ah-on-navy);
	--ah-rules-line: var(--ah-line-navy);
	--ah-rules-accent: var(--ah-gold-hi);
	--ah-rules-lo: var(--ah-on-navy-muted);
	--ah-rules-muted: var(--ah-on-navy-muted);
	--ah-rules-text: #E1E3EA;
}
.ah-rules .ah-rules__item {
	position: relative;
	display: grid;
	grid-template-columns: 52px minmax(0, 1fr);
	gap: 4px 14px;
	margin: 0;
	padding: 24px 0;
	border-top: 1px solid var(--ah-rules-line);
}
.ah-rules .ah-rules__item::before {
	content: "";
	position: absolute;
	top: -1px;
	inset-inline: 0;
	height: 1px;
	background: var(--ah-gold);
	transform: scaleX(0);
	transform-origin: var(--ah-rules-from, left);
	transition: transform .7s var(--ah-ease);
}
[dir="rtl"] .ah-rules .ah-rules__item::before { --ah-rules-from: right; }
.ah-rules .ah-rules__item:hover::before { transform: scaleX(1); }
.ah-motion .ah-rules .ah-rules__item.ah-rv--up { transition-delay: calc(var(--i, 0) * 110ms); }

.ah-rules .ah-rules__no {
	grid-row: span 2;
	padding-top: 10px;
	font-family: var(--ah-f-mono);
	font-weight: 400;
	font-size: .82rem;
	line-height: 1.5;
	color: var(--ah-rules-accent);
	transition: color .3s;
}
.ah-rules .ah-rules__item:hover .ah-rules__no { color: var(--ah-gold); }
.ah-rules .ah-rules__title {
	margin: 0;
	font-family: var(--ah-f-display);
	font-weight: 800;
	font-size: clamp(1.35rem, 2.3vw, 1.8rem);
	line-height: 1.3;
	letter-spacing: 0;
	text-transform: none;
	color: inherit;
	text-wrap: balance;
}
.ah-rules .ah-rules__bf {
	display: inline-block;
	margin-inline: 6px;
	font-family: var(--ah-f-hand);
	font-weight: 700;
	font-size: .78em;
	color: var(--ah-rules-accent);
	transition: transform .5s var(--ah-spring);
}
.ah-rules .ah-rules__item:hover .ah-rules__bf { transform: translateY(-3px) rotate(-6deg); }
.ah-rules .ah-rules__lo { font-weight: 600; color: var(--ah-rules-lo); }
.ah-rules .ah-rules__text { margin: 0; font-size: 1.08rem; line-height: 1.85; color: var(--ah-rules-text); }

@media (prefers-reduced-motion: reduce) {
	.ah-rules .ah-rules__item::before,
	.ah-rules .ah-rules__bf,
	.ah-rules .ah-rules__no { transition: none; }
	.ah-rules .ah-rules__item:hover .ah-rules__bf { transform: none; }
}

@media (max-width: 1024px) {
	.ah-rules.ah-rules { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
	.ah-rules.ah-rules { font-size: 16.5px; }
	.ah-rules .ah-rules__item { grid-template-columns: 36px minmax(0, 1fr); gap: 2px 10px; padding: 20px 0; }
	.ah-rules .ah-rules__no { padding-top: 7px; }
}