.bba-home {
	--bba-home-gutter: 24px;
	--bba-home-inset: clamp(18px, 2.4vw, 28px);
	--bba-home-width: 1192px;
}

.bba-home .entry-content {
	gap: clamp(16px, 2.2vw, 28px);
	padding-bottom: clamp(32px, 6vw, 64px);
}

.bba-home .entry-content > :not(.bba-home-hero),
.bba-home :is(.bba-home-hero, .bba-page-hero) .bba-container {
	width: calc(100% - var(--bba-home-gutter) - var(--bba-home-gutter));
	max-width: var(--bba-home-width);
	margin-inline: auto;
}

.bba-home .entry-content > :first-child:not(.bba-home-hero) {
	margin-top: 20px;
}

.bba-home .bba-home-hero {
	padding-block: clamp(26px, 3.5vw, 44px);
	color: #fff;
}

/* GeneratePress adds this wrapper. Give it the full grid track before sizing the inner container. */
.bba-home .bba-home-hero > .wp-block-group__inner-container {
	width: 100%;
	max-width: none;
	margin-inline: 0;
}

.bba-home :is(.bba-home-hero, .bba-page-hero) .bba-container {
	padding-inline: var(--bba-home-inset);
}

.bba-home .bba-home-hero .bba-container {
	/* Match the content inset of the cards, including their 1px border. */
	padding-inline: calc(var(--bba-home-inset) + 1px);
}

.bba-home .bba-page-hero {
	padding-block: clamp(24px, 4vw, 44px);
}

.bba-home .bba-hero__title {
	max-width: none;
	margin: 0 0 12px;
	color: #fff;
	font-size: clamp(28px, 3.6vw, 46px);
	line-height: 1.14;
	text-wrap: balance;
}

.bba-home .bba-page-hero .bba-hero__title {
	margin: 0;
}

.bba-home .bba-home-hero-copy {
	margin: 0 0 18px;
	color: #e6eff8;
	font-size: clamp(16px, 1.6vw, 18px);
	line-height: 1.55;
}

.bba-home .bba-home-hero .wp-block-buttons {
	margin-block: 0;
}

.bba-home .bba-home-cta .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 10px 20px;
	border-radius: 8px;
	background: var(--bba-orange);
	color: var(--bba-navy);
	font-weight: 700;
	line-height: 1.35;
	text-decoration: none;
}

.bba-home .bba-home-cta .wp-block-button__link:hover,
.bba-home .bba-home-cta .wp-block-button__link:focus-visible {
	background: var(--bba-orange-hover);
	color: var(--bba-navy);
}

.bba-home .bba-home-hero ul[aria-label="Comparison features"] li {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	padding: 6px 10px;
	border: 1px solid rgba(217, 235, 250, .3);
	border-radius: 7px;
	background: rgba(217, 235, 250, .09);
	color: #f0f7ff;
	font-size: 14px;
	line-height: 1.35;
}

.bba-home .bba-home-hero ul[aria-label="Comparison features"] li::before {
	flex: 0 0 10px;
	width: 10px;
	height: 6px;
	border-left: 2px solid #a8d7f4;
	border-bottom: 2px solid #a8d7f4;
	content: "";
	transform: translateY(-1px) rotate(-45deg);
}

.bba-home .bba-card {
	padding: var(--bba-home-inset);
}

.bba-home :is(.bba-card, .bba-card > .wp-block-group__inner-container) > :is(h2, p, .bba-home-links, .bba-picks, .wp-block-list) {
	margin: 0;
}

.bba-home :is(.bba-card, .bba-card > .wp-block-group__inner-container) > * + :is(h2, p, .bba-home-links, .bba-picks, .wp-block-list) {
	margin-block-start: 12px;
}

.bba-home .bba-card .bba-home-links {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
	gap: 10px;
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}

.bba-home .bba-card .bba-home-topics,
.bba-home .bba-picks {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.bba-home .bba-home-links li {
	min-width: 0;
	margin: 0;
}

.bba-home .bba-home-links a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	min-height: 44px;
	height: 100%;
	padding: 8px 12px;
	border: 1px solid var(--bba-line);
	border-radius: 8px;
	background: var(--bba-tint);
	color: var(--bba-navy);
	font-weight: 600;
	line-height: 1.35;
	text-decoration: none;
}

.bba-home .bba-home-links a::after {
	flex: 0 0 7px;
	width: 7px;
	height: 7px;
	border-top: 2px solid var(--bba-link);
	border-right: 2px solid var(--bba-link);
	content: "";
	transform: rotate(45deg);
}

.bba-home .bba-home-links a:hover,
.bba-home .bba-home-links a:focus-visible {
	border-color: var(--bba-link);
	text-decoration: underline;
}

/* GeneratePress can add a wrapper between a Group block and its cards. */
.bba-home .bba-picks > .wp-block-group__inner-container {
	display: contents;
}

.bba-home .bba-picks .bba-pick {
	display: flex;
	flex-direction: column;
	min-width: 0;
	margin: 0;
	padding: clamp(16px, 2vw, 24px);
	background: var(--bba-tint);
}

.bba-home .bba-pick > .wp-block-group__inner-container {
	display: flex;
	flex: 1;
	flex-direction: column;
}

.bba-home :is(.bba-pick, .bba-pick > .wp-block-group__inner-container) > :is(h3, p) {
	margin: 0;
}

.bba-home :is(.bba-pick, .bba-pick > .wp-block-group__inner-container) > h3 + p {
	margin-top: 8px;
}

.bba-home :is(.bba-pick, .bba-pick > .wp-block-group__inner-container) > p:last-child {
	margin-top: auto;
	padding-top: 14px;
	font-weight: 600;
}

.bba-home .bba-faq details {
	margin: 10px 0 0;
	padding: 0;
	border: 1px solid var(--bba-line);
	border-radius: 8px;
}

.bba-home .bba-faq summary {
	padding: 12px 14px;
	color: var(--bba-navy);
}

.bba-home .bba-faq details[open] summary {
	border-bottom: 1px solid var(--bba-line);
	background: var(--bba-tint);
	border-radius: 7px 7px 0 0;
}

.bba-home .bba-faq details > :not(summary) {
	margin: 12px 14px;
}

.bba-home .bba-card:has(> .bba-pick__label:first-child, > .wp-block-group__inner-container > .bba-pick__label:first-child) {
	background: var(--bba-navy);
	color: #e6eff8;
}

.bba-home .bba-card:has(> .bba-pick__label:first-child, > .wp-block-group__inner-container > .bba-pick__label:first-child) h2 {
	color: #fff;
}

.bba-home :is(.bba-card, .bba-card > .wp-block-group__inner-container) > .bba-pick__label:first-child {
	color: #b8dffc;
}

@media (min-width: 1024px) {
	.bba-home .bba-home-hero {
		/* Keep the shared fibre trails at the reference deals hero's height. */
		--bba-home-hero-art-height: 348px;
		display: grid;
		align-content: center;
		min-block-size: var(--bba-home-hero-art-height);
		background-size: 100% 100%, max(640px, 72%) var(--bba-home-hero-art-height);
	}
}

@media (max-width: 900px) {
	.bba-home .bba-card .bba-home-topics,
	.bba-home .bba-picks {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.bba-home {
		--bba-home-gutter: 12px;
	}

	.bba-home .bba-card .bba-home-links {
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 116px), 1fr));
	}

	.bba-home .bba-card .bba-home-topics,
	.bba-home .bba-picks {
		grid-template-columns: minmax(0, 1fr);
	}
}