/* 2026 additions to the original design: store badges row and phone-size fixes. Loaded after responsive.css. */

/* Install lines above the store badges: smaller than the hero lead */
#tf-home .install-steps {
	color: #e3e3e3;
	font-size: 15px;
	line-height: 1.6;
	margin: 18px 0 8px;
}

#tf-home .install-steps span {
	display: block;
}

#tf-home .install-steps strong {
	color: #fff;
}

/* Store badges: one centred row, same height */
#tf-home .store-badges {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin: 6px 0 22px;
}

#tf-home .store-badges img {
	height: 48px;
	width: auto;
	display: block;
}

@media (max-width: 767px) {
	/* Hero: clear of the navbar, a size that fits a phone */
	#tf-home .content {
		padding: 96px 0 0;
	}

	#tf-home h1 {
		font-size: 30px;
		line-height: 1.2;
		margin: 6px 0 14px;
	}

	#tf-home p.lead {
		font-size: 17px;
		margin-bottom: 12px;
	}

	#tf-home .store-badges img {
		height: 44px;
	}

	#tf-home .install-steps {
		font-size: 14px;
	}

	/* Get started: no hover on a phone, so show the step pictures fully and large */
	ul.how-it-works-list li.hover-item img {
		opacity: 1;
		transform: none;
		height: auto;
		width: 75%;
		max-width: 280px;
		display: block;
		margin: 12px auto 4px;
	}

	/* Features: two per row instead of one long column */
	#tf-features .row {
		display: flex;
		flex-wrap: wrap;
	}

	#tf-features .row > .space {
		display: none;
	}

	#tf-features .service {
		width: 50%;
		padding: 0 8px 18px;
	}

	#tf-features .service h4 {
		font-size: 14px;
	}

	#tf-features .service p {
		font-size: 13px;
	}

	/* Section titles a bit smaller */
	.section-title h2 {
		font-size: 26px;
		line-height: 1.3;
	}
}