/*
 * home.css — the thirteen homepage sections.
 * Source: /design/homepage.md
 *
 * Loaded on the front page only. None of it is in the critical bundle: the
 * homepage is not where the site's Core Web Vitals are decided — ~90% of
 * sessions land on an article — and putting the hero's grid on the critical
 * path of every article to save one paint on a minor page is the wrong trade
 * (/technical/performance.md §2).
 *
 * The one rule that shapes every section below: **calm is the differentiator.**
 * No carousel, no video, no scroll animation, no parallax. Bands alternate
 * background rather than moving.
 */

/* ---------------------------------------------------------------------------
 * §1 Hero
 *
 * Text-led, so the LCP element is the H1 and there is no image on the critical
 * path competing with the font. `min-height` rather than a fixed 70vh: a fixed
 * viewport height clips the sub-line on a 640px-tall phone in landscape.
 * ------------------------------------------------------------------------ */

.ait-home__hero {
	padding-block: var(--s-8) var(--s-7);
	background: var(--c-bg);
}

.ait-home__hero-copy {
	max-width: 46rem;
}

.ait-home__hero-title {
	margin: 0 0 var(--s-4);
	font-size: var(--fs-display);
	line-height: var(--lh-display);
}

.ait-home__hero-sub {
	margin: 0 0 var(--s-6);
	font-size: 1.125rem;
	line-height: var(--lh-body);
	color: var(--c-ink);
}

.ait-home__hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-3);
	margin: 0;
}

@media (min-width: 1024px) {
	.ait-home__hero {
		padding-block: var(--s-9) var(--s-8);
	}
}

/* ---------------------------------------------------------------------------
 * §2 Trust strip
 * ------------------------------------------------------------------------ */

.ait-home__trust {
	padding-block: var(--s-5);
	border-block: var(--border-hair);
	background: var(--c-surface);
}

.ait-home__trust-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-4) var(--s-6);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ait-home__trust-list > li {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	margin: 0;
	font-size: var(--fs-small);
	font-weight: 600;
}

.ait-home__trust-list > li::before {
	content: none;
}

.ait-home__trust-list .ait-icon {
	flex: none;
	color: var(--c-primary-light);
}

/* ---------------------------------------------------------------------------
 * Section and band shells
 * ------------------------------------------------------------------------ */

.ait-home__section {
	padding-block: var(--s-8);
}

.ait-home__section-title {
	margin: 0 0 var(--s-5);
	font-size: var(--fs-h2);
	line-height: var(--lh-h2);
}

.ait-home__more {
	margin-top: var(--s-5);
	font-weight: 600;
}

.ait-home__band {
	padding-block: var(--s-8);
	background: var(--c-surface);
}

.ait-home__band--band {
	background: var(--c-band);
}

/*
 * The Teal band is the only inverted surface on the site. Bone on Deep
 * Teal is a pre-validated pair; nothing else may be placed on this background,
 * which is why the rule sets the colour on the container rather than leaving it
 * to whatever lands inside (design-system.md §2.2).
 */
.ait-home__band--teal {
	background: var(--c-primary);
	color: var(--c-bg);
}

.ait-home__band--teal .ait-home__band-title,
.ait-home__band--teal a:not(.ait-btn) {
	color: var(--c-bg);
}

.ait-home__band-inner {
	max-width: var(--measure);
}

.ait-home__band-title {
	margin: 0 0 var(--s-4);
	font-size: var(--fs-h2);
	line-height: var(--lh-h2);
}

.ait-home__band-copy {
	margin-bottom: var(--s-4);
}

/* ---------------------------------------------------------------------------
 * §4 Library band — the checklist
 *
 * Specificity is the point: three concrete artifacts beat "lots of templates".
 * The tick is a pseudo-element rather than an icon, because it is decoration
 * around text that already says everything.
 * ------------------------------------------------------------------------ */

.ait-home__checks {
	margin: 0 0 var(--s-5);
	padding: 0;
	list-style: none;
}

.ait-home__checks > li {
	position: relative;
	margin: 0 0 var(--s-2);
	padding-left: var(--s-6);
}

.ait-home__checks > li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	color: var(--c-primary);
	font-weight: 700;
}

/* ---------------------------------------------------------------------------
 * §8 Start Here steps
 * ------------------------------------------------------------------------ */

.ait-home__steps {
	display: grid;
	gap: var(--s-4);
	margin: 0 0 var(--s-6);
	padding: 0;
	list-style: none;
	counter-reset: ait-step;
}

.ait-home__steps > li {
	position: relative;
	margin: 0;
	padding-left: var(--s-8);
	font-size: 1.0625rem;
	counter-increment: ait-step;
}

.ait-home__steps > li::before {
	content: counter(ait-step);
	position: absolute;
	left: 0;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: var(--r-full);
	background: var(--c-accent);
	color: var(--c-accent-ink);
	font-weight: 700;
}

@media (min-width: 640px) {
	.ait-home__steps {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ---------------------------------------------------------------------------
 * §3 Problem doors
 * ------------------------------------------------------------------------ */

.ait-door {
	position: relative;
	height: 100%;
	padding: var(--s-5);
	border: var(--border-hair);
	border-radius: var(--r-md);
	background: var(--c-surface);
	box-shadow: var(--shadow-1);
	transition:
		box-shadow var(--t-fast) var(--ease),
		transform var(--t-fast) var(--ease);
}

.ait-door:hover {
	box-shadow: var(--shadow-2);
	transform: translateY(-2px);
}

.ait-door__icon {
	display: block;
	margin-bottom: var(--s-3);
	color: var(--c-primary-light);
}

.ait-door__title {
	margin: 0 0 var(--s-2);
	font-size: var(--fs-h3);
	line-height: var(--lh-h3);
}

.ait-door__link {
	color: var(--c-primary);
	text-decoration: none;
}

/* The whole card is the hit area, with exactly one focusable element inside. */
.ait-door__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.ait-door__link:hover {
	text-decoration: underline;
}

.ait-door__link:focus-visible {
	outline: var(--focus-width) solid var(--focus-color);
	outline-offset: var(--focus-offset);
}

.ait-door__benefit {
	margin: 0;
	color: var(--c-ink-muted);
	font-size: var(--fs-small);
	line-height: var(--lh-ui);
}

/* ---------------------------------------------------------------------------
 * §11 About note
 * ------------------------------------------------------------------------ */

.ait-home__about {
	border-top: var(--border-hair);
}

@media (prefers-reduced-motion: reduce) {
	.ait-door {
		transition: none;
	}

	.ait-door:hover {
		transform: none;
	}
}