/* ==========================================================================
   UR Reviews landing page (Landing Page template, page-templates/landing.php)

   Scope: every selector starts with .bg-lp, the body class that
   inc/landing-page.php adds on that template. Enqueued at wp_enqueue_scripts
   priority 1000, after css/customizer-import.css (999); no !important anywhere.

   Mobile-first. Base rules = the 390 frame, applied up to 921px (Astra's
   tablet breakpoint). @media (min-width: 922px) = the 1366 desktop frame,
   with gutters that scale down between 922 and 1366 and centred max-width
   containers above 1366.

   Two design conventions worth knowing before editing numbers here:
   - Figma strokes are inside the box, so a "padding 20, 1px border" card is
     padding 19px + border 1px in CSS (border-box) to keep the same height.
   - Several text styles use Figma's cap-height trim, so their boxes are cap
     height, not line height (a 16px button label is a 12px box). The trim
     block at the end reproduces that with text-box-trim where supported and
     approximates it (line-height .75 / negative margins) where not.
   ========================================================================== */

/* --- Tokens --------------------------------------------------------------- */

.bg-lp {
	--lp-navy: #1e293b;
	--lp-light-navy: #475569;
	--lp-slate-blue: #8b9dbc;
	--lp-slate-grey: #f1f5f9;
	--lp-light-grey: #f7f8fa;
	--lp-light-blue: #dbeafe;
	--lp-yellow: #f2d06f;
	--lp-warm-grey: #efefef;
	--lp-cool-grey: #babcbe;
	--lp-white: #fff;
	--lp-card-border: rgba(186, 188, 190, .25);
	--lp-font: 'Plus Jakarta Sans', sans-serif;
	--lp-gutter: 20px;       /* card sections: 60 at 1366 */
	--lp-gutter-open: 20px;  /* open sections: 120 at 1366 */
}

@media (min-width: 922px) {
	.bg-lp {
		--lp-gutter: clamp(24px, 4.392vw, 60px);
		--lp-gutter-open: clamp(48px, 8.785vw, 120px);
	}
}

/* --- Page shell (Astra wrappers) ---------------------------------------- */

/* Header backdrop (decided by Anshul, 2026-10-01): the Figma landing-header
   gradient, frame 4797:241 (rgba(30,41,59,.5) fading to 0 at 92.6%, over
   white), replaces the site's top band (style.css body.ast-single-post:
   #E2E6EE fading over 6.43% of the page) behind the real global header.
   It is painted on the body as a no-repeat image of fixed height, so the
   fade ends just under the header region like the frame instead of
   stretching with the page. In Figma the band is 128 tall (20 + 88 bar +
   20) and the fade completes at 118.5, 10px past the bar. Here it completes
   about 12px past whatever the header ends with at that width (logged out):
   - up to 767: mobile bar 16 to 82 (style.css sets #masthead top: 1rem),
     no utility bar: 102px (fade ends at 94)
   - 768 to 921: mobile bar 0 to 66: 84px (fade ends at 78)
   - 922 up: desktop bar 20 to 108 plus the fixed utility bar to 146:
     170px (fade ends at 157)
   html body.bg-lp (0,1,2) outranks body.ast-single-post (0,1,1) whatever
   the source order; no !important; style.css untouched; scoped to the
   template's body class. #content and .bg-lp-main below are transparent so
   the fade is not cut off where the content starts (108 / 66 / 66). */

html body.bg-lp {
	background-color: var(--lp-white);
	background-image: linear-gradient(180deg, rgba(30, 41, 59, .5) 0%, rgba(30, 41, 59, 0) 92.6%);
	background-repeat: no-repeat;
	background-size: 100% 102px;
}

@media (min-width: 768px) {
	html body.bg-lp {
		background-size: 100% 84px;
	}
}

@media (min-width: 922px) {
	html body.bg-lp {
		background-size: 100% 170px;
	}
}

.bg-lp #content {
	background: transparent;
}

/* Utility bar links (Documentation Tips / Client Portal): style.css asks for
   weight 600 (#menu-header-top-menu a.menu-link) but the site never loads
   that weight, so everywhere else they fall back to 700. This template loads
   600 for the hero stat labels (inc/landing-page.php), which would make these
   two links true semibold here only; pin them to 700 so the header stays
   pixel-identical to the service pages. (1,2,1) beats (1,1,1). */
.bg-lp #menu-header-top-menu a.menu-link {
	font-weight: 700;
}

.bg-lp #content .ast-container {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
}

.bg-lp .site .site-content #primary { /* outranks Astra's .ast-page-builder-template .site .site-content #primary */
	float: none;
	width: 100%;
	margin: 0;
	padding: 0;
}

.bg-lp .bg-lp-main {
	font-family: var(--lp-font);
	color: var(--lp-navy);
	background: transparent; /* the body is white; see the header backdrop above */
}

.bg-lp .bg-lp-main *,
.bg-lp .bg-lp-main *::before,
.bg-lp .bg-lp-main *::after {
	box-sizing: border-box;
}

/* Element resets. :where() keeps them at (0,2,0) so every component rule
   below wins by source order; they still beat Astra's element rules and
   core's :root :where(.is-layout-flow) flow margins. */
.bg-lp .bg-lp-main :where(h1, h2, h3, p, figure, .wp-block-group, .wp-block-buttons, .wp-block-button, .wp-block-details, details, summary) {
	margin: 0;
	padding: 0;
}

.bg-lp .bg-lp-main :where(h1, h2, h3) {
	font-family: var(--lp-font);
	font-weight: 800;
	color: var(--lp-navy);
	letter-spacing: 0;
	text-transform: none;
}

.bg-lp .bg-lp-main :where(p) {
	font-family: var(--lp-font);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.6;
	color: var(--lp-navy);
}

.bg-lp .bg-lp-main :where(strong) {
	font-weight: 800;
}

.bg-lp .bg-lp-main mark.has-inline-color {
	background: transparent;
}

.bg-lp .bg-lp-main :where(img) {
	display: block;
	max-width: 100%;
	height: auto;
	border: 0;
}

.bg-lp .bg-lp-main :where(a) {
	text-decoration: none;
}

/* Photo slots ship empty; hide the figure until an image is set. */
.bg-lp .bg-lp-main .bg-lp-photo:not(:has(img[src])) {
	display: none;
}

/* --- Sections ------------------------------------------------------------ */

.bg-lp .bg-lp-section {
	max-width: 1366px;
	margin: 0 auto;
	padding: 0 var(--lp-gutter);
}

.bg-lp .bg-lp-section--open {
	padding: 80px var(--lp-gutter-open);
}

.bg-lp .bg-lp-section__header {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 15px;
}

/* --- Labels ------------------------------------------------------------- */

.bg-lp .bg-lp-main .bg-lp-label {
	font-family: var(--lp-font);
	font-weight: 700;
}

.bg-lp .bg-lp-main .bg-lp-label--box {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	padding: 3px 7px; /* design 4 8, border inside */
	border: 1px solid var(--lp-light-navy);
	border-radius: 8px;
	color: var(--lp-light-navy);
	font-size: 12px;
	line-height: 20px;
	letter-spacing: -.036px;
}

.bg-lp .bg-lp-main .bg-lp-label--dark {
	border-color: var(--lp-slate-blue);
	color: var(--lp-warm-grey);
}

.bg-lp .bg-lp-main .bg-lp-label--dot {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--lp-slate-blue);
	font-size: 12px;
	line-height: 24px;
}

.bg-lp .bg-lp-main .bg-lp-label--dot::before {
	content: "";
	flex: none;
	width: 4px;
	height: 4px;
	border-radius: 1px;
	background: currentColor;
}

/* --- Buttons ------------------------------------------------------------ */
/* The primary colour lives on the block wrapper, not the link: the theme's
   global `.wp-block-button .wp-block-button__link:focus { background: initial
   !important }` would otherwise blank the button on focus. Wrappers are flex
   so the link (a cap-trimmed box) sets their height, not a line box. */

.bg-lp .bg-lp-btn {
	display: inline-flex;
	margin: 0;
	vertical-align: top;
}

.bg-lp .bg-lp-btn > a {
	flex: 1 1 auto;
}

.bg-lp .bg-lp-btn--primary {
	background: var(--lp-navy);
	border-radius: 10px;
}

.bg-lp .bg-lp-btn--primary > a {
	display: block;
	padding: 15px 20px;
	background: transparent;
	border: 0;
	border-radius: 10px;
	box-shadow: none;
	color: var(--lp-white);
	font-family: var(--lp-font);
	font-size: 14px;
	font-weight: 800;
	line-height: 18px;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
}

.bg-lp .bg-lp-btn--primary > a::after {
	content: "";
	display: inline-block;
	vertical-align: 2px;
	width: 4px;
	height: 6px;
	margin-left: 6px;
	background: url(../img/lp/btn-chevron.svg) center / 100% 100% no-repeat;
}

.bg-lp .bg-lp-btn--primary > a:hover,
.bg-lp .bg-lp-btn--primary > a:focus,
.bg-lp .bg-lp-btn--primary > a:active {
	color: var(--lp-white);
	background: transparent;
	text-decoration: none;
}

.bg-lp .bg-lp-btn--text > a {
	display: block;
	flex: 0 0 auto;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: var(--lp-navy);
	font-family: var(--lp-font);
	font-size: 14px;
	font-weight: 800;
	line-height: 18px;
	text-decoration: none;
	white-space: nowrap;
}

.bg-lp .bg-lp-btn--text > a::after {
	content: "";
	display: inline-block;
	vertical-align: 3px;
	width: 6px;
	height: 6px;
	margin-left: 3px;
	background: url(../img/lp/btn-arrow.svg) center / 100% 100% no-repeat;
}

.bg-lp .bg-lp-btn--text > a:hover,
.bg-lp .bg-lp-btn--text > a:focus,
.bg-lp .bg-lp-btn--text > a:active {
	color: var(--lp-navy);
	background: transparent;
	text-decoration: none;
}

/* Keyboard focus: the theme's global `:focus { outline: 0 !important }` kills
   rings on the focused element itself, so draw them on the wrapper instead. */
.bg-lp .bg-lp-btn:has(> a:focus-visible) {
	outline: 2px solid var(--lp-slate-blue);
	outline-offset: 3px;
}

/* --- Hero ---------------------------------------------------------------- */

/* Hero top spacing = the first section of the service pages
   (/clinical-documentation/: 50px below the masthead on mobile, 60px from
   768 up), measured logged out; the Figma frame's 11px was for the old
   landing header. */
.bg-lp .bg-lp-hero {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding-top: 50px;
	padding-bottom: 20px;
}

@media (min-width: 768px) {
	.bg-lp .bg-lp-hero {
		padding-top: 60px;
	}
}

.bg-lp .bg-lp-hero__card {
	display: flex;
	flex-direction: column;
	gap: 20px;
	width: 100%;
	padding: 20px 20px 30px;
	background: var(--lp-slate-grey);
	border-radius: 15px;
}

/* Mobile order is label, title, image, body, buttons: the content group
   dissolves so its children and the image share one column and reorder. */
.bg-lp .bg-lp-hero__content {
	display: contents;
}

.bg-lp .bg-lp-hero__label {
	order: 1;
	align-self: flex-start;
}

.bg-lp .bg-lp-hero__title {
	order: 2;
	font-size: 28px;
	line-height: 36px;
	letter-spacing: -.56px;
}

.bg-lp .bg-lp-hero__image {
	order: 3;
	height: 260px;
	overflow: hidden;
	border-radius: 25px;
}

.bg-lp .bg-lp-hero__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bg-lp .bg-lp-hero__body {
	order: 4;
	font-size: 14px;
	line-height: 22px;
	color: var(--lp-light-navy);
}

.bg-lp .bg-lp-hero__actions {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 20px;
	order: 5;
}

.bg-lp .bg-lp-hero__actions .bg-lp-btn--primary {
	display: flex;
}

.bg-lp .bg-lp-hero__actions .bg-lp-btn--text {
	display: flex;
	justify-content: center;
}

/* Stat bar */
.bg-lp .bg-lp-stats {
	display: flex;
	flex-direction: column;
	gap: 40px; /* 20 + divider + 20 */
	width: 100%;
	padding: 30px 20px;
	background: var(--lp-slate-grey);
	border-radius: 16px;
}

.bg-lp .bg-lp-stat {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.bg-lp .bg-lp-stat + .bg-lp-stat::before {
	content: "";
	position: absolute;
	top: -20px;
	right: 0;
	left: 0;
	height: 1px;
	background: var(--lp-cool-grey);
}

.bg-lp .bg-lp-main .bg-lp-stat__number {
	font-size: 24px;
	font-weight: 800;
	line-height: 44px;
	letter-spacing: -.48px;
	color: var(--lp-navy);
}

.bg-lp .bg-lp-stat__number sup {
	position: static;
	vertical-align: 6px;
	font-size: 15.48px;
	line-height: 0;
	color: var(--lp-light-navy);
}

.bg-lp .bg-lp-main .bg-lp-stat__label {
	font-size: 12px;
	font-weight: 600;
	line-height: 18px;
	letter-spacing: -.048px;
	color: var(--lp-light-navy);
}

/* --- Why Us -------------------------------------------------------------- */

.bg-lp .bg-lp-why__inner {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.bg-lp .bg-lp-why__title {
	font-size: 28px;
	line-height: 36px;
	letter-spacing: -.56px;
}

.bg-lp .bg-lp-why__title br {
	display: none;
}

.bg-lp .bg-lp-why__cards {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.bg-lp .bg-lp-card {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 19px 39px 19px 14px; /* design 20 40 20 15, border inside */
	border: 1px solid var(--lp-card-border);
	border-radius: 16px;
}

.bg-lp .bg-lp-card--neutral { background: var(--lp-light-grey); }
.bg-lp .bg-lp-card--blue    { background: var(--lp-light-blue); }
.bg-lp .bg-lp-card--yellow  { background: var(--lp-yellow); }

.bg-lp .bg-lp-card__title {
	font-size: 20px;
	line-height: 25px;
	letter-spacing: -.4px;
}

.bg-lp .bg-lp-main .bg-lp-card__body {
	font-size: 14px;
	font-weight: 500;
	line-height: 24px;
	color: var(--lp-light-navy);
}

/* --- What's Included ---------------------------------------------------- */

.bg-lp .bg-lp-included__card {
	display: flex;
	flex-direction: column;
	gap: 40px;
	width: 100%;
	padding: 40px 20px;
	background: var(--lp-navy);
	border-radius: 14px;
}

.bg-lp .bg-lp-main .bg-lp-included__title {
	font-size: 28px;
	line-height: 36px;
	letter-spacing: -.56px;
	color: var(--lp-white);
}

.bg-lp .bg-lp-main .bg-lp-included__intro {
	font-size: 14px;
	line-height: 1.8;
	color: var(--lp-slate-grey);
}

.bg-lp .bg-lp-included__grid {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.bg-lp .bg-lp-included__item {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}

.bg-lp .bg-lp-included__check {
	flex: none;
	width: 22px;
	height: 22px;
}

.bg-lp .bg-lp-included__check img {
	width: 22px;
	height: 22px;
}

.bg-lp .bg-lp-included__text {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
	padding-top: 4px;
}

.bg-lp .bg-lp-main .bg-lp-included__item-title {
	font-size: 20px;
	line-height: 25px;
	letter-spacing: -.16px;
	color: var(--lp-white);
}

.bg-lp .bg-lp-main .bg-lp-included__item-body {
	font-size: 14px;
	font-weight: 500;
	line-height: 24px;
	color: var(--lp-slate-grey);
}

/* --- Access (#coverage) -------------------------------------------------- */

.bg-lp .bg-lp-access {
	display: flex;
	flex-direction: column;
	gap: 40px;
	scroll-margin-top: 20px; /* mobile: no sticky header below 922px */
}

/* #coverage is the one anchor target. With JavaScript on, Astra's own
   frontend.js (scrollToIDHandler, on the hero button's click and again 750ms
   after a direct #coverage load) scrolls the section to the summed height of
   the header parts marked data-stick-support: 146px on desktop (20 + 88 bar +
   38 utility bar), 0 on mobile, where nothing is sticky. It works from layout
   offsets, so the AOS pre-reveal transform does not shift it. The CSS
   scroll-margin only decides the position without JavaScript: on desktop the
   utility bar is fixed by CSS alone (css/customizer-import.css
   .ast-above-header), so clear the bar, the utility bar and the usual 20px. */
@media (min-width: 922px) {
	.bg-lp .bg-lp-access {
		scroll-margin-top: 166px; /* 20 + 88 + 38 + 20 */
	}
}

.bg-lp .bg-lp-access__title {
	font-size: 28px;
	line-height: 36px;
	letter-spacing: -.56px;
}

.bg-lp .bg-lp-access__title br {
	display: none;
}

.bg-lp .bg-lp-access__cards,
.bg-lp .bg-lp-access__row {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.bg-lp .bg-lp-plan {
	display: flex;
	flex-direction: column;
	padding: 19px 39px 19px 14px; /* design 20 40 20 15, border inside */
	border: 1px solid var(--lp-card-border);
	border-radius: 16px;
}

.bg-lp .bg-lp-plan--yellow { background: var(--lp-yellow); }
.bg-lp .bg-lp-plan--navy   { background: var(--lp-navy); }

.bg-lp .bg-lp-plan__title {
	font-size: 24px;
	line-height: 30px;
	letter-spacing: -.48px;
	text-transform: capitalize;
}

.bg-lp .bg-lp-main .bg-lp-plan__fit {
	margin-top: 12px;
	font-size: 14px;
	font-weight: 700;
	line-height: 18px;
	letter-spacing: -.112px;
	color: var(--lp-light-navy);
}

.bg-lp .bg-lp-main .bg-lp-plan__body {
	margin-top: 20px;
	font-size: 14px;
	font-weight: 500;
	line-height: 24px;
	color: var(--lp-light-navy);
}

.bg-lp .bg-lp-main .bg-lp-plan--navy .bg-lp-plan__title { color: var(--lp-white); }
.bg-lp .bg-lp-main .bg-lp-plan--navy .bg-lp-plan__fit   { color: var(--lp-light-blue); }
.bg-lp .bg-lp-main .bg-lp-plan--navy .bg-lp-plan__body  { color: var(--lp-slate-grey); }

.bg-lp .bg-lp-addons {
	display: flex;
	flex-direction: column;
	gap: 40px; /* 20 + divider + 20 */
	padding: 19px 39px 19px 14px; /* design 20 40 20 15, border inside */
	background: var(--lp-slate-grey);
	border: 1px solid var(--lp-card-border);
	border-radius: 16px;
}

.bg-lp .bg-lp-addon {
	position: relative;
	display: flex;
	flex-direction: column;
}

.bg-lp .bg-lp-addon + .bg-lp-addon::before {
	content: "";
	position: absolute;
	top: -20px;
	right: 0;
	left: 0;
	height: 1px;
	background: var(--lp-cool-grey);
}

.bg-lp .bg-lp-addon__title {
	font-size: 20px;
	line-height: 25px;
	letter-spacing: -.4px;
	text-transform: capitalize;
}

.bg-lp .bg-lp-main .bg-lp-addon__fit {
	margin-top: 12px;
	font-size: 14px;
	font-weight: 700;
	line-height: 18px;
	letter-spacing: -.112px;
	color: var(--lp-light-navy);
}

.bg-lp .bg-lp-main .bg-lp-addon__body {
	margin-top: 20px;
	font-size: 14px;
	font-weight: 500;
	line-height: 24px;
	color: var(--lp-light-navy);
}

/* --- Data ---------------------------------------------------------------- */

.bg-lp .bg-lp-data__card {
	display: flex;
	flex-direction: column;
	gap: 40px;
	width: 100%;
	padding: 40px 20px;
	background: var(--lp-light-blue);
	border-radius: 14px;
}

.bg-lp .bg-lp-data__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.bg-lp .bg-lp-data__title {
	font-size: 28px;
	line-height: 36px;
	letter-spacing: -.56px;
}

.bg-lp .bg-lp-data__title br {
	display: none;
}

.bg-lp .bg-lp-main .bg-lp-data__lead {
	margin-top: 15px;
	font-size: 14px;
	line-height: 1.8;
	color: var(--lp-navy);
}

.bg-lp .bg-lp-data__points {
	display: flex;
	flex-direction: column;
	gap: 20px;
	width: 100%;
	margin-top: 40px;
}

.bg-lp .bg-lp-point {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding-right: 20px;
}

.bg-lp .bg-lp-main .bg-lp-point__number {
	font-size: 24px;
	font-weight: 800;
	line-height: 28px;
	letter-spacing: -.192px;
	color: var(--lp-navy);
}

.bg-lp .bg-lp-main .bg-lp-point__label {
	font-size: 14px;
	line-height: 1.6;
	color: var(--lp-light-navy);
}

.bg-lp .bg-lp-data__image {
	height: 200px;
	overflow: hidden;
	border-radius: 25px;
}

.bg-lp .bg-lp-data__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --- Brundage Advantage -------------------------------------------------- */

.bg-lp .bg-lp-adv {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.bg-lp .bg-lp-adv__title {
	font-size: 28px;
	line-height: 36px;
	letter-spacing: -.56px;
}

.bg-lp .bg-lp-adv__rows {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.bg-lp .bg-lp-adv__row {
	display: flex;
	align-items: flex-start;
	gap: 20px;
}

.bg-lp .bg-lp-adv__icon {
	flex: none;
	width: 60px;
	height: 60px;
}

.bg-lp .bg-lp-adv__icon img {
	width: 60px;
	height: 60px;
}

.bg-lp .bg-lp-adv__text {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}

.bg-lp .bg-lp-adv__row-title {
	font-size: 20px;
	line-height: 25px;
	letter-spacing: -.16px;
}

.bg-lp .bg-lp-main .bg-lp-adv__row-body {
	font-size: 12px;
	line-height: 1.6;
	color: var(--lp-light-navy);
}

/* --- FAQ ----------------------------------------------------------------- */

.bg-lp .bg-lp-faq__card {
	display: flex;
	flex-direction: column;
	gap: 40px;
	width: 100%;
	padding: 50px 20px;
	background: var(--lp-slate-grey);
	border-radius: 14px;
}

.bg-lp .bg-lp-faq__header {
	align-items: center;
	text-align: center;
}

.bg-lp .bg-lp-faq__title {
	font-size: 28px;
	line-height: 36px;
	letter-spacing: -.56px;
}

.bg-lp .bg-lp-faq__items {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.bg-lp .bg-lp-main .bg-lp-faq__item {
	padding: 14px 9px; /* design 15 10, border inside */
	background: var(--lp-white);
	border: 1px solid var(--lp-light-blue);
	border-radius: 10px;
}

.bg-lp .bg-lp-main .bg-lp-faq__item[open] {
	padding-bottom: 29px; /* design 30 */
	background: var(--lp-light-blue);
}

.bg-lp .bg-lp-main .bg-lp-faq__item > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	list-style: none;
	cursor: pointer;
	font-family: var(--lp-font);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: -.096px;
	color: var(--lp-navy);
}

.bg-lp .bg-lp-main .bg-lp-faq__item > summary::-webkit-details-marker {
	display: none;
}

.bg-lp .bg-lp-main .bg-lp-faq__item > summary::after {
	content: "";
	flex: none;
	width: 20px;
	height: 20px;
	border-radius: 5px;
	background: var(--lp-slate-grey) url(../img/lp/faq-chevron-down.svg) center / 16px 16px no-repeat;
}

.bg-lp .bg-lp-main .bg-lp-faq__item[open] > summary::after {
	background-image: url(../img/lp/faq-chevron-up.svg);
}

/* Keyboard focus ring on the toggle (see the note in Buttons). */
.bg-lp .bg-lp-main .bg-lp-faq__item > summary:focus-visible::after {
	box-shadow: 0 0 0 2px var(--lp-white), 0 0 0 4px var(--lp-slate-blue);
}

.bg-lp .bg-lp-main .bg-lp-faq__item > p {
	margin-top: 20px;
	font-size: 14px;
	line-height: 22px;
	color: var(--lp-light-navy);
}

/* --- CTA / pre-footer ---------------------------------------------------- */
/* The card overlaps the navy global footer the way the site's pre-footer does
   (style.css .partner-capture--wrapper .uagb-container-inner-blocks-wrap):
   a negative margin-bottom pulls the footer up under the card, and the
   footer's own top padding (305 / 220 / 224) leaves the same card-to-content
   distance as the homepage. Same values and breakpoints as the site rule:
   -97 up to 767, -144 from 768 to 991, -194 from 992. */

.bg-lp .bg-lp-cta {
	max-width: none;
	padding: 20px var(--lp-gutter) 0;
}

.bg-lp .bg-lp-cta__card {
	position: relative; /* paints above the (static) footer it overlaps */
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 15px;
	max-width: 1246px;
	margin: 0 auto -97px;
	padding: 40px 20px;
	background: var(--lp-yellow);
	border-radius: 14px;
	text-align: center;
}

@media (min-width: 768px) {
	.bg-lp .bg-lp-cta__card {
		margin-bottom: -144px;
	}
}

@media (min-width: 992px) {
	.bg-lp .bg-lp-cta__card {
		margin-bottom: -194px;
	}
}

.bg-lp .bg-lp-cta__title {
	font-size: 24px;
	line-height: 32px;
	letter-spacing: -.48px;
	text-transform: capitalize;
}

.bg-lp .bg-lp-main .bg-lp-cta__body {
	font-size: 16px;
	line-height: 26px;
	color: var(--lp-navy);
}

.bg-lp .bg-lp-cta__actions {
	display: flex;
	justify-content: center;
	margin-top: 25px; /* 15 (card gap) + 25 = 40 to the button */
}

/* --- Entrance animations (Spectra AOS, see inc/landing-page.php) -------- */
/* aos.min.css hides [data-aos^=fade] from first paint and only AOS reveals it.
   Until AOS has initialised (it adds .aos-init), keep content visible, so a
   blocked or failed script can never leave a section at opacity 0.
   (0,3,0) beats AOS's [data-aos^=fade][data-aos^=fade] (0,2,0). */
.bg-lp [data-aos]:not(.aos-init) {
	opacity: 1;
	transform: none;
	transition: none;
}

/* (0,4,0): beats AOS's revealed state [data-aos^=fade][data-aos^=fade].aos-animate
   (0,3,0), which would otherwise leave transform: translateZ(0) in place. */
@media (prefers-reduced-motion: reduce) {
	.bg-lp [data-aos][data-aos][data-aos] {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* The seam: nothing between the CTA section and the footer. */
.bg-lp .site-footer {
	margin-top: 0;
}

/* ==========================================================================
   Desktop (1366 frame). Astra's tablet breakpoint is 921px.
   ========================================================================== */

@media (min-width: 922px) {

	/* Sections */
	.bg-lp .bg-lp-section--open {
		padding: 120px var(--lp-gutter-open);
	}

	.bg-lp .bg-lp-section__header {
		gap: 20px;
	}

	/* Labels */
	.bg-lp .bg-lp-main .bg-lp-label--box {
		padding: 5px 7px; /* design 6 8, border inside */
		font-size: 14px;
		letter-spacing: -.042px;
	}

	.bg-lp .bg-lp-main .bg-lp-label--dot {
		font-size: 14px;
	}

	.bg-lp .bg-lp-main .bg-lp-label--dot::before {
		width: 8px;
		height: 8px;
		border-radius: 2px;
	}

	/* Buttons */
	.bg-lp .bg-lp-btn--primary > a {
		padding: 15px 30px;
		font-size: 16px;
		line-height: 20px;
	}

	.bg-lp .bg-lp-btn--primary > a::after {
		vertical-align: 1px;
		width: 5.219px;
		height: 9.392px;
		margin-left: 10px;
	}

	.bg-lp .bg-lp-btn--lg > a {
		padding: 20px 30px;
	}

	.bg-lp .bg-lp-btn--text > a {
		font-size: 16px;
		line-height: 20px;
	}

	.bg-lp .bg-lp-btn--text > a::after {
		margin-left: 5px;
	}

	/* Hero */
	.bg-lp .bg-lp-hero {
		padding-bottom: 11px; /* the 1366 frame (852 = 11 + 632 + 20 + 178 + 11); the top is 60 now, see the base rule */
	}

	.bg-lp .bg-lp-hero__card {
		display: grid;
		grid-template-columns: minmax(0, 560fr) minmax(0, 506fr);
		align-items: stretch;
		gap: 60px;
		padding: 40px 60px;
		background: rgba(241, 245, 249, .85);
		border-radius: 25px;
	}

	.bg-lp .bg-lp-hero__content {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}

	.bg-lp .bg-lp-hero__label,
	.bg-lp .bg-lp-hero__title,
	.bg-lp .bg-lp-hero__image,
	.bg-lp .bg-lp-hero__body,
	.bg-lp .bg-lp-hero__actions {
		order: 0;
	}

	.bg-lp .bg-lp-hero__title {
		margin-top: 20px;
		font-size: 48px;
		line-height: 56px;
		letter-spacing: -.96px;
	}

	.bg-lp .bg-lp-hero__body {
		max-width: 560px;
		margin-top: 60px;
		font-size: 20px;
		line-height: 1.8;
		color: var(--lp-navy);
	}

	.bg-lp .bg-lp-hero__actions {
		flex-direction: row;
		align-items: center;
		margin-top: 40px;
	}

	.bg-lp .bg-lp-hero__actions .bg-lp-btn--primary,
	.bg-lp .bg-lp-hero__actions .bg-lp-btn--text {
		display: inline-flex;
	}

	.bg-lp .bg-lp-hero__image {
		align-self: stretch;
		height: auto;
		min-height: 0;
	}

	.bg-lp .bg-lp-stats {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		column-gap: 60px; /* 30 + divider + 30 */
		row-gap: 0;
		padding: 40px 30px;
		background: rgba(241, 245, 249, .85);
		border-radius: 25px;
	}

	.bg-lp .bg-lp-stat {
		gap: 10px;
	}

	.bg-lp .bg-lp-stat + .bg-lp-stat::before {
		top: 0;
		right: auto;
		bottom: 0;
		left: -30px;
		width: 1px;
		height: auto;
	}

	.bg-lp .bg-lp-main .bg-lp-stat__number {
		font-size: 36px;
		letter-spacing: -.72px;
	}

	.bg-lp .bg-lp-stat__number sup {
		vertical-align: 9px;
		font-size: 23.22px;
	}

	.bg-lp .bg-lp-main .bg-lp-stat__label {
		font-size: 16px;
		line-height: 22px;
		letter-spacing: -.064px;
	}

	/* Why Us */
	.bg-lp .bg-lp-why__inner {
		gap: 60px;
		border-bottom: 1px solid var(--lp-warm-grey);
	}

	.bg-lp .bg-lp-why__header {
		gap: 40px;
	}

	.bg-lp .bg-lp-why__title {
		font-size: 38px;
		line-height: 46px;
		letter-spacing: -.76px;
	}

	.bg-lp .bg-lp-why__title br {
		display: inline;
	}

	.bg-lp .bg-lp-why__cards {
		gap: 20px;
	}

	.bg-lp .bg-lp-card {
		padding: 39px 39px 39px 19px; /* design 40 40 40 20, border inside */
	}

	.bg-lp .bg-lp-card__title {
		font-size: 24px;
		line-height: 30px;
		letter-spacing: -.48px;
	}

	.bg-lp .bg-lp-main .bg-lp-card__body {
		font-size: 16px;
		line-height: 2;
		letter-spacing: -.064px;
		color: var(--lp-navy);
	}

	/* What's Included */
	.bg-lp .bg-lp-included__card {
		gap: 60px;
		padding: 100px 60px;
		border-radius: 25px;
	}

	.bg-lp .bg-lp-main .bg-lp-included__title {
		font-size: 48px;
		line-height: 56px;
		letter-spacing: -.96px;
	}

	.bg-lp .bg-lp-main .bg-lp-included__intro {
		margin-top: 20px; /* 20 (header gap) + 20 = 40 below the title */
		font-size: 18px;
	}

	.bg-lp .bg-lp-included__grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 20px;
		row-gap: 60px;
	}

	.bg-lp .bg-lp-included__item {
		flex-direction: column;
		gap: 20px;
	}

	.bg-lp .bg-lp-included__check,
	.bg-lp .bg-lp-included__check img {
		width: 34px;
		height: 34px;
	}

	.bg-lp .bg-lp-included__text {
		gap: 20px;
		padding-top: 14px;
		padding-right: 20px;
	}

	.bg-lp .bg-lp-main .bg-lp-included__item-title {
		font-size: 24px;
		line-height: 28px;
		letter-spacing: -.192px;
	}

	.bg-lp .bg-lp-main .bg-lp-included__item-body {
		font-size: 18px;
		font-weight: 400;
		line-height: 1.6;
	}

	/* Access */
	.bg-lp .bg-lp-access {
		gap: 60px;
		padding-top: 140px;
		padding-bottom: 140px;
	}

	.bg-lp .bg-lp-access__title {
		font-size: 48px;
		line-height: 56px;
		letter-spacing: -.96px;
	}

	.bg-lp .bg-lp-access__title br {
		display: inline;
	}

	.bg-lp .bg-lp-access__cards {
		gap: 30px;
	}

	.bg-lp .bg-lp-access__row {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: stretch;
		gap: 30px;
	}

	.bg-lp .bg-lp-plan {
		padding: 60px 60px 60px 40px;
		border: 0;
		border-radius: 25px;
	}

	.bg-lp .bg-lp-plan__title {
		font-size: 38px;
		line-height: 1.2;
		letter-spacing: -.76px;
	}

	.bg-lp .bg-lp-main .bg-lp-plan__fit {
		margin-top: 20px;
		font-size: 16px;
		line-height: 20px;
		letter-spacing: -.128px;
	}

	.bg-lp .bg-lp-main .bg-lp-plan__body {
		margin-top: 30px;
		font-size: 18px;
		font-weight: 400;
		line-height: 1.6;
	}

	.bg-lp .bg-lp-addons {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 80px; /* 40 + divider + 40 */
		row-gap: 0;
		padding: 40px 30px;
		border: 0;
		border-radius: 25px;
	}

	.bg-lp .bg-lp-addon + .bg-lp-addon::before {
		top: 0;
		right: auto;
		bottom: 0;
		left: -40px;
		width: 1px;
		height: auto;
	}

	.bg-lp .bg-lp-addon__title {
		font-size: 30px;
		line-height: 44px;
		letter-spacing: -.76px;
	}

	.bg-lp .bg-lp-main .bg-lp-addon__fit {
		margin-top: 20px;
		font-size: 16px;
		line-height: 20px;
		letter-spacing: -.128px;
	}

	.bg-lp .bg-lp-main .bg-lp-addon__body {
		margin-top: 30px;
		font-size: 16px;
		font-weight: 400;
		line-height: 1.6;
	}

	/* Data */
	.bg-lp .bg-lp-data__card {
		display: grid;
		grid-template-columns: minmax(0, 540fr) minmax(0, 506fr);
		align-items: stretch;
		gap: 80px;
		padding: 100px 60px;
		border-radius: 25px;
	}

	.bg-lp .bg-lp-data__title {
		font-size: 48px;
		line-height: 56px;
		letter-spacing: -.96px;
	}

	.bg-lp .bg-lp-data__title br {
		display: inline;
	}

	.bg-lp .bg-lp-main .bg-lp-data__lead {
		margin-top: 60px;
		font-size: 22px;
	}

	.bg-lp .bg-lp-data__points {
		gap: 30px;
		margin-top: 60px;
	}

	.bg-lp .bg-lp-point {
		gap: 14px;
	}

	.bg-lp .bg-lp-main .bg-lp-point__number {
		font-size: 28px;
		letter-spacing: -.224px;
	}

	.bg-lp .bg-lp-main .bg-lp-point__label {
		font-size: 18px;
	}

	.bg-lp .bg-lp-data__image {
		align-self: stretch;
		height: auto;
		min-height: 0;
	}

	/* Advantage */
	.bg-lp .bg-lp-adv {
		display: grid;
		grid-template-columns: minmax(0, 500fr) minmax(0, 546fr);
		align-items: start;
		column-gap: 80px;
		padding-top: 140px;
		padding-bottom: 140px;
	}

	.bg-lp .bg-lp-adv__title {
		font-size: 48px;
		line-height: 56px;
		letter-spacing: -.96px;
	}

	.bg-lp .bg-lp-adv__rows {
		gap: 30px;
	}

	.bg-lp .bg-lp-adv__icon,
	.bg-lp .bg-lp-adv__icon img {
		width: 80px;
		height: 80px;
	}

	.bg-lp .bg-lp-adv__text {
		gap: 20px;
	}

	.bg-lp .bg-lp-adv__row-title {
		font-size: 24px;
		line-height: 28px;
		letter-spacing: -.192px;
	}

	.bg-lp .bg-lp-main .bg-lp-adv__row-body {
		font-size: 18px;
	}

	/* FAQ */
	.bg-lp .bg-lp-faq {
		padding-bottom: 60px;
	}

	.bg-lp .bg-lp-faq__card {
		gap: 60px;
		padding: 80px;
		border-radius: 25px;
	}

	.bg-lp .bg-lp-faq__header {
		gap: 40px;
	}

	.bg-lp .bg-lp-faq__title {
		font-size: 48px;
		line-height: 56px;
		letter-spacing: -.96px;
	}

	.bg-lp .bg-lp-faq__items {
		gap: 20px;
	}

	.bg-lp .bg-lp-main .bg-lp-faq__item {
		padding: 19px 29px; /* design 20 30, border inside */
	}

	.bg-lp .bg-lp-main .bg-lp-faq__item[open] {
		padding-bottom: 29px; /* design 30 */
	}

	.bg-lp .bg-lp-main .bg-lp-faq__item > summary {
		font-size: 24px;
		line-height: 1.6;
		letter-spacing: -.144px;
	}

	.bg-lp .bg-lp-main .bg-lp-faq__item > summary::after {
		width: 48px;
		height: 48px;
		border-radius: 10px;
		background-size: 24px 24px;
	}

	.bg-lp .bg-lp-main .bg-lp-faq__item > p {
		font-size: 18px;
		line-height: 1.6;
	}

	/* CTA */
	.bg-lp .bg-lp-cta {
		padding-top: 0;
	}

	.bg-lp .bg-lp-cta__card {
		gap: 40px;
		padding: 80px;
		border-radius: 25px;
	}

	.bg-lp .bg-lp-cta__title {
		font-size: 44px;
		line-height: normal;
		letter-spacing: -.88px;
	}

	.bg-lp .bg-lp-main .bg-lp-cta__body {
		font-size: 22px;
		line-height: 1.8;
	}

	.bg-lp .bg-lp-cta__actions {
		margin-top: 0;
	}
}

@media (min-width: 1280px) {
	.bg-lp .bg-lp-adv__title {
		white-space: nowrap;
	}
}

/* ==========================================================================
   Cap-height trimmed text (see the header comment). Which styles are trimmed
   follows the frames exactly: button labels and "Best fit" lines everywhere;
   the What's Included item titles and hero stat numbers on mobile only; the
   Why Us H2 and the card, plan and add-on titles on desktop only.
   ========================================================================== */

.bg-lp .bg-lp-btn--primary > a,
.bg-lp .bg-lp-btn--text > a,
.bg-lp .bg-lp-main .bg-lp-plan__fit,
.bg-lp .bg-lp-main .bg-lp-addon__fit,
.bg-lp .bg-lp-main .bg-lp-included__item-title,
.bg-lp .bg-lp-main .bg-lp-stat__number {
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
}

@media (min-width: 922px) {
	.bg-lp .bg-lp-main .bg-lp-included__item-title,
	.bg-lp .bg-lp-main .bg-lp-stat__number {
		text-box-trim: none;
	}

	.bg-lp .bg-lp-why__title,
	.bg-lp .bg-lp-card__title,
	.bg-lp .bg-lp-plan__title,
	.bg-lp .bg-lp-addon__title {
		text-box-trim: trim-both;
		text-box-edge: cap alphabetic;
	}
}

@supports not (text-box-trim: trim-both) {
	.bg-lp .bg-lp-btn--primary > a,
	.bg-lp .bg-lp-btn--text > a,
	.bg-lp .bg-lp-main .bg-lp-plan__fit,
	.bg-lp .bg-lp-main .bg-lp-addon__fit,
	.bg-lp .bg-lp-main .bg-lp-stat__number {
		line-height: .75;
	}

	.bg-lp .bg-lp-main .bg-lp-included__item-title {
		margin-top: -5px; /* (25 - 15) / 2, works for two-line titles too */
		margin-bottom: -5px;
	}

	@media (min-width: 922px) {
		.bg-lp .bg-lp-main .bg-lp-included__item-title {
			margin-top: 0;
			margin-bottom: 0;
		}

		.bg-lp .bg-lp-main .bg-lp-stat__number {
			line-height: 44px;
		}

		.bg-lp .bg-lp-card__title,
		.bg-lp .bg-lp-plan__title,
		.bg-lp .bg-lp-addon__title {
			line-height: .75;
		}

		.bg-lp .bg-lp-why__title {
			margin-top: -9px;
			margin-bottom: -9px;
		}
	}
}