/**
 * pages.css — static page templates.
 *
 * Scope: page.php + page-templates/{compare,contact,faq,landing,legal,article}
 * and the reusable landing sections the potensic-core plugin renders
 * (.ls-* classes). Everything shared — buttons, inputs, cards, .rte, .section,
 * .disclosure, .container — lives in tokens/base/components/utilities.css and is
 * not repeated here.
 *
 * Measurements come from docs/spec/06-pages-support.md §1–§3 and
 * docs/spec/07-pages-marketing.md §2–§3 (1440px computed values).
 */

/* ==========================================================================
   Template A — narrow article page (warranty, policies, registration, …)
   ========================================================================== */

.article-content {
	--element-margin-bottom: 2em;
	--heading-margin-bottom: 1.5em;
}

.page__title {
	margin-bottom: .5em;
}

.article-content > *:last-child {
	margin-bottom: 0;
}

.article-content p,
.article-content ol,
.article-content ul,
.article-content blockquote,
.article-content img,
.article-content table,
.article-content .scrollable-table {
	margin-bottom: var(--element-margin-bottom, 2em);
}

.article-content h1,
.article-content h2,
.article-content h3,
.article-content h4,
.article-content h5,
.article-content h6 {
	margin-top: var(--heading-margin-bottom, 1.5em);
}

/* .rte's .2em rules win on non-first headings — mirror the source cascade. */
.article-content .rte h1:not(:first-child),
.article-content h1:not(:first-child),
.article-content h2:not(:first-child),
.article-content h3:not(:first-child),
.article-content h4:not(:first-child),
.article-content h5:not(:first-child),
.article-content h6:not(:first-child) {
	margin-top: .2em;
}

.article-content > h1:first-child,
.article-content > h2:first-child,
.article-content > h3:first-child,
.article-content > h4:first-child,
.article-content > h5:first-child,
.article-content > h6:first-child {
	margin-top: 0;
}

.article-content img {
	height: auto;
}

@media (max-width: 1023.98px) {
	.article-content,
	.article-width {
		max-width: 37em;
	}
}

/* ==========================================================================
   Image banner (FAQ / troubleshooting hero)
   ========================================================================== */

.cc-image-banner .image-banner {
	position: relative;
	min-height: 400px;
	overflow: hidden;
}

@media (min-width: 600px) {
	.cc-image-banner .image-banner {
		min-height: calc(400px + (560 - 400) * ((100vw - 600px) / 936));
	}
}

@media (min-width: 769px) {
	.cc-image-banner .image-banner {
		min-height: 560px;
	}
}

.cc-image-banner .image-banner__image {
	z-index: 0;
}

.cc-image-banner .media--has-overlay:after {
	background-color: rgb(0 0 0 / var(--image-banner-overlay, .1));
}

/* .text-overlay lives in components.css (shared by home + page sections). */

/* ==========================================================================
   FAQ accordion page
   ========================================================================== */

.faq__group-title {
	font-weight: 700;
	line-height: 1.5;
}

.page-faq .disclosure__title > .icon--question_mark {
	width: 1.2em;
	height: 1.2em;
}

.cc-faq .disclosure__content > *:last-child {
	margin-bottom: 0;
}

/* The gradient contact panel sits inside the outer container. */
.cc-contact-form .section--padded {
	margin-top: 0;
	margin-bottom: 0;
}

.form-status {
	margin-bottom: calc(6 * var(--space-unit));
	padding: 12px 20px;
	border-radius: 12px;
	font-size: .95em;
}

.form-status--success {
	background-color: rgb(var(--success-bg-color, 232 246 234));
	color: rgb(var(--success-text-color, 44 126 63));
}

.form-status--error {
	background-color: rgb(var(--error-bg-color, 252 237 238));
	color: rgb(var(--error-text-color, 180 12 28));
}

.form__field.has-error .input {
	border-color: rgb(var(--error-text-color, 180 12 28));
	box-shadow: 0 0 0 1px rgb(var(--error-text-color, 180 12 28));
}

/* Honeypot: off-screen but still focusable-free for real users. */
.potensic-hp {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ==========================================================================
   Comparison grid (compare-drone-models)
   ========================================================================== */

.product-comparison-slider {
	padding-bottom: 0;
	background-clip: content-box;
}

.product-comparison-container {
	transition: max-height .6s;
}

.product-comparison-grid {
	/* `mt-2` on the table markup; the desktop media query restores `lg:mt-0`. */
	margin: calc(2 * var(--space-unit)) 0 0;
	border-spacing: 0;
	border-collapse: collapse;
}

/* The original ends the grid on a 20px band of page background instead of a
   hairline, so the last visible row has no rule under it and the table keeps
   ~20px of breathing room before the "Show N more rows" button. With collapsed
   borders half of it sits inside the last row, half below the table. */
.product-comparison-slider:not(.color-scheme) .product-comparison-grid {
	border-bottom: 20px solid rgb(var(--bg-color-og, 255 255 255));
}

.product-comparison-grid td,
.product-comparison-grid th {
	padding: 16px 20px 16px 0;
	border: 1px solid rgb(var(--text-color) / .15);
	border-inline: 0;
	vertical-align: top;
	text-align: start;
}

.product-comparison-grid tbody tr:last-child td,
.product-comparison-grid tbody tr:last-child th {
	border-bottom: 0;
}

.product-comparison-grid thead th {
	/* Below 1024 the header cells keep the base `1em` cell padding; only the
	   tbody `td` rule zeroes padding-top. */
	padding-top: 1em;
	padding-bottom: 20px;
	border: 0;
}

.product-comparison-grid thead th .media {
	background-color: rgb(241 244 249);
}

.product-comparison-grid .price {
	font-size: 1em;
}

.product-comparison-grid .price--on-sale .price__current {
	color: inherit;
}

.product-comparison-grid .price__current {
	font-size: 1em;
	font-weight: 400;
}

.product-comparison-grid--wide {
	min-width: 768px;
}

.product-comparison-grid__th--left {
	display: none;
}

/* Scoped with the table class so it outranks the cell border rule above. */
.product-comparison-grid th.product-comparison-grid__th--top {
	padding-bottom: .25em;
	border-bottom: 0;
	font-weight: 700;
}

.product-comparison-grid tbody .product-comparison-grid__th--left:after,
.product-comparison-grid__th--top:not(:has(> .product-comparison-grid__sticky)):after,
.product-comparison-grid__sticky:after {
	content: ":";
}

/* The group label stays put while the table is scrolled sideways — the original
   pins the label span, not the whole column. */
.product-comparison-grid__sticky {
	position: sticky;
	left: 20px;
}

.is-transitioning .product-comparison-grid__sticky {
	left: 0;
}

.product-comparison-grid .js-hidden {
	display: none;
}

.product-comparison-grid .align-bottom {
	line-height: 1.5;
}

@media (max-width: 1023.98px) {
	.product-comparison-grid td {
		padding-top: 0;
		border-top: 0;
	}

	/* Horizontal scroller with a sticky first data column on touch widths. The
	   thin scrollbar itself comes from `.slider`; the original only recolours it
	   with the text colour. */
	.product-comparison-slider {
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		--scrollbar-color: var(--text-color-og, 0 0 0);
	}

	.product-comparison-grid[data-num-products="3"] { min-width: 560px; }
	.product-comparison-grid[data-num-products="4"] { min-width: 750px; }
	.product-comparison-grid[data-num-products="5"] { min-width: 930px; }

	/* The label column is hidden below 1024 (its text moves into the full-width
	   `th--top` rows). The original scrolls every product column together — only
	   the group label is pinned (see `__sticky` above) — so no column here gets
	   `position: sticky`, and no divider shadow is painted between them. */
	.product-comparison-grid thead th:nth-child(2) {
		padding-inline-end: 20px;
	}
}

@media (max-width: 768.98px) {
	/* Room under the table for the horizontal scroll handle. */
	.product-comparison-slider {
		padding-bottom: calc(2 * var(--space-unit));
	}
}

@media (max-width: 599.98px) {
	.product-comparison-grid[data-num-products="3"] { min-width: 490px; }
	.product-comparison-grid[data-num-products="4"] { min-width: 655px; }
	.product-comparison-grid[data-num-products="5"] { min-width: 820px; }
}

@media (min-width: 1024px) {
	/* `lg:mt-0` */
	.product-comparison-grid {
		margin-top: 0;
	}

	.product-comparison-container {
		max-width: none;
		padding: 0;
	}

	.product-comparison-grid--hover tr {
		transition: background-color .3s;
	}

	.product-comparison-grid--hover tbody tr:hover {
		background-color: #a0a0a01a;
	}

	.product-comparison-grid td,
	.product-comparison-grid th {
		padding-inline-end: 32px;
	}

	.product-comparison-grid thead th {
		padding-top: 32px;
		padding-bottom: 32px;
	}

	th.product-comparison-grid__th--left {
		display: table-cell;
		padding-inline-start: 32px;
	}
}

.product-comparison-text {
	max-width: 560px;
}

/* ==========================================================================
   Landing sections (plugin-rendered .ls-*)
   ========================================================================== */

.ls {
	background: var(--ls-bg, transparent);
}

.ls__inner {
	width: 100%;
	max-width: calc(var(--ls-width, 1170px) + 30px);
	margin: 0 auto;
	padding: 0 15px;
}

.ls__inner--narrow {
	max-width: 1030px;
}

.ls__inner--wide {
	max-width: 1463px;
}

.ls__inner--pf {
	max-width: 1170px;
}

.ls-block__title {
	margin: 0;
	font-size: clamp(28px, 3.6vw, var(--ls-title-size, 40px));
	font-weight: 600;
	line-height: 1.5;
	text-align: center;
}

.ls-block__subtitle {
	margin: 16px 0 0;
	font-size: 16px;
	line-height: 1.4;
	text-align: center;
}

/* --- LS-04 heading band -------------------------------------------------- */

.ls-heading-band {
	padding: 20px 0 40px;
	text-align: center;
}

.ls-heading-band__title {
	margin: 30px 0 17.5px;
	font-size: var(--ls-heading-size, 35px);
	font-weight: var(--ls-heading-weight, 700);
	line-height: 1.3;
	text-align: center;
}

.ls-heading-band__text {
	margin: 0 var(--ls-inset, 100px);
	font-size: 18px;
	line-height: 30px;
	text-align: center;
}

.ls-heading-band__text p {
	margin-bottom: 18px;
}

.ls-heading-band__text p:last-child {
	margin-bottom: 0;
}

/* Tablet only: the source shrinks the title but keeps it at 35px on phones. */
@media (min-width: 768px) and (max-width: 1024px) {
	.ls-heading-band__title {
		font-size: 25px;
	}
}

@media (max-width: 1024px) {
	.ls-heading-band__text {
		margin: 0;
		font-size: 15px;
		line-height: 1.7;
	}
}

@media (max-width: 767px) {
	.ls-heading-band {
		padding: 20px 0 30px;
	}

	.ls-heading-band__text {
		font-size: 12px;
		line-height: 1.8;
	}
}

/* --- LS-15 image + overlapping card -------------------------------------- */

.ls-overlap-group {
	padding: 85px 0;
}

.ls-overlap {
	display: flex;
	align-items: center;
}

.ls-overlap + .ls-overlap {
	margin-top: 90px;
}

.ls-overlap--reverse {
	flex-direction: row-reverse;
}

.ls-overlap__media {
	flex: 0 0 58.333%;
	max-width: 58.333%;
	height: 486px;
	overflow: hidden;
	border-radius: 8px;
}

.ls-overlap--reverse .ls-overlap__media {
	border-radius: 0 8px 8px 0;
}

.ls-overlap__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ls-overlap__card {
	position: relative;
	z-index: 2;
	flex: 0 0 calc(41.666% + 120px);
	max-width: calc(41.666% + 120px);
	margin-inline-start: -120px;
	padding: 60px;
	background-color: #fff;
}

.ls-overlap--reverse .ls-overlap__card {
	margin-inline-start: 0;
	margin-inline-end: -120px;
}

.ls-overlap__title {
	margin: 0;
	font-size: 35px;
	font-weight: 700;
	line-height: 1;
}

.ls-overlap__rule {
	display: block;
	width: 187px;
	height: 2px;
	margin: 16px 0 26px;
	background-color: #4a90e2;
}

.ls-overlap__text {
	color: #888;
	font-size: 18px;
	line-height: 1.5;
}

.ls-overlap__text p:last-child {
	margin-bottom: 0;
}

@media (max-width: 1024px) {
	.ls-overlap__media {
		height: auto;
	}

	.ls-overlap__card {
		flex: 0 0 calc(41.666% + 80px);
		max-width: calc(41.666% + 80px);
		padding: 40px;
		margin-inline-start: -80px;
	}

	.ls-overlap--reverse .ls-overlap__card {
		margin-inline-end: -80px;
	}
}

@media (max-width: 767px) {
	.ls-overlap-group {
		padding: 30px 0;
	}

	.ls-overlap,
	.ls-overlap--reverse {
		display: block;
	}

	.ls-overlap + .ls-overlap {
		margin-top: 20px;
	}

	.ls-overlap__media,
	.ls-overlap--reverse .ls-overlap__media {
		max-width: none;
		height: auto;
		margin: 0 5px;
		border-radius: 8px;
	}

	.ls-overlap__card,
	.ls-overlap--reverse .ls-overlap__card {
		max-width: none;
		margin: -50px 20px 0;
		padding: 20px;
	}

	.ls-overlap__title {
		font-size: 32px;
	}

	.ls-overlap__rule {
		width: 120px;
	}

	.ls-overlap__text {
		font-size: 16px;
	}
}

/* --- LS-16 stats --------------------------------------------------------- */

.ls-stats {
	position: relative;
	padding: 40px 0;
	background-color: #141414;
	background-image: var(--ls-stats-image, none);
	background-position: center;
	background-size: cover;
	color: var(--ls-stats-color, #fff);
	text-align: center;
}

/* The world map is a busy photo; a scrim keeps the copy at AA contrast. */
.ls-stats:before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: rgb(0 0 0 / .45);
	pointer-events: none;
}

.ls-stats .ls__inner {
	position: relative;
	z-index: 1;
}

.ls-stats__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0 30px;
}

.ls-stats__value {
	margin: 0 0 20px;
	color: var(--ls-stats-color, #fff);
	font-size: 40px;
	font-weight: 700;
	line-height: 1.3;
}

.ls-stats__text {
	margin: 0 0 16px;
	color: var(--ls-stats-color, #fff);
	font-size: 16px;
	line-height: 1.5;
}

@media (max-width: 1024px) {
	.ls-stats__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px 30px;
	}
}

@media (max-width: 767px) {
	.ls-stats__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.ls-stats__value {
		font-size: 32px;
	}
}

/* --- LS-17 testimonial slider -------------------------------------------- */

.ls-quotes {
	padding: 50px 0 20px;
	background-color: #f0f0f0;
}

.ls-quotes__title {
	margin: 0 0 30px;
	color: #333;
	font-size: 32px;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
}

.ls-quotes__viewport {
	overflow: hidden;
}

.ls-quotes__track {
	display: flex;
	transition: transform .45s cubic-bezier(.2, .6, .4, 1);
}

.ls-quotes__slide {
	flex: 0 0 100%;
	min-width: 100%;
}

.ls-quotes__card {
	max-width: 910px;
	margin: 0 auto 90px;
	padding: 70px 70px 0;
	background-color: #fff;
	text-align: center;
}

.ls-quotes__stars {
	color: #34a99b;
	font-size: 20px;
	letter-spacing: 6px;
	line-height: 1;
}

.ls-quotes__quote {
	margin: 30px 0 20px;
	color: #666;
	font-size: 16px;
	font-style: normal;
	line-height: 1.5;
}

.ls-quotes__source {
	margin: 0 0 40px;
	color: #333;
	font-size: 16px;
	font-weight: 700;
}

.ls-quotes__logo {
	display: inline-block;
	margin-bottom: -80px;
}

.ls-quotes__logo img {
	display: block;
	width: auto;
	height: 58px;
}

.ls-quotes__dots {
	display: flex;
	justify-content: center;
	gap: 10px;
	padding-top: 24px;
}

.ls-quotes__dot {
	width: 20px;
	height: 5px;
	padding: 0;
	border: 0;
	background: rgb(0 0 0 / .4);
	cursor: pointer;
}

.ls-quotes__dot.is-active {
	background: #000;
}

@media (max-width: 1024px) {
	.ls-quotes__card {
		max-width: none;
		margin: 0 50px 90px;
	}
}

@media (max-width: 767px) {
	.ls-quotes {
		padding: 40px 0 20px;
	}

	.ls-quotes__title {
		font-size: 24px;
	}

	.ls-quotes__card {
		margin: 0 0 80px;
		padding: 30px 30px 0;
	}

	.ls-quotes__logo img {
		height: 44px;
	}
}

/* --- LS-02 hero ---------------------------------------------------------- */

.ls-hero {
	position: relative;
	background-color: #2a2b2a;
	background-image: var(--ls-hero-image, none);
	background-position: center;
	background-size: cover;
}

.ls-hero:after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: rgb(0 0 0 / var(--ls-hero-overlay, .38));
	pointer-events: none;
}

.ls-hero__body {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	min-height: var(--ls-hero-height, 480px);
	padding: 40px 0;
}

.ls-hero--center .ls-hero__content {
	text-align: center;
}

.ls-hero__title {
	margin: 0;
	color: #fff;
	font-size: var(--ls-hero-title-size, clamp(30px, 3.4vw, 40px));
	font-weight: 700;
	line-height: 1.3;
}

.ls-hero__text {
	margin-top: 16px;
	color: #fff;
	font-size: 20px;
	line-height: 1.5;
}

.ls-hero__text p:last-child {
	margin-bottom: 0;
}

.ls-hero__buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 24px;
	margin-top: 36px;
}

.ls-hero__btn {
	min-width: 220px;
	padding: 10px;
	border-radius: 12px;
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
	text-align: center;
	transition: opacity .3s;
}

.ls-hero__btn:hover {
	opacity: .85;
}

.ls-hero__btn--primary {
	background: #00adef;
	color: #fff;
}

.ls-hero__btn--light {
	background: #fff;
	color: #000;
}

.ls-hero--loyalty .ls-hero__text {
	font-size: 16px;
}

@media (max-width: 768.98px) {
	.ls-hero {
		background-image: var(--ls-hero-image-mobile, var(--ls-hero-image, none));
	}

	.ls-hero__text {
		font-size: 16px;
	}

	.ls-hero__buttons {
		gap: 12px;
	}

	.ls-hero__btn {
		min-width: 160px;
	}
}

/* --- contact-us "Point of Contact" --------------------------------------- */

.ls-contact {
	padding: 20px 0 15px;
	margin-bottom: 100px;
}

.ls-contact__title {
	/* 15px PageFly column padding + 16px heading margin. */
	margin: 31px 0 16px;
	font-size: 29px;
	font-weight: 700;
	line-height: 1.3;
}

.ls-contact__lead {
	margin: 46px 0 0;
	font-size: 16px;
	line-height: 1.5;
}

.ls-contact__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 30px;
	/* 15px column padding x3 = 45px between the lead copy and the icons. */
	margin-top: 45px;
	text-align: center;
}

.ls-contact__icon svg {
	display: block;
	width: 90px;
	height: 90px;
	margin: 0 auto;
}

.ls-contact__card-title {
	/* The original icon sits flush against its heading (no gap). */
	margin: 0 0 .5em;
	font-size: var(--h3-font-size);
	font-weight: 700;
	line-height: 1.3;
}

.ls-contact__email {
	margin: 0 0 16px;
	font-size: 16px;
}

.ls-contact__email a {
	color: #00a8e1;
	text-decoration: none;
}

.ls-contact__email a:hover {
	text-decoration: underline;
}

.ls-contact__footer {
	margin-top: 25px;
}

.ls-contact__hours {
	margin: 10px 0;
	font-size: 16px;
}

.ls-contact__legal {
	margin: 40px 0 29px;
	color: #787878;
	font-size: 14px;
	line-height: 1.5;
}

@media (max-width: 767.49px) {
	.ls-contact {
		margin-bottom: 48px;
	}

	/* PageFly swaps the body copy to Poppins below 767.5px. */
	.ls-contact__lead,
	.ls-contact__grid,
	.ls-contact__hours {
		font-family: "Poppins", "Open Sans", sans-serif;
	}

	.ls-contact__lead {
		padding-top: 20px;
	}

	.ls-contact__grid {
		grid-template-columns: minmax(0, 1fr);
		/* 15px column padding either side of the stacked cards. */
		gap: 30px;
	}
}

/* --- contact-us typography ------------------------------------------------
 * PageFly injects Poppins 400/700 on this page only (spec 06 §1.2, §3.2); the
 * rest of the site stays on Open Sans. Latin subsets are self-hosted so the
 * page has no third-party font request.
 * ------------------------------------------------------------------------- */

@font-face {
	font-family: "Poppins";
	src: url("../fonts/poppins_n4.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Poppins";
	src: url("../fonts/poppins_n7.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

.ls-hero--contact .ls-hero__title,
.ls-hero--contact .ls-hero__text,
.ls-contact__title,
.ls-contact__card-title {
	font-family: "Poppins", "Open Sans", sans-serif;
}

/* --- contact-us hero (PageFly section 1) --------------------------------- */

/*
 * The original is padding-driven, not centred: 250px section padding + 15px
 * column padding puts the heading 265px below the top of the hero, and the
 * sub-heading follows 10px later (row margin-top -40px + inner margin-top
 * 20px). Height therefore lands on 640.7px at >=1024.5, 540.7px between
 * 767.5 and 1024.5 and 434.7px below that.
 */
.ls-hero--contact .ls-hero__body {
	align-items: flex-start;
	padding: 265px 0 0;
}

.ls-hero--contact .ls-hero__text {
	margin-top: 10px;
}

/* The original serves a 404 image between 767.5 and 1199.5px; use the real
   desktop photo there instead (spec 06 §3.2 ⚠). */
@media (min-width: 767.5px) and (max-width: 768.98px) {
	.ls-hero--contact {
		background-image: var(--ls-hero-image, none);
	}

	/* The 16px sub-heading only kicks in below 767.5px in the original. */
	.ls-hero--contact .ls-hero__text {
		font-size: 20px;
	}
}

/* min-height is overridden directly: --ls-hero-height is an inline custom
   property on the section and would win over a stylesheet redefinition. */
@media (min-width: 767.5px) and (max-width: 1024.49px) {
	.ls-hero--contact .ls-hero__body {
		min-height: 541px;
		padding-top: 215px;
	}
}

@media (max-width: 767.49px) {
	.ls-hero--contact .ls-hero__body {
		min-height: 435px;
		padding-top: 165px;
	}
}

/* --- LS-11/19 icon columns (loyalty "How it Works") ---------------------- */

.ls-icon-cols {
	padding: 65px 24px;
	text-align: center;
}

.ls-icon-cols__grid {
	display: grid;
	grid-template-columns: repeat(var(--ls-cols, 3), minmax(0, 288px));
	justify-content: center;
	gap: 28px;
	margin-top: 32px;
}

.ls-icon-cols__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 15px;
	border-radius: 8px;
}

.ls-icon-cols__icon {
	color: #00adef;
}

.ls-icon-cols__icon svg {
	width: 48px;
	height: 48px;
}

.ls-icon-cols__heading {
	margin: 24px 0 7px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: .02em;
}

.ls-icon-cols__text {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
}

@media (max-width: 767px) {
	.ls-icon-cols {
		padding: 44px 16px;
	}

	.ls-icon-cols__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}
}

/* --- LS-21 reward tiles -------------------------------------------------- */

.ls-rewards {
	padding: 65px 24px;
}

.ls-rewards__summary {
	max-width: 640px;
	margin: 30px auto 0;
	padding: 18px 40px;
	color: #303030;
	font-size: 16px;
	text-align: center;
}

.ls-rewards__grid {
	display: grid;
	grid-template-columns: repeat(var(--ls-cols, 4), minmax(0, 1fr));
	gap: 20px;
	margin-top: 40px;
}

.ls-rewards__item {
	display: flex;
	flex-direction: column;
	align-items: var(--ls-tile-align, start);
	padding: 16px;
	border-radius: 12px;
	background: var(--ls-tile-bg, #fff);
	color: inherit;
	text-align: var(--ls-tile-align, start);
	text-decoration: none;
	transition: transform .25s, box-shadow .25s;
}

a.ls-rewards__item:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 20px rgb(0 0 0 / .08);
}

.ls-rewards__icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin-bottom: 20px;
	color: #111;
}

.ls-rewards__icon:before {
	content: "";
	position: absolute;
	right: 6px;
	bottom: 8px;
	width: 26px;
	height: 26px;
	border-radius: 6px;
	background: #a6e1f8;
}

.ls-rewards__icon svg {
	position: relative;
	z-index: 1;
	width: 34px;
	height: 34px;
	stroke-width: 1.4;
}

.ls-rewards__name {
	font-size: 16px;
	font-weight: 700;
	line-height: 24px;
}

.ls-rewards__meta {
	margin-top: 6px;
	color: #4a4a4a;
	font-size: 14px;
	line-height: 20px;
}

.ls-rewards--redeem .ls-rewards__icon {
	margin-bottom: 12px;
}

@media (max-width: 1023.98px) {
	.ls-rewards__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 599.98px) {
	.ls-rewards {
		padding: 44px 16px;
	}

	.ls-rewards__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* --- LS-18e FAQ (card style, loyalty page) ------------------------------- */

.ls-faq {
	padding: 65px 24px;
}

.ls-faq--rows {
	padding: 0;
}

.ls-faq--cards .ls__inner {
	max-width: 960px;
}

.ls-faq--cards details-disclosure {
	display: block;
	margin-top: 12px;
}

.ls-faq--cards .disclosure--row {
	border: 0;
	border-radius: 12px;
	background: #fff;
	overflow: hidden;
}

.ls-faq--cards .disclosure > summary {
	padding: 16px 33px;
}

.ls-faq--cards .disclosure__title {
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
}

.ls-faq--cards .disclosure__content {
	padding: 0 33px 20px;
	color: #303030;
}

.ls-faq--cards .disclosure__content > *:last-child {
	margin-bottom: 0;
}

.ls-faq--cards .disclosure[open]:not(.is-closing) .disclosure__toggle > .icon {
	transform: rotate(90deg);
}

.ls-faq--cards .ls-block__title {
	margin-bottom: 24px;
}

/* --- LS-18f newsletter --------------------------------------------------- */

.ls-newsletter__inner {
	max-width: 467px;
	margin: 0 auto;
	text-align: center;
}

.ls-newsletter__inner .form-width {
	margin: 0 auto;
}

/* ==========================================================================
   Page-level tweaks
   ========================================================================== */

.page-contact .cc-contact-form,
.page-faq .cc-contact-form {
	margin-bottom: calc(var(--section-gap) * var(--fluid-1-5));
}

.page-compare .section__heading {
	margin-bottom: 0;
}