/*
 * /apply-online — flagship conversion landing page.
 *
 * Its own stylesheet, not shared with get-more-support.css: the two pages
 * have different jobs and coupling them means a change to one silently
 * reshapes the other. Brand tokens only (--brand-navy #0F172A,
 * --btn-cta-bg for red) — no second palette.
 *
 * Mobile-first throughout: base rules are the phone layout; breakpoints
 * only ever add columns once there is genuinely room.
 *
 * The comparison table is the important part. It stays ONE semantic
 * <table> (correct for assistive tech and for search engines) and is
 * restyled into stacked blocks below 48rem — deliberately NOT wrapped in
 * an overflow-x container, which is what previously hid 47% of its
 * content behind a horizontal scroll at 320px.
 */

.ao-page {
	max-width: 72rem;
	margin: 0 auto;
	padding: var(--spacing-6) var(--spacing-4) var(--spacing-16);
}

.ao-alert {
	background: #FDF0EF;
	color: #A3271B;
	border-radius: var(--rounded);
	padding: var(--spacing-3) var(--spacing-4);
	margin-bottom: var(--spacing-6);
	font-size: var(--text-sm);
}

.ao-fine {
	margin: var(--spacing-2) 0 0;
	font-size: var(--text-xs);
	line-height: 1.55;
	color: var(--color-text-dimmed);
	text-align: center;
}

/* ---------- Section rhythm ---------- */
.ao-section { margin-bottom: var(--spacing-16); }
.ao-h2 {
	font-family: var(--font-title);
	font-size: var(--text-2xl);
	font-weight: var(--font-semibold);
	line-height: 1.25;
	margin: 0 0 var(--spacing-3);
	text-wrap: balance;
}
.ao-lede {
	font-size: var(--text-base);
	line-height: 1.65;
	color: var(--color-text-dimmed);
	margin: 0 0 var(--spacing-6);
	max-width: 46rem;
}

/* ---------- Hero ----------
   Deliberately not a <header> element. assets/css/site/header.css styles
   the bare `header` selector with `position: sticky; top: 0` and
   `z-index: 99 !important` for the site navigation bar — so any <header>
   anywhere on the page silently becomes a second sticky bar that floats
   over the content below as you scroll. This hero was a <header> and did
   exactly that. The belt-and-braces reset below means it stays put even
   if the markup is ever changed back. */
.ao-hero {
	position: static;
	z-index: auto;
}

/* ---------- Hero ---------- */
.ao-hero {
	text-align: center;
	padding: var(--spacing-8) 0 var(--spacing-12);
	max-width: 42rem;
	margin: 0 auto;
}
.ao-hero__title {
	font-family: var(--font-title);
	font-weight: var(--font-bold);
	font-size: var(--text-3xl);
	line-height: 1.15;
	margin: 0 0 var(--spacing-4);
	text-wrap: balance;
}
.ao-hero__sub {
	font-size: var(--text-base);
	line-height: 1.65;
	color: var(--color-text-dimmed);
	margin: 0 0 var(--spacing-6);
}
.ao-hero__actions { margin: 0; }
.ao-hero__fine { margin-top: var(--spacing-3); }

/* ---------- Buttons ---------- */
.ao-btn {
	display: block;
	width: 100%;
	text-align: center;
	background: var(--btn-cta-bg);
	border: 1px solid var(--btn-cta-bg);
	color: var(--btn-cta-color, #FFFFFF) !important;
	font-family: var(--font-sans);
	font-size: var(--text-base) !important;
	font-weight: var(--font-semibold);
	padding: var(--spacing-4) var(--spacing-5) !important;
	border-radius: 8px;
	text-decoration: none;
	cursor: pointer;
	min-height: 3rem;
}
.ao-btn:hover { background: var(--btn-cta-bg-hover, var(--btn-cta-bg)); }
.ao-btn:focus-visible {
	outline: 3px solid var(--brand-navy, #0F172A);
	outline-offset: 2px;
}
.ao-btn--hero { max-width: 22rem; margin: 0 auto; }

/* ---------- Tier cards ---------- */
.ao-tiers {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-5);
}
.ao-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--color-white);
	border: 1px solid var(--color-gray-250, #E5E5E5);
	border-radius: 14px;
	padding: var(--spacing-6);
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 12px 28px -18px rgba(15, 23, 42, 0.25);
}
/* Premium's only distinction is navy — red stays reserved for the three
   CTAs so no tier's button outranks another. */
/* The ring is drawn as an inset shadow rather than a 2px border so the
   featured card's content box stays exactly as wide as its neighbours';
   a thicker border shrank it by 2px and knocked the CTA row out of line. */
.ao-card--featured {
	border-color: var(--brand-navy, #0F172A);
	box-shadow: inset 0 0 0 1px var(--brand-navy, #0F172A),
		0 1px 2px rgba(15, 23, 42, 0.04), 0 12px 28px -18px rgba(15, 23, 42, 0.25);
}
.ao-card__badge {
	display: inline-block;
	align-self: flex-start;
	background: var(--brand-navy, #0F172A);
	color: #FFFFFF;
	font-size: 11px;
	font-weight: var(--font-bold);
	letter-spacing: 0.07em;
	text-transform: uppercase;
	padding: 5px 12px;
	border-radius: 999px;
	margin: 0 0 var(--spacing-4);
}
.ao-card__head {
	padding-bottom: var(--spacing-5);
	margin-bottom: var(--spacing-5);
	border-bottom: 1px solid var(--color-gray-250, #E5E5E5);
}
.ao-card__name {
	font-family: var(--font-title);
	font-size: var(--text-xl);
	font-weight: var(--font-semibold);
	margin: 0 0 var(--spacing-2);
	line-height: 1.25;
}
.ao-card__price {
	margin: 0 0 var(--spacing-3);
	display: flex;
	align-items: baseline;
	gap: var(--spacing-2);
	flex-wrap: wrap;
}
.ao-card__amount {
	font-family: var(--font-title);
	font-size: 2.5rem;
	font-weight: var(--font-bold);
	line-height: 1;
	color: var(--brand-navy, #0F172A);
	font-variant-numeric: tabular-nums;
}
.ao-card__term { font-size: var(--text-sm); color: var(--color-text-dimmed); }
.ao-card__desc {
	margin: 0;
	font-size: var(--text-sm);
	line-height: 1.6;
	color: var(--color-text-dimmed);
}
.ao-card__list {
	list-style: none;
	margin: 0 0 var(--spacing-6);
	padding: 0;
	font-size: var(--text-sm);
	flex: 1;
}
.ao-card__list li {
	position: relative;
	padding-left: 1.75rem;
	margin-bottom: var(--spacing-3);
	line-height: 1.5;
}
.ao-card__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.35em;
	width: 1rem;
	height: 0.5rem;
	border-left: 2px solid var(--color-green-600, #1E7A34);
	border-bottom: 2px solid var(--color-green-600, #1E7A34);
	transform: rotate(-45deg);
}
.ao-card__inherits { font-weight: var(--font-semibold); color: var(--color-text); }
.ao-card__action { margin-top: auto; }
/* The paid tiers' fine print sits inside .ao-form, so it picks up that
   flex container's gap on top of its own margin; Free's sits directly in
   the action block and picks up only the margin. Matching the total here
   is what puts all three CTAs on one baseline — without it Free's button
   rides 12px high, which is small enough to look like a mistake and
   large enough to see. */
.ao-card__action > .ao-fine { margin-top: var(--spacing-5); }

/* ---------- Purchase form ---------- */
.ao-form { display: flex; flex-direction: column; gap: var(--spacing-3); }
.ao-form__label {
	font-size: var(--text-xs);
	font-weight: var(--font-semibold);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--color-text-dimmed);
}
.ao-form__input {
	width: 100%;
	/* 16px minimum stops iOS Safari zooming the page on focus */
	font-size: 16px;
	padding: var(--spacing-3);
	border: 1px solid var(--color-gray-250, #E5E5E5);
	border-radius: 8px;
	min-height: 3rem;
}
.ao-form__input:focus-visible {
	outline: 3px solid var(--brand-navy, #0F172A);
	outline-offset: 1px;
}
.ao-form__consent {
	display: flex;
	gap: var(--spacing-2);
	align-items: flex-start;
	font-size: var(--text-xs);
	line-height: 1.5;
	color: var(--color-text-dimmed);
}
.ao-form__consent input {
	flex: none;
	width: 1.15rem;
	height: 1.15rem;
	margin-top: 0.1rem;
}

/* ---------- How it works ---------- */
.ao-steps {
	list-style: none;
	counter-reset: aostep;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-5);
}
.ao-steps li {
	counter-increment: aostep;
	position: relative;
	padding-left: 3.25rem;
}
.ao-steps li::before {
	content: counter(aostep);
	position: absolute;
	left: 0;
	top: 0;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: var(--brand-navy, #0F172A);
	color: #FFFFFF;
	font-family: var(--font-title);
	font-weight: var(--font-bold);
	font-size: var(--text-base);
	display: flex;
	align-items: center;
	justify-content: center;
}
.ao-steps h3 {
	font-size: var(--text-base);
	font-weight: var(--font-semibold);
	margin: 0 0 var(--spacing-1);
	line-height: 1.35;
	padding-top: 0.35rem;
}
.ao-steps p {
	margin: 0;
	font-size: var(--text-sm);
	line-height: 1.6;
	color: var(--color-text-dimmed);
}

/* ---------- What you need ---------- */
.ao-need { display: flex; flex-direction: column; gap: var(--spacing-6); }
.ao-need__group {
	background: var(--color-white);
	border: 1px solid var(--color-gray-250, #E5E5E5);
	border-radius: 12px;
	padding: var(--spacing-5);
}
.ao-need__title {
	font-size: var(--text-sm);
	font-weight: var(--font-bold);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--brand-navy, #0F172A);
	margin: 0 0 var(--spacing-4);
}
.ao-need__list { list-style: none; margin: 0; padding: 0; font-size: var(--text-sm); }
.ao-need__list li {
	position: relative;
	padding-left: 1.6rem;
	margin-bottom: var(--spacing-3);
	line-height: 1.5;
}
.ao-need__list li::before {
	content: "";
	position: absolute;
	left: 0.15rem;
	top: 0.5em;
	width: 0.45rem;
	height: 0.45rem;
	border-radius: 50%;
	background: var(--brand-navy, #0F172A);
}
.ao-need__list--muted li::before { background: var(--color-text-dimmed); }
.ao-need__note { text-align: left; margin-top: var(--spacing-3); }

/* ==========================================================
   COMPARISON — stacked blocks on mobile, real table ≥48rem
   ========================================================== */
.ao-ct { width: 100%; border-collapse: collapse; }
.ao-ct__caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* --- Mobile (base): one card per feature, three labelled rows inside.
       No horizontal scroll, nothing clipped. --- */
@media (max-width: 47.99rem) {
	.ao-ct thead {
		/* Visually hidden but still announced to screen readers */
		position: absolute;
		width: 1px; height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
	.ao-ct, .ao-ct tbody, .ao-ct tr, .ao-ct th, .ao-ct td { display: block; width: 100%; }
	.ao-ct tr {
		background: var(--color-white);
		border: 1px solid var(--color-gray-250, #E5E5E5);
		border-radius: 12px;
		padding: var(--spacing-4) var(--spacing-5);
		margin-bottom: var(--spacing-4);
	}
	.ao-ct tbody th[scope="row"] {
		font-size: var(--text-base);
		font-weight: var(--font-semibold);
		text-align: left;
		line-height: 1.4;
		padding: 0 0 var(--spacing-3);
		margin-bottom: var(--spacing-3);
		border-bottom: 1px solid var(--color-gray-250, #E5E5E5);
	}
	.ao-ct td {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		gap: var(--spacing-4);
		font-size: var(--text-sm);
		padding: var(--spacing-2) 0;
		line-height: 1.45;
	}
	/* The tier name, so each value is never ambiguous without the header row */
	.ao-ct td::before {
		content: attr(data-tier);
		font-weight: var(--font-semibold);
		color: var(--color-text-dimmed);
		flex: none;
	}
	.ao-ct td { text-align: right; }
}

/* --- Tablet & desktop: a genuine table --- */
@media (min-width: 48rem) {
	.ao-compare {
		border: 1px solid var(--color-gray-250, #E5E5E5);
		border-radius: 12px;
		overflow: hidden;
		background: var(--color-white);
	}
	.ao-ct th, .ao-ct td {
		text-align: left;
		padding: var(--spacing-3) var(--spacing-4);
		border-bottom: 1px solid var(--color-gray-250, #E5E5E5);
		font-size: var(--text-sm);
		vertical-align: top;
	}
	.ao-ct thead th {
		font-size: var(--text-xs);
		text-transform: uppercase;
		letter-spacing: 0.04em;
		color: var(--color-text-dimmed);
		background: var(--color-gray-100, #F5F5F5);
		white-space: nowrap;
	}
	.ao-ct tbody th[scope="row"] { font-weight: var(--font-semibold); }
	.ao-ct tbody tr:last-child th,
	.ao-ct tbody tr:last-child td { border-bottom: none; }
}
.ao-compare__more { margin: var(--spacing-4) 0 0; font-size: var(--text-sm); }

/* ---------- After you apply ---------- */
.ao-after { list-style: none; margin: 0; padding: 0; }
.ao-after li {
	position: relative;
	padding-left: 1.75rem;
	margin-bottom: var(--spacing-4);
	font-size: var(--text-sm);
	line-height: 1.6;
	color: var(--color-text-dimmed);
}
.ao-after li strong { color: var(--color-text); font-weight: var(--font-semibold); }
.ao-after li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.45em;
	width: 0.5rem;
	height: 0.5rem;
	border-right: 2px solid var(--brand-navy, #0F172A);
	border-bottom: 2px solid var(--brand-navy, #0F172A);
	transform: rotate(-45deg);
}

/* ---------- Trust ---------- */
.ao-trust {
	background: var(--color-gray-100, #F5F5F5);
	border-radius: 12px;
	padding: var(--spacing-6);
}
.ao-trust__list { list-style: none; margin: 0; padding: 0; font-size: var(--text-sm); }
.ao-trust__list li {
	position: relative;
	padding-left: var(--spacing-5);
	margin-bottom: var(--spacing-3);
	line-height: 1.6;
}
.ao-trust__list li:last-child { margin-bottom: 0; }
.ao-trust__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.6em;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--color-text-dimmed);
}

/* ---------- FAQ ---------- */
.ao-faq { border-top: 1px solid var(--color-gray-250, #E5E5E5); }
.ao-faq__item { border-bottom: 1px solid var(--color-gray-250, #E5E5E5); }
.ao-faq__q {
	cursor: pointer;
	list-style: none;
	padding: var(--spacing-4) var(--spacing-8) var(--spacing-4) 0;
	font-size: var(--text-base);
	font-weight: var(--font-semibold);
	line-height: 1.45;
	position: relative;
	min-height: 3rem;
	display: flex;
	align-items: center;
}
.ao-faq__q::-webkit-details-marker { display: none; }
.ao-faq__q::after {
	content: "+";
	position: absolute;
	right: 0;
	font-size: var(--text-xl);
	font-weight: var(--font-normal);
	color: var(--color-text-dimmed);
	line-height: 1;
}
.ao-faq__item[open] .ao-faq__q::after { content: "\2212"; }
.ao-faq__q:focus-visible { outline: 3px solid var(--brand-navy, #0F172A); outline-offset: -3px; }
.ao-faq__a { padding: 0 0 var(--spacing-5); }
.ao-faq__a p {
	margin: 0;
	font-size: var(--text-sm);
	line-height: 1.65;
	color: var(--color-text-dimmed);
	max-width: 60ch;
}

/* ---------- Final CTA ---------- */
.ao-final {
	background: var(--brand-navy, #0F172A);
	border-radius: 14px;
	padding: var(--spacing-10) var(--spacing-6);
	text-align: center;
}
.ao-final__h { color: #FFFFFF; }
.ao-final__sub {
	color: #C3CBDA;
	font-size: var(--text-base);
	line-height: 1.6;
	margin: 0 auto var(--spacing-6);
	max-width: 32rem;
}
.ao-final__fine { color: #98A3B5; margin-top: var(--spacing-4); }
.ao-final__fine a { color: #FFFFFF; }

/* ---------- Tablet ---------- */
@media (min-width: 40rem) {
	.ao-need { flex-direction: row; }
	.ao-need__group { flex: 1; }
}
@media (min-width: 40rem) and (max-width: 61.99rem) {
	.ao-tiers { display: grid; grid-template-columns: repeat(2, 1fr); align-items: stretch; }
	.ao-card--featured { grid-column: 1 / -1; }
	/* Premium spans the full row here, which would otherwise stretch its
	   email field and CTA to ~670px. Cap them to a normal form measure. */
	.ao-card--featured .ao-card__action {
		width: 100%;
		max-width: 24rem;
		margin-left: auto;
		margin-right: auto;
	}
	.ao-steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-6); }
}

/* ---------- Desktop ---------- */
@media (min-width: 62rem) {
	.ao-hero { padding-top: var(--spacing-12); }
	.ao-hero__title { font-size: var(--text-4xl); }
	.ao-hero__sub { font-size: var(--text-lg); }
	.ao-h2 { font-size: var(--text-3xl); }
	.ao-tiers { display: grid; grid-template-columns: repeat(3, 1fr); align-items: stretch; gap: var(--spacing-5); }
	/* Side by side, the three prices have to sit on one line. Premium's
	   badge is lifted out of the flow and every card reserves its height,
	   otherwise the badge alone pushes Premium's name and price down 44px. */
	.ao-card { padding-top: calc(var(--spacing-6) + 2.75rem); }
	.ao-card__badge {
		position: absolute;
		top: var(--spacing-6);
		left: var(--spacing-6);
		margin: 0;
	}
	/* One line of fine print under Free vs two under the paid tiers left the
	   CTAs on three different baselines; reserve two lines for all of them. */
	.ao-card .ao-fine { min-height: 3.1em; }
	.ao-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spacing-6); }
	.ao-final { padding: var(--spacing-12) var(--spacing-8); }
}

@media (prefers-reduced-motion: reduce) {
	* { animation: none !important; transition: none !important; }
}

/* ==========================================================
   PRE-PAYMENT TRANSPARENCY BLOCKS
   Appended, not woven in: every rule below is a new class used
   only by the sections added for pre-payment clarity, so nothing
   above this line changes behaviour. Reuses the same tokens,
   radii and card treatment as the rest of the page rather than
   introducing a second visual language.
   ========================================================== */

/* ---------- Free application vs tuition vs scholarships (layouts/funding-note) ---------- */
.funding-note {
	background: var(--color-white);
	border: 1px solid var(--brand-navy, #0F172A);
	border-radius: 14px;
	padding: var(--spacing-6);
	margin-bottom: var(--spacing-16);
}
.funding-note__title {
	font-family: var(--font-title);
	font-size: var(--text-xl);
	font-weight: var(--font-semibold);
	line-height: 1.25;
	margin: 0 0 var(--spacing-3);
	color: var(--brand-navy, #0F172A);
}
.funding-note__body {
	margin: 0 0 var(--spacing-3);
	font-size: var(--text-sm);
	line-height: 1.65;
	color: var(--color-text-dimmed);
}
.funding-note__body:last-child { margin-bottom: 0; }
.funding-note__body strong { color: var(--color-text); font-weight: var(--font-semibold); }

/* ---------- "Not included" list inside a tier card ----------
   Never flex: 1 — .ao-card__list already grows to push the CTA to the
   bottom, and a second growing list would split that space between the
   two and lift the buttons off their shared baseline. */
.ao-card__list--not {
	flex: none;
	margin-top: calc(var(--spacing-4) * -1);
	color: var(--color-text-dimmed);
}
.ao-card__list--not li::before {
	border-left: none;
	border-bottom: 2px solid var(--color-text-dimmed);
	width: 0.75rem;
	height: 0;
	top: 0.7em;
	left: 0.15rem;
	transform: none;
}

/* ---------- Compressed pre-payment summary under the cards ---------- */
.ao-prepay {
	margin-top: var(--spacing-6);
	background: var(--color-gray-100, #F5F5F5);
	border-radius: 12px;
	padding: var(--spacing-6);
}
.ao-prepay__title {
	font-size: var(--text-sm);
	font-weight: var(--font-bold);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--brand-navy, #0F172A);
	margin: 0 0 var(--spacing-4);
}
.ao-prepay__list { list-style: none; margin: 0; padding: 0; font-size: var(--text-sm); }
.ao-prepay__list li {
	position: relative;
	padding-left: var(--spacing-5);
	margin-bottom: var(--spacing-3);
	line-height: 1.6;
	color: var(--color-text-dimmed);
}
.ao-prepay__list li:last-child { margin-bottom: 0; }
.ao-prepay__list li strong { color: var(--color-text); font-weight: var(--font-semibold); }
.ao-prepay__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.6em;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--brand-navy, #0F172A);
}
.ao-prepay__more { margin: var(--spacing-4) 0 0; font-size: var(--text-sm); }

/* ---------- Checkpoint definitions ---------- */
.ao-cps { display: flex; flex-direction: column; gap: var(--spacing-5); }
.ao-cps__group {
	background: var(--color-white);
	border: 1px solid var(--color-gray-250, #E5E5E5);
	border-radius: 12px;
	padding: var(--spacing-5);
}
.ao-cps__title {
	font-family: var(--font-title);
	font-size: var(--text-lg);
	font-weight: var(--font-semibold);
	margin: 0 0 var(--spacing-4);
	color: var(--brand-navy, #0F172A);
}
.ao-cps__list { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.ao-cps__item {
	display: flex;
	gap: var(--spacing-3);
	align-items: flex-start;
	padding: var(--spacing-4) 0;
	border-top: 1px solid var(--color-gray-250, #E5E5E5);
}
.ao-cps__item:first-child { border-top: none; padding-top: 0; }
.ao-cps__item:last-child { padding-bottom: 0; }
.ao-cps__num {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	background: var(--brand-navy, #0F172A);
	color: #FFFFFF;
	font-size: var(--text-xs);
	font-weight: var(--font-bold);
	font-variant-numeric: tabular-nums;
}
.ao-cps__label {
	display: block;
	font-size: var(--text-base);
	font-weight: var(--font-semibold);
	line-height: 1.35;
}
.ao-cps__desc {
	margin: var(--spacing-2) 0 0;
	font-size: var(--text-sm);
	line-height: 1.65;
	color: var(--color-text-dimmed);
}

/* ---------- "What we do" / "What you do" ---------- */
.ao-split {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-5);
	margin-top: var(--spacing-6);
}
.ao-split__col {
	background: var(--color-gray-100, #F5F5F5);
	border-radius: 12px;
	padding: var(--spacing-5);
}
.ao-split__title {
	font-size: var(--text-sm);
	font-weight: var(--font-bold);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--brand-navy, #0F172A);
	margin: 0 0 var(--spacing-4);
}
.ao-split__list { list-style: none; margin: 0; padding: 0; font-size: var(--text-sm); }
.ao-split__list li {
	position: relative;
	padding-left: 1.6rem;
	margin-bottom: var(--spacing-3);
	line-height: 1.6;
	color: var(--color-text-dimmed);
}
.ao-split__list li:last-child { margin-bottom: 0; }
.ao-split__list li::before {
	content: "";
	position: absolute;
	left: 0.15rem;
	top: 0.5em;
	width: 0.45rem;
	height: 0.45rem;
	border-radius: 50%;
	background: var(--brand-navy, #0F172A);
}

/* ---------- Where documents go ---------- */
.ao-need__where {
	margin-top: var(--spacing-6);
	background: var(--color-white);
	border: 1px solid var(--color-gray-250, #E5E5E5);
	border-radius: 12px;
	padding: var(--spacing-5);
}
.ao-need__where p {
	margin: 0 0 var(--spacing-3);
	font-size: var(--text-sm);
	line-height: 1.65;
	color: var(--color-text-dimmed);
}
.ao-need__where p:last-child { margin-bottom: 0; }
.ao-need__warn {
	background: var(--color-gray-100, #F5F5F5);
	border-radius: 8px;
	padding: var(--spacing-3) var(--spacing-4);
}
.ao-need__warn strong { color: var(--color-text); font-weight: var(--font-semibold); }

/* ---------- Responsive ---------- */
@media (min-width: 40rem) {
	.ao-cps { flex-direction: row; }
	.ao-cps__group { flex: 1; }
	.ao-split { flex-direction: row; }
	.ao-split__col { flex: 1; }
}
@media (min-width: 40rem) and (max-width: 61.99rem) {
	/* The base .ao-steps rule turns into a 2-column grid at this width;
	   six steps divide evenly across it, so nothing to override. */
	.ao-prepay__list { columns: 2; column-gap: var(--spacing-6); }
	.ao-prepay__list li { break-inside: avoid; }
}
@media (min-width: 62rem) {
	/* .ao-steps becomes 4 columns on desktop for the 4-step "How applying
	   works" list. Six pay steps would leave a ragged 4 + 2; three columns
	   gives two even rows of three. */
	.ao-steps--pay { grid-template-columns: repeat(3, 1fr); }
	.ao-prepay__list { columns: 2; column-gap: var(--spacing-8); }
	.ao-prepay__list li { break-inside: avoid; }
	.funding-note { padding: var(--spacing-8); }
	.funding-note__title { font-size: var(--text-xl); }
}

/* ---------- funding-note: the scholarship sub-block ----------
   Set apart from the three definitions above it because it answers a
   different question — the definitions say what a scholarship is NOT,
   this says where to actually look. Same block, visibly a follow-on. */
.funding-note__sub {
	margin-top: var(--spacing-5);
	padding-top: var(--spacing-5);
	border-top: 1px solid var(--color-gray-250, #E5E5E5);
}
.funding-note__subtitle {
	font-size: var(--text-sm);
	font-weight: var(--font-bold);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--brand-navy, #0F172A);
	margin: 0 0 var(--spacing-3);
}

/* ---------- Ask before you apply (WhatsApp entry point) ----------
   Shares ao-prepay's visual language (same surface, radius and spacing
   tokens) so it reads as part of the decision block rather than an advert.
   The button itself is the framework's existing .btn--whatsapp — no second
   button style is introduced here. */
.ao-ask {
	margin-top: var(--spacing-6);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-4);
	background: var(--color-gray-100, #F5F5F5);
	border-radius: 12px;
	padding: var(--spacing-5) var(--spacing-6);
}
.ao-ask__text { min-width: 0; }
.ao-ask__title {
	margin: 0;
	font-size: var(--text-base);
	font-weight: var(--font-semibold);
	color: var(--color-text);
}
.ao-ask__sub {
	margin: var(--spacing-1) 0 0;
	font-size: var(--text-sm);
	color: var(--color-text-dimmed);
}
.ao-ask__btn { flex: 0 0 auto; }

/* Below this width the row would wrap into an awkward two-line button, so
   stack it and let the button span the full width like the card CTAs do. */
@media (max-width: 560px) {
	.ao-ask { flex-direction: column; align-items: stretch; }
	.ao-ask__btn { width: 100%; }
}