/* --------------------------------------------------------------
	 Let's Meet - landing page stylesheet

	 Colour combo: http://www.colorcombos.com/color-schemes/8344/ColorCombo8344.html
	 Basic colours: 44B3C2  F1A94E  E45641  5D4C46  7B8D8E  2EDD8

	 One stylesheet for every landing page. startpage.css and product.css
	 were merged into this file, their class names now all carry the lp-
	 prefix so the pages cannot collide.

	 The colour palette (:root) lives in letsmeet.css. This file therefore
	 has to be loaded after letsmeet.css.

	 Structure:
	   1  Hero A, photo band          5  Cards, lists and panels
	   2  Hero B, flat dark band      6  FAQ
	   3  Hero type and trust bar     7  Screenshots and features
	   4  Bands and typography        8  Start page
	                                  9  Pricing page

	 Browser support: gap, clamp() and aspect-ratio are avoided on
	 purpose, they only work from 2021 onwards. Font sizes are in px
	 because Bootstrap 3 sets the root font size to 10px, which makes
	 rem values far too small.
	 -------------------------------------------------------------- */

/* ==========================================================
   1  HERO A: photo band
   Used by the start page and the topic landing pages.
   ========================================================== */
/* Base class sets height: 20% and min-height: 225px; the overlay
	 below defines the height instead, so both have to be cancelled. */
.lp-hero.header-landingpage {
	height: auto;
	min-height: 0;
}

/* Switching to relative makes the base top/right/bottom/left: 0
	 inert, so no offset resets are needed here. */
.lp-hero .header-landingpage-img {
	position: relative;
	overflow: hidden;
	background-position: center 42%;
}

/* A real img rather than a background image, so alt and title survive
	 and the browser can treat it as the LCP element. */
.lp-hero-img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* At desktop widths the hero is wider than the photo, so the crop
	   happens top and bottom. Only the second value has an effect
	   there, lower shows more of the upper part of the picture. */
	object-position: center 40%;
}

.lp-hero .header-landingpage-overlay {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 330px;
	padding-top: 80px;
	text-align: left;
	background: linear-gradient(180deg, rgba(24, 38, 41, 0.28) 0%, rgba(24, 38, 41, 0.52) 48%, rgba(17, 29, 32, 0.82) 100%);
}

/* Here top and transform DO have to be reset: the base rule
	 centres the content with top: 50% and translateY(-50%). */
.lp-hero .header-landingpage-content {
	position: relative;
	top: auto;
	width: 100%;
	margin: 0 auto;
	padding: 30px 15px 42px;
	transform: none;
	text-align: left;
}

/* ==========================================================
   2  HERO B: flat dark band
   Used by the pricing page. Two soft light sources instead of a flat
   fill: a lighter petrol one at the top right, a warm coral one at the
   bottom left. They sit outside the box and are cropped by overflow.
   ========================================================== */
.lp-hero-flat {
	position: relative;
	overflow: hidden;
	padding: 116px 0 56px;
	background: #10312f;
}

.lp-hero-flat::before {
	content: "";
	position: absolute;
	top: -180px;
	right: -120px;
	width: 620px;
	height: 620px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(45, 128, 139, 0.55) 0%, rgba(45, 128, 139, 0) 68%);
	pointer-events: none;
}

.lp-hero-flat::after {
	content: "";
	position: absolute;
	bottom: -260px;
	left: -160px;
	width: 560px;
	height: 560px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(230, 95, 60, 0.30) 0%, rgba(230, 95, 60, 0) 70%);
	pointer-events: none;
}

/* Keeps the copy above the two glows */
.lp-hero-flat .container { position: relative; z-index: 2; }

@media (min-width: 992px) {
	.lp-hero-flat { padding: 148px 0 78px; }
}

/* The max-width belongs on an inner element. On .container it would
	 shrink and recentre the whole column, so the copy would no longer
	 start at the same left edge as the cards below. */
.lp-hero-flat .lp-hero-inner { max-width: 760px; text-align: left; }

/* ==========================================================
   3  HERO TYPE
   Eyebrow, heading and subline are identical in both heroes, so they
   are not scoped to either. Only the text shadows differ: they are
   needed over a photo, not over a flat colour.
   ========================================================== */

/* Rule in front of the label. No background and no pill shape, the
	 label is plain text and must not look like a button. The short
	 coral rule picks up the divider used under headings.
	 The spacing sits on the pseudo element instead of on gap, so it
	 also works in browsers before Firefox 63 / Chrome 84 / Safari 14.1. */
.lp-eyebrow {
	display: flex;
	align-items: center;
	margin: 0 0 18px;
	padding: 0;
	background: none;
	border-radius: 0;
	color: #fff;
	font-family: var(--lm-sans);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.lp-hero .lp-eyebrow { text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5); }

.lp-eyebrow::before {
	content: "";
	flex: none;
	width: 34px;
	height: 3px;
	margin-right: 13px;
	border-radius: 2px;
	background: var(--lm-coral);
}

@media (max-width: 767px) {
	.lp-eyebrow { font-size: 13px; }
	.lp-eyebrow::before { width: 26px; margin-right: 10px; }
}

/* Site heading scale, 27px up to 33px. Formerly clamp(), now three
	 steps: the range is six pixels wide, so steps are indistinguishable
	 from fluid scaling and work in every browser.
	 The first selector keeps the landing pages working that carry no
	 .lp-hero-title class on their h1 yet. */
.lp-hero .header-landingpage-content h1,
.lp-hero-title {
	max-width: 720px;
	margin: 0 0 16px;
	color: #ffffff;
	font-size: 27px;
	font-weight: 700;
	line-height: 1.16;
	letter-spacing: -0.015em;
}

.lp-hero .header-landingpage-content h1 { text-shadow: 0 2px 20px rgba(0, 0, 0, 0.35); }

@media (min-width: 768px) {
	.lp-hero .header-landingpage-content h1,
	.lp-hero-title { font-size: 30px; }
}

@media (min-width: 1200px) {
	.lp-hero .header-landingpage-content h1,
	.lp-hero-title { font-size: 33px; }
}

.lp-hero-sub {
	max-width: 600px;
	margin: 0 0 26px;
	color: rgba(255, 255, 255, 0.93);
	font-size: 16px;
	line-height: 1.55;
}

.lp-hero .lp-hero-sub { text-shadow: 0 1px 14px rgba(0, 0, 0, 0.4); }

@media (min-width: 768px)  { .lp-hero-sub { font-size: 17px; } }
@media (min-width: 1200px) { .lp-hero-sub { font-size: 18px; } }

/* The start page puts its copy on the left of a photo, so the scrim is
	 heavy on the left and thins out to the right, where the photo stays
	 visible. The second gradient keeps the figures at the bottom readable.
	 Scoped to the modifier so the other landing pages keep the plain
	 top to bottom gradient above. */
.lp-hero--start .header-landingpage-overlay {
	background:
		linear-gradient(to right, rgba(11, 30, 32, 0.90) 0%, rgba(11, 30, 32, 0.66) 40%, rgba(11, 30, 32, 0.14) 100%),
		linear-gradient(to top, rgba(11, 30, 32, 0.58) 0%, rgba(11, 30, 32, 0.04) 55%);
}

@media (min-width: 768px) {
	.lp-hero .header-landingpage-overlay { min-height: 420px; }
	.lp-hero .header-landingpage-content { max-width: 750px; padding-bottom: 52px; }
}

@media (min-width: 992px) {
	.lp-hero .header-landingpage-content { max-width: 970px; }
}

@media (min-width: 1200px) {
	.lp-hero .header-landingpage-overlay { min-height: 490px; }
	.lp-hero .header-landingpage-content { max-width: 1170px; padding-bottom: 60px; }
}

/* Staggered entrance on load */
@keyframes lp-rise {
	from { opacity: 0; transform: translateY(18px); }
	to { opacity: 1; transform: none; }
}

.lp-hero .lp-eyebrow,
.lp-hero .header-landingpage-content h1,
.lp-hero .lp-hero-sub,
.lp-hero .lp-hero-cta {
	animation: lp-rise 0.7s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}
.lp-hero .header-landingpage-content h1 { animation-delay: 0.08s; }
.lp-hero .lp-hero-sub { animation-delay: 0.16s; }
.lp-hero .lp-hero-cta { animation-delay: 0.24s; }

/* ---------- Trust bar below the hero ---------- */
.lp-trustbar {
	padding: 15px 0;
	background: #fff;
	border-bottom: 1px solid var(--lp-line);
}

/* The spacing sits on the list items rather than on gap. The row is
	 centred, so the outer margins simply fall outside and stay invisible. */
.lp-trustbar .lp-trustlist {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lp-trustbar .lp-trustlist li {
	display: flex;
	align-items: center;
	margin: 4px 16px;
	color: var(--lm-ink);
	font-family: var(--lm-sans);
	font-size: 15px;
	font-weight: 600;
}

.lp-trustbar .lp-trustlist i {
	margin-right: 9px;
	color: var(--lm-petrol);
	font-size: 15px;
}

@media (max-width: 767px) {
	.lp-trustbar .lp-trustlist li { margin: 5px 11px; font-size: 14px; }
}


/* ==========================================================
   4  BANDS AND TYPOGRAPHY
   One band system for every landing page. .bg-light stays off these
   sections on purpose: the gradient rule below is .lp-page.bg-light,
   so without that second class it cannot match and there is nothing
   left to override.
   ========================================================== */
.lp-page.lp-band { color: var(--lp-body); }

.lp-page.lp-band.lp-band--white { background: #ffffff; }
.lp-page.lp-band.lp-band--soft  { background: var(--lm-grey-bg); }
.lp-page.lp-band.lp-band--mist  { background: #eef4f4; }
.lp-page.lp-band.lp-band--dark  { background: #3d4648; color: #d5dcdb; }

.lp-page.lp-band--dark h2 {color: #ffffff; }
.lp-page.lp-band--dark .paragraph-marketing { color: #c9d2d1; }
.lp-page.lp-band--dark a { color: #f4a58c; }
.lp-page.lp-band--dark a:hover,
.lp-page.lp-band--dark a:focus { color: #ffffff; }
.lp-page.lp-band--dark .lp-plan a:hover,
.lp-page.lp-band--dark .lp-plan a:focus { color: #ed6840; }
.lp-page.lp-band--dark .btn { color: #ffffff; }

.lp-page.lp-band--dark .btn-back {
	background-color: transparent;
	color: #ffffff;
	box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5);
}

.lp-page.lp-band--dark .btn-back:hover,
.lp-page.lp-band--dark .btn-back:focus,
.lp-page.lp-band--dark .btn-back:active {
	background-color: #ffffff;
	color: #28383a;
	box-shadow: inset 0 0 0 2px #ffffff;
}

.lp-page.bg-light {
	background: linear-gradient(180deg, #fbfafa 0%, var(--lm-grey-bg) 100%);
	color: var(--lp-body);
}

.lp-page.section-landingpage-no-border {
	padding: 46px 10px 60px;
}

@media (min-width: 768px) {
	.lp-page.section-landingpage-no-border { padding: 72px 20px 88px; }
}

.lp-page h2 {
	margin: 0 0 18px;
	color: var(--lm-ink);
	font-size: 23px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.012em;
}

@media (min-width: 768px)  { .lp-page h2 { font-size: 25px; } }
@media (min-width: 1200px) { .lp-page h2 { font-size: 27px; } }

.lp-page h3 {
	margin: 0 0 16px;
	color: var(--lm-ink);
	font-size: 21px;
	font-weight: 700;
	line-height: 1.3;
}

@media (min-width: 768px)  { .lp-page h3 { font-size: 22px; } }
@media (min-width: 1200px) { .lp-page h3 { font-size: 23px; } }

/* Base class already sets font-size 17px and margin-bottom 20px,
	 so only the three differences are declared. font-style is
	 required: .paragraph-marketing is italic by default. */

.lp-page .paragraph-marketing {
	color: var(--lp-body);
	font-size: 17px;
	font-style: normal;
	line-height: 1.7;
	margin-bottom: 20px;
}

.lp-page .text-center .paragraph-marketing {
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
}

/* ==========================================================
   5  CARDS, LISTS AND PANELS
   ========================================================== */
@media (min-width: 768px) {
	.lp-page .lp-row-cards {
		display: flex;
		flex-wrap: wrap;
	}
	.lp-page .lp-row-cards > [class*="col-"] {
		display: flex;
	}
	/* Makes the card fill the flex column so both are equal height */
	.lp-page .lp-row-cards .lp-card { width: 100%; }
}

.lp-page .lp-card {
	display: flex;
	flex-direction: column;
	max-width: 485px;
	margin: 26px auto 0;
	padding: 32px 30px 28px;
	background: #fff;
	border: 1px solid var(--lp-line);
	border-radius: 18px;
	box-shadow: 0 1px 2px rgba(31, 91, 100, 0.05), 0 14px 34px -14px rgba(31, 91, 100, 0.20);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.lp-page .lp-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 2px 4px rgba(31, 91, 100, 0.07), 0 22px 46px -16px rgba(31, 91, 100, 0.28);
}

.lp-page .lp-card h3 {
	margin: 0 0 22px;
	font-size: 20px;
	letter-spacing: -0.005em;
}

@media (min-width: 768px)  { .lp-page .lp-card h3 { font-size: 21px; } }
@media (min-width: 1200px) { .lp-page .lp-card h3 { font-size: 22px; } }

.lp-page .lp-card-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	margin-bottom: 20px;
	border-radius: 16px;
	font-size: 26px;
}

.lp-page .lp-card--you .lp-card-icon {
	background: rgba(230, 95, 60, 0.11);
}
.lp-page .lp-card--you .lp-card-icon i { color: var(--lm-coral); }

.lp-page .lp-card--we .lp-card-icon {
	background: rgba(45, 128, 139, 0.11);
}
.lp-page .lp-card--we .lp-card-icon i { color: var(--lm-petrol); }

/* Numbered steps: these three points are a genuine sequence */
.lp-page .lp-steps {
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
	counter-reset: lp-step;
}

.lp-page .lp-steps li {
	position: relative;
	counter-increment: lp-step;
	padding: 0 0 24px 52px;
	color: var(--lp-body);
	font-size: 17px;
	line-height: 1.55;
}

.lp-page .lp-steps li:last-child { padding-bottom: 2px; }

.lp-page .lp-steps li::before {
	content: counter(lp-step);
	position: absolute;
	top: 0;
	left: 0;
	width: 32px;
	height: 32px;
	border: 2px solid var(--lm-coral);
	border-radius: 50%;
	background: #fff;
	color: var(--lm-coral);
	font-family: var(--lm-sans);
	font-size: 14px;
	font-weight: 700;
	line-height: 28px;
	text-align: center;
}

/* Connecting line between the step markers */
.lp-page .lp-steps li::after {
	content: "";
	position: absolute;
	top: 36px;
	bottom: 4px;
	left: 15px;
	width: 2px;
	background: linear-gradient(180deg, rgba(230, 95, 60, 0.45), rgba(230, 95, 60, 0.10));
}

.lp-page .lp-steps li:last-child::after { display: none; }

.lp-page .lp-step-note {
	display: inline-block;
	margin-top: 2px;
	color: #7c8688;
	font-size: 16px;
}

/* Check list: order carries no meaning here, scope does */
.lp-page .lp-checks {
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
}

.lp-page .lp-checks li {
	position: relative;
	padding: 0 0 20px 52px;
	color: var(--lp-body);
	font-size: 17px;
	line-height: 1.55;
}

.lp-page .lp-checks li:last-child { padding-bottom: 2px; }

.lp-page .lp-checks li::before {
	content: "\f00c";
	position: absolute;
	top: 0;
	left: 0;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: rgba(45, 128, 139, 0.11);
	color: var(--lm-petrol);
	font-family: FontAwesome;
	font-size: 13px;
	line-height: 32px;
	text-align: center;
}

/* margin-top: auto pushes the footer to the bottom of the card.
	 Selector is specific enough to win without !important. */
.lp-page .lp-card .lp-card-foot {
	margin: auto 0 0;
	padding-top: 18px;
	border-top: 1px solid var(--lp-line);
	color: var(--lm-ink);
	font-size: 17px;
	line-height: 1.5;
}

/* Dark call to action panel with a warm glow in the corner */
.lp-page .lp-cta {
	position: relative;
	overflow: hidden;
	margin: 60px auto 0;
	padding: 46px 30px 42px;
	border: 0;
	border-radius: 24px;
	background: linear-gradient(135deg, #2f8792 0%, #1f5b64 58%, #174850 100%);
	box-shadow: 0 24px 54px -24px rgba(23, 72, 80, 0.55);
	text-align: center;
}

.lp-page .lp-cta::after {
	content: "";
	position: absolute;
	top: -140px;
	right: -140px;
	width: 340px;
	height: 340px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(230, 95, 60, 0.34) 0%, rgba(230, 95, 60, 0) 70%);
	pointer-events: none;
}

/* Keeps the content above the glow, which would otherwise paint over it */
.lp-page .lp-cta > * {
	position: relative;
	z-index: 1;
}

.lp-page .lp-cta-title {
	max-width: 650px;
	margin: 0 auto 28px;
	color: #fff;
	font-family: var(--lm-sans);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.4;
}

@media (min-width: 768px)  { .lp-page .lp-cta-title { font-size: 20px; } }
@media (min-width: 1200px) { .lp-page .lp-cta-title { font-size: 22px; } }

.lp-page .lp-cta-title b {
	color: #ffc4ae;
	font-weight: 700;
}

/* ---------- Buttons ---------- */
.lp-hero .btn-xl,
.lp-hero-flat .btn-xl,
.lp-page .btn-xl {
	padding: 16px 32px;
	font-size: 15px;
	letter-spacing: 0.05em;
}

/* White outline button on the two dark heroes. The border is drawn as
	 an inset shadow so the button does not change size on hover. */
.lp-hero .btn-back,
.lp-hero-flat .btn-default {
	background-color: transparent;
	color: #ffffff;
	box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.55);
}

.lp-hero .btn-back:hover,
.lp-hero .btn-back:focus,
.lp-hero .btn-back:active,
.lp-hero-flat .btn-default:hover,
.lp-hero-flat .btn-default:focus,
.lp-hero-flat .btn-default:active {
	background-color: #ffffff;
	color: #1f5b64;
	box-shadow: inset 0 0 0 2px #ffffff;
}

/* On a dark ground a neutral shadow reads better than the coral one */
.lp-page .lp-cta .btn-primary.btn-xl,
.lp-hero .lp-hero-cta .btn-primary.btn-xl {
	box-shadow: 0 6px 14px -8px rgba(0, 0, 0, 0.45);
}

.lp-page .lp-cta .btn-primary.btn-xl:hover,
.lp-page .lp-cta .btn-primary.btn-xl:focus,
.lp-page .lp-cta .btn-primary.btn-xl:active,
.lp-hero .lp-hero-cta .btn-primary.btn-xl:hover,
.lp-hero .lp-hero-cta .btn-primary.btn-xl:focus,
.lp-hero .lp-hero-cta .btn-primary.btn-xl:active {
	box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.55);
}

/* Outline variant of the secondary button, drawn with an inset shadow
	 so the border does not change the button size on hover */
.lp-page .btn-back {
	background-color: transparent;
	color: #1f5b64;
	box-shadow: inset 0 0 0 2px rgba(45, 128, 139, 0.45);
}

.lp-page .btn-back:hover,
.lp-page .btn-back:focus,
.lp-page .btn-back:active {
	background-color: var(--lm-petrol);
	color: #fff;
}

.lp-page .lp-block {
	margin-top: 64px;
}

/* ==========================================================
   6  FAQ
   The unscoped base rules come first, the .lp-page overrides after
   them. Before, the base block sat at the very end of the file, which
   read as if it were overriding the landing page rules.
   ========================================================== */
.faq-accordion .faq-item {
	border-bottom: 1px solid #e5e5e5;
}

.faq-accordion .faq-question {
	display: block; position: relative; cursor: pointer; padding: 8px 34px 8px 0; text-decoration: none;
}

.faq-accordion .faq-question:hover,
.faq-accordion .faq-question:focus {
	text-decoration: none;
}

.faq-accordion .faq-question .h3 {
	font-size: 20px; color: #000000; display: inline-block; margin: 10px 0;
}

.faq-accordion .faq-chevron {
	position: absolute; right: 6px; top: 50%; transform: translateY(-50%) rotate(0deg); transition: transform .2s ease;
}

.faq-accordion .faq-question.collapsed .faq-chevron {
	transform: translateY(-50%) rotate(-90deg);
}

.faq-accordion .collapse .paragraph-marketing,
.faq-accordion .collapsing .paragraph-marketing {
	font-size: 16px;
	margin-bottom: 18px;
}

.lp-page .lp-faq {
	margin-top: 66px;
	padding-top: 56px;
	border-top: 1px solid var(--lp-line);
}

/* Narrower measure for a page whose FAQ carries the whole band. The
	 shorthand also cancels the 66px top margin above, which is how the
	 pricing page looked before the merge. */
.lp-page .lp-faq--narrow {
	max-width: 820px;
	margin: 0 auto;
}

.lp-page .lp-faq .faq-accordion .faq-item {
	margin-bottom: 12px;
	border: 1px solid var(--lp-line);
	border-radius: 14px;
	background: #fff;
	transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.lp-page .lp-faq .faq-accordion .faq-item:hover {
	border-color: rgba(45, 128, 139, 0.38);
	box-shadow: 0 1px 2px rgba(31, 91, 100, 0.05), 0 14px 34px -14px rgba(31, 91, 100, 0.20);
}

.lp-page .lp-faq .faq-accordion .faq-question {
	padding: 16px 62px 16px 22px;
}

.lp-page .lp-faq .faq-accordion .faq-question .h3 {
	margin: 0;
	color: var(--lm-ink);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.45;
	transition: color 0.25s ease;
}

.lp-page .lp-faq .faq-accordion .faq-question:hover .h3,
.lp-page .lp-faq .faq-accordion .faq-question:not(.collapsed) .h3 {
	color: #1f5b64;
}

.lp-page .lp-faq .faq-accordion .faq-chevron {
	right: 18px;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: rgba(45, 128, 139, 0.11);
	color: var(--lm-petrol);
	font-size: 12px;
	line-height: 30px;
	text-align: center;
	transition: transform 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}

.lp-page .lp-faq .faq-accordion .faq-question:not(.collapsed) .faq-chevron {
	background: var(--lm-petrol);
	color: #fff;
}

/* Base class is 17px already, so only the padding here. The bottom
	 margin is switched off in the markup with .bottom-margin-none. */
.lp-page .lp-faq .faq-accordion .collapse .paragraph-marketing,
.lp-page .lp-faq .faq-accordion .collapsing .paragraph-marketing {
	padding: 0 22px 22px;
}

/* ---------- Quality floor: focus and motion ----------
	 Three steps on purpose. Old browsers understand the first rule and
	 show the outline on every focus, which is better than none. Newer
	 ones drop it again for mouse clicks via the second rule and keep it
	 for keyboard focus via the third. */
.lp-hero a:focus,
.lp-page a:focus {
	outline: 3px solid rgba(45, 128, 139, 0.6);
	outline-offset: 3px;
}

.lp-hero a:focus:not(:focus-visible),
.lp-page a:focus:not(:focus-visible) {
	outline: none;
}

.lp-hero a:focus-visible,
.lp-page a:focus-visible {
	outline: 3px solid rgba(45, 128, 139, 0.6);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.lp-hero *,
	.lp-trustbar *,
	.lp-page * {
		animation: none !important;
		transition: none !important;
	}
	/* The button lift comes from .btn-primary in letsmeet.css,
	   not from .btn-xl, so it has to be cancelled there. */
	.lp-page .lp-card:hover,
	.lp-page .lp-shot:hover,
	.lp-hero .btn-primary:hover,
	.lp-page .btn-primary:hover {
		transform: none;
	}
}


/* ---------- Customer events page - invitation rounds ---------- */
.lp-rounds {
	margin: 30px 0 20px 0;
}
.lp-round {
	display: flex;
	align-items: center;
	padding: 14px 0;
	border-bottom: 1px solid #e8e4dd;
}
.lp-round:last-child {
	border-bottom: none;
}
.lp-round-label {
	flex: 0 0 230px;
	margin-right: 20px;
}
.lp-round-title {
	display: block;
	font-family: var(--lm-sans);
	font-weight: 600;
	font-size: 17px;
	color: var(--lm-petrol);
}
.lp-round-stars {
	display: block;
	font-size: 15px;
	color: #8a8681;
}
.lp-bar {
	flex: 1 1 auto;
	height: 20px;
	margin-right: 20px;
	background-color: #ece8e1;
	border-radius: 3px;
	overflow: hidden;
}
.lp-bar-fill {
	height: 100%;
	background-color: var(--lm-coral);
	border-radius: 3px;
}
.lp-round-count {
	flex: 0 0 95px;
	text-align: right;
	font-size: 15px;
	color: #8a8681;
}
.lp-rounds-note {
	font-size: 15px;
	color: #8a8681;
	text-align: center;
}
@media (max-width: 767px) {
	.lp-round {
		display: block;
		padding: 12px 0;
	}
	.lp-round-label {
		margin-right: 0;
		margin-bottom: 8px;
	}
	.lp-bar {
		margin-right: 0;
	}
	.lp-round-title {
		font-size: 16px;
	}
	.lp-round-count {
		text-align: left;
		margin-top: 6px;
	}
}

/* ---------- Action rows ---------- */
/* Spacing on the children instead of gap. The row is centred, so the
	 outer margins fall outside the visible block. */
.lp-hero-flat .lp-hero-cta,
.lp-page .lp-cta-actions,
.lp-page .lp-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

.lp-page .lp-actions {
	margin-top: 42px;
}

.lp-page .lp-cta-actions > *,
.lp-page .lp-actions > * {
	margin: 4px 7px;
}

.lp-hero .lp-hero-cta > *,
.lp-hero-flat .lp-hero-cta > * {
	margin: 0 8px 8px 0;
}

.lp-hero-flat .lp-hero-cta > *:last-child {
	margin-right: 0;
}


/* Light outline button on the dark CTA panel. The border is drawn as an
   inset shadow so that the button size does not change on hover. */
.lp-page .lp-cta .btn-back {
	background-color: transparent;
	color: #fff;
	box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.55);
}

.lp-page .lp-cta .btn-back:hover,
.lp-page .lp-cta .btn-back:focus,
.lp-page .lp-cta .btn-back:active {
	background-color: #fff;
	color: #1f5b64;
	box-shadow: inset 0 0 0 2px #fff;
}

/* ==========================================================
   7  SCREENSHOTS AND FEATURE BLOCKS
   ========================================================== */
.lp-page .lp-shots {
	margin-top: 60px;
}

@media (min-width: 768px) {
	.lp-page .lp-shots-row {
		display: flex;
		flex-wrap: wrap;
	}
	.lp-page .lp-shots-row > [class*="col-"] {
		display: flex;
	}
	.lp-page .lp-shots-row .lp-shot { width: 100%; }
}

/* Deliberately a block and not a flex container. .lp-shot-media builds
	 its aspect ratio from a percentage padding, and older browsers resolve
	 that percentage against the wrong axis as soon as the element is a
	 flex item, which collapsed the picture to a sliver. As a plain block
	 the calculation is reliable everywhere. Nothing inside the card is
	 pushed to the bottom, so flex bought nothing here anyway. */
.lp-page .lp-shot {
	display: block;
	overflow: hidden;
	max-width: 470px;
	margin: 24px auto 0;
	background: #fff;
	border: 1px solid var(--lp-line);
	border-radius: 16px;
	box-shadow: 0 1px 2px rgba(31, 91, 100, 0.05), 0 14px 34px -14px rgba(31, 91, 100, 0.20);
	text-decoration: none;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.lp-page .lp-shot:hover,
.lp-page .lp-shot:focus {
	transform: translateY(-4px);
	box-shadow: 0 2px 4px rgba(31, 91, 100, 0.07), 0 22px 46px -16px rgba(31, 91, 100, 0.28);
	text-decoration: none;
}

/* 16 to 10 as a padding box rather than aspect-ratio, which only
	 arrived in 2021. padding-bottom refers to the width of the element,
	 10 / 16 = 62.5%. The image is taken out of the flow because the box
	 itself has no height. The parent must stay a block, see .lp-shot. */
.lp-page .lp-shot-media {
	position: relative;
	display: block;
	height: 0;
	padding-bottom: 62.5%;
	overflow: hidden;
	border-bottom: 1px solid var(--lp-line);
	background: var(--lm-grey-bg);
}

/* The use case pictures are 650 x 350 rather than 16 to 10 */
.lp-page .lp-shots--wide .lp-shot-media { padding-bottom: 56.25%; }
.lp-page .lp-shots--wide .lp-shot-media img { object-position: center center; }

/* Compensates for the different aspect ratios of the screenshots */
.lp-page .lp-shot-media img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}

.lp-page .lp-shot-zoom {
	position: absolute;
	right: 12px;
	bottom: 12px;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	color: var(--lm-petrol);
	font-size: 14px;
	line-height: 34px;
	text-align: center;
	box-shadow: 0 4px 12px -4px rgba(23, 72, 80, 0.5);
	transition: background-color 0.25s ease, color 0.25s ease;
}

.lp-page .lp-shot:hover .lp-shot-zoom {
	background: var(--lm-petrol);
	color: #fff;
}

.lp-page .lp-shot-caption {
	display: block;
	padding: 16px 20px 18px;
}

.lp-page .lp-shot-label {
	display: block;
	margin-bottom: 4px;
	color: var(--lm-coral);
	font-family: var(--lm-sans);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.lp-page .lp-shot-title {
	display: block;
	color: var(--lm-ink);
	font-size: 17px;
	line-height: 1.45;
}

/* ---------- Feature blocks ---------- */
.lp-page .lp-features {
	margin-top: 6px;
}

/* col-lg-6 only kicks in at 1200px, so two columns make sense from there on */
@media (min-width: 1200px) {
	.lp-page .lp-features {
		display: flex;
		flex-wrap: wrap;
	}
	.lp-page .lp-features > [class*="col-"] {
		display: flex;
		flex-direction: column;
	}
}

.lp-page .lp-feature {
	position: relative;
	margin-top: 36px;
	padding-left: 66px;
}

.lp-page .lp-feature h3 {
	margin-bottom: 10px;
}


.lp-page .lp-feature-icon {
	position: absolute;
	top: 2px;
	left: 0;
	width: 50px;
	height: 50px;
	border-radius: 15px;
	background: rgba(45, 128, 139, 0.11);
	color: var(--lm-petrol);
	font-size: 21px;
	line-height: 50px;
	text-align: center;
}

@media (max-width: 767px) {
	.lp-page .lp-feature {
		padding-left: 58px;
	}
	.lp-page .lp-feature-icon {
		width: 44px;
		height: 44px;
		border-radius: 13px;
		font-size: 19px;
		line-height: 44px;
	}
}

/* ---------- Note about the basic package ---------- */
.lp-page .lp-offer {
	margin-top: 26px;
	text-align: center;
}


/* ==========================================================
   8  START PAGE
   Everything the start page needs on top of the blocks above.
   The navbar override needs a page level hook, see the note in the
   block itself.
   ========================================================== */

/* The transparent dark navbar belongs to the start page only. It needs
   a class on an element that wraps the navbar, so add start-page to the
   body tag of the master layout when $start_page is true. Without that
   class the navbar keeps the default appearance. */
.start-page .navbar-default {
	background-color: rgba(18, 41, 43, 0.9);
	border-color: transparent;
}

@media (min-width: 768px) {
	.start-page .navbar-default { background-color: rgba(18, 41, 43, 0.75); }
	.start-page .navbar-default.affix { background-color: rgba(18, 41, 43, 0.94); }
}


/* ---------- Figures at the foot of the hero ----------
   The spacing sits on the columns instead of on gap. The negative
   bottom margin on the container takes the 26px of the last row off
   again, and the trailing 20px on the right of the last column falls
   outside the block, so the left edge still lines up with the heading. */
.lp-stats {
	display: flex;
	flex-wrap: wrap;
	max-width: 880px;
	margin-top: 30px;
	margin-bottom: -26px;
}

.lp-stat {
	flex: 1 1 180px;
	margin: 0 18px 22px 0;
	padding-top: 18px;
	border-top: 2px solid rgba(255, 255, 255, 0.22);
}

/* 25px up to 32px, formerly clamp(). Steps rather than fluid scaling,
   the difference is not visible at this range. */
.lp-stat .lp-stat-nr {
	display: block;
	margin-bottom: 7px;
	color: #ffffff;
	font-family: var(--lm-sans);
	font-size: 24px;
	font-weight: 700;
	letter-spacing: -0.025em;
	line-height: 1.05;
}

@media (min-width: 768px)  {
	.lp-stats {
		margin-top: 52px;
	}

	.lp-stat {
		margin: 0 20px 26px 0;
		padding-top: 22px;
	}
	.lp-stat .lp-stat-nr {
		font-size: 28px;
	}
}
@media (min-width: 1200px) { .lp-stat .lp-stat-nr { font-size: 32px; } }

.lp-stat span {
	color: rgba(255, 255, 255, 0.72);
	font-size: 15.5px;
	line-height: 1.55;
}


/* ---------- Three steps ----------
   .lp-steps supplies the numbering, the coral circles and the type.
   This only turns the list into a row and drops the connecting line
   that a vertical list needs. */
.lp-page .lp-steps--row { margin: 48px 0 24px; }

@media (min-width: 768px) {
	.lp-page .lp-steps--row { display: flex; }
	/* 0% instead of a bare 0: some older browsers read the unitless
	   value as a length and drop the whole shorthand. */
	.lp-page .lp-steps--row li { flex: 1 1 0%; margin-right: 32px; padding-bottom: 0; }
	.lp-page .lp-steps--row li:last-child { margin-right: 0; }
	.lp-page .lp-steps--row li::after { display: none; }
}

.lp-page .lp-steps--row h3 { margin: 0 0 8px; font-size: 21px; }
.lp-page .lp-steps--row p { font-size: 17px; line-height: 1.55; }


/* ---------- Package note under a feature block ----------
   Deliberately not a pill: a filled pill reads as a button and this
   element is not clickable. A filled dot marks what is already free,
   an outlined dot what needs a package. */
.lp-page .lp-since {
	display: block;
	margin-top: 10px;
	color: #1f5b64;
	font-family: var(--lm-sans);
	font-size: 14px;
	font-weight: 600;
}

.lp-page .lp-since::before {
	content: "\f10c";
	margin-right: 9px;
	color: var(--lm-petrol);
	font-family: FontAwesome;
	font-size: 9px;
	font-weight: normal;
	vertical-align: middle;
}

.lp-page .lp-since--free::before { content: "\f111"; font-size: 7px; }


/* ---------- Package cards ----------
   .lp-card carries the surface, the border and the hover lift. Only
   the width, the padding and the type differ here. */
/* The 18px spacing sits on the cards. The row is centred, so the outer
   margins fall outside the visible block. margin-top drops by the 9px
   the cards now contribute above themselves. */
.lp-page .lp-plans {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 29px;
}

.lp-page .lp-card.lp-plan {
	flex: 1 1 210px;
	max-width: 260px;
	margin: 9px;
	padding: 26px 24px 24px;
	text-align: left;
	box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.55);
}

.lp-page .lp-card.lp-plan:hover { box-shadow: 0 26px 52px -20px rgba(0, 0, 0, 0.65); }
.lp-page .lp-card.lp-plan--highlight { border-color: rgba(45, 128, 139, 0.55); }

.lp-page .lp-plan-name {
	color: var(--lm-ink);
	font-family: var(--lm-sans);
	font-size: 19px;
	font-weight: 700;
}

.lp-page .lp-plan-quota {
	display: block;
	margin-top: 5px;
	color: #1f5b64;
	font-family: var(--lm-sans);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.04em;
}

.lp-page .lp-plan-desc {
	flex: 1 1 auto;
	margin: 14px 0 18px;
	color: var(--lp-body);
	font-size: 15px;
	line-height: 1.6;
}

.lp-page .lp-plan-price {
	padding-top: 15px;
	border-top: 1px solid var(--lp-line);
	color: var(--lm-ink);
	font-family: var(--lm-sans);
	font-size: 21px;
	font-weight: 700;
}

.lp-page .lp-plan-price small {
	display: block;
	margin-top: 3px;
	color: #7c8688;
	font-size: 13px;
	font-weight: 400;
}

.lp-page .lp-plan-link {
	margin-top: 14px;
	font-family: var(--lm-sans);
	font-size: 15px;
	font-weight: 600;
}

/* Sits on the dark band, not inside a card */
.lp-page .lp-plans-note {
	margin-top: 26px;
	color: rgba(255, 255, 255, 0.68);
	font-size: 15px;
}


/* ---------- Reviews ---------- */
@media (min-width: 768px) {
	.lp-page .lp-quotes { display: flex; flex-wrap: wrap; }
	.lp-page .lp-quotes > [class*="col-"] { display: flex; }
	.lp-page .lp-quotes .lp-quote { width: 100%; }
}

.lp-page .lp-quote {
	display: flex;
	flex-direction: column;
	max-width: 520px;
	margin: 26px auto 0;
	padding: 26px 28px 24px;
	background: #eff5f5;
	border: 1px solid rgba(45, 128, 139, 0.20);
	border-radius: 18px;
	text-align: left;
}

.lp-page .lp-quote::before {
	content: "\f10d";
	display: block;
	margin-bottom: 14px;
	color: rgba(45, 128, 139, 0.42);
	font-family: FontAwesome;
	font-size: 22px;
}

.lp-page .lp-quote p {
	flex: 1 1 auto;
	margin: 0 0 18px;
	color: var(--lp-body);
	font-size: 16px;
	line-height: 1.65;
}

.lp-page .lp-quote-source {
	padding-top: 15px;
	border-top: 1px solid rgba(45, 128, 139, 0.22);
	font-family: var(--lm-sans);
	font-size: 15px;
	font-weight: 600;
}

.lp-page .lp-stars {
	margin-top: 50px;
	color: var(--lm-coral-light);
	font-size: 20px;
}

.lp-page .lp-stars b {
	margin-right: 10px;
	color: var(--lm-ink);
	font-family: var(--lm-sans);
}

.lp-page .lp-closing {
	max-width: 760px;
	margin: 60px auto 0;
	padding-top: 46px;
	border-top: 1px solid var(--lp-line);
}

/* Opening quote mark, sets the block apart from the running text */
.lp-page .lp-closing::before {
	content: "\f10d";
	display: block;
	margin-bottom: 20px;
	color: rgba(230, 95, 60, 0.5);
	font-family: FontAwesome;
	font-size: 30px;
}

.lp-page .lp-founder-quote {
	color: var(--lm-ink);
	font-size: 19px;
	font-weight: 600;
	line-height: 1.45;
	letter-spacing: -0.01em;
}

@media (min-width: 768px)  { .lp-page .lp-founder-quote { font-size: 21px; } }
@media (min-width: 1200px) { .lp-page .lp-founder-quote { font-size: 24px; } }

.lp-page .lp-closing .lp-founder-name {
	margin-top: 22px;
	color: #7c8688;
	font-family: var(--lm-sans);
	font-size: 16px;
}


/* ---------- Logo above the section heading ---------- */
.lp-page .lp-logo {
	width: 74px;
	height: auto;
	margin: 0 auto 50px;
}


/* ==========================================================
   9  PRICING PAGE: TIER CARDS
   Narrower than the container on purpose: a card that spans the
   full width produces lines of well over a hundred characters,
   which is where reading gets tiring. Everything that is running
   text inside a card sits at 16.5px, so the card has one text size
   plus a heading, not five competing sizes.
   ========================================================== */

.lp-page .lp-tier {
	max-width: 860px;
	margin: 26px auto 0;
	padding: 30px 34px 26px;
	background: #fff;
	border: 1px solid var(--lp-line);
	border-radius: 18px;
	box-shadow: 0 1px 2px rgba(31, 91, 100, 0.05), 0 14px 34px -14px rgba(31, 91, 100, 0.20);
	text-align: left;
}

@media (max-width: 767px) {
	.lp-page .lp-tier { padding: 26px 22px 22px; }
}

.lp-page .lp-tier--highlight {
	border-color: rgba(45, 128, 139, 0.45);
}

.lp-page .lp-tier-head {
	display: flex;
	align-items: flex-start;
}

.lp-page .lp-tier-no {
	flex: none;
	width: 44px;
	height: 44px;
	margin-top: 2px;
	margin-right: 18px;
	border: 2px solid var(--lm-coral);
	border-radius: 50%;
	background: #fff;
	color: var(--lm-coral);
	font-family: var(--lm-sans);
	font-size: 16px;
	font-weight: 700;
	line-height: 40px;
	text-align: center;
}

.lp-page .lp-tier h2 {
	margin: 0 0 6px;
	font-size: 22px;
}

.lp-page .lp-tier-quota {
	display: block;
	margin-bottom: 9px;
	color: #1f5b64;
	font-family: var(--lm-sans);
	font-size: 15px;
	font-weight: 600;
}

.lp-page .lp-tier-tagline {
	max-width: 620px;
	color: var(--lp-body);
	font-size: 16.5px;
	line-height: 1.6;
}

.lp-page .lp-tier-includes {
	display: block;
	margin: 22px 0 2px;
	color: #7c8688;
	font-family: var(--lm-sans);
	font-size: 14px;
	font-weight: 600;
}

/* One column stays inside a comfortable measure, two columns only
   once the card is wide enough for them */
.lp-page .lp-tier-list {
	max-width: 640px;
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 992px) {
	.lp-page .lp-tier-list {
		max-width: none;
		-webkit-column-count: 2;
		-webkit-column-gap: 30px;
		column-count: 2;
		column-gap: 30px;
	}
}

.lp-page .lp-tier-list li {
	position: relative;
	padding: 0 0 13px 32px;
	color: var(--lp-body);
	font-size: 16.5px;
	line-height: 1.55;
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	break-inside: avoid;
}

/* Check mark inside a tinted disc. The disc is a soft petrol wash
   rather than a solid fill, so eleven of them in a row stay calm. */
.lp-page .lp-tier-list li::before {
	content: "\f00c";
	position: absolute;
	top: 3px;
	left: 0;
	width: 21px;
	height: 21px;
	border-radius: 50%;
	background: rgba(45, 128, 139, 0.13);
	color: var(--lm-petrol);
	font-family: FontAwesome;
	font-size: 10px;
	line-height: 21px;
	text-align: center;
}

/* The row spacing sits on the children. padding-top drops by the 9px
   the children now contribute, and the negative bottom margin takes the
   lower 9px back off again, so the box measures the same as with gap. */
.lp-page .lp-tier-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	margin-top: 22px;
	margin-bottom: -9px;
	padding-top: 11px;
	border-top: 1px dashed var(--lp-line);
}

.lp-page .lp-tier-foot > * {
	margin: 9px 18px 9px 0;
}

.lp-page .lp-tier-foot > *:last-child {
	margin-right: 0;
}

/* Same 9px as the siblings, minus the 10px that the pills add below
   themselves, hence -1px at the bottom. */
.lp-page .lp-terms {
	display: flex;
	flex-wrap: wrap;
	margin: 9px 18px -1px 0;
}

.lp-page .lp-term {
	min-width: 88px;
	margin: 0 10px 10px 0;
	padding: 9px 15px;
	border: 1px solid var(--lp-line);
	border-radius: 12px;
	background: #fcfbfa;
	text-align: center;
}

.lp-page .lp-term-dur {
	display: block;
	margin-bottom: 3px;
	color: #7c8688;
	font-family: var(--lm-sans);
	font-size: 13.5px;
	font-weight: 600;
}

.lp-page .lp-term-amt {
	display: block;
	color: var(--lm-ink);
	font-family: var(--lm-sans);
	font-size: 18px;
	font-weight: 700;
}

.lp-page .lp-term--best {
	background: var(--lm-petrol);
	border-color: var(--lm-petrol);
}

.lp-page .lp-term--best .lp-term-dur,
.lp-page .lp-term--best .lp-term-amt {
	color: #ffffff;
}

.lp-page .lp-price {
	color: var(--lm-ink);
	font-family: var(--lm-sans);
	font-size: 22px;
	font-weight: 700;
}

.lp-page .lp-price span {
	font-size: 15px;
	font-weight: 400;
}

.lp-page .lp-price small {
	display: block;
	margin-top: 4px;
	color: #7c8688;
	font-size: 14px;
	font-weight: 400;
}

.lp-page .lp-tier-note {
	max-width: 640px;
	margin-top: 18px;
	padding: 12px 16px;
	background: var(--lm-grey-bg);
	border-left: 3px solid var(--lm-petrol);
	border-radius: 8px;
	color: var(--lp-body);
	font-size: 16px;
	line-height: 1.55;
}

/* Enterprise has two variants inside one card */
.lp-page .lp-variant + .lp-variant {
	margin-top: 6px;
	padding-top: 24px;
	border-top: 1px dashed var(--lp-line);
}

.lp-page .lp-variant h3 {
	margin: 22px 0 8px;
	font-size: 18px;
}

.lp-page .lp-variant p {
	max-width: 640px;
	color: var(--lp-body);
	font-size: 16.5px;
	line-height: 1.6;
}

.lp-page .lp-net {
	display: block;
	margin-top: 14px;
	color: #7c8688;
	font-size: 14px;
}

/* ==========================================================
   PRICING PAGE: WHICH PACKAGE FITS
   Replaces the comparison matrix. Because every package contains
   the ones below it, a matrix could only ever be a staircase of
   check marks, which repeats what the cards already say. This
   section answers the question people actually have at this point:
   translate a situation into a package.
   ========================================================== */

.lp-page .lp-guide {
	max-width: 860px;
	margin: 34px auto 0;
}

/* The 6px row spacing only shows up once the row wraps, so it sits on
   the first column and comes off the bottom padding again. */
.lp-page .lp-guide-row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	padding: 22px 4px 16px;
	border-bottom: 1px solid var(--lp-line);
	text-align: left;
}

.lp-page .lp-guide-row:first-child {
	border-top: 1px solid var(--lp-line);
}

.lp-page .lp-guide-if {
	flex: 1 1 340px;
	margin: 0 28px 6px 0;
	color: var(--lp-body);
	font-size: 16.5px;
	line-height: 1.55;
}

.lp-page .lp-guide-then {
	flex: 0 0 auto;
	margin-bottom: 6px;
	font-family: var(--lm-sans);
	font-size: 16.5px;
	font-weight: 700;
	white-space: nowrap;
}

/* This is the strongest argument on the page, so it gets a surface
   of its own instead of sitting there as grey small print. */
.lp-page .lp-guide-foot {
	display: flex;
	margin-top: 30px;
	padding: 22px 26px;
	background: #eff5f5;
	border: 1px solid rgba(45, 128, 139, 0.20);
	border-radius: 16px;
	color: var(--lm-ink);
	font-size: 17px;
	line-height: 1.6;
	text-align: left;
}

.lp-page .lp-guide-foot::before {
	content: "\f01b";
	flex: none;
	margin-right: 16px;
	color: var(--lm-petrol);
	font-family: FontAwesome;
	font-size: 21px;
	line-height: 1.35;
}