/*
 * Helpie landing design system (R0; pricing page parts R3; product page parts 1.87.0).
 *
 * Tokens first, then components. Every rule is scoped under `.lp` so it never
 * reaches Astra, Elementor or plugin markup (one exception: the swapped site
 * title, below). Loaded only where a landing template renders (see inc/landing.php).
 *
 * Sizes are in px: Astra sets the root font size to 93.75% (desktop) and
 * 85.5% (phones), so rem would shrink the scale on phones.
 *
 * Breakpoints (media queries cannot read custom properties):
 *   md  768px  two columns
 *   lg 1024px  three/four columns, side-by-side hero
 */

:root {
	/* Color: one brand color, one action color, neutral greys. */
	--lp-color-brand: #0170b9;          /* header and menu blue; links */
	--lp-color-brand-strong: #015a94;   /* link hover, focus ring */
	--lp-color-brand-soft: #e8f2fa;     /* tinted surfaces, icon tiles */
	--lp-color-action: var(--lp-color-brand);        /* primary buttons (purchase, trial); owner chose brand blue */
	--lp-color-action-strong: var(--lp-color-brand-strong);  /* primary button hover */
	--lp-color-on-action: #ffffff;
	--lp-color-ink: #0f172a;            /* headings */
	--lp-color-text: #334155;           /* body text */
	--lp-color-muted: #475569;          /* secondary text */
	--lp-color-border: #dbe3ec;
	--lp-color-surface: #ffffff;
	--lp-color-surface-muted: #f5f8fb;
	--lp-color-dark: #0c2d48;           /* CTA band */
	--lp-color-on-dark: #ffffff;
	--lp-color-on-dark-muted: #cbd8e4;
	--lp-color-focus: var(--lp-color-brand-strong);

	/* Type: one family, system stack, no font download. */
	--lp-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--lp-text-xs: 13px;
	--lp-text-sm: 15px;
	--lp-text-base: clamp(16px, 15.4px + 0.17vw, 18px);
	--lp-text-lg: clamp(18px, 16.9px + 0.3vw, 21px);
	--lp-text-xl: clamp(20px, 18.5px + 0.4vw, 24px);
	--lp-text-2xl: clamp(26px, 21.6px + 1.2vw, 38px);
	--lp-text-3xl: clamp(32px, 24.6px + 2vw, 52px);
	--lp-leading-tight: 1.15;
	--lp-leading-snug: 1.3;
	--lp-leading-body: 1.6;
	--lp-weight-regular: 400;
	--lp-weight-semibold: 600;
	--lp-weight-bold: 700;

	/* Space: 4px base. */
	--lp-space-1: 4px;
	--lp-space-2: 8px;
	--lp-space-3: 12px;
	--lp-space-4: 16px;
	--lp-space-5: 24px;
	--lp-space-6: 32px;
	--lp-space-7: 48px;
	--lp-space-8: 64px;
	--lp-section-y: clamp(56px, 40px + 4vw, 104px);
	--lp-container: 1200px;
	--lp-container-narrow: 760px;
	--lp-gutter: clamp(16px, 4vw, 32px);

	/* Shape and depth. */
	--lp-radius-sm: 6px;
	--lp-radius: 10px;
	--lp-radius-lg: 16px;
	--lp-radius-pill: 999px;
	--lp-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.08);
	--lp-shadow: 0 4px 12px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(15, 23, 42, 0.06);
	--lp-shadow-lg: 0 18px 40px rgba(15, 23, 42, 0.12), 0 2px 6px rgba(15, 23, 42, 0.06);
}

/* ---------- Site header on landing views (the one rule outside .lp) ---------- */

/* On the front page Astra prints the site title as <h1>; landing views print <p> (the hero owns the H1, see
   pauple_landing_site_title_tag()). Astra gives h1 line-height 1.4 and clear: both, so the <p> keeps them and the
   header renders exactly as before (0 px; other pages print <span> and are not matched). */
.lp-page p.site-title {
	line-height: 1.4;
	clear: both;
}

/* ---------- Base ---------- */

.lp {
	width: 100%;
	font-family: var(--lp-font);
	font-size: var(--lp-text-base);
	line-height: var(--lp-leading-body);
	color: var(--lp-color-text);
	background: var(--lp-color-surface);
	-webkit-font-smoothing: antialiased;
	overflow-wrap: break-word;
}

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

.lp :where(h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd) {
	margin: 0;
	padding: 0;
}

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

.lp .lp-container {
	width: 100%;
	max-width: calc(var(--lp-container) + 2 * var(--lp-gutter));
	margin-inline: auto;
	padding-inline: var(--lp-gutter);
}

.lp .lp-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.lp .lp-icon {
	width: 24px;
	height: 24px;
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Headings and text helpers shared by components. */
.lp .lp-heading {
	font-family: var(--lp-font);
	font-weight: var(--lp-weight-bold);
	color: var(--lp-color-ink);
	letter-spacing: -0.01em;
	text-transform: none;
}

.lp .lp-heading--display {
	font-size: var(--lp-text-3xl);
	line-height: var(--lp-leading-tight);
	letter-spacing: -0.02em;
}

.lp .lp-heading--section {
	font-size: var(--lp-text-2xl);
	line-height: var(--lp-leading-tight);
}

.lp .lp-heading--card {
	font-size: var(--lp-text-xl);
	line-height: var(--lp-leading-snug);
	font-weight: var(--lp-weight-semibold);
}

.lp .lp-lead {
	font-size: var(--lp-text-lg);
	color: var(--lp-color-muted);
}

.lp .lp-eyebrow {
	font-size: var(--lp-text-sm);
	font-weight: var(--lp-weight-semibold);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--lp-color-brand);
}

/* ---------- Buttons and links ---------- */

.lp .lp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--lp-space-2);
	min-height: 48px;
	padding: 12px 24px;
	border: 2px solid transparent;
	border-radius: var(--lp-radius-sm);
	font-family: var(--lp-font);
	font-size: 17px;
	font-weight: var(--lp-weight-semibold);
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.lp .lp-btn--primary {
	background: var(--lp-color-action);
	border-color: var(--lp-color-action);
	color: var(--lp-color-on-action);
}

.lp .lp-btn--primary:hover {
	background: var(--lp-color-action-strong);
	border-color: var(--lp-color-action-strong);
	color: var(--lp-color-on-action);
}

.lp .lp-btn--secondary {
	background: var(--lp-color-surface);
	border-color: var(--lp-color-brand);
	color: var(--lp-color-brand);
}

.lp .lp-btn--secondary:hover {
	background: var(--lp-color-brand-soft);
	border-color: var(--lp-color-brand-strong);
	color: var(--lp-color-brand-strong);
}

.lp .lp-btn--block {
	display: flex;
	width: 100%;
}

.lp .lp-link {
	display: inline-flex;
	align-items: center;
	gap: var(--lp-space-1);
	font-weight: var(--lp-weight-semibold);
	color: var(--lp-color-brand);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color 0.15s ease; /* Astra's `transition: all` would fade the focus outline in */
}

.lp .lp-link:hover {
	color: var(--lp-color-brand-strong);
	text-decoration-thickness: 2px;
}

.lp .lp-link .lp-icon {
	width: 18px;
	height: 18px;
}

.lp .lp-btn:focus-visible,
.lp .lp-link:focus-visible,
.lp a:focus-visible,
.lp .lp-is-focus-demo {
	outline: 3px solid var(--lp-color-focus);
	outline-offset: 3px;
	box-shadow: none;
}

.lp .lp-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--lp-space-3) var(--lp-space-4);
}

/* ---------- Badge ---------- */

.lp .lp-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--lp-space-1);
	padding: 4px 10px;
	border-radius: var(--lp-radius-pill);
	font-size: var(--lp-text-xs);
	font-weight: var(--lp-weight-semibold);
	line-height: 1.4;
	letter-spacing: 0.02em;
	background: var(--lp-color-surface-muted);
	color: var(--lp-color-ink);
	border: 1px solid var(--lp-color-border);
}

.lp .lp-badge--brand {
	background: var(--lp-color-brand-soft);
	border-color: transparent;
	color: var(--lp-color-brand-strong);
}

.lp .lp-badge--action {
	background: var(--lp-color-action);
	border-color: transparent;
	color: var(--lp-color-on-action);
}

.lp .lp-badge--strong {
	background: var(--lp-color-ink);
	border-color: transparent;
	color: #ffffff;
}

/* ---------- Section shell ---------- */

.lp .lp-section {
	padding-block: var(--lp-section-y);
	background: var(--lp-color-surface);
}

.lp .lp-section--muted {
	background: var(--lp-color-surface-muted);
}

.lp .lp-section--tight {
	padding-block: var(--lp-space-7);
}

.lp .lp-section__header {
	max-width: var(--lp-container-narrow);
	margin: 0 auto var(--lp-space-7);
	text-align: center;
	display: grid;
	gap: var(--lp-space-3);
}

.lp .lp-section__header--start {
	margin-inline: 0;
	text-align: left;
}

.lp .lp-section__body {
	display: grid;
	gap: var(--lp-space-8);
}

.lp .lp-section__footer {
	margin-top: var(--lp-space-7);
	text-align: center;
}

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

.lp .lp-hero {
	padding-block: clamp(48px, 32px + 4vw, 96px);
	background: linear-gradient(180deg, var(--lp-color-brand-soft) 0%, var(--lp-color-surface) 100%);
}

.lp .lp-hero__inner {
	display: grid;
	gap: var(--lp-space-7);
	align-items: center;
}

.lp .lp-hero__copy {
	display: grid;
	gap: var(--lp-space-5);
	justify-items: start;
}

.lp .lp-hero__list {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--lp-space-2) var(--lp-space-4);
	color: var(--lp-color-ink);
	font-weight: var(--lp-weight-semibold);
}

.lp .lp-hero__list li {
	display: inline-flex;
	align-items: center;
	gap: var(--lp-space-2);
}

.lp .lp-hero__list .lp-icon {
	width: 20px;
	height: 20px;
	color: var(--lp-color-action);
}

.lp .lp-hero__note {
	font-size: var(--lp-text-sm);
	color: var(--lp-color-muted);
}

.lp .lp-hero__media img {
	width: 100%;
	border-radius: var(--lp-radius-lg);
	box-shadow: var(--lp-shadow-lg);
	background: var(--lp-color-surface);
}

/* ---------- Logo / social-proof strip ---------- */

.lp .lp-logos {
	display: grid;
	gap: var(--lp-space-5);
	justify-items: center;
	text-align: center;
}

.lp .lp-logos__title {
	font-size: var(--lp-text-sm);
	font-weight: var(--lp-weight-semibold);
	color: var(--lp-color-muted);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.lp .lp-logos__list {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: var(--lp-space-4) var(--lp-space-7);
}

.lp .lp-logos__list img {
	width: auto;
	height: 72px;
	filter: grayscale(1);
	opacity: 0.8;
	mix-blend-mode: multiply;
}

/* ---------- Card grids (features, use cases, demos) ---------- */

.lp .lp-grid {
	display: grid;
	gap: var(--lp-space-5);
	grid-template-columns: 1fr;
	list-style: none;
}

.lp .lp-card {
	display: flex;
	flex-direction: column;
	gap: var(--lp-space-3);
	height: 100%;
	padding: var(--lp-space-5);
	background: var(--lp-color-surface);
	border: 1px solid var(--lp-color-border);
	border-radius: var(--lp-radius);
}

.lp .lp-card__text {
	color: var(--lp-color-text);
}

.lp .lp-card__link {
	margin-top: auto;
	padding-top: var(--lp-space-2);
}

.lp .lp-icon-tile {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: var(--lp-radius);
	background: var(--lp-color-brand-soft);
	color: var(--lp-color-brand-strong);
}

.lp .lp-feature-grid .lp-card {
	border: 0;
	padding: 0;
	background: transparent;
}

.lp .lp-use-case {
	box-shadow: var(--lp-shadow-sm);
	border-top: 4px solid var(--lp-color-brand);
}

.lp .lp-use-case__list {
	list-style: none;
	display: grid;
	gap: var(--lp-space-2);
}

.lp .lp-check-list li,
.lp .lp-use-case__list li {
	display: grid;
	grid-template-columns: 20px 1fr;
	gap: var(--lp-space-2);
	align-items: start;
}

.lp .lp-check-list .lp-icon,
.lp .lp-use-case__list .lp-icon {
	width: 20px;
	height: 20px;
	margin-top: 3px;
	color: var(--lp-color-action);
}

/* ---------- Alternating feature row ---------- */

.lp .lp-feature-row {
	display: grid;
	gap: var(--lp-space-6);
	align-items: center;
}

.lp .lp-feature-row__copy {
	display: grid;
	gap: var(--lp-space-4);
	justify-items: start;
}

.lp .lp-feature-row__media img {
	width: 100%;
	border-radius: var(--lp-radius);
	border: 1px solid var(--lp-color-border);
	box-shadow: var(--lp-shadow);
}

.lp .lp-media--plain img {
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: none;
}

.lp .lp-check-list {
	list-style: none;
	display: grid;
	gap: var(--lp-space-2);
}

/* ---------- Testimonial ---------- */

.lp .lp-testimonial {
	max-width: 860px;
	margin-inline: auto;
	display: grid;
	gap: var(--lp-space-5);
	padding: clamp(24px, 16px + 3vw, 48px);
	background: var(--lp-color-surface);
	border-radius: var(--lp-radius-lg);
	box-shadow: var(--lp-shadow);
}

.lp .lp-testimonial__mark {
	width: 40px;
	height: 40px;
	color: var(--lp-color-brand);
}

.lp .lp-testimonial__quote {
	display: grid;
	gap: var(--lp-space-3);
	font-size: var(--lp-text-lg);
	line-height: 1.55;
	color: var(--lp-color-ink);
	border: 0;
	font-style: normal;
}

.lp .lp-testimonial__person {
	display: flex;
	align-items: center;
	gap: var(--lp-space-4);
}

.lp .lp-testimonial__person img {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	object-fit: cover;
}

.lp .lp-testimonial__name {
	display: block;
	font-weight: var(--lp-weight-bold);
	color: var(--lp-color-ink);
	font-style: normal;
}

.lp .lp-testimonial__role {
	display: block;
	font-size: var(--lp-text-sm);
	color: var(--lp-color-muted);
}

/* ---------- Demo card ---------- */

.lp .lp-demo {
	padding: 0;
	overflow: hidden;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.lp .lp-demo:hover {
	box-shadow: var(--lp-shadow);
}

.lp .lp-demo__media {
	aspect-ratio: 5 / 4;
	background: var(--lp-color-surface-muted);
	border-bottom: 1px solid var(--lp-color-border);
}

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

.lp .lp-demo__body {
	display: flex;
	flex-direction: column;
	gap: var(--lp-space-2);
	flex: 1;
	padding: var(--lp-space-5);
}

/* ---------- Pricing cards ---------- */

.lp .lp-pricing {
	display: grid;
	gap: var(--lp-space-5);
}

.lp .lp-pricing__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--lp-space-2) var(--lp-space-4);
}

.lp .lp-pricing__note {
	font-size: var(--lp-text-sm);
	color: var(--lp-color-muted);
}

.lp .lp-plan {
	position: relative;
	gap: var(--lp-space-4);
	padding: var(--lp-space-6) var(--lp-space-5);
	box-shadow: var(--lp-shadow-sm);
}

.lp .lp-plan--highlight {
	border: 2px solid var(--lp-color-brand);
	box-shadow: var(--lp-shadow);
}

.lp .lp-plan__badge {
	position: absolute;
	top: 0;
	left: var(--lp-space-5);
	transform: translateY(-50%);
}

.lp .lp-plan__sites {
	font-size: var(--lp-text-lg);
	font-weight: var(--lp-weight-semibold);
	color: var(--lp-color-ink);
}

.lp .lp-plan__price {
	display: flex;
	align-items: baseline;
	gap: var(--lp-space-1);
	color: var(--lp-color-ink);
}

.lp .lp-plan__amount {
	font-size: clamp(34px, 30px + 1vw, 44px);
	font-weight: var(--lp-weight-bold);
	line-height: 1;
	letter-spacing: -0.02em;
}

.lp .lp-plan__period {
	color: var(--lp-color-muted);
}

.lp .lp-plan__meta {
	font-size: var(--lp-text-sm);
	color: var(--lp-color-muted);
}

.lp .lp-plan .lp-check-list {
	font-size: var(--lp-text-sm);
}

.lp .lp-plan .lp-btn {
	margin-top: auto;
}

/* ---------- Page head (H1 without hero media) ---------- */

.lp .lp-page-head {
	padding-block: clamp(40px, 28px + 3vw, 72px) var(--lp-space-6);
	background: linear-gradient(180deg, var(--lp-color-brand-soft) 0%, var(--lp-color-surface) 100%);
}

.lp .lp-page-head__inner {
	display: grid;
	gap: var(--lp-space-4);
	justify-items: center;
	max-width: var(--lp-container-narrow);
	margin-inline: auto;
	text-align: center;
}

.lp .lp-page-head__points {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--lp-space-2) var(--lp-space-5);
	font-size: var(--lp-text-sm);
	font-weight: var(--lp-weight-semibold);
	color: var(--lp-color-ink);
}

.lp .lp-page-head__points li {
	display: inline-flex;
	align-items: center;
	gap: var(--lp-space-2);
}

.lp .lp-page-head__points .lp-icon {
	width: 18px;
	height: 18px;
	color: var(--lp-color-action);
}

/* ---------- Product switch (tabs; hidden until landing-switch.js runs) ---------- */

.lp .lp-switch {
	margin-top: var(--lp-space-3);
}

.lp .lp-switch[hidden],
.lp [role="tabpanel"][hidden] {
	display: none;
}

.lp .lp-switch__list {
	display: inline-flex;
	gap: var(--lp-space-1);
	padding: var(--lp-space-1);
	background: var(--lp-color-surface);
	border: 1px solid var(--lp-color-border);
	border-radius: var(--lp-radius-pill);
	box-shadow: var(--lp-shadow-sm);
}

.lp .lp-switch__tab {
	min-height: 44px;
	padding: 10px 22px;
	border: 0;
	border-radius: var(--lp-radius-pill);
	background: transparent;
	color: var(--lp-color-ink);
	font-family: var(--lp-font);
	font-size: 16px;
	font-weight: var(--lp-weight-semibold);
	line-height: 1.2;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.lp .lp-switch__tab:hover {
	background: var(--lp-color-brand-soft);
	color: var(--lp-color-brand-strong);
}

.lp .lp-switch__tab[aria-selected="true"] {
	background: var(--lp-color-brand);
	color: var(--lp-color-on-action);
}

.lp .lp-switch__tab:focus-visible {
	outline: 3px solid var(--lp-color-focus);
	outline-offset: 3px;
}

/* ---------- Product panel (pricing page) ---------- */

.lp .lp-product .lp-container {
	display: grid;
	gap: var(--lp-space-5);
}

.lp .lp-product__head {
	display: grid;
	gap: var(--lp-space-2);
}

.lp .lp-product__note {
	font-size: var(--lp-text-sm);
	color: var(--lp-color-muted);
}

.lp .lp-product__features {
	display: grid;
	gap: var(--lp-space-4);
	margin-top: var(--lp-space-4);
	padding: var(--lp-space-5);
	border: 1px solid var(--lp-color-border);
	border-radius: var(--lp-radius);
	background: var(--lp-color-surface-muted);
}

.lp .lp-check-list--columns {
	gap: var(--lp-space-2) var(--lp-space-5);
}

/* ---------- FAQ list (native details) ---------- */

.lp .lp-faq {
	max-width: var(--lp-container-narrow);
	margin-inline: auto;
	width: 100%;
	border-top: 1px solid var(--lp-color-border);
}

.lp .lp-faq__item {
	border-bottom: 1px solid var(--lp-color-border);
}

.lp .lp-faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--lp-space-4);
	padding: var(--lp-space-4) var(--lp-space-1);
	font-size: var(--lp-text-lg);
	font-weight: var(--lp-weight-semibold);
	line-height: var(--lp-leading-snug);
	color: var(--lp-color-ink);
	cursor: pointer;
	list-style: none;
}

.lp .lp-faq__question::-webkit-details-marker {
	display: none;
}

.lp .lp-faq__question:hover {
	color: var(--lp-color-brand-strong);
}

.lp .lp-faq__question:focus-visible {
	outline: 3px solid var(--lp-color-focus);
	outline-offset: 2px;
}

.lp .lp-faq__icon {
	width: 22px;
	height: 22px;
	color: var(--lp-color-brand);
	transition: transform 0.15s ease;
}

.lp .lp-faq__item[open] .lp-faq__icon {
	transform: rotate(45deg);
}

.lp .lp-faq__answer {
	display: grid;
	gap: var(--lp-space-2);
	padding: 0 var(--lp-space-1) var(--lp-space-5);
}

/* ---------- CTA band ---------- */

.lp .lp-cta {
	--lp-color-focus: #ffffff;
	background: var(--lp-color-dark);
	color: var(--lp-color-on-dark-muted);
	padding-block: clamp(48px, 36px + 3vw, 80px);
}

.lp .lp-cta__inner {
	display: grid;
	gap: var(--lp-space-5);
	justify-items: center;
	text-align: center;
	max-width: var(--lp-container-narrow);
	margin-inline: auto;
}

.lp .lp-cta .lp-heading {
	color: var(--lp-color-on-dark);
}

.lp .lp-cta .lp-lead {
	color: var(--lp-color-on-dark-muted);
}

.lp .lp-cta .lp-actions {
	justify-content: center;
}

.lp .lp-cta .lp-btn--secondary {
	background: transparent;
	border-color: var(--lp-color-on-dark);
	color: var(--lp-color-on-dark);
}

.lp .lp-cta .lp-btn--secondary:hover {
	background: rgba(255, 255, 255, 0.12);
}

.lp .lp-cta .lp-link {
	color: var(--lp-color-on-dark);
}

.lp .lp-cta__note {
	font-size: var(--lp-text-sm);
}

/* ---------- Theme 1.87.0: product pages (Helpie FAQ page, home, /wiki/) ---------- */

/* Section footer with several links. */
.lp .lp-section__footer {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--lp-space-3) var(--lp-space-6);
}

/* Trial picker: number of sites + the legacy trial button (hidden picker until landing-trial.js runs). */
.lp .lp-trial {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--lp-space-3) var(--lp-space-4);
	width: 100%;
}

.lp .lp-trial__picker {
	display: grid;
	gap: var(--lp-space-2);
	flex: 1 1 100%; /* own row; the buttons follow side by side */
}

.lp .lp-trial__picker[hidden] {
	display: none;
}

.lp .lp-trial__label {
	font-size: var(--lp-text-sm);
	font-weight: var(--lp-weight-semibold);
	color: var(--lp-color-ink);
}

.lp .lp-trial__select {
	width: 100%;
	max-width: 320px;
	min-height: 48px;
	padding: 10px 40px 10px 14px;
	border: 1px solid #8a9bb0; /* 3:1 against white (non-text contrast) */
	border-radius: var(--lp-radius-sm);
	background: var(--lp-color-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23334155' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 18px;
	font-family: var(--lp-font);
	font-size: 16px;
	color: var(--lp-color-ink);
	-webkit-appearance: none;
	appearance: none;
}

.lp .lp-trial__select:focus-visible {
	outline: 3px solid var(--lp-color-focus);
	outline-offset: 3px;
}

/* Proof strip: wordpress.org facts with their date. */
.lp .lp-proof {
	display: grid;
	gap: var(--lp-space-4);
	justify-items: center;
	text-align: center;
}

.lp .lp-proof__title {
	font-size: var(--lp-text-lg);
	font-weight: var(--lp-weight-semibold);
	color: var(--lp-color-ink);
}

.lp .lp-proof__facts {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--lp-space-3) var(--lp-space-6);
	font-weight: var(--lp-weight-semibold);
	color: var(--lp-color-ink);
}

.lp .lp-proof__facts li {
	display: inline-flex;
	align-items: center;
	gap: var(--lp-space-2);
}

.lp .lp-proof__facts .lp-icon {
	color: var(--lp-color-brand);
}

.lp .lp-proof__source {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--lp-space-1) var(--lp-space-3);
	font-size: var(--lp-text-sm);
	color: var(--lp-color-muted);
}

/* Compact feature grid: icon beside a title-only item. */
.lp .lp-feature-grid--compact {
	gap: var(--lp-space-3);
}

.lp .lp-feature-grid--compact .lp-card {
	flex-direction: row;
	align-items: center;
	gap: var(--lp-space-4);
	padding: var(--lp-space-4);
	background: var(--lp-color-surface);
	border: 1px solid var(--lp-color-border);
	border-radius: var(--lp-radius);
}

.lp .lp-feature-grid--compact .lp-heading--card {
	font-size: var(--lp-text-base);
}

/* Feature lists: grouped check lists. */
.lp .lp-feature-lists {
	display: grid;
	gap: var(--lp-space-5);
}

.lp .lp-feature-lists__group {
	gap: var(--lp-space-5);
	padding: var(--lp-space-6);
}

.lp .lp-feature-lists__group .lp-heading--card {
	display: flex;
	align-items: center;
	gap: var(--lp-space-3);
}

/* Testimonial cards in a grid. */
.lp .lp-testimonial--compact {
	max-width: none;
	height: 100%;
	align-content: start;
	grid-template-rows: auto 1fr auto;
	gap: var(--lp-space-4);
	padding: var(--lp-space-6);
	border: 1px solid var(--lp-color-border);
	box-shadow: none;
}

.lp .lp-testimonial--compact .lp-testimonial__mark {
	width: 28px;
	height: 28px;
}

.lp .lp-testimonial--compact .lp-testimonial__quote {
	align-content: start;
	font-size: var(--lp-text-base);
	line-height: var(--lp-leading-body);
}

/* Video link card. */
.lp .lp-video {
	flex-direction: column;
	align-items: flex-start;
	gap: var(--lp-space-4);
	padding: var(--lp-space-6);
	background: var(--lp-color-brand-soft);
	border-color: transparent;
}

.lp .lp-video__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--lp-color-brand);
	color: #ffffff;
}

.lp .lp-video__icon .lp-icon {
	width: 32px;
	height: 32px;
}

.lp .lp-video__copy {
	display: grid;
	gap: var(--lp-space-2);
	flex: 1;
}

/* Cross-sell band: the other product, on a tinted surface. */
.lp .lp-cross {
	background: var(--lp-color-brand-soft);
}

.lp .lp-cross__inner {
	display: grid;
	gap: var(--lp-space-7);
	align-items: center;
}

.lp .lp-cross__copy {
	display: grid;
	gap: var(--lp-space-4);
	justify-items: start;
}

/* Live Helpie FAQ accordion: plugin markup and styles; only width and focus come from here. */
.lp .lp-plugin-faq {
	max-width: 900px;
	margin-inline: auto;
	width: 100%;
}

/* The plugin's styles name "Roboto" without a fallback; the Elementor page loaded it from Google Fonts. */
.lp .lp-plugin-faq .helpie-faq.accordions .accordion .accordion__item .accordion__header .accordion__title,
.lp .lp-plugin-faq .helpie-faq.accordions .accordion .accordion__item .accordion__body,
.lp .lp-plugin-faq .helpie-faq.accordions .accordion .accordion__item .accordion__body p,
.lp .lp-plugin-faq .helpie-faq.accordions .accordion .accordion__item .accordion__body li {
	font-family: var(--lp-font);
}

/* The plugin's search text is light grey on white (below 4.5:1). */
.lp .lp-plugin-faq .helpie-faq.accordions .search .search__wrapper .search__input {
	color: var(--lp-color-ink);
}

.lp .lp-plugin-faq .accordion__header:focus-visible,
.lp .lp-plugin-faq .search__input:focus-visible {
	outline: 3px solid var(--lp-color-focus);
	outline-offset: 2px;
}

/* ---------- md: 768px ---------- */

@media (min-width: 768px) {
	.lp .lp-grid--2,
	.lp .lp-grid--3,
	.lp .lp-grid--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.lp .lp-feature-row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--lp-space-8);
	}

	.lp .lp-feature-row--reverse .lp-feature-row__media {
		order: 2;
	}

	.lp .lp-testimonial {
		grid-template-columns: auto 1fr;
		column-gap: var(--lp-space-6);
	}

	.lp .lp-testimonial__person {
		grid-column: 2;
	}

	.lp .lp-check-list--columns {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.lp .lp-product__features {
		padding: var(--lp-space-6);
	}

	.lp .lp-video {
		flex-direction: row;
		align-items: center;
		gap: var(--lp-space-6);
	}

	.lp .lp-testimonial--compact {
		grid-template-columns: none;
	}

	.lp .lp-testimonial--compact .lp-testimonial__person {
		grid-column: auto;
	}
}

/* ---------- lg: 1024px ---------- */

@media (min-width: 1024px) {
	.lp .lp-grid--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.lp .lp-grid--4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.lp .lp-hero__inner--media {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
		gap: var(--lp-space-8);
	}

	.lp .lp-check-list--columns {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.lp .lp-feature-lists {
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	}

	.lp .lp-feature-lists__group:last-child .lp-check-list--columns {
		grid-template-columns: 1fr;
	}

	.lp .lp-cross__inner--media {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--lp-space-8);
	}
}

@media (prefers-reduced-motion: reduce) {
	.lp * {
		transition: none !important;
	}
}