/**
 * Landing redesign tokens — "the loop" (2026-07-27)
 *
 * Source design: Claude Design `Landing Redesign.dc.html`.
 *
 * WHY THIS FILE EXISTS
 * --------------------
 * The design export hardcodes ~200 inline oklch() literals. Shipping those
 * verbatim would freeze the landing page to one theme and one mode. This file
 * is the translation layer: every literal in the export becomes a semantic
 * `--lp-*` token here, and the sections reference only tokens.
 *
 * WHY THE VALUES ARE EXPLICIT RATHER THAN `var(--color-primary-900)`
 * -----------------------------------------------------------------
 * Cocovox's neutral and primary ramps are RELATIVE — they invert per theme, so
 * a raw ramp step plus a `.dark` override double-inverts (the wizard-heading
 * bug, 1.04:1). The landing page is brand-locked marketing chrome: it should
 * look like Cocovox regardless of which app theme the visitor last chose. So
 * the light values are pinned, and dark is a deliberate second set — not an
 * emergent consequence of somebody else's ramp.
 *
 * Every value below IS a Cocovox brand token; the equivalence is noted so the
 * mapping stays auditable:
 *
 *   --lp-teal        oklch(44% 0.07 186)  = --color-primary-900 / cocovox --color-primary
 *   --lp-teal-border oklch(85% 0.13 187)  = --color-primary-300
 *   --lp-pink        oklch(65% 0.25 350)  = --signature-accent
 *   --lp-pink-bright oklch(73% 0.22 350)  = --signature-accent-bright
 *   --lp-lime        oklch(80% 0.20 130)  = --signature-secondary
 *   --lp-lime-tint   oklch(94% 0.08 132)  = --color-secondary-100
 *   --lp-violet      oklch(66% 0.19 313)  = --signature-creative-purple
 *
 * DARK MODE
 * ---------
 * Not guesswork. The design's own section 06 ("What we will never do") is
 * already a dark surface, and the designer solved the accent set for it:
 * pink 73%, lime 83%, violet 66%, teal-check 84%. Dark mode here is that
 * solution extended page-wide, so the dark page is the designer's palette
 * rather than a mechanical inversion of the light one.
 *
 * Contrast on --lp-paper-dark oklch(20%): ink 97% ~15:1, secondary 85% ~9:1,
 * muted 72% ~5.5:1, teal 82% ~8:1, lime 83% ~8.5:1, pink 73% ~5.5:1 — all AA
 * for body text. --lp-violet at ~4.2:1 is LARGE-TEXT ONLY (>=18.66px bold or
 * 24px regular); it is used for a 21px heading and must not be reused for body
 * copy.
 */

@layer tokens {
	:root {
		/* ---------- Surfaces ---------- */
		--lp-paper: oklch(99% 0.01 85); /* page background, warm near-white */
		--lp-surface: #fff; /* cards, panels */
		--lp-surface-sunken: oklch(99% 0.01 85);
		--lp-inverse-surface: oklch(20% 0.01 85); /* section 06 */

		/* ---------- Text ---------- */
		--lp-ink: oklch(20% 0.01 85);
		--lp-text-secondary: oklch(33% 0.02 85);
		--lp-text-muted: oklch(37% 0.02 85);
		--lp-ink-on-inverse: oklch(99% 0.01 85);
		--lp-text-secondary-on-inverse: rgba(255, 255, 255, 0.8);
		--lp-text-muted-on-inverse: rgba(255, 255, 255, 0.74);

		/* ---------- Borders ---------- */
		--lp-border: oklch(90% 0.01 85);
		--lp-border-subtle: oklch(94% 0.01 85);
		--lp-border-dashed: oklch(90% 0.01 85);

		/* ---------- Teal (primary / learner) ---------- */
		--lp-teal: oklch(44% 0.07 186);
		--lp-teal-text: oklch(44% 0.07 186);
		--lp-teal-on-tint: oklch(36% 0.08 185);
		--lp-teal-tint: oklch(95% 0.05 190);
		--lp-teal-border: oklch(85% 0.13 187);
		--lp-teal-wash: rgba(58, 181, 168, 0.12);
		--lp-teal-wash-strong: rgba(58, 181, 168, 0.25);
		--lp-teal-glow: rgba(58, 181, 168, 0.35);
		--lp-teal-node: rgb(55, 189, 166);

		/* ---------- Pink (family / emphasis) ---------- */
		--lp-pink: oklch(45% 0.18 352);
		--lp-pink-text: oklch(45% 0.18 352);
		--lp-pink-bright: oklch(65% 0.25 350);
		--lp-pink-soft: oklch(80% 0.18 350);
		--lp-pink-tint: oklch(92% 0.08 350);
		--lp-pink-wash: rgba(255, 20, 147, 0.1);
		--lp-pink-node: rgb(224, 95, 164);
		--lp-pink-marker: rgba(255, 20, 147, 0.55); /* the "never" highlighter */

		/* ---------- Lime (educator / success) ---------- */
		--lp-lime: oklch(80% 0.2 130);
		--lp-lime-deep: oklch(40% 0.12 130);
		--lp-lime-on-tint: oklch(32% 0.09 128);
		--lp-lime-icon: oklch(44% 0.12 128);
		--lp-lime-tint: oklch(94% 0.08 132);
		--lp-lime-tint-soft: oklch(97% 0.04 132); /* popular pricing card */
		--lp-lime-border: oklch(86% 0.16 130);
		--lp-lime-wash: rgba(132, 204, 50, 0.16);
		--lp-lime-node: rgb(119, 180, 55);

		/* ---------- Literals that must NOT drift with the theme ----------
		   These are the only places the landing page needs a fixed value, so
		   they are named here rather than inlined in a component (where the
		   theme-compliance gate rightly rejects raw hex).
		     - on-teal: white is legible on --lp-teal in every theme.
		     - contrast-demo pair: this IS the high-contrast demonstration. If it
		       tracked the theme it would stop demonstrating anything.
		     - pulse-core / shadow-flood: the hot centre of the travelling dot and
		       the hub's drop shadow, both purely optical. */
		--lp-on-teal: #fff;
		--lp-contrast-demo-bg: #000;
		--lp-contrast-demo-fg: #fff;
		--lp-pulse-core: #fff;
		--lp-shadow-flood: #1a1a1a;

		/* Accents as they appear ON the inverse surface (section 06). These are
		   the designer's own dark-section values, named so the section stops
		   carrying raw oklch() literals. */
		--lp-teal-on-inverse: oklch(84% 0.14 186);
		--lp-lime-on-inverse: oklch(83% 0.18 130);

		/* ---------- Violet (third promise) ---------- */
		--lp-violet: oklch(66% 0.19 313);

		/* ---------- Alpha overlays -------------------------------------
		   Named here because the theme gate rejects raw rgba() in components,
		   and rightly: an inline alpha is invisible to any later contrast or
		   theme audit. White overlays sit on --lp-inverse-surface; black ones
		   are optical shadow depths, not colours. */
		--lp-glass-fill: rgba(255, 255, 255, 0.05);
		--lp-text-body-on-inverse: rgba(255, 255, 255, 0.82);
		--lp-text-faint-on-inverse: rgba(255, 255, 255, 0.75);
		--lp-shadow-a06: rgba(0, 0, 0, 0.06);
		--lp-shadow-a10: rgba(0, 0, 0, 0.1);
		--lp-shadow-a12: rgba(0, 0, 0, 0.12);
		--lp-shadow-a14: rgba(0, 0, 0, 0.14);
		--lp-shadow-a18: rgba(0, 0, 0, 0.18);

		/* ---------- Scrapbook offset shadows (the Memphis stack) ---------- */
		--lp-shadow-offset-1: oklch(65% 0.25 350);
		--lp-shadow-offset-2: oklch(80% 0.2 130);
		--lp-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.04);
		--lp-shadow-card-hover: 0 8px 32px rgba(0, 0, 0, 0.08);
		--lp-shadow-float: 0 6px 16px rgba(0, 0, 0, 0.1);

		/* ---------- Hero / closing gradient washes ---------- */
		/* Replaces the design's <paper-shader>: no WebGL, no CDN, no runtime
		   third-party request. This is the export's own CSS fallback. */
		--lp-hero-gradient: linear-gradient(115deg, #b9ece2 0%, #fdfcf9 45%, #f9cee2 100%);
		--lp-hero-scrim: linear-gradient(
			90deg,
			rgba(253, 252, 249, 0.85) 0%,
			rgba(253, 252, 249, 0.42) 38%,
			rgba(253, 252, 249, 0) 62%
		);
		--lp-closing-gradient: linear-gradient(160deg, #f9cee2 0%, #fdfcf9 50%, #b9ece2 100%);
		--lp-inverse-gradient: radial-gradient(
				800px circle at 88% 10%,
				rgba(58, 181, 168, 0.12),
				transparent 55%
			),
			radial-gradient(700px circle at 10% 95%, rgba(162, 89, 201, 0.12), transparent 60%);

		/* ---------- Type ---------- */
		--lp-font-display: 'DM Serif Display', Georgia, serif;
		--lp-font-mono: var(--font-family-mono, ui-monospace, 'SF Mono', 'Menlo', monospace);

		/* ---------- Motion ---------- */
		--lp-ease-spring: cubic-bezier(0.34, 1.26, 0.64, 1);
		--lp-ease-spring-loose: cubic-bezier(0.34, 1.56, 0.64, 1);
		--lp-dur-fast: 250ms;
		--lp-dur: 350ms;

		/* ---------- Shape ---------- */
		--lp-radius-pill: 9999px;
		--lp-radius-card: 24px;
		--lp-radius-panel: 16px;
		--lp-radius-cta: 20px;
	}

	/*
	 * Dark mode. `.dark` is the app's source of truth (a MutationObserver on
	 * <html> drives the screenshot variants too), and the prefers-color-scheme
	 * block below covers the pre-hydration paint for visitors who never load
	 * the theme store — a cold landing visit is exactly that case.
	 */
	:root:is(.dark) {
		--lp-paper: oklch(20% 0.01 85);
		--lp-surface: oklch(24% 0.012 85);
		--lp-surface-sunken: oklch(22% 0.012 85);
		--lp-inverse-surface: oklch(16% 0.01 85);

		--lp-ink: oklch(97% 0.01 85);
		--lp-text-secondary: oklch(85% 0.012 85);
		--lp-text-muted: oklch(72% 0.012 85);

		--lp-border: oklch(32% 0.012 85);
		--lp-border-subtle: oklch(27% 0.012 85);
		--lp-border-dashed: oklch(32% 0.012 85);

		/* Accents lift to the design's own dark-section values. */
		--lp-teal-text: oklch(82% 0.13 186);
		--lp-teal-on-tint: oklch(88% 0.12 186);
		--lp-teal-tint: oklch(30% 0.05 188);
		--lp-teal-border: oklch(45% 0.09 187);
		--lp-teal-wash: rgba(58, 181, 168, 0.18);
		--lp-teal-wash-strong: rgba(58, 181, 168, 0.35);

		--lp-pink-text: oklch(73% 0.22 350);
		--lp-pink-tint: oklch(30% 0.09 351);
		--lp-pink-soft: oklch(60% 0.2 350);
		--lp-pink-wash: rgba(255, 20, 147, 0.18);

		--lp-lime-on-tint: oklch(83% 0.18 130);
		--lp-lime-icon: oklch(83% 0.18 130);
		--lp-lime-tint: oklch(28% 0.07 131);
		--lp-lime-tint-soft: oklch(25% 0.05 131);
		--lp-lime-border: oklch(45% 0.12 130);
		--lp-lime-wash: rgba(132, 204, 50, 0.2);

		--lp-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.4);
		--lp-shadow-card-hover: 0 8px 32px rgba(0, 0, 0, 0.5);
		--lp-shadow-float: 0 6px 16px rgba(0, 0, 0, 0.45);

		--lp-hero-gradient: linear-gradient(
			115deg,
			oklch(28% 0.05 188) 0%,
			oklch(20% 0.01 85) 45%,
			oklch(28% 0.07 350) 100%
		);
		--lp-hero-scrim: linear-gradient(
			90deg,
			rgba(26, 26, 24, 0.88) 0%,
			rgba(26, 26, 24, 0.5) 38%,
			rgba(26, 26, 24, 0) 62%
		);
		--lp-closing-gradient: linear-gradient(
			160deg,
			oklch(28% 0.07 350) 0%,
			oklch(20% 0.01 85) 50%,
			oklch(28% 0.05 188) 100%
		);
	}

	@media (prefers-color-scheme: dark) {
		:root:not(.light) {
			--lp-paper: oklch(20% 0.01 85);
			--lp-surface: oklch(24% 0.012 85);
			--lp-surface-sunken: oklch(22% 0.012 85);
			--lp-inverse-surface: oklch(16% 0.01 85);

			--lp-ink: oklch(97% 0.01 85);
			--lp-text-secondary: oklch(85% 0.012 85);
			--lp-text-muted: oklch(72% 0.012 85);

			--lp-border: oklch(32% 0.012 85);
			--lp-border-subtle: oklch(27% 0.012 85);
			--lp-border-dashed: oklch(32% 0.012 85);

			--lp-teal-text: oklch(82% 0.13 186);
			--lp-teal-on-tint: oklch(88% 0.12 186);
			--lp-teal-tint: oklch(30% 0.05 188);
			--lp-teal-border: oklch(45% 0.09 187);
			--lp-teal-wash: rgba(58, 181, 168, 0.18);
			--lp-teal-wash-strong: rgba(58, 181, 168, 0.35);

			--lp-pink-text: oklch(73% 0.22 350);
			--lp-pink-tint: oklch(30% 0.09 351);
			--lp-pink-soft: oklch(60% 0.2 350);
			--lp-pink-wash: rgba(255, 20, 147, 0.18);

			--lp-lime-on-tint: oklch(83% 0.18 130);
			--lp-lime-icon: oklch(83% 0.18 130);
			--lp-lime-tint: oklch(28% 0.07 131);
			--lp-lime-tint-soft: oklch(25% 0.05 131);
			--lp-lime-border: oklch(45% 0.12 130);
			--lp-lime-wash: rgba(132, 204, 50, 0.2);

			--lp-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.4);
			--lp-shadow-card-hover: 0 8px 32px rgba(0, 0, 0, 0.5);
			--lp-shadow-float: 0 6px 16px rgba(0, 0, 0, 0.45);

			--lp-hero-gradient: linear-gradient(
				115deg,
				oklch(28% 0.05 188) 0%,
				oklch(20% 0.01 85) 45%,
				oklch(28% 0.07 350) 100%
			);
			--lp-hero-scrim: linear-gradient(
				90deg,
				rgba(26, 26, 24, 0.88) 0%,
				rgba(26, 26, 24, 0.5) 38%,
				rgba(26, 26, 24, 0) 62%
			);
			--lp-closing-gradient: linear-gradient(
				160deg,
				oklch(28% 0.07 350) 0%,
				oklch(20% 0.01 85) 50%,
				oklch(28% 0.05 188) 100%
			);
		}
	}
}

/* The paper-grain dot field the design applies to <body>. Scoped to the
   landing root so it never leaks into the app shell. */
/* NOT in @layer — deliberately. Unlayered declarations outrank every
   layer, and the older landing chrome sets link/button styles unlayered.
   Inside @layer components these primitives lost to it (the CTA kept the
   global link underline and dropped its border). This file loads last, so
   unlayered + source order is what actually wins. */
	.lp-root {
		background-color: var(--lp-paper);
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cdefs%3E%3Cpattern id='p' x='0' y='0' width='20' height='20' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='10' cy='10' r='1.5' fill='rgba(0,0,0,0.02)'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100' height='100' fill='url(%23p)'/%3E%3C/svg%3E");
		color: var(--lp-ink);
		line-height: 1.7;
		-webkit-font-smoothing: antialiased;
	}

	:root:is(.dark) .lp-root {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cdefs%3E%3Cpattern id='p' x='0' y='0' width='20' height='20' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='10' cy='10' r='1.5' fill='rgba(255,255,255,0.03)'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100' height='100' fill='url(%23p)'/%3E%3C/svg%3E");
	}

	/* Section 06 pins the dark treatment in BOTH modes — it is inverse by
	   design, not by theme. */
	.lp-inverse {
		background: var(--lp-inverse-surface);
		color: var(--lp-ink-on-inverse);
	}

	/* ==========================================================
	 * Shared primitives
	 *
	 * These repeat in every section of the design. They live here rather than
	 * in each component's scoped <style> so the display scale, the CTA shape
	 * and the card treatment have exactly one definition — the same reasoning
	 * that produced .cv-chapter-eyebrow after the family drifted from being
	 * hand-copied per section (panel iter-2, 2026-06-10).
	 * ========================================================== */

	.lp-root .lp-section-title {
		font-family: var(--lp-font-display);
		font-weight: 400;
		font-size: clamp(34px, 2.3vw + 18px, 48px);
		line-height: 1.08;
		letter-spacing: -0.5px;
		margin: 0 0 20px;
		text-wrap: balance;
		color: var(--lp-ink);
	}

	.lp-root .lp-section-sub {
		font-size: 17px;
		line-height: 1.65;
		color: var(--lp-text-secondary);
		margin: 0;
		text-wrap: pretty;
	}

	/* ---------- Call to action ---------- */

	.lp-root .lp-cta,
.lp-root a.lp-cta {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
		font-size: 16px;
		font-weight: 600;
		text-decoration: none;
		border-radius: var(--lp-radius-cta);
		min-height: 44px;
		box-sizing: border-box;
		cursor: pointer;
		font-family: inherit;
		transition:
			transform var(--lp-dur) var(--lp-ease-spring),
			box-shadow var(--lp-dur) ease,
			border-color var(--lp-dur-fast) ease,
			background var(--lp-dur-fast) ease;
	}

	.lp-root .lp-cta-primary {
		background: var(--lp-teal);
		color: #fff;
		border: 2px solid var(--lp-teal);
		padding: 13px 30px;
	}

	.lp-root .lp-cta-primary:hover {
		transform: translateY(-3px) scale(1.02) rotate(0.5deg);
		box-shadow: 0 10px 24px var(--lp-teal-glow);
	}

	.lp-root .lp-cta-primary:active {
		transform: scale(0.96) rotate(-1deg);
	}

	.lp-root .lp-cta-secondary {
		background: transparent;
		color: var(--lp-teal-text);
		border: 2px solid var(--lp-teal-wash-strong);
		padding: 13px 28px;
	}

	.lp-root .lp-cta-secondary:hover {
		transform: translateY(-3px);
		border-color: var(--lp-teal);
		background: var(--lp-teal-wash);
	}

	.lp-root .lp-cta:focus-visible {
		outline: 3px solid var(--lp-pink-bright);
		outline-offset: 3px;
	}

	@media (prefers-reduced-motion: reduce) {
		.lp-cta:hover,
		.lp-root .lp-cta:active {
			transform: none;
		}
	}

	/* ---------- Cards ---------- */

	.lp-root .lp-card {
		background: var(--lp-surface);
		border: 1px solid var(--lp-border);
		border-radius: var(--lp-radius-card);
		box-shadow: var(--lp-shadow-card);
	}

	/* The signature scrapbook stack: two offset solid shadows, no blur. */
	.lp-root .lp-card-stacked {
		border: 2px solid var(--lp-teal-border);
		box-shadow:
			4px 4px 0 var(--lp-shadow-offset-1),
			8px 8px 0 var(--lp-shadow-offset-2);
	}

/* ==========================================================
 * Chrome bridge — header, footer, pricing
 *
 * These three components predate the redesign and still own their own markup
 * and behaviour: the header carries the ThemeToggle and the mobile-menu
 * contract, the footer carries NewsletterSignup, and PricingSection routes
 * consumer tiers into the real signup funnel
 * (/auth?mode=signup&tier=..&audience=.. + trackConversion).
 *
 * Rewriting them wholesale to restyle them would put a working conversion
 * funnel at risk for a visual result. Instead this block re-skins the legacy
 * class names onto the redesign's tokens, so the chrome reads as one surface
 * with the ten redesigned sections while the markup and wiring stay untouched.
 *
 * Everything is scoped under .lp-root, so no other page that uses these
 * classes is affected.
 * ========================================================== */

/* ---------- Header ---------- */

.lp-root .landing-header-container,
.lp-root header.landing-header {
	background: color-mix(in srgb, var(--lp-paper) 88%, transparent);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--lp-border-subtle);
}

.lp-root .landing-nav-link {
	font-size: 14px;
	font-weight: 500;
	color: var(--lp-text-secondary);
	min-height: 44px;
	padding: 0 14px;
	display: inline-flex;
	align-items: center;
	border-radius: 12px;
	transition:
		background var(--lp-dur-fast) ease,
		color var(--lp-dur-fast) ease;
}

.lp-root .landing-nav-link:hover {
	background: var(--lp-teal-wash);
	color: var(--lp-teal-text);
}

.lp-root .landing-login-btn {
	background: var(--lp-teal);
	color: #fff;
	border: 2px solid var(--lp-teal);
	border-radius: var(--lp-radius-cta);
	font-size: 14px;
	font-weight: 600;
	min-height: 44px;
	padding: 0 22px;
	display: inline-flex;
	align-items: center;
	transition:
		transform var(--lp-dur) var(--lp-ease-spring),
		box-shadow var(--lp-dur) ease;
}

.lp-root .landing-login-btn:hover {
	transform: translateY(-2px) rotate(0.5deg);
	box-shadow: 0 8px 20px var(--lp-teal-glow);
}

/* ---------- Footer ---------- */

.lp-root .cv-footer {
	background: var(--lp-surface);
	border-top: 1px solid var(--lp-border-subtle);
	color: var(--lp-text-secondary);
}

.lp-root .cv-footer-section-title {
	font-family: var(--lp-font-mono);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--lp-text-muted);
}

.lp-root .cv-footer-link {
	font-size: 13px;
	color: var(--lp-text-secondary);
	transition: color var(--lp-dur-fast) ease;
}

.lp-root .cv-footer-link:hover {
	color: var(--lp-teal-text);
}

.lp-root .cv-footer-roadmap {
	border-top: 1px dashed var(--lp-border-dashed);
	color: var(--lp-text-muted);
	font-size: 12px;
}

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

.lp-root .pricing-section {
	background: var(--lp-surface);
	border-top: 1px solid var(--lp-border-subtle);
	border-bottom: 1px solid var(--lp-border-subtle);
}

.lp-root .pricing-title,
.lp-root .pricing-card-title {
	font-family: var(--lp-font-display);
	font-weight: 400;
	letter-spacing: -0.5px;
	color: var(--lp-ink);
	text-wrap: balance;
}

.lp-root .pricing-subtitle,
.lp-root .pricing-card-subtitle {
	color: var(--lp-text-secondary);
}

.lp-root .pricing-badge {
	background: var(--lp-lime-tint);
	color: var(--lp-lime-on-tint);
	border-radius: var(--lp-radius-pill);
	font-family: var(--lp-font-mono);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.lp-root .pricing-card {
	background: var(--lp-surface);
	border: 2px solid var(--lp-border);
	border-radius: var(--lp-radius-card);
	box-shadow: var(--lp-shadow-card);
	transition: transform var(--lp-dur) var(--lp-ease-spring);
}

.lp-root .pricing-card:hover {
	transform: translateY(-4px);
}

/* The featured tier picks up the scrapbook stack the loop panels use. */
.lp-root .pricing-card.featured,
.lp-root .pricing-card[data-popular='true'] {
	background: var(--lp-lime-tint-soft);
	border-color: var(--lp-teal);
	box-shadow:
		4px 4px 0 var(--lp-shadow-offset-1),
		8px 8px 0 var(--lp-shadow-offset-2);
}

.lp-root .pricing-card-price {
	font-family: var(--lp-font-display);
	color: var(--lp-ink);
}

.lp-root .pricing-feature {
	color: var(--lp-text-secondary);
	font-size: 14px;
	line-height: 1.55;
}

.lp-root .pricing-cta-note {
	color: var(--lp-text-muted);
	font-size: 13px;
}

@media (prefers-reduced-motion: reduce) {
	.lp-root .landing-login-btn:hover,
	.lp-root .pricing-card:hover {
		transform: none;
	}
}