/*
 * AH Engage Ways: three cards in a row (one column on tablets). Dark tone by default (navy
 * container). The reveal sits on the item and the tilt on the card inside it, so both work.
 */
.ah-ways {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	font-family: var(--ah-f-body);
	font-size: 17px;
	line-height: 1.75;
	color: var(--ah-ink);
	--ah-ways-bg: var(--ah-paper);
	--ah-ways-bg-hi: var(--ah-paper);
	--ah-ways-line: var(--ah-line);
	--ah-ways-line-hi: var(--ah-ink-gold);
	--ah-ways-accent: var(--ah-ink-gold);
	--ah-ways-muted: var(--ah-muted);
}
.ah-ways.ah-on-dark {
	color: var(--ah-on-navy);
	--ah-ways-bg: rgba(255, 255, 255, .03);
	--ah-ways-bg-hi: rgba(255, 255, 255, .055);
	--ah-ways-line: var(--ah-line-navy);
	--ah-ways-line-hi: rgba(232, 201, 136, .5);
	--ah-ways-accent: var(--ah-gold-hi);
	--ah-ways-muted: var(--ah-on-navy-muted);
}
.ah-ways .ah-ways__item { display: grid; min-width: 0; }
.ah-motion .ah-ways .ah-ways__item.ah-rv--up { transition-delay: calc(var(--i, 0) * 90ms); }

.ah-ways .ah-ways__card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
	padding: 26px;
	border: 1px solid var(--ah-ways-line);
	border-radius: 16px;
	background: var(--ah-ways-bg);
	color: inherit;
	transition: transform .5s var(--ah-ease), border-color .35s, background-color .35s, box-shadow .35s;
}
.ah-ways .ah-ways__card.has-link:hover,
.ah-ways .ah-ways__card:focus-within {
	border-color: var(--ah-ways-line-hi);
	background: var(--ah-ways-bg-hi);
	box-shadow: 0 28px 50px -36px rgba(0, 0, 0, .75);
}
.ah-ways .ah-ways__card.ah-tilt.is-tilting { transition: transform .08s linear, border-color .35s, background-color .35s, box-shadow .35s; }

.ah-ways .ah-ways__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.ah-ways .ah-ways__no {
	font-family: var(--ah-f-mono);
	font-weight: 500;
	font-size: .74rem;
	letter-spacing: .2em;
	line-height: 1.5;
	color: var(--ah-ways-accent);
	unicode-bidi: isolate;
}
.ah-ways .ah-ways__no.ah-ways__no--ar { font-family: var(--ah-f-body); font-weight: 700; font-size: .82rem; letter-spacing: 0; }
.ah-ways .ah-ways__top .ah-itile { transform: translateZ(28px); }
.ah-ways .ah-ways__card:hover .ah-itile { transform: translateZ(40px) translateY(-2px) rotate(-4deg) scale(1.06); }

.ah-ways .ah-ways__title {
	margin: 0;
	font-family: var(--ah-f-display);
	font-weight: 600;
	font-size: 1.36rem;
	line-height: 1.4;
	letter-spacing: 0;
	color: inherit;
	text-wrap: balance;
}
.ah-ways .ah-ways__text { margin: 0; font-size: .95rem; line-height: 1.75; color: var(--ah-ways-muted); }
.ah-ways .ah-ways__list {
	display: grid;
	gap: 4px;
	margin: 0;
	padding: 0;
	padding-inline-start: 1.1em;
	list-style: disc;
	font-size: .9rem;
	line-height: 1.7;
	color: var(--ah-ways-muted);
}
.ah-ways .ah-ways__list li { margin: 0; padding: 0; }
.ah-ways .ah-ways__list li::marker { color: var(--ah-gold); }

/* the link sits at the bottom, so the three links line up */
.ah-ways .ah-ways__go {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	align-self: flex-start;
	margin-top: auto;
	padding-top: 6px;
	font-family: var(--ah-f-body);
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--ah-ways-accent);
	text-decoration: none;
	background: none;
}
.ah-ways a.ah-ways__go::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.ah-ways a.ah-ways__go:hover,
.ah-ways a.ah-ways__go:focus-visible { color: var(--ah-ways-accent); }
.ah-ways a.ah-ways__go span { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .45s var(--ah-ease); }
[dir="rtl"] .ah-ways a.ah-ways__go span { background-position: 100% 100%; }
.ah-ways .ah-ways__card:hover a.ah-ways__go span,
.ah-ways a.ah-ways__go:focus-visible span { background-size: 100% 1px; }
.ah-ways .ah-ways__go .ah-btn__arr { flex: none; width: 1em; height: 1em; transition: translate .35s var(--ah-ease); }
[dir="rtl"] .ah-ways .ah-ways__go .ah-btn__arr { scale: -1 1; }
.ah-ways .ah-ways__card:hover .ah-ways__go .ah-btn__arr { translate: calc(var(--ah-dir) * 5px) 0; }
.ah-ways a.ah-ways__go:focus-visible { outline: none; }
.ah-ways .ah-ways__card:has(a.ah-ways__go:focus-visible) { outline: 2px solid var(--ah-gold); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
	.ah-ways .ah-ways__card,
	.ah-ways .ah-itile,
	.ah-ways .ah-ways__go span,
	.ah-ways .ah-ways__go .ah-btn__arr { transition: none; }
	.ah-ways .ah-ways__card:hover .ah-itile { transform: none; }
}

@media (max-width: 1024px) {
	.ah-ways { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
	.ah-ways { font-size: 16.5px; }
	.ah-ways .ah-ways__card { padding: 22px 20px; }
	.ah-ways .ah-ways__title { font-size: 1.24rem; }
}