/**
 * Front page.
 *
 * Hero, steps, tool cards and the trust panel. Loaded on the front page
 * only, so no other page pays for it.
 */

/* ====================================================================== Hero */

.ite-hero {
	padding-block: clamp(3rem, 8vw, 6.5rem) clamp(2.5rem, 6vw, 5rem);
	border-bottom: 1px solid var(--ite-border);
	overflow: hidden;
}

.ite-hero__inner {
	max-width: none;
}

.ite-hero__title {
	margin: 0 0 var(--ite-8);
	max-width: 18ch;
	font-size: var(--ite-text-4xl);
	font-weight: 720;
	letter-spacing: -0.035em;
	line-height: 1.04;
}

/* The accent phrase is a gradient clipped to the text. A solid accent
   colour at this size reads as a link; the gradient reads as display
   type, which is what it is. */
.ite-hero__accent {
	display: block;
	background: linear-gradient(
		100deg,
		var(--ite-accent) 0%,
		#8b7dff 45%,
		#c77dff 100%
	);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;

	/* Clipping the gradient to the text confines painting to the line
	   box, and a line-height below 1 leaves the descender of a g or y
	   outside it, where it is simply cut off. The extra room goes below
	   the baseline and is pulled back out of the flow, so the gap to the
	   paragraph beneath is unchanged. */
	padding-bottom: 0.16em;
	margin-bottom: -0.16em;
}

/* Fallback for engines without background-clip on text, where the rule
   above would otherwise render the phrase invisible. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
	.ite-hero__accent {
		background: none;
		-webkit-text-fill-color: currentColor;
		color: var(--ite-accent);
	}
}

.ite-hero__lead {
	margin: 0 0 var(--ite-10);
	max-width: 60ch;
	font-size: var(--ite-text-lg);
	line-height: var(--ite-leading-snug);
	color: var(--ite-text-muted);
}

.ite-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ite-4);
	margin-bottom: var(--ite-20);
}

/* ===================================================================== Stats */

.ite-hero__stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--ite-6) var(--ite-4);
	margin: 0;
	padding-top: var(--ite-8);
	border-top: 1px solid var(--ite-border);
}

@media (min-width: 40em) {
	.ite-hero__stats {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.ite-stat {
	display: flex;
	flex-direction: column-reverse;
	gap: 2px;
}

.ite-stat__value {
	margin: 0;
	font-size: var(--ite-text-xl);
	font-weight: 700;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
	color: var(--ite-text);
}

.ite-stat__label {
	font-size: var(--ite-text-xs);
	color: var(--ite-text-dim);
	letter-spacing: 0.01em;
}

/* ============================================================= Section heads */

.ite-section__head {
	margin-bottom: var(--ite-12);
}

.ite-section__head--row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--ite-4);
	max-width: none;
}

.ite-section__head--row > div {
	max-width: 68ch;
}

.ite-section__title {
	margin: 0 0 var(--ite-2);
	font-size: var(--ite-text-2xl);
	letter-spacing: -0.028em;
}

.ite-section__lead {
	margin: 0;
	max-width: 68ch;
	color: var(--ite-text-muted);
	line-height: var(--ite-leading-snug);
}

/* ===================================================================== Steps */

.ite-steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--ite-4);
}

@media (min-width: 54em) {
	.ite-steps {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--ite-6);
	}
}

.ite-step {
	position: relative;
	padding: var(--ite-8) var(--ite-6) var(--ite-6);
	background: var(--ite-surface);
	border: 1px solid var(--ite-border);
	border-radius: var(--ite-radius-lg);
	transition: border-color 0.25s var(--ite-ease), transform 0.25s var(--ite-ease);
}

.ite-step:hover {
	border-color: var(--ite-border-bright);
	transform: translateY(-2px);
}

.ite-step__num {
	display: block;
	margin-bottom: var(--ite-3);
	font-size: var(--ite-text-sm);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.08em;
	color: var(--ite-accent);
}

.ite-step__title {
	margin: 0 0 var(--ite-2);
	font-size: var(--ite-text-lg);
	letter-spacing: -0.015em;
}

.ite-step__text {
	margin: 0;
	font-size: var(--ite-text-sm);
	color: var(--ite-text-muted);
	line-height: var(--ite-leading-snug);
}

/* ================================================================ Tool cards */

.ite-tool-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	margin-bottom: var(--ite-2);
	border-radius: var(--ite-radius);
	background: var(--ite-accent-dim);
	border: 1px solid var(--ite-accent-border);
	color: var(--ite-accent);
	transition: transform 0.25s var(--ite-ease);
}

.ite-card:hover .ite-tool-icon {
	transform: scale(1.06) rotate(-4deg);
}

.ite-badge--inline {
	align-self: flex-start;
}

/* ===================================================================== Trust */

.ite-trust {
	display: grid;
	gap: var(--ite-8);
	padding: var(--ite-12) var(--ite-8);
	background: var(--ite-surface);
	border: 1px solid var(--ite-border);
	border-radius: var(--ite-radius-lg);
}

@media (min-width: 58em) {
	.ite-trust {
		grid-template-columns: 1.3fr 1fr;
		gap: var(--ite-16);
		padding: var(--ite-16);
	}
}

.ite-trust__content p {
	color: var(--ite-text-muted);
	max-width: 52ch;
}

.ite-trust__links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ite-2);
	margin-top: var(--ite-6);
}

.ite-trust__points {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--ite-4);
	align-content: start;
}

.ite-trust__points li {
	position: relative;
	padding-left: var(--ite-8);
	font-size: var(--ite-text-sm);
	color: var(--ite-text-muted);
	line-height: var(--ite-leading-snug);
}

.ite-trust__points strong {
	display: block;
	color: var(--ite-text);
	font-weight: 650;
	margin-bottom: 1px;
}

/* A check mark drawn in CSS rather than loaded as four more SVGs. */
.ite-trust__points li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.3em;
	width: 1.125rem;
	height: 1.125rem;
	border-radius: 50%;
	background: var(--ite-success-dim);
	border: 1px solid var(--ite-success);
}

.ite-trust__points li::after {
	content: "";
	position: absolute;
	left: 0.35rem;
	top: 0.62em;
	width: 0.375rem;
	height: 0.1875rem;
	border-left: 1.5px solid var(--ite-success);
	border-bottom: 1.5px solid var(--ite-success);
	transform: rotate(-45deg);
}