/* ==========================================================================
   WorkGuru — Landing pages
   Tokens + components. Loaded only on the Landing Page template.

   Naming: .wg-lp-<component>__<element>--<modifier>
   Nothing here should depend on the block theme's styles.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   Change a value here and every landing page follows.
   -------------------------------------------------------------------------- */

.wg-lp {
	/* Brand */
	--wg-ink: #0b1b33;
	--wg-ink-soft: #46566e;
	--wg-accent: #17c3b2;
	--wg-accent-ink: #0b1b33;
	--wg-cta: #1668e3;
	--wg-cta-hover: #0f52b5;
	--wg-surface: #ffffff;
	--wg-surface-alt: #f4f7fb;
	--wg-line: #dbe3ee;

	/* Type scale — fluid, no media queries needed */
	--wg-step--1: clamp(0.88rem, 0.85rem + 0.15vw, 0.95rem);
	--wg-step-0: clamp(1rem, 0.96rem + 0.2vw, 1.13rem);
	--wg-step-1: clamp(1.2rem, 1.1rem + 0.5vw, 1.45rem);
	--wg-step-2: clamp(1.5rem, 1.3rem + 1vw, 2rem);
	--wg-step-3: clamp(2rem, 1.6rem + 2vw, 3.25rem);

	/* Spacing */
	--wg-space-xs: 0.5rem;
	--wg-space-sm: 0.875rem;
	--wg-space-md: 1.5rem;
	--wg-space-lg: 2.5rem;
	--wg-space-xl: clamp(3rem, 6vw, 5.5rem);

	/* Layout */
	--wg-measure: 60ch;
	--wg-container: 1200px;
	--wg-radius: 12px;

	/* Reserved height for the HubSpot embed — see section 4.
	   Tune per page with style="--wg-form-h: 520px" on the section. */
	--wg-form-h: 470px;
	--wg-form-h-mobile: 520px;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */

.wg-lp {
	color: var(--wg-ink);
	font-size: var(--wg-step-0);
	line-height: 1.55;
}

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

.wg-lp__container {
	width: 100%;
	max-width: var(--wg-container);
	margin-inline: auto;
	padding-inline: clamp(1rem, 4vw, 2rem);
}

/* --- Scoped theme reset -------------------------------------------------
   theme.json emits element styles as `:root :where(h1)` etc. — specificity
   (0,1,0), which ties with a single class and wins on source order. That is
   what turned the hero heading dark-on-dark and Title Cased it.

   Descendant selectors below are (0,1,1), so they win without !important.
   Scoped to .wg-lp, so nothing outside landing pages is affected.
   ---------------------------------------------------------------------- */

.wg-lp h1,
.wg-lp h2,
.wg-lp h3,
.wg-lp h4 {
	color: inherit;
	text-transform: none;
	letter-spacing: normal;
	font-family: inherit;
}

.wg-lp p,
.wg-lp li {
	color: inherit;
}

.wg-lp a {
	color: inherit;
}

/* --- Visibility utilities ------------------------------------------------
   .wp-block-buttons sets display:flex from core block styles, which load
   after this file and would otherwise beat a single-class rule. The .wg-lp
   prefix takes these to (0,2,0).
   ---------------------------------------------------------------------- */

.wg-lp .wg-lp__mobile-only { display: block; }
.wg-lp .wg-lp__desktop-only { display: none; }

@media (min-width: 782px) {
	.wg-lp .wg-lp__mobile-only { display: none; }
	.wg-lp .wg-lp__desktop-only { display: block; }
}

/* --- WordPress block-gap neutralisation ----------------------------------
   Global styles emit, from theme.json's blockGap:

     :root :where(.is-layout-flow) > * { margin-block-start: <spacing-50>; }
     :root :where(.is-layout-flow) > :first-child { margin-block-start: 0; }

   Every core/group carries .is-layout-flow, including the ones we use as grid
   and flex containers. The result is that every child EXCEPT the first gets a
   top margin, so in a row of cards the first one sits ~24px higher than its
   siblings and is ~24px taller. It also pushed the hero form card down out of
   line with the copy column, and offset the stats block against the quote.

   :where() contributes nothing to specificity, so that rule is only (0,1,0)
   and a two-class selector beats it cleanly. Inside .wg-lp our components own
   their own rhythm: gap for layout, explicit margin-bottom for flow. The four
   places that genuinely want a top margin re-assert it below.
   ---------------------------------------------------------------------- */

.wg-lp .is-layout-flow > *,
.wg-lp .is-layout-constrained > *,
.wg-lp.is-layout-flow > * {
	margin-block-start: 0;
}

.wg-lp .wg-lp-form__note,
.wg-lp .wg-lp-form__alt,
.wg-lp .wg-lp-faq details p,
.wg-lp .wg-lp-final__note,
.wg-lp .wg-lp-hero__cta-mobile {
	margin-block-start: var(--wg-space-sm);
}

.wg-lp .wg-lp-hero__cta-note {
	margin-block-start: var(--wg-space-xs);
}

/* An empty image placeholder should not reserve space before the image
   is chosen — stops the gap under the hero copy on a half-built page. */
.wg-lp-hero__media:has(img:not([src])) {
	display: none;
}

/* --- Logo images --------------------------------------------------------
   Global styles round every core/image by 15px:

     :root :where(.wp-block-image img, ...) { border-radius: 15px }

   Right for a product screenshot, wrong for a logo — it clips the corners of
   the mark. That selector looks specific but :where() contributes nothing, so
   it is only (0,1,0): one class plus an element beats it.

   Add `wg-lp-logo` to the image block (Block settings -> Advanced ->
   Additional CSS class(es)) and it stays square. Scoped to the class rather
   than to all images, so hero screenshots keep their rounding.
   ---------------------------------------------------------------------- */

.wg-lp-logo img,
.wg-lp-logos__item img {
	border-radius: 0;
}

/* --------------------------------------------------------------------------
   3. Hero
   Desktop:  copy + media on the left, form card on the right.
   Mobile:   copy → button → media → form.  The form is on the page, just
             not the first thing demanded of a cold visitor.
   -------------------------------------------------------------------------- */

.wg-lp-hero {
	position: relative;
	padding-block: var(--wg-space-xl);
	background: var(--wg-ink);
	color: #fff;
	overflow: clip;
}

.wg-lp-hero__inner {
	display: grid;
	gap: var(--wg-space-lg);
	grid-template-columns: 1fr;
	width: 100%;
	max-width: var(--wg-container);
	margin-inline: auto;
	padding-inline: clamp(1rem, 4vw, 2rem);
}

@media (min-width: 900px) {
	.wg-lp-hero__inner {
		grid-template-columns: minmax(0, 1fr) 420px;
		align-items: start;
		column-gap: var(--wg-space-xl);
	}
}

/* Source order is copy → media → form, which is what mobile wants.
   Desktop pulls the form into the right column across both rows. */
.wg-lp-hero__copy { order: 1; }
.wg-lp-hero__media { order: 2; }
.wg-lp-hero__form { order: 3; }

@media (min-width: 900px) {
	.wg-lp-hero__copy { grid-column: 1; grid-row: 1; }
	.wg-lp-hero__media { grid-column: 1; grid-row: 2; }
	.wg-lp-hero__form { grid-column: 2; grid-row: 1 / span 2; }
}

.wg-lp-hero__eyebrow {
	margin: 0 0 var(--wg-space-sm);
	font-size: var(--wg-step--1);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wg-accent);
}

.wg-lp-hero__title {
	margin: 0 0 var(--wg-space-md);
	max-width: 18ch;
	font-size: var(--wg-step-3);
	line-height: 1.08;
	font-weight: 800;
	text-wrap: balance;
}

.wg-lp-hero__sub {
	margin: 0 0 var(--wg-space-md);
	max-width: 46ch;
	font-size: var(--wg-step-1);
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.82);
}

.wg-lp-hero__points {
	margin: 0 0 var(--wg-space-md);
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--wg-space-xs);
}

.wg-lp-hero__points li {
	position: relative;
	padding-left: 1.85rem;
	font-size: var(--wg-step-0);
}

.wg-lp-hero__points li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.35em;
	width: 1.15rem;
	height: 1.15rem;
	border-radius: 50%;
	background: var(--wg-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b1b33' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 0.7rem no-repeat;
}

.wg-lp-hero__media {
	margin: 0;
}

.wg-lp-hero__media img,
.wg-lp-hero__img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--wg-radius);
}

/* --------------------------------------------------------------------------
   4. Form card — reserved height
   The HubSpot embed renders into .hs-form-frame asynchronously. Reserving
   the space stops the page jumping when it lands (CLS 0.087 on the old page,
   which was over half of total layout shift).
   -------------------------------------------------------------------------- */

.wg-lp-hero__form {
	scroll-margin-top: 1.5rem;
}

.wg-lp-form {
	background: var(--wg-surface);
	color: var(--wg-ink);
	border-radius: var(--wg-radius);
	padding: var(--wg-space-md);
	box-shadow: 0 18px 40px rgba(6, 18, 36, 0.28);
}

.wg-lp-form__title {
	margin: 0 0 0.25rem;
	font-size: var(--wg-step-1);
	font-weight: 700;
}

.wg-lp-form__sub {
	margin: 0 0 var(--wg-space-sm);
	font-size: var(--wg-step--1);
	color: var(--wg-ink-soft);
}

/* The reservation. Height is a token so it can be tuned per page without
   touching this file — the right value is the rendered height of your form. */
.wg-lp-form__frame,
.wg-lp-form__frame .hs-form-frame {
	min-height: var(--wg-form-h-mobile);
}

@media (min-width: 900px) {
	.wg-lp-form__frame,
	.wg-lp-form__frame .hs-form-frame {
		min-height: var(--wg-form-h);
	}
}

/* Skeleton while the embed loads, so the reserved space doesn't read as broken */
.wg-lp-form__frame {
	position: relative;
}

/* Skeleton while the embed loads. Bars sit at the top on a natural form
   rhythm rather than spreading across the full reserved height, so a form
   that hasn't rendered reads as "loading" instead of "broken". */
.wg-lp-form__frame:not(:has(iframe, form))::after {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 19.5rem;
	border-radius: 8px;
	background:
		linear-gradient(var(--wg-surface-alt) 0 0) no-repeat 0 0 / 38% 0.9rem,
		linear-gradient(var(--wg-surface-alt) 0 0) no-repeat 0 1.6rem / 100% 2.9rem,
		linear-gradient(var(--wg-surface-alt) 0 0) no-repeat 0 5.6rem / 38% 0.9rem,
		linear-gradient(var(--wg-surface-alt) 0 0) no-repeat 0 7.2rem / 100% 2.9rem,
		linear-gradient(var(--wg-surface-alt) 0 0) no-repeat 0 11.2rem / 38% 0.9rem,
		linear-gradient(var(--wg-surface-alt) 0 0) no-repeat 0 12.8rem / 100% 2.9rem,
		linear-gradient(var(--wg-surface-alt) 0 0) no-repeat 0 17.2rem / 55% 2.4rem;
	animation: wg-lp-skeleton 1.4s ease-in-out infinite;
	pointer-events: none;
}

@keyframes wg-lp-skeleton {
	0%, 100% { opacity: 0.55; }
	50% { opacity: 0.9; }
}

.wg-lp-form__note {
	margin: var(--wg-space-sm) 0 0;
	font-size: var(--wg-step--1);
	color: var(--wg-ink-soft);
	text-align: center;
}

.wg-lp-form__alt {
	display: block;
	margin-top: var(--wg-space-sm);
	text-align: center;
	font-size: var(--wg-step--1);
	color: var(--wg-ink-soft);
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */

.wg-lp .wg-lp-btn,
.wg-lp .wg-lp-btn .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 52px;
	padding: 0.85rem 1.6rem;
	border: 0;
	border-radius: 8px;
	background: var(--wg-cta);
	color: #fff;
	font-size: var(--wg-step-0);
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.wg-lp .wg-lp-btn:hover,
.wg-lp .wg-lp-btn .wp-block-button__link:hover {
	background: var(--wg-cta-hover);
}

.wg-lp .wg-lp-btn--block,
.wg-lp .wg-lp-btn--block .wp-block-button__link {
	width: 100%;
}

.wg-lp .wg-lp-btn:focus-visible,
.wg-lp .wg-lp-btn .wp-block-button__link:focus-visible {
	outline: 3px solid var(--wg-accent);
	outline-offset: 2px;
}

/* Mobile CTA sits under the bullets, above the screenshot */
.wg-lp-hero__cta-mobile {
	margin-block: var(--wg-space-md) var(--wg-space-sm);
}

.wg-lp-hero__cta-note {
	margin: 0 0 var(--wg-space-md);
	font-size: var(--wg-step--1);
	color: rgba(255, 255, 255, 0.72);
}

/* --------------------------------------------------------------------------
   6. Sticky mobile CTA
   Rendered by inc/landing.php on wp_footer, not inserted as a pattern.
   Mobile only — on desktop the hero form stays in view.
   -------------------------------------------------------------------------- */

.wg-lp-sticky {
	display: none;
}

@media (max-width: 781px) {
	.wg-lp-sticky {
		position: fixed;
		inset-inline: 0;
		bottom: 0;
		z-index: 900;
		display: grid;
		gap: 0.35rem;
		padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
		background: rgba(255, 255, 255, 0.97);
		border-top: 1px solid var(--wg-line);
		box-shadow: 0 -6px 24px rgba(6, 18, 36, 0.12);
		backdrop-filter: blur(6px);
	}

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

	.wg-lp-sticky__note {
		font-size: var(--wg-step--1);
		color: var(--wg-ink-soft);
		text-align: center;
	}

	/* Stop the bar permanently covering the end of the page. */
	body:has(.wg-lp-sticky) {
		padding-bottom: 6rem;
	}

	/* The HubSpot chat bubble sits bottom-right and collides with this bar.
	   Lift it clear, or turn chat off on landing pages entirely — on a page
	   with one job, a chat bubble competes with the form. */
	#hubspot-messages-iframe-container {
		bottom: 5.5rem !important;
	}
}

/* --------------------------------------------------------------------------
   7. Sections — shared shell
   Every section below the hero uses these. Keeps rhythm consistent and means
   a spacing change lands everywhere at once.
   -------------------------------------------------------------------------- */

.wg-lp-section {
	padding-block: var(--wg-space-xl);
	background: var(--wg-surface);
	color: var(--wg-ink);
}

.wg-lp-section--alt { background: var(--wg-surface-alt); }

.wg-lp-section--ink {
	background: var(--wg-ink);
	color: #fff;
}

.wg-lp-section__inner {
	width: 100%;
	max-width: var(--wg-container);
	margin-inline: auto;
	padding-inline: clamp(1rem, 4vw, 2rem);
}

.wg-lp-section__title {
	margin: 0 0 var(--wg-space-xs);
	font-size: var(--wg-step-2);
	line-height: 1.15;
	font-weight: 800;
	text-wrap: balance;
}

.wg-lp-section__sub {
	margin: 0 0 var(--wg-space-lg);
	max-width: 62ch;
	font-size: var(--wg-step-1);
	color: var(--wg-ink-soft);
}

.wg-lp-section--ink .wg-lp-section__sub { color: rgba(255, 255, 255, 0.8); }

.wg-lp-grid {
	display: grid;
	gap: var(--wg-space-md);
	grid-template-columns: 1fr;
}

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

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

.wg-lp-card {
	background: var(--wg-surface);
	border: 1px solid var(--wg-line);
	border-radius: var(--wg-radius);
	padding: var(--wg-space-md);
}

.wg-lp-section--alt .wg-lp-card { background: var(--wg-surface); }

.wg-lp-card__title {
	margin: 0 0 var(--wg-space-xs);
	font-size: var(--wg-step-0);
	font-weight: 700;
}

/* :where() keeps this at (0,1,0) and the :not() keeps it off the title.
   Without both, this rule outranked .wg-lp-card__title and the titles
   rendered at body size in the muted body colour. */
.wg-lp-card :where(p:not(.wg-lp-card__title)) {
	margin: 0;
	font-size: var(--wg-step--1);
	color: var(--wg-ink-soft);
	line-height: 1.5;
}

/* --------------------------------------------------------------------------
   8. Social proof strip
   -------------------------------------------------------------------------- */

.wg-lp-logos {
	padding-block: var(--wg-space-lg);
	background: var(--wg-surface);
	border-block: 1px solid var(--wg-line);
}

.wg-lp-logos__label {
	margin: 0 0 var(--wg-space-md);
	text-align: center;
	font-size: var(--wg-step--1);
	color: var(--wg-ink-soft);
}

.wg-lp-logos__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: clamp(1.5rem, 5vw, 3.5rem);
}

.wg-lp-logos__row figure,
.wg-lp-logos__item { margin: 0; }

.wg-lp-logos__row img {
	max-height: 34px;
	width: auto;
	filter: grayscale(1);
	opacity: 0.65;
}

/* --------------------------------------------------------------------------
   9. How it works — numbered steps

   Mobile: number to the left of the text, stacked vertically — a horizontal
   flow on a phone either shrinks to nothing or scrolls sideways.
   Desktop: number on its own line with a rule running to the next step, so
   the three read as one sequence rather than three unrelated cards.
   -------------------------------------------------------------------------- */

.wg-lp-step {
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: start;
	gap: var(--wg-space-sm);
}

/* Body copy. Scoped off the number and the title — see the note on
   .wg-lp-card above; the same specificity trap applies here. */
.wg-lp-step :where(p:not(.wg-lp-step__n):not(.wg-lp-step__title)) {
	margin: 0;
	font-size: var(--wg-step--1);
	color: var(--wg-ink-soft);
	line-height: 1.55;
}

.wg-lp-step__n {
	display: flex;
	align-items: center;
	justify-content: center;
	justify-self: start;
	width: 2.75rem;
	height: 2.75rem;
	margin: 0;
	border-radius: 50%;
	background: var(--wg-cta);
	color: #fff;
	font-size: var(--wg-step-0);
	font-weight: 800;
	line-height: 1;
	/* Halo so the connector rule reads as passing behind the circle. */
	box-shadow: 0 0 0 6px color-mix(in srgb, var(--wg-cta) 12%, transparent);
	position: relative;
	z-index: 1;
}

.wg-lp-step__title {
	margin: 0 0 0.35rem;
	font-size: var(--wg-step-1);
	font-weight: 700;
	line-height: 1.25;
}

@media (min-width: 900px) {
	.wg-lp-step {
		grid-template-columns: 1fr;
		gap: var(--wg-space-sm);
	}

	/* Connector. Runs from the right of the circle, across the grid gap, to
	   the next step's circle. The negative right offset is exactly the grid
	   gap, so it meets the next circle's halo. */
	.wg-lp-step::before {
		content: "";
		position: absolute;
		top: 1.375rem;
		left: 3.5rem;
		right: calc(-1 * var(--wg-space-md));
		height: 2px;
		background: var(--wg-line);
	}

	.wg-lp-step:last-child::before { display: none; }
}

/* --------------------------------------------------------------------------
   10. Customer proof
   -------------------------------------------------------------------------- */

.wg-lp-proof {
	display: grid;
	gap: var(--wg-space-lg);
	grid-template-columns: 1fr;
	align-items: center;
}

@media (min-width: 900px) {
	.wg-lp-proof { grid-template-columns: 1.4fr 1fr; }
}

.wg-lp-quote {
	margin: 0;
	font-size: var(--wg-step-1);
	line-height: 1.45;
}

.wg-lp-quote blockquote {
	margin: 0;
	padding: 0;
	border: 0;
	quotes: "\201C" "\201D";
}

.wg-lp-quote blockquote p {
	margin: 0 0 var(--wg-space-sm);
}

.wg-lp-quote blockquote p::before { content: open-quote; }
.wg-lp-quote blockquote p::after  { content: close-quote; }

.wg-lp-quote__cite,
.wg-lp-quote cite {
	display: block;
	font-size: var(--wg-step--1);
	font-style: normal;
	color: var(--wg-ink-soft);
}

/* Reported results. Deliberately not big numeric tiles: the stats in the
   Testimonials post type are sentences ("15 hours of admin saved every week"),
   and a sentence set at display size reads as a slogan rather than a result. */
.wg-lp-results {
	display: grid;
	gap: var(--wg-space-sm);
	grid-template-columns: 1fr;
}

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

.wg-lp-result {
	padding: var(--wg-space-sm);
	border-radius: var(--wg-radius);
	background: var(--wg-surface);
	border: 1px solid var(--wg-line);
	border-left: 3px solid var(--wg-accent);
}

.wg-lp-result__stat {
	margin: 0 0 0.35rem;
	font-size: var(--wg-step-0);
	font-weight: 700;
	line-height: 1.3;
}

.wg-lp-result__who {
	margin: 0;
	font-size: var(--wg-step--1);
	color: var(--wg-ink-soft);
}

.wg-lp-proof__source {
	margin-block-start: var(--wg-space-md);
	font-size: var(--wg-step--1);
	color: var(--wg-ink-soft);
}

/* Kept for pages that still hand-write numeric tiles. */
.wg-lp-stats {
	display: grid;
	gap: var(--wg-space-sm);
	grid-template-columns: repeat(3, minmax(0, 1fr));
	text-align: center;
}

.wg-lp-stat {
	padding: var(--wg-space-sm);
	border-radius: var(--wg-radius);
	background: var(--wg-surface);
	border: 1px solid var(--wg-line);
}

.wg-lp-stat__n {
	display: block;
	font-size: var(--wg-step-2);
	font-weight: 800;
	line-height: 1.1;
	color: var(--wg-cta);
}

.wg-lp-stat__label {
	display: block;
	font-size: var(--wg-step--1);
	color: var(--wg-ink-soft);
}

/* --------------------------------------------------------------------------
   10b. Spreadsheets vs WorkGuru
   Two columns rather than a table: a core/table block is fiddly to edit and
   easy to break, and marketing has to be able to change these lines.
   -------------------------------------------------------------------------- */

.wg-lp-compare {
	display: grid;
	gap: var(--wg-space-md);
	grid-template-columns: 1fr;
}

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

.wg-lp-compare__col {
	padding: var(--wg-space-md);
	border-radius: var(--wg-radius);
	border: 1px solid var(--wg-line);
	background: var(--wg-surface);
}

.wg-lp-compare__col--after {
	border-color: color-mix(in srgb, var(--wg-accent) 45%, var(--wg-line));
	box-shadow: 0 1px 2px rgba(11, 27, 51, 0.04), 0 8px 24px rgba(11, 27, 51, 0.06);
}

.wg-lp-compare__title {
	margin: 0 0 var(--wg-space-sm);
	font-size: var(--wg-step-0);
	font-weight: 700;
}

.wg-lp-compare__col--before .wg-lp-compare__title { color: var(--wg-ink-soft); }

.wg-lp-compare__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--wg-space-sm);
}

.wg-lp-compare__list li {
	position: relative;
	padding-inline-start: 1.9rem;
	font-size: var(--wg-step--1);
	line-height: 1.5;
	color: var(--wg-ink-soft);
}

.wg-lp-compare__list li::before {
	position: absolute;
	inset-inline-start: 0;
	top: 0;
	width: 1.25rem;
	text-align: center;
	font-weight: 700;
}

.wg-lp-compare__list--before li::before {
	content: "\00D7";
	color: var(--wg-ink-soft);
}

.wg-lp-compare__list--after li::before {
	content: "\2713";
	color: var(--wg-accent);
}

.wg-lp-compare__list--after li { color: var(--wg-ink); }

/* --------------------------------------------------------------------------
   10c. Who it is for
   -------------------------------------------------------------------------- */

.wg-lp-check {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--wg-space-sm);
	max-width: 62ch;
}

.wg-lp-check li {
	position: relative;
	padding-inline-start: 2rem;
	line-height: 1.5;
}

.wg-lp-check li::before {
	content: "\2713";
	position: absolute;
	inset-inline-start: 0;
	top: 0;
	width: 1.35rem;
	height: 1.35rem;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-size: 0.7rem;
	font-weight: 700;
	color: #fff;
	background: var(--wg-accent);
}

.wg-lp-qualify__out {
	margin-block-start: var(--wg-space-md);
	max-width: 62ch;
	padding: var(--wg-space-sm) var(--wg-space-md);
	border-inline-start: 3px solid var(--wg-line);
	font-size: var(--wg-step--1);
	color: var(--wg-ink-soft);
}

/* --------------------------------------------------------------------------
   10d. Integration chips
   Text, not logos. No asset sourcing, no licensing question, no CLS, and the
   names are the thing people scan for anyway.
   -------------------------------------------------------------------------- */

.wg-lp-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wg-space-xs);
}

.wg-lp-chip {
	margin: 0;
	padding: 0.5rem 0.9rem;
	border-radius: 999px;
	border: 1px solid var(--wg-line);
	background: var(--wg-surface);
	font-size: var(--wg-step--1);
	font-weight: 600;
}

.wg-lp-chips__note {
	margin-block-start: var(--wg-space-md);
	font-size: var(--wg-step--1);
}

/* --------------------------------------------------------------------------
   10e. Risk reversal
   -------------------------------------------------------------------------- */

.wg-lp-risk {
	display: grid;
	gap: var(--wg-space-sm);
	grid-template-columns: 1fr;
}

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

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

.wg-lp-risk__item {
	position: relative;
	margin: 0;
	padding: var(--wg-space-sm) var(--wg-space-sm) var(--wg-space-sm) 2.75rem;
	border-radius: var(--wg-radius);
	background: var(--wg-surface);
	border: 1px solid var(--wg-line);
	font-size: var(--wg-step--1);
	font-weight: 600;
	line-height: 1.4;
}

.wg-lp-risk__item::before {
	content: "\2713";
	position: absolute;
	inset-inline-start: var(--wg-space-sm);
	top: 50%;
	transform: translateY(-50%);
	width: 1.35rem;
	height: 1.35rem;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-size: 0.7rem;
	color: #fff;
	background: var(--wg-accent);
}

/* --------------------------------------------------------------------------
   11. FAQ — core/details, no JavaScript
   -------------------------------------------------------------------------- */

.wg-lp-faq details {
	border-bottom: 1px solid var(--wg-line);
	padding-block: var(--wg-space-sm);
}

.wg-lp-faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wg-space-sm);
	cursor: pointer;
	font-weight: 700;
	list-style: none;
}

.wg-lp-faq summary::-webkit-details-marker { display: none; }

.wg-lp-faq summary::after {
	content: "+";
	flex: none;
	font-size: 1.4em;
	line-height: 1;
	color: var(--wg-ink-soft);
}

.wg-lp-faq details[open] summary::after { content: "–"; }

.wg-lp-faq details p {
	margin: var(--wg-space-sm) 0 0;
	color: var(--wg-ink-soft);
	max-width: 70ch;
}

/* --------------------------------------------------------------------------
   12. Final CTA
   -------------------------------------------------------------------------- */

.wg-lp-final { text-align: center; }

.wg-lp-final .wg-lp-section__sub {
	margin-inline: auto;
	margin-bottom: var(--wg-space-md);
}

.wg-lp-final .wp-block-buttons { justify-content: center; }

.wg-lp-final__note {
	margin: var(--wg-space-sm) 0 0;
	font-size: var(--wg-step--1);
	color: rgba(255, 255, 255, 0.72);
}

/* --------------------------------------------------------------------------
   13. Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.wg-lp *,
	.wg-lp *::before,
	.wg-lp *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}