/**
 * Generic landing page sections.
 *
 * Four block types shared by the nine pages in inc/page-data.php: prose,
 * cards, blocks, steps and promo. Everything here uses the tokens from
 * style.css, so there are no page specific colours to keep in step.
 *
 * Two rules that bite repeatedly in this theme and are followed throughout:
 *   1. background-image cannot be transitioned, so every gradient hover
 *      animates the opacity of a separate fill layer instead.
 *   2. box-shadow only interpolates between the same number of layers, so a
 *      card that gains shadows on hover declares zero value layers at rest.
 */

/* =============================================================
   Shared shell
   ============================================================= */

.epc-prose,
.epc-cards,
.epc-blocks,
.epc-steps,
.epc-promo {
	background: var(--epc-black);
	color: var(--epc-silver);
	border-top: 1px solid var(--epc-line-soft);
}

.epc-prose__inner,
.epc-cards__inner,
.epc-blocks__inner,
.epc-steps__inner,
.epc-promo__inner {
	width: 100%;
	max-width: var(--epc-container);
	margin-inline: auto;
	padding: 3.5rem var(--epc-gutter);
}

@media (min-width: 768px) {
	.epc-prose__inner,
	.epc-cards__inner,
	.epc-blocks__inner,
	.epc-steps__inner,
	.epc-promo__inner {
		padding-block: 5rem;
	}
}

@media (min-width: 1200px) {
	.epc-prose__inner,
	.epc-cards__inner,
	.epc-blocks__inner,
	.epc-steps__inner,
	.epc-promo__inner {
		padding-block: 6.5rem;
	}
}

/* Shared intro typography. */

.epc-prose__eyebrow,
.epc-cards__eyebrow,
.epc-blocks__eyebrow,
.epc-steps__eyebrow,
.epc-promo__eyebrow {
	margin: 0 0 0.75rem;
	font-family: var(--epc-font-sans);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--epc-grey);
}

.epc-prose__heading,
.epc-cards__heading,
.epc-blocks__heading,
.epc-steps__heading,
.epc-promo__heading {
	margin: 0;
	font-family: var(--epc-font-serif);
	font-size: clamp(1.5rem, 3.4vw, 2.125rem);
	font-weight: 400;
	line-height: 1.22;
	letter-spacing: 0.01em;
	text-wrap: balance;
}

.epc-prose__rule,
.epc-cards__rule,
.epc-blocks__rule,
.epc-steps__rule,
.epc-promo__rule {
	display: block;
	width: 56px;
	height: 1px;
	margin: 1.1rem 0 1.35rem;
	background: linear-gradient(90deg, var(--epc-white), transparent);
}

.epc-cards__intro,
.epc-blocks__intro,
.epc-steps__intro,
.epc-promo__intro {
	max-width: 44rem;
	margin: 0 auto 2.5rem;
	text-align: center;
}

.epc-cards__rule,
.epc-blocks__rule,
.epc-steps__rule,
.epc-promo__rule {
	margin-inline: auto;
	background: linear-gradient(90deg, transparent, var(--epc-white), transparent);
}

.epc-cards__text,
.epc-blocks__text,
.epc-steps__text,
.epc-promo__text {
	margin: 0;
	font-family: var(--epc-font-sans);
	font-size: 0.875rem;
	line-height: 1.8;
	color: var(--epc-grey);
	text-wrap: pretty;
}

/* =============================================================
   Prose: copy beside an image
   ============================================================= */

.epc-prose__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	align-items: center;
}

@media (min-width: 1024px) {
	.epc-prose__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 3.5rem;
	}

	/* Order, not direction, so the source stays copy first for a crawler. */
	.epc-prose.is-flipped .epc-prose__copy {
		order: 2;
	}

	.epc-prose.is-flipped .epc-prose__figure {
		order: 1;
	}
}

/* With no image the block centres instead of splitting. */
.epc-prose.is-solo .epc-prose__inner {
	display: block;
}

.epc-prose.is-solo .epc-prose__copy {
	max-width: 48rem;
	margin-inline: auto;
}

.epc-prose__text {
	margin: 0 0 1rem;
	font-family: var(--epc-font-sans);
	font-size: 0.875rem;
	line-height: 1.9;
	color: var(--epc-grey);
	text-wrap: pretty;
}

.epc-prose__text:last-child {
	margin-bottom: 0;
}

.epc-prose__list {
	display: grid;
	gap: 0.6rem;
	margin: 1.5rem 0 0;
	padding: 0;
	list-style: none;
}

.epc-prose__list li {
	display: flex;
	gap: 0.65rem;
	align-items: flex-start;
	font-family: var(--epc-font-sans);
	font-size: 0.8125rem;
	line-height: 1.7;
	color: var(--epc-silver);
}

.epc-prose__list i {
	margin-top: 0.28em;
	font-size: 0.75rem;
	color: var(--epc-white);
}

.epc-prose__figure {
	position: relative;
	margin: 0;
	overflow: hidden;
	border: 1px solid var(--epc-line);
	border-radius: 16px;
}

.epc-prose__figure img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/* Editor content on a page with no configuration entry. */

.epc-prose__copy--entry :is(h2, h3, h4) {
	font-family: var(--epc-font-serif);
	font-weight: 400;
	color: var(--epc-white);
}

.epc-prose__copy--entry p,
.epc-prose__copy--entry li {
	font-family: var(--epc-font-sans);
	font-size: 0.875rem;
	line-height: 1.9;
	color: var(--epc-grey);
}

.epc-prose__copy--entry a {
	color: var(--epc-white);
}

.epc-prose__copy--entry img {
	max-width: 100%;
	height: auto;
	border-radius: 12px;
}

/* =============================================================
   Cards: icon, title, one line of copy
   ============================================================= */

.epc-cards__grid,
.epc-blocks__grid,
.epc-promo__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 560px) {
	.epc-cards__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.epc-cards__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 1.5rem;
	}
}

.epc-card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 1.85rem 1.5rem 1.65rem;
	overflow: hidden;
	background: var(--epc-gradient-surface);
	border: 1px solid rgb(141 143 142 / 28%);
	border-radius: 16px;
	box-shadow:
		inset 0 1px 0 rgb(255 255 255 / 6%),
		0 0 0 0 rgb(0 0 0 / 0%);
	transition: transform 520ms var(--epc-ease-soft),
		border-color 520ms var(--epc-ease-soft),
		box-shadow 520ms var(--epc-ease-soft);
}

.epc-card:hover {
	transform: translateY(-5px);
	border-color: rgb(255 255 255 / 28%);
	box-shadow:
		inset 0 1px 0 rgb(255 255 255 / 6%),
		0 18px 40px rgb(0 0 0 / 50%);
}

.epc-card__accent,
.epc-block__accent,
.epc-offer__accent {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--epc-white), transparent);
	opacity: 0;
	transition: opacity 520ms var(--epc-ease-soft);
}

.epc-card:hover .epc-card__accent,
.epc-block:hover .epc-block__accent,
.epc-offer:hover .epc-offer__accent {
	opacity: 0.55;
}

.epc-card__index {
	position: absolute;
	top: 1.1rem;
	right: 1.25rem;
	font-family: var(--epc-font-serif);
	font-size: 1.75rem;
	line-height: 1;
	color: rgb(255 255 255 / 8%);
}

/* Gradient hover on a separate layer: background-image cannot transition. */
.epc-card__icon,
.epc-block__icon {
	position: relative;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	margin-bottom: 1.15rem;
	overflow: hidden;
	color: var(--epc-white);
	background: var(--epc-wash);
	border: 1px solid var(--epc-line);
	border-radius: 12px;
}

.epc-card__icon-fill,
.epc-block__icon-fill {
	position: absolute;
	inset: 0;
	background: var(--epc-gradient-title);
	opacity: 0;
	transition: opacity 520ms var(--epc-ease-soft);
}

.epc-card:hover .epc-card__icon-fill,
.epc-block:hover .epc-block__icon-fill {
	opacity: 0.16;
}

.epc-card__icon i,
.epc-block__icon i {
	position: relative;
	font-size: 1rem;
}

.epc-card__title {
	margin: 0 0 0.6rem;
	font-family: var(--epc-font-sans);
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--epc-white);
}

.epc-card__text {
	margin: 0;
	font-family: var(--epc-font-sans);
	font-size: 0.8125rem;
	line-height: 1.8;
	color: var(--epc-grey);
	text-wrap: pretty;
}

/* =============================================================
   Blocks: icon, title, copy, checked list, action
   ============================================================= */

@media (min-width: 900px) {
	.epc-blocks__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.5rem;
	}
}

.epc-block {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 1.85rem 1.5rem 1.75rem;
	overflow: hidden;
	background: var(--epc-gradient-surface);
	border: 1px solid rgb(141 143 142 / 28%);
	border-radius: 16px;
	box-shadow:
		inset 0 1px 0 rgb(255 255 255 / 6%),
		0 0 0 0 rgb(0 0 0 / 0%);
	transition: transform 520ms var(--epc-ease-soft),
		border-color 520ms var(--epc-ease-soft),
		box-shadow 520ms var(--epc-ease-soft);
}

.epc-block:hover {
	transform: translateY(-4px);
	border-color: rgb(255 255 255 / 26%);
	box-shadow:
		inset 0 1px 0 rgb(255 255 255 / 6%),
		0 18px 40px rgb(0 0 0 / 48%);
}

.epc-block__head {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	margin-bottom: 1rem;
}

.epc-block__icon {
	flex: none;
	margin-bottom: 0;
}

.epc-block__title {
	margin: 0.35rem 0 0;
	font-family: var(--epc-font-sans);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--epc-white);
}

.epc-block__sub {
	margin: 0.3rem 0 0;
	font-family: var(--epc-font-sans);
	font-size: 0.6875rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--epc-grey);
}

.epc-block__text {
	margin: 0 0 1.15rem;
	font-family: var(--epc-font-sans);
	font-size: 0.8125rem;
	line-height: 1.85;
	color: var(--epc-grey);
	text-wrap: pretty;
}

.epc-block__label {
	margin: 0 0 0.7rem;
	font-family: var(--epc-font-sans);
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--epc-silver);
}

.epc-block__list {
	display: grid;
	gap: 0.55rem;
	margin: 0 0 1.5rem;
	padding: 0;
	list-style: none;
}

.epc-block__list li {
	display: flex;
	gap: 0.65rem;
	align-items: flex-start;
	font-family: var(--epc-font-sans);
	font-size: 0.8125rem;
	line-height: 1.65;
	color: var(--epc-silver);
}

.epc-block__list i {
	margin-top: 0.26em;
	font-size: 0.75rem;
	color: var(--epc-white);
}

.epc-block__btn {
	margin-top: auto;
	align-self: flex-start;
}

/* =============================================================
   Steps: a numbered process
   ============================================================= */

.epc-steps__list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

@media (min-width: 640px) {
	.epc-steps__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.epc-steps__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 1.5rem;
	}
}

.epc-step {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
	padding: 1.85rem 1.4rem 1.6rem;
	background: var(--epc-gradient-surface);
	border: 1px solid rgb(141 143 142 / 28%);
	border-radius: 16px;
	box-shadow:
		inset 0 1px 0 rgb(255 255 255 / 6%),
		0 0 0 0 rgb(0 0 0 / 0%);
	transition: transform 520ms var(--epc-ease-soft),
		border-color 520ms var(--epc-ease-soft),
		box-shadow 520ms var(--epc-ease-soft);
}

.epc-step:hover {
	transform: translateY(-4px);
	border-color: rgb(255 255 255 / 26%);
	box-shadow:
		inset 0 1px 0 rgb(255 255 255 / 6%),
		0 16px 36px rgb(0 0 0 / 46%);
}

.epc-step__num {
	font-family: var(--epc-font-serif);
	font-size: 1.625rem;
	line-height: 1;
	color: var(--epc-white);
	opacity: 0.35;
}

.epc-step__title {
	margin: 0 0 0.5rem;
	font-family: var(--epc-font-sans);
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--epc-white);
}

.epc-step__text {
	margin: 0;
	font-family: var(--epc-font-sans);
	font-size: 0.8125rem;
	line-height: 1.8;
	color: var(--epc-grey);
	text-wrap: pretty;
}

.epc-steps__note,
.epc-promo__note {
	display: flex;
	gap: 0.65rem;
	align-items: flex-start;
	max-width: 44rem;
	margin: 1.75rem auto 0;
	padding: 0.9rem 1.1rem;
	font-family: var(--epc-font-sans);
	font-size: 0.75rem;
	line-height: 1.7;
	color: var(--epc-silver);
	background: var(--epc-wash);
	border: 1px solid var(--epc-line-soft);
	border-radius: 12px;
}

.epc-steps__note i,
.epc-promo__note i {
	margin-top: 0.2em;
	color: var(--epc-white);
}

/* =============================================================
   Promo: offers plus a rate table
   ============================================================= */

@media (min-width: 900px) {
	.epc-promo__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.5rem;
	}
}

.epc-offer {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 2.1rem 1.6rem 1.75rem;
	overflow: hidden;
	background: var(--epc-gradient-surface);
	border: 1px solid rgb(141 143 142 / 30%);
	border-radius: 18px;
	box-shadow:
		inset 0 1px 0 rgb(255 255 255 / 6%),
		0 0 0 0 rgb(0 0 0 / 0%);
	transition: transform 520ms var(--epc-ease-soft),
		border-color 520ms var(--epc-ease-soft),
		box-shadow 520ms var(--epc-ease-soft);
}

.epc-offer:hover {
	transform: translateY(-5px);
	border-color: rgb(255 255 255 / 30%);
	box-shadow:
		inset 0 1px 0 rgb(255 255 255 / 6%),
		0 20px 44px rgb(0 0 0 / 50%);
}

.epc-offer__tag {
	align-self: flex-start;
	margin-bottom: 1rem;
	padding: 0.34rem 0.8rem;
	font-family: var(--epc-font-sans);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--epc-black);
	background: var(--epc-white);
	border-radius: 999px;
}

.epc-offer__title {
	margin: 0 0 0.55rem;
	font-family: var(--epc-font-serif);
	font-size: 1.25rem;
	font-weight: 400;
	line-height: 1.3;
	color: var(--epc-white);
	text-wrap: balance;
}

.epc-offer__sub {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	margin: 0 0 1rem;
	font-family: var(--epc-font-sans);
	font-size: 0.6875rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--epc-grey);
}

.epc-offer__text {
	margin: 0 0 1.25rem;
	font-family: var(--epc-font-sans);
	font-size: 0.8125rem;
	line-height: 1.85;
	color: var(--epc-grey);
	text-wrap: pretty;
}

.epc-offer__list {
	display: grid;
	gap: 0.6rem;
	margin: 0 0 1.5rem;
	padding: 0;
	list-style: none;
}

.epc-offer__list li {
	display: flex;
	gap: 0.65rem;
	align-items: flex-start;
	font-family: var(--epc-font-sans);
	font-size: 0.8125rem;
	line-height: 1.7;
	color: var(--epc-silver);
}

.epc-offer__list i {
	margin-top: 0.24em;
	font-size: 0.6875rem;
	color: var(--epc-white);
}

.epc-offer__btn {
	margin-top: auto;
	align-self: flex-start;
}

.epc-promo__rates {
	margin-top: 2rem;
}

/* Only the table scrolls sideways, never the page. */
.epc-promo__scroll {
	overflow-x: auto;
	border: 1px solid var(--epc-line-soft);
	border-radius: 14px;
}

.epc-rates {
	width: 100%;
	min-width: 34rem;
	border-collapse: collapse;
	font-family: var(--epc-font-sans);
}

.epc-rates caption {
	padding: 0.95rem 1.1rem;
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-align: left;
	color: var(--epc-grey);
	background: rgb(0 0 0 / 45%);
}

.epc-rates th,
.epc-rates td {
	padding: 0.85rem 1.1rem;
	font-size: 0.8125rem;
	text-align: left;
	border-top: 1px solid var(--epc-line-soft);
}

.epc-rates thead th {
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--epc-grey);
}

.epc-rates tbody th {
	font-weight: 600;
	color: var(--epc-white);
}

.epc-rates tbody td {
	color: var(--epc-silver);
}

.epc-promo__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: center;
	margin-top: 2rem;
}

/* =============================================================
   Reduced motion
   ============================================================= */

@media (prefers-reduced-motion: reduce) {
	.epc-card,
	.epc-card__accent,
	.epc-card__icon-fill,
	.epc-block,
	.epc-block__accent,
	.epc-block__icon-fill,
	.epc-step,
	.epc-offer,
	.epc-offer__accent {
		transition-duration: 0.01ms !important;
	}

	.epc-card:hover,
	.epc-block:hover,
	.epc-step:hover,
	.epc-offer:hover {
		transform: none;
	}
}

/* =============================================================
   Compact landing pages (.epc-lp)

   Applied by epc_body_class() to any page carrying 'compact' in
   inc/page-data.php. The default rhythm gives every section 4rem
   to 7rem of padding at each end, so two neighbouring sections put
   up to 14rem of empty ground between their content. That reads as
   considered on an editorial page and as wasted screen on one
   bought with ad clicks, where the offers and the price list want
   to be reachable rather than admired.

   Only vertical space changes. Type, colour and the cards stay
   exactly as they are elsewhere, so the page still looks like the
   rest of the site.
   ============================================================= */

.epc-lp .epc-prose__inner,
.epc-lp .epc-cards__inner,
.epc-lp .epc-blocks__inner,
.epc-lp .epc-steps__inner,
.epc-lp .epc-promo__inner,
.epc-lp .epc-offers__inner,
.epc-lp .epc-packages__inner,
.epc-lp .epc-ratecard__inner,
.epc-lp .epc-fleet__inner,
.epc-lp .epc-why__inner,
.epc-lp .epc-faq__inner,
.epc-lp .epc-trust__inner {
	padding-block: 2.5rem;
}

.epc-lp .epc-cta__inner {
	padding-block: 0 2.5rem;
}

@media (min-width: 768px) {
	.epc-lp .epc-prose__inner,
	.epc-lp .epc-cards__inner,
	.epc-lp .epc-blocks__inner,
	.epc-lp .epc-steps__inner,
	.epc-lp .epc-promo__inner,
	.epc-lp .epc-offers__inner,
	.epc-lp .epc-packages__inner,
	.epc-lp .epc-ratecard__inner,
	.epc-lp .epc-fleet__inner,
	.epc-lp .epc-why__inner,
	.epc-lp .epc-faq__inner,
	.epc-lp .epc-trust__inner {
		padding-block: 3.25rem;
	}

	.epc-lp .epc-cta__inner {
		padding-block: 0 3.25rem;
	}
}

@media (min-width: 1200px) {
	.epc-lp .epc-prose__inner,
	.epc-lp .epc-cards__inner,
	.epc-lp .epc-blocks__inner,
	.epc-lp .epc-steps__inner,
	.epc-lp .epc-promo__inner,
	.epc-lp .epc-offers__inner,
	.epc-lp .epc-packages__inner,
	.epc-lp .epc-ratecard__inner,
	.epc-lp .epc-fleet__inner,
	.epc-lp .epc-why__inner,
	.epc-lp .epc-faq__inner,
	.epc-lp .epc-trust__inner {
		padding-block: 4rem;
	}

	.epc-lp .epc-cta__inner {
		padding-block: 0 4rem;
	}
}

/* Section intros: the gap to the cards below closes with the padding. */
.epc-lp .epc-cards__intro,
.epc-lp .epc-blocks__intro,
.epc-lp .epc-steps__intro,
.epc-lp .epc-promo__intro,
.epc-lp .epc-offers__intro,
.epc-lp .epc-packages__intro,
.epc-lp .epc-ratecard__intro,
.epc-lp .epc-why__intro,
.epc-lp .epc-faq__intro,
.epc-lp .epc-trust__intro,
.epc-lp .epc-fleet__intro {
	margin-bottom: 1.75rem;
}

.epc-lp .epc-offers__rule,
.epc-lp .epc-packages__rule,
.epc-lp .epc-ratecard__rule,
.epc-lp .epc-cards__rule,
.epc-lp .epc-blocks__rule {
	margin-block: 0.85rem 1rem;
}

/*
 * A lighter scrim than the editorial pages carry. Those heroes sit above long
 * reading passages and the image is only atmosphere; here the photograph is
 * part of the pitch, so the yacht and the skyline are allowed to show. Most of
 * the saving comes from the radial layer, which was dulling the middle of the
 * frame where the subject sits.
 *
 * The room for it is bought back on the text side rather than by darkening the
 * picture: the eyebrow goes white, the title's gradient stops short of full
 * silver and the lede gains a little opacity. Measured against the rendered
 * background with the text hidden, worst case across each text box:
 * eyebrow 13.4:1, title 5.5:1, lede 5.8:1, against WCAG AA thresholds of
 * 4.5:1, 3:1 (large) and 4.5:1. The unmodified pairing failed all three.
 */
.epc-lp .epc-phero::after {
	background:
		linear-gradient(180deg, rgb(0 0 0 / 64%) 0%, rgb(0 0 0 / 44%) 45%, rgb(0 0 0 / 82%) 100%),
		radial-gradient(ellipse at center, rgb(0 0 0 / 8%) 30%, rgb(0 0 0 / 44%) 100%);
}

.epc-lp .epc-phero__eyebrow {
	color: var(--epc-white);
}

/* Same gradient, stopped short of the palest silver. */
.epc-lp .epc-phero__title {
	--epc-gradient-title: linear-gradient(135deg, #ffffff, #c9cbca);
}

.epc-lp .epc-phero__lede {
	color: rgb(255 255 255 / 88%);
}

/*
 * The hero holds its content in a fixed minimum height, which on this page
 * left a band of empty image below the buttons. Shorter, so the first offer
 * card starts near the fold instead of a screen below it.
 */
.epc-lp .epc-phero {
	min-height: clamp(19rem, 50vh, 27rem);
	min-height: clamp(19rem, 50svh, 27rem);
}

.epc-lp .epc-phero__inner {
	padding-block: 2.25rem;
}

@media (min-width: 768px) {
	.epc-lp .epc-phero__inner {
		padding-block: 2.75rem;
	}
}

.epc-lp .epc-phero__lede {
	margin-top: 0.9rem;
}

.epc-lp .epc-phero__actions {
	margin-top: 1.35rem;
}

/* The notes under each block sit closer to what they qualify. */
.epc-lp .epc-offers__note,
.epc-lp .epc-packages__note,
.epc-lp .epc-ratecard__note,
.epc-lp .epc-steps__note,
.epc-lp .epc-promo__note {
	margin-top: 1.25rem;
}
