/* Home page hero links (issue #129). They reuse .c-phone-showcase__link.
   The links are centred, so the arrow's hover margin would widen the link
   and push the text left. The matching negative right margin keeps the
   width fixed: only the arrow moves, as it does in the left-aligned link
   lower down. */
.c-hero-links .c-phone-showcase__link .c-icon {
	transition: margin-left 0.2s ease, margin-right 0.2s ease;
}
.c-hero-links .c-phone-showcase__link:focus .c-icon,
.c-hero-links .c-phone-showcase__link:hover .c-icon {
	margin-left: 0.9375rem;
	margin-right: -0.9375rem;
}
/* The main link is larger than the hero text (20px on desktop). */
.c-hero-links__primary {
	font-size: 1.5rem;
}
@media (max-width: 767px) {
	.c-hero-links__primary {
		font-size: 1.25rem;
	}
}
/* A short centred line under the main link, in the header border colour.
   It is shorter than the two buttons below it together (320px on desktop).
   The link block's gap (8px) plus the top margin, and the block's bottom
   margin, each give 56px of space around the line. The utility u-mb-6
   sets 2.5rem with !important, so this rule needs both classes. */
.c-hero-links.u-mb-6 {
	margin-bottom: 3.5rem !important;
}
.c-hero-links::after {
	content: "";
	display: block;
	width: 15rem;
	max-width: 100%;
	height: 1px;
	margin-top: 3rem;
	background: #29606b;
}
/* More space below the two hero buttons, before the footer motif. The
   theme sets 1.875rem (1.5rem on phones). Only the home page loads this
   file. */
.c-hero__text-block {
	padding-bottom: 4rem;
}
@media (max-width: 768px) {
	.c-hero__text-block {
		padding-bottom: 3rem;
	}
}