/* About page, on top of the product and home page sections of product.css and home.css. Classes are prefixed with ab-. */
.ab-heroImage img {
	object-position: 62% 40%;
}

/* Our story: milestones along a line, three to a row */
.ab-timeline {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 34px 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

	.ab-timeline li {
		position: relative;
		margin: 0;
		padding: 26px 4px 0 0;
		border-top: 1px solid var(--pp-surface-border);
	}

		/* A dot on the line at each milestone */
		.ab-timeline li::before {
			content: "";
			position: absolute;
			top: -6px;
			left: 0;
			width: 11px;
			height: 11px;
			border-radius: 50%;
			background: var(--pp-accent);
			box-shadow: 0 0 0 4px rgba(61, 184, 185, 0.18);
		}

	.ab-timeline h3 {
		margin: 0 0 8px;
		font-size: 18px;
		font-weight: var(--font-weight-bold);
		color: var(--pp-title);
	}

	.ab-timeline p {
		margin: 0;
		font-size: 14.5px;
		line-height: 1.55;
		color: var(--pp-muted);
	}

.ab-year {
	display: block;
	margin-bottom: 6px;
	font-size: 30px;
	font-weight: var(--font-weight-light);
	letter-spacing: -0.5px;
	color: var(--pp-accent);
}

/* The product pages' feature cards hold lists, these hold a single sentence */
.ab .pp-card p {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--pp-muted);
}

@media screen and (max-width: 1024px) {
	.ab-timeline {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* 767.98px rather than 767px: with display scaling a window can be 767.5px wide, which neither these mobile rules nor the min-width: 768px desktop ones would match */
@media screen and (max-width: 767.98px) {
	/* One milestone under another, along a line down the left */
	.ab-timeline {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

		.ab-timeline li {
			padding: 0 0 26px 26px;
			border-top: 0;
			border-left: 1px solid var(--pp-surface-border);
		}

			.ab-timeline li::before {
				top: 4px;
				left: -6px;
			}

	.ab-year {
		font-size: 24px;
	}
}