/* Public marketing palette: navy ink, grey paper, sky and blue accents.
   Alpha variants derive from these with rgba(1, 5, 33, …) or color-mix. */
.tekma-landing,
.auth-layout,
.setup-layout,
.auth-eyebrow,
:root:has(.sample-embed[data-appearance="landing"]),
.sample-embed[data-appearance="landing"],
.sample-detail-dialog,
.lp2-dialog {
	/* Ink is text; the near-black --lp-deep is reserved for surfaces (band, cards on dark). */
	--lp-ink: #101638;
	--lp-ink-2: #101638;
	--lp-muted: #40455f;
	--lp-steel: #868a9c;
	--lp-line: rgba(1, 5, 33, 0.15);
	--lp-line-soft: rgba(1, 5, 33, 0.1);
	--lp-paper: #f3f4f6;
	--lp-raised-soft: #e7e8eb;
	--lp-cloud: #dbdce1;
	--lp-sky: #97e6ff;
	--lp-sky-soft: #c7dbff;
	--lp-blue: #0055ff;
	--lp-blue-deep: #0041be;
	--lp-blue-night: #002f8c;
	--lp-error: #c02c0a;
	--lp-green: #2f6f10;
	--lp-deep: #010521;
	--lp-dark-raised: #101638;
	--lp-dark-line: rgba(255, 255, 255, 0.12);
	--lp-on-dark: #ffffff;
	--lp-muted-on-dark: #b8bccb;
	/* Hairline ring plus a soft close shadow; cards carry no CSS border. */
	--lp-card-shadow:
		0 1px 2px rgba(1, 5, 33, 0.02), 0 1px 3px rgba(1, 5, 33, 0.09),
		0 0 0 1px rgba(1, 5, 33, 0.01), 0 0 1px rgba(1, 5, 33, 0.27);
	--lp-font:
		"Geist Variable", Geist, "Inter Variable", Inter, -apple-system,
		BlinkMacSystemFont, "Segoe UI", sans-serif;
	--lp-mono:
		"Geist Mono Variable", "Geist Mono", "JetBrains Mono Variable",
		ui-monospace, SFMono-Regular, Menlo, monospace;
}

:root:has(.sample-embed[data-appearance="landing"]),
.sample-embed[data-appearance="landing"],
.sample-detail-dialog,
.lp2-dialog {
	--background: white;
	--foreground: var(--lp-ink);
	--card: white;
	--card-foreground: var(--lp-ink);
	--popover: white;
	--popover-foreground: var(--lp-ink);
	--primary: var(--lp-sky);
	--primary-foreground: var(--lp-ink-2);
	--secondary: var(--lp-raised-soft);
	--secondary-foreground: var(--lp-ink);
	--muted: var(--lp-paper);
	--muted-foreground: var(--lp-muted);
	--accent: var(--lp-paper);
	--accent-foreground: var(--lp-ink);
	--border: var(--lp-line);
	--input: var(--lp-line);
	--ring: var(--lp-blue);
	color-scheme: light;
}


/* Shared by the React route and the no-JavaScript production entry. */
.tekma-landing {
	color: var(--lp-ink);
	background: #fff;
	font-family: var(--lp-font);
	font-size: 16px;
	line-height: 24px;
	font-feature-settings: "cv03", "cv04", "cv09", "cv11";
	-webkit-font-smoothing: antialiased;
	overflow: clip;
	color-scheme: light;
}
.tekma-landing * {
	box-sizing: border-box;
}
.tekma-landing h1,
.tekma-landing h2,
.tekma-landing h3,
.tekma-landing h4,
.tekma-landing p,
.tekma-landing ul {
	margin: 0;
}
.tekma-landing ul {
	padding: 0;
	list-style: none;
}
.tekma-landing a {
	color: inherit;
	text-decoration: none;
}
.tekma-landing button,
.tekma-landing summary {
	font: inherit;
	cursor: pointer;
}
.tekma-landing button {
	color: inherit;
}
.tekma-landing svg {
	flex-shrink: 0;
}
.tekma-landing code {
	font-family: var(--lp-mono);
}
.tekma-landing a:focus-visible,
.tekma-landing button:focus-visible,
.tekma-landing summary:focus-visible {
	outline: 2px solid var(--lp-blue);
	outline-offset: 3px;
}
.tekma-landing section[id],
.lp-demo {
	position: relative;
	scroll-margin-top: 96px;
}
/* Sits over the iframe so the page keeps scrolling; a click hands it over. */
.tekma-landing .lp-demo-gate {
	position: absolute;
	inset: 0;
	z-index: 4;
	display: grid;
	place-items: center;
	padding: 0;
	border: 0;
	background: rgba(1, 5, 33, 0.38);
	backdrop-filter: blur(2px);
	cursor: pointer;
	transition: background-color 0.2s;
}
.tekma-landing .lp-demo-gate:hover {
	background: rgba(1, 5, 33, 0.3);
}
.tekma-landing .lp-demo-gate:focus-visible {
	outline: 2px solid var(--lp-blue);
	outline-offset: -2px;
}
.lp-demo-gate span {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 20px;
	border-radius: 999px;
	background: #fff;
	color: var(--lp-ink);
	font-size: 14px;
	line-height: 20px;
	font-weight: 500;
	box-shadow: 0 12px 32px -8px rgba(1, 5, 33, 0.55);
	transition: transform 0.2s;
}
.lp-demo-gate:hover span {
	transform: translateY(-1px);
}
.tekma-landing h1 {
	font-size: 44px;
	line-height: 50px;
	font-weight: 500;
	letter-spacing: -0.01em;
	text-wrap: balance;
}
.tekma-landing h2 {
	font-size: 30px;
	line-height: 36px;
	font-weight: 500;
	letter-spacing: -0.01em;
	text-wrap: balance;
}
.tekma-landing h3 {
	font-size: 20px;
	line-height: 26px;
	font-weight: 500;
	letter-spacing: -0.005em;
	text-wrap: balance;
}
.landing-skip {
	position: absolute;
	left: -9999px;
}
.landing-skip:focus {
	left: 20px;
	top: 20px;
	z-index: 100;
	background: white;
	padding: 12px 20px;
	border: 1px solid var(--lp-line);
	border-radius: 8px;
}

/* Buttons and links */
.lp-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	min-height: 36px;
	padding: 6px 14px;
	border: 0;
	border-radius: 8px;
	background: var(--lp-ink-2);
	color: #fff;
	font-size: 14px;
	line-height: 24px;
	font-weight: 500;
	white-space: nowrap;
	box-shadow: inset 0 0 0 1px var(--lp-line-soft);
	transition:
		background-color 150ms ease,
		color 150ms ease,
		transform 150ms ease;
}
.lp-button:hover {
	background: var(--lp-blue-night);
}
.lp-button:active {
	transform: translateY(1px);
}
.lp-button-sky {
	background: var(--lp-sky);
}
.lp-button-sky:hover {
	background: var(--lp-sky-soft);
}
.lp-button-white {
	background: #fff;
}
.lp-button-white:hover {
	background: var(--lp-paper);
}
.lp-button-light {
	background: var(--lp-sky);
}
.lp-button-light:hover {
	background: var(--lp-sky-soft);
}
.tekma-landing .lp-button {
	color: #fff;
}
.tekma-landing .lp-button-sky {
	color: var(--lp-ink-2);
}
.tekma-landing .lp-button-white {
	color: var(--lp-muted);
}
.tekma-landing .lp-button-white:hover {
	color: var(--lp-ink);
}
.tekma-landing .lp-button-light {
	color: var(--lp-ink-2);
}
.lp-button-small {
	min-height: 32px;
	padding: 4px 12px;
}
.lp-button-large {
	min-height: 46px;
	padding: 11px 22px;
	font-size: 15px;
	gap: 8px;
}
.tekma-landing .lp-text-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 15px;
	font-weight: 500;
	color: var(--lp-blue-deep);
}
.tekma-landing .lp-text-link:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* Small parts used inside mockups */
.lp-mini-label {
	display: block;
	margin-bottom: 8px;
	font-size: 12px;
	line-height: 16px;
	font-weight: 500;
	color: var(--lp-muted);
}
.lp-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	padding: 1px 6px;
	border-radius: 4px;
	font-family: var(--lp-mono);
	font-size: 12px;
	line-height: 18px;
	background: var(--lp-paper);
	color: var(--lp-ink);
}
.lp-pill-sky {
	background: var(--lp-sky);
	color: var(--lp-ink-2);
}
.lp-pill-error {
	background: #fff;
	color: var(--lp-error);
	box-shadow: inset 0 0 0 1px var(--lp-error);
}
.lp-pill-outline {
	background: #fff;
	box-shadow: inset 0 0 0 1px var(--lp-ink);
}
.lp-on {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-left: auto;
	font-style: normal;
	font-size: 12px;
	font-weight: 500;
	color: var(--lp-green);
}
.lp-on::before {
	content: "";
	width: 22px;
	height: 12px;
	border-radius: 999px;
	background: var(--lp-blue);
	box-shadow:
		inset -11px 0 0 0 #fff,
		inset -12px 0 0 1px var(--lp-blue);
}

/* Navigation */
.lp-nav-wrap {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 30;
	display: flex;
	justify-content: center;
	padding: 20px 80px 0;
	pointer-events: none;
}
.lp-nav {
	position: relative;
	pointer-events: auto;
	display: flex;
	align-items: center;
	gap: 20px;
	width: 100%;
	max-width: 720px;
	min-height: 47px;
	padding: 8px 20px 8px 14px;
	border-radius: 32px 12px 12px 32px;
	background: #fff;
	box-shadow:
		0 0 0 1px var(--lp-line),
		0 8px 24px -16px rgba(1, 5, 33, 0.25);
}
.lp-wordmark {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 20px;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--lp-ink);
}
.lp-wordmark svg {
	width: 26px;
	height: 26px;
}
.lp-brand-period {
	color: var(--lp-blue);
	font-weight: inherit;
}
.lp-nav > nav {
	display: flex;
	align-items: center;
	margin-right: auto;
}
.lp-nav > nav a {
	padding: 2px 8px;
	font-size: 14px;
	line-height: 24px;
	color: var(--lp-muted);
	border-radius: 6px;
}
.lp-nav > nav a:hover {
	color: var(--lp-ink);
	background: var(--lp-paper);
}
.lp-nav-actions {
	display: flex;
	align-items: center;
	gap: 12px;
}
.lp-nav-divider {
	width: 1px;
	height: 22px;
	background: var(--lp-line);
}
.lp-nav-login {
	font-size: 14px;
	font-weight: 500;
	color: var(--lp-ink);
}
.lp-nav-login:hover {
	color: var(--lp-blue);
}
.lp-mobile-nav {
	display: none;
}

/* Hero */
.lp-hero {
	position: relative;
	overflow: hidden;
	padding: 148px 80px 0;
	background: var(--lp-paper);
}
.lp-hero::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 640px;
	background:
		radial-gradient(
			60% 50% at 4% 80%,
			rgba(0, 85, 255, 0.9) 0%,
			rgba(0, 85, 255, 0) 70%
		),
		radial-gradient(
			60% 50% at 96% 80%,
			rgba(0, 85, 255, 0.9) 0%,
			rgba(0, 85, 255, 0) 70%
		),
		linear-gradient(
			180deg,
			rgba(199, 219, 255, 0) 0%,
			rgba(199, 219, 255, 0.35) 22%,
			rgba(151, 230, 255, 0.7) 40%,
			var(--lp-blue) 60%,
			var(--lp-blue-night) 80%,
			var(--lp-deep) 100%
		);
}
/* A fine hairline grid behind the hero copy and the next two section headers,
   fading out before the content (the patterncraft "top fade grid" idea), over
   pale sky washes. Cheap, prerendered, no canvas. */
.lp-hero::after,
.lp-features::before,
.lp-handoff::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
		linear-gradient(to right, rgba(1, 5, 33, 0.07) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(1, 5, 33, 0.07) 1px, transparent 1px),
		radial-gradient(
			40% 40% at 20% 28%,
			rgba(199, 219, 255, 0.5) 0%,
			rgba(199, 219, 255, 0) 70%
		),
		radial-gradient(
			40% 40% at 80% 26%,
			rgba(151, 230, 255, 0.34) 0%,
			rgba(151, 230, 255, 0) 70%
		);
	background-size:
		24px 24px,
		24px 24px,
		auto,
		auto;
	background-position: 50% 0;
}
.lp-hero::after {
	height: 640px;
	mask-image: radial-gradient(
		70% 80% at 50% 0%,
		#000 0%,
		rgba(0, 0, 0, 0.55) 50%,
		transparent 100%
	);
}
.lp-features,
.lp-handoff {
	position: relative;
}
.lp-features::before,
.lp-handoff::before {
	height: 380px;
	background-image:
		linear-gradient(to right, rgba(1, 5, 33, 0.06) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(1, 5, 33, 0.06) 1px, transparent 1px),
		radial-gradient(
			36% 70% at 14% 20%,
			rgba(199, 219, 255, 0.42) 0%,
			rgba(199, 219, 255, 0) 70%
		);
	background-size:
		24px 24px,
		24px 24px,
		auto;
	mask-image: radial-gradient(
		55% 100% at 18% 0%,
		#000 0%,
		rgba(0, 0, 0, 0.5) 50%,
		transparent 100%
	);
}
.lp-features > *,
.lp-handoff > * {
	position: relative;
}
.lp-hero > * {
	position: relative;
}
.lp-hero-copy {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 760px;
	margin: 0 auto;
	text-align: center;
}
.lp-hero-tag {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 24px;
	padding: 6px 12px 6px 8px;
	border-radius: 12px;
	background: var(--lp-sky-soft);
	box-shadow: inset 0 0 0 1px
		color-mix(in srgb, var(--lp-blue) 18%, transparent);
	font-size: 14px;
	line-height: 20px;
	font-weight: 500;
	color: var(--lp-blue-deep);
}
.lp-hero-tag svg {
	width: 22px;
	height: 22px;
	padding: 3px;
	border-radius: 6px;
	background: #fff;
	color: var(--lp-blue-deep);
}
.lp-hero h1 {
	font-size: 64px;
	line-height: 70px;
	letter-spacing: -0.035em;
}
.lp-lead {
	max-width: 560px;
	margin: 20px auto 0;
	font-size: 18px;
	line-height: 28px;
	color: var(--lp-muted);
}
.lp-hero-actions {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 22px;
	margin-top: 26px;
}
.lp-demo-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 600;
	color: var(--lp-ink);
}
.lp-demo-link:hover {
	color: var(--lp-blue-deep);
}
.lp-hero-floaters span {
	position: absolute;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 84px;
	height: 84px;
	border-radius: 14px;
	background: #fff;
	box-shadow:
		0 0 0 6px #fff,
		0 0 0 7px rgba(1, 5, 33, 0.05),
		0 10px 12px -4px rgba(1, 5, 33, 0.08);
	color: var(--lp-ink);
}
.lp-hero-floaters svg {
	width: 40px;
	height: 40px;
}
.lp-hero-floaters span:nth-child(1) {
	left: 9%;
	top: 150px;
	rotate: -8deg;
}
.lp-hero-floaters span:nth-child(2) {
	left: 10%;
	top: 340px;
	rotate: 6deg;
}
.lp-hero-floaters span:nth-child(3) {
	right: 9%;
	top: 150px;
	rotate: 7deg;
}
.lp-hero-floaters span:nth-child(4) {
	right: 10%;
	top: 340px;
	rotate: -6deg;
}
.lp-note {
	margin-top: 16px;
	text-align: center;
	font-size: 13px;
	line-height: 20px;
	color: var(--lp-muted);
}
.lp-hero-stage {
	position: relative;
	max-width: 1200px;
	margin: 56px auto 0;
	perspective: 1200px;
	--lp-tilt: 0deg;
}
.lp-hero-tilt {
	position: relative;
}
.lp-hero-tilt {
	transform: rotateX(var(--lp-tilt));
	transform-origin: 50% 60%;
	will-change: transform;
}
.lp-hero-window {
	background: rgba(255, 255, 255, 0.7);
}

.lp-hero-caption {
	margin-top: 24px;
	text-align: center;
	font-size: 13px;
	line-height: 20px;
	color: rgba(255, 255, 255, 0.85);
}

/* Browser window frame */
/* Umbrave window: translucent frame with a hairline, dots, inset white screen. */
.lp-window {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 10px 4px 4px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.5);
	backdrop-filter: blur(8px);
	box-shadow:
		0 0 0 1px rgba(1, 5, 33, 0.15),
		0 0.6px 0.6px -1.25px rgba(1, 5, 33, 0.18),
		0 2.3px 2.3px -2.5px rgba(1, 5, 33, 0.16),
		0 10px 10px -3.75px rgba(1, 5, 33, 0.06);
}
.lp-window-bar {
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 12px;
	padding: 0 6px;
	font-size: 12px;
	line-height: 16px;
	color: var(--lp-muted);
}
.lp-window-dots {
	display: flex;
	gap: 8px;
}
.lp-window-dots i {
	display: block;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: rgba(1, 5, 33, 0.15);
}
.lp-window-url {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	max-width: 60%;
	margin-left: auto;
	margin-right: auto;
	padding: 0 12px;
	border-radius: 999px;
	background: rgba(1, 5, 33, 0.06);
	font-family: var(--lp-mono);
	font-size: 11px;
	line-height: 20px;
	color: var(--lp-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.lp-window-app {
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 0 0 1px var(--lp-line-soft);
	overflow: hidden;
}
.lp-hero-window .lp-window-bar {
	padding: 0 8px 0 10px;
}

/* Interactive sample inside the hero window */
.tekma-landing #demo.lp-demo {
	position: relative;
	padding: 0;
	container-type: inline-size;
	overflow: hidden;
}
.lp-demo-frame {
	display: block;
	width: 100%;
	height: 680px;
	border: 0;
	background: #fff;
}
@media (min-width: 768px) {
	.lp-demo-frame {
		height: clamp(560px, 58cqw, 680px);
	}
}
.tekma-landing .lp-demo-expand {
	position: absolute;
	right: 10px;
	bottom: 10px;
	z-index: 5;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 1px solid var(--lp-line);
	border-radius: 8px;
	background: #fff;
	color: var(--lp-ink);
	box-shadow: 0 2px 8px rgba(1, 5, 33, 0.12);
	cursor: pointer;
}
[data-slot="dialog-content"].sample-detail-dialog {
	inset: 16px;
	/* translate-x-0 translate-y-0 on the element clear the centering; the CSS
	   minifier folds `translate: none` into `transform`, which does not. */
	transform: none;
	width: calc(100vw - 32px);
	max-width: none;
	height: calc(100dvh - 32px);
	max-height: none;
	border-radius: 16px;
	padding: 0;
	gap: 0;
	display: grid;
	grid-template-rows: 56px minmax(0, 1fr);
	overflow: hidden;
}

/* Integration ticker on the navy band */
.lp-ticker {
	max-width: 1200px;
	margin: 44px auto 0;
	padding: 0 0 36px;
	text-align: center;
	color: #fff;
}
.lp-ticker p {
	font-family: var(--lp-mono);
	font-size: 13px;
	line-height: 20px;
}
.lp-ticker ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px 36px;
	margin-top: 20px;
}
.lp-ticker li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: -0.01em;
	opacity: 0.85;
}
.lp-ticker li svg {
	width: 22px;
	height: 22px;
	/* No filter here. This band used to run `grayscale(1) brightness(3)` over
	   every mark, which flattened Slack's four colours into a white smear. The
	   list carries `data-marks-on-dark` instead, so each mark switches to the
	   monochrome alternate its own guidelines allow. */
}

/* Sections */
.lp-section {
	padding: 88px 80px;
}
.lp-section > * {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}
.lp-section-heading {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 36px;
}
.lp-section-heading[data-align="center"] {
	align-items: center;
	text-align: center;
}
.lp-section-heading p {
	max-width: 520px;
	font-size: 15px;
	line-height: 24px;
	color: var(--lp-muted);
}

/* Feature explorer */
.lp-explorer-heading {
	display: grid;
	grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
	gap: 24px 64px;
	align-items: start;
	margin-bottom: 36px;
}
.lp-explorer-heading h2 {
	font-size: 40px;
	line-height: 44px;
}
.lp-explorer-heading > div {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	max-width: 480px;
	padding-top: 4px;
}
.lp-explorer-heading p {
	font-size: 15px;
	line-height: 24px;
	color: var(--lp-muted);
}
.lp-explorer {
	display: grid;
	grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
	gap: 64px;
	align-items: start;
}
.lp-explorer-item {
	position: relative;
	border-top: 1px solid var(--lp-line);
}
.lp-explorer-item:last-child {
	border-bottom: 1px solid var(--lp-line);
}
.lp-explorer-item > button {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	padding: 16px 0;
	border: 0;
	background: none;
	text-align: left;
	font-size: 18px;
	line-height: 24px;
	font-weight: 500;
	color: var(--lp-ink);
}
.lp-explorer-item > button > svg {
	color: var(--lp-muted);
}
.lp-explorer-item > button > span {
	flex: 1;
}
.lp-explorer-item > button > i {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px var(--lp-line);
	color: var(--lp-ink);
	transition:
		background-color 150ms ease,
		box-shadow 150ms ease;
}
.lp-explorer-item > button:hover > i {
	background: var(--lp-paper);
}
.lp-explorer-item[data-open="true"] > button > i {
	background: var(--lp-paper);
	box-shadow: none;
}
.lp-explorer-item > div {
	padding: 0 48px 18px 36px;
}
.lp-explorer-item > div p {
	font-size: 15px;
	line-height: 24px;
	color: var(--lp-muted);
}
.lp-explorer-progress {
	position: absolute;
	left: 0;
	bottom: -1px;
	height: 2px;
	width: 100%;
	background: var(--lp-blue);
	transform-origin: left center;
	animation: lp-progress 7s linear forwards;
}
@keyframes lp-progress {
	from {
		transform: scaleX(0);
	}
	to {
		transform: scaleX(1);
	}
}
.lp-explorer-stage {
	position: relative;
	min-height: 500px;
	overflow: hidden;
	border-radius: 12px;
	background: color-mix(in srgb, var(--lp-sky) 22%, #fff);
	box-shadow: var(--lp-card-shadow);
}
.lp-explorer-scene {
	position: absolute;
	inset: 36px 36px -36px;
	opacity: 0;
	transition: opacity 400ms ease;
}
.lp-explorer-scene[data-active="true"] {
	opacity: 1;
}
.lp-explorer-scene > .lp-window,
.lp-explorer-scene > .lp-terminal {
	position: absolute;
	inset: 0;
}
.lp-explorer-scene .lp-window-app {
	flex: 1;
}

/* Recorder mockup */
.lp-recorder-layout {
	display: grid;
	grid-template-columns: 360px minmax(0, 1fr);
	min-height: 100%;
}
.lp-recorder {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 20px;
}
.lp-recorder-brand {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
	font-size: 14px;
}
.lp-recorder-brand svg {
	width: 22px;
	height: 22px;
}
.lp-recorder-brand span {
	margin-left: auto;
	font-size: 12px;
	color: var(--lp-muted);
}
.lp-recorder-option {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-radius: 8px;
	background: var(--lp-paper);
	font-size: 14px;
}
.lp-recorder-option > svg {
	margin-left: auto;
	color: var(--lp-muted);
}
.lp-record-button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-top: 8px;
	padding: 12px;
	border-radius: 8px;
	background: var(--lp-ink-2);
	color: #fff;
	font-size: 14px;
	font-weight: 500;
}
.lp-record-button span {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--lp-error);
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25);
}
.lp-recent {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 20px;
	border-left: 1px solid var(--lp-line-soft);
	font-size: 13px;
	line-height: 18px;
}
.lp-recent > div {
	padding: 8px 10px;
	border-radius: 8px;
	font-weight: 500;
}
.lp-recent > div:first-of-type {
	background: var(--lp-paper);
}
.lp-recent span {
	display: flex;
	flex-direction: column;
}
.lp-recent small {
	font-size: 12px;
	font-weight: 400;
	color: var(--lp-muted);
}

/* DevTools mockup */
.lp-devtools {
	padding: 16px 20px 20px;
	font-size: 13px;
	line-height: 20px;
}
.lp-devtools-tabs {
	display: flex;
	gap: 4px;
	margin-bottom: 14px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--lp-line-soft);
}
.lp-devtools-tabs span {
	padding: 4px 10px;
	border-radius: 6px;
	color: var(--lp-muted);
	font-weight: 500;
}
.lp-devtools-tabs .lp-devtools-active {
	background: var(--lp-paper);
	color: var(--lp-ink);
}
.lp-net-row {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr) 56px 72px;
	align-items: center;
	gap: 12px;
	padding: 7px 8px;
	border-radius: 6px;
	font-family: var(--lp-mono);
	font-size: 12px;
}
.lp-net-head {
	font-family: var(--lp-font);
	font-weight: 500;
	color: var(--lp-muted);
}
.lp-net-error {
	background: color-mix(in srgb, var(--lp-error) 6%, transparent);
	color: var(--lp-error);
}
.lp-console-line {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-top: 14px;
	padding: 10px 8px;
	border-top: 1px solid var(--lp-line-soft);
	font-family: var(--lp-mono);
	font-size: 12px;
	color: var(--lp-error);
}
.lp-console-line small {
	display: block;
	margin-top: 2px;
	color: var(--lp-muted);
}

/* Share, privacy and tracker mockups */
.lp-share-dialog,
.lp-issue-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 460px;
	padding: 20px;
	font-size: 14px;
}
.lp-share-dialog > b,
.lp-issue-card > b {
	font-size: 16px;
	font-weight: 500;
}
.lp-link-pill {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 6px 6px 6px 14px;
	border-radius: 999px;
	background: #fff;
	box-shadow: 0 0 0 1px var(--lp-line);
	font-family: var(--lp-mono);
	font-size: 12px;
	color: var(--lp-ink);
}
.lp-link-pill > span {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.lp-link-pill b {
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--lp-deep);
	color: #fff;
	font-family: var(--lp-font);
	font-size: 12px;
	font-weight: 500;
}
.lp-share-setting,
.lp-issue-field {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 0;
	border-bottom: 1px solid var(--lp-line-soft);
}
.lp-share-setting i,
.lp-issue-field i {
	font-style: normal;
	font-weight: 500;
	color: var(--lp-ink);
	text-align: right;
}
.lp-share-setting i.lp-on {
	margin-left: 0;
}
.lp-issue-field > span {
	flex-shrink: 0;
	color: var(--lp-muted);
}
.lp-issue-targets {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.lp-target {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border-radius: 999px;
	box-shadow: inset 0 0 0 1px var(--lp-line);
	font-size: 12px;
	font-weight: 500;
	color: var(--lp-muted);
	background: #fff;
}
.lp-target svg {
	width: 14px;
	height: 14px;
}
.lp-target-active {
	background: var(--lp-sky);
	color: var(--lp-ink-2);
	box-shadow: none;
}
.lp-issue-result {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-radius: 8px;
	background: var(--lp-paper);
	font-weight: 500;
}
.lp-issue-result span {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0;
}
.lp-issue-result small {
	font-size: 12px;
	font-weight: 400;
	color: var(--lp-muted);
}
.lp-share-people {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-top: 4px;
	font-size: 13px;
	color: var(--lp-muted);
}
.lp-avatars {
	display: flex;
}
.lp-avatars span {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	margin-left: -8px;
	border: 2px solid #fff;
	border-radius: 50%;
	background: var(--lp-deep);
	color: #fff;
	font-family: var(--lp-mono);
	font-size: 9px;
}
.lp-avatars span:first-child {
	margin-left: 0;
}
.lp-avatars span:nth-child(2) {
	background: var(--lp-sky);
	color: var(--lp-ink-2);
}
.lp-avatars span:nth-child(3) {
	background: var(--lp-sky-soft);
	color: var(--lp-ink-2);
}

/* Handoff */
.lp-handoff {
	background: var(--lp-paper);
}
.lp-handoff-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1px;
	overflow: hidden;
	border-radius: 12px;
	background: var(--lp-cloud);
	box-shadow: var(--lp-card-shadow);
}
.lp-handoff-grid article {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	padding: 32px;
	background: #fff;
}
.lp-handoff-grid span {
	font-family: var(--lp-mono);
	font-size: 12px;
	line-height: 20px;
	color: var(--lp-muted);
}
.lp-handoff-grid h3 {
	font-size: 20px;
	line-height: 28px;
	letter-spacing: -0.02em;
	margin-top: 24px;
}
.lp-handoff-grid p {
	font-size: 15px;
	line-height: 24px;
	color: var(--lp-muted);
}
.lp-handoff-grid a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: auto;
	padding-top: 12px;
	font-size: 14px;
	font-weight: 500;
	color: var(--lp-blue-deep);
}
.lp-handoff-grid a:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* Integrations */
.lp-integrations {
	text-align: center;
}
.lp-integration-scene {
	position: relative;
	height: 300px;
	max-width: 800px;
	margin: 0 auto;
}
.lp-int-tile {
	position: absolute;
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 8px;
	background: var(--lp-paper);
	box-shadow: 0 0 0 1px var(--lp-line-soft);
	color: var(--lp-ink);
}
.lp-int-tile svg {
	width: 24px;
	height: 24px;
}
.lp-int-tile:nth-child(odd) {
	rotate: -6deg;
}
.lp-int-tile:nth-child(even) {
	rotate: 5deg;
}
.lp-int-tile:nth-child(3n) {
	rotate: 2deg;
}
.lp-int-tile[data-index="0"] {
	left: 8%;
	top: 44%;
}
.lp-int-tile[data-index="1"] {
	left: 20%;
	top: 22%;
}
.lp-int-tile[data-index="2"] {
	left: 33%;
	top: 6%;
}
.lp-int-tile[data-index="3"] {
	left: 50%;
	top: 0;
	translate: -50% 0;
}
.lp-int-tile[data-index="4"] {
	right: 33%;
	top: 6%;
}
.lp-int-tile[data-index="5"] {
	right: 20%;
	top: 22%;
}
.lp-int-tile[data-index="6"] {
	right: 8%;
	top: 44%;
}
.lp-int-tile[data-index="7"] {
	left: 14%;
	top: 72%;
}
.lp-int-tile[data-index="8"] {
	right: 14%;
	top: 72%;
}
.lp-folder {
	position: absolute;
	left: 50%;
	top: 42%;
	width: 240px;
	height: 156px;
	translate: -50% 0;
}
.lp-folder-back,
.lp-folder-front {
	position: absolute;
	inset: 0;
	border-radius: 12px;
	background: var(--lp-sky);
	box-shadow:
		inset 0 0 0 1.5px rgba(1, 5, 33, 0.1),
		0 1.5px 1.5px rgba(1, 5, 33, 0.1);
}
.lp-folder-back::before {
	content: "";
	position: absolute;
	left: 0;
	top: -12px;
	width: 110px;
	height: 24px;
	border-radius: 8px 8px 0 0;
	background: inherit;
	box-shadow: inset 0 0 0 1.5px rgba(1, 5, 33, 0.1);
}
.lp-folder-front {
	top: 22px;
	background: linear-gradient(
		180deg,
		color-mix(in srgb, var(--lp-sky) 72%, #fff) 0%,
		var(--lp-sky) 100%
	);
	backdrop-filter: blur(4px);
}
.lp-integrations .lp-text-link {
	margin-top: 12px;
}

/* Agents */
.lp-row {
	display: grid;
	grid-template-columns: 360px minmax(0, 1fr);
	gap: 48px;
	align-items: center;
	width: 100%;
}
.lp-row-copy p {
	margin-top: 10px;
	font-size: 15px;
	line-height: 24px;
	color: var(--lp-muted);
}
.lp-steps {
	counter-reset: step;
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 22px;
}
.lp-steps li {
	counter-increment: step;
	display: grid;
	grid-template-columns: 26px 1fr;
	gap: 2px 12px;
	font-size: 14px;
	line-height: 22px;
}
.lp-steps li::before {
	content: counter(step);
	grid-row: span 2;
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--lp-sky-soft);
	color: var(--lp-blue-deep);
	font-size: 12px;
	font-weight: 600;
}
.lp-steps b {
	font-weight: 600;
	color: var(--lp-ink);
}
.lp-steps span {
	color: var(--lp-muted);
}
.lp-row-copy .lp-button {
	margin-top: 22px;
}
.lp-agent-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: 22px;
}
.lp-agent-actions .lp-button {
	margin-top: 0;
	min-height: 42px;
	padding: 9px 16px;
	font-size: 14px;
}
.lp-agent-actions .lp-button[aria-expanded="true"] svg {
	transform: rotate(180deg);
}
.lp-prompt-button {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 42px;
	padding: 6px 18px 6px 14px;
	border: 0;
	border-radius: 999px;
	background: #fff;
	box-shadow: var(--lp-card-shadow);
	font: inherit;
	font-size: 14px;
	font-weight: 500;
	color: var(--lp-ink);
	cursor: pointer;
	transition: background-color 0.2s;
}
.lp-prompt-button:hover {
	background: var(--lp-paper);
}
.lp-prompt-button:focus-visible {
	outline: 2px solid var(--lp-blue);
	outline-offset: 2px;
}
.lp-agent-marks {
	display: inline-flex;
	gap: 5px;
	color: var(--lp-ink);
}
.lp-agent-marks svg {
	display: block;
	width: 16px;
	height: 16px;
}
.lp-prompt-status {
	margin-top: 12px;
	font-size: 13px;
	line-height: 20px;
	color: var(--lp-muted);
	overflow-wrap: anywhere;
}
.lp-agent-tabs {
	display: flex;
	gap: 2px;
	padding: 8px 8px 0;
	border-bottom: 1px solid var(--lp-dark-line);
	overflow-x: auto;
}
.lp-agent-tabs [role="tab"] {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px 10px;
	border: 0;
	border-bottom: 2px solid transparent;
	background: none;
	font: inherit;
	font-size: 13px;
	font-weight: 500;
	color: var(--lp-muted-on-dark);
	white-space: nowrap;
	cursor: pointer;
	--lp-mark-knockout: var(--lp-dark-raised);
}
.lp-agent-tabs [role="tab"] svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}
.lp-agent-tabs [role="tab"]:hover {
	color: #fff;
}
.lp-agent-tabs [role="tab"][aria-selected="true"] {
	color: #fff;
	border-bottom-color: var(--lp-sky);
}
.lp-agent-tabs [role="tab"]:focus-visible {
	outline: 2px solid var(--lp-sky);
	outline-offset: -2px;
	border-radius: 6px;
}
.lp-agent-terminal .lp-terminal-body {
	position: relative;
	flex: 1;
	gap: 14px;
	padding-right: 56px;
}
.lp-agent-step {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.tekma-landing .lp-agent-copy {
	position: absolute;
	top: 16px;
	right: 16px;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border: 0;
	border-radius: 8px;
	background: var(--lp-sky);
	color: var(--lp-ink-2);
	cursor: pointer;
}
.lp-agent-copy:hover {
	background: var(--lp-sky-soft);
}
.lp-agent-copy:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}
.lp-row-art {
	position: relative;
	height: 440px;
	overflow: hidden;
	border-radius: 16px;
	background: var(--lp-deep);
}
.lp-row-art .lp-terminal {
	position: absolute;
	inset: 28px;
	display: flex;
	flex-direction: column;
}
.lp-terminal {
	border-radius: 12px;
	background: var(--lp-dark-raised);
	color: var(--lp-on-dark);
	box-shadow:
		0 0 0 1px rgba(255, 255, 255, 0.14),
		0 24px 40px -20px rgba(1, 5, 33, 0.6);
	overflow: hidden;
}
.lp-terminal-bar {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 14px;
	border-bottom: 1px solid var(--lp-dark-line);
	font-size: 12px;
	color: var(--lp-muted-on-dark);
}
.lp-terminal-bar .lp-window-dots i {
	background: rgba(255, 255, 255, 0.2);
}
.lp-terminal-body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 20px;
	font-family: var(--lp-mono);
	font-size: 13px;
	line-height: 22px;
}
.lp-terminal-body code {
	color: #fff;
	/* Wrap commands at spaces; split a token only when it cannot fit a line. */
	overflow-wrap: anywhere;
}
.lp-terminal-body code span {
	color: var(--lp-sky);
}
.lp-code-comment {
	color: var(--lp-muted-on-dark);
}
.lp-terminal-body > .lp-code-comment:not(:first-child) {
	margin-top: 10px;
}
.lp-copy-command {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.06);
	box-shadow: inset 0 0 0 1px var(--lp-dark-line);
}
.lp-copy-command code {
	flex: 1;
	min-width: 0;
}
.lp-copy-command button {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border: 0;
	border-radius: 6px;
	background: var(--lp-sky);
	color: var(--lp-ink-2);
}
.lp-copy-status {
	margin: auto 0 0;
	padding: 12px 20px 16px;
	border-top: 1px solid var(--lp-dark-line);
	font-size: 13px;
	line-height: 20px;
	color: var(--lp-muted-on-dark);
}

/* Pricing */
.lp-pricing {
	background: var(--lp-paper);
}
.lp-plans {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 340px));
	justify-content: center;
	align-items: end;
}
.lp-plan {
	padding: 12px;
}
.lp-plan-free {
	border-radius: 16px 0 0 16px;
	background: var(--lp-raised-soft);
	box-shadow: var(--lp-card-shadow);
}
.lp-plan-team {
	position: relative;
	z-index: 1;
	border-radius: 16px;
	background: #fff;
	box-shadow: var(--lp-card-shadow);
}
.lp-plan-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	padding: 20px;
	border-radius: 8px;
	background: var(--lp-cloud);
}
.lp-plan-team .lp-plan-card {
	background: var(--lp-sky);
}
.lp-plan-card b {
	font-size: 18px;
	line-height: 28px;
	font-weight: 600;
	color: var(--lp-muted);
}
.lp-plan-team .lp-plan-card b {
	color: var(--lp-ink);
}
.lp-price {
	font-size: 28px;
	line-height: 32px;
	font-weight: 500;
	letter-spacing: -0.01em;
	color: var(--lp-ink);
}
.lp-price small {
	font-size: 14px;
	font-weight: 400;
	color: var(--lp-muted);
}
.lp-plan-card p {
	font-size: 14px;
	line-height: 22px;
	color: var(--lp-muted);
}
.lp-plan-card .lp-button {
	width: 100%;
	margin-top: 6px;
}
.lp-plan ul {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 20px 20px 8px;
}
.lp-plan li {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	line-height: 24px;
	color: var(--lp-muted);
}
.lp-plan li svg {
	color: var(--lp-ink);
}
.lp-plan-note {
	padding: 4px 20px 12px;
	font-size: 13px;
	line-height: 20px;
	color: var(--lp-muted);
}

/* FAQ */
.lp-faq-intro {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	max-width: 560px;
	margin: 0 auto 40px;
	text-align: center;
}
.lp-faq-intro .lp-hero-tag {
	margin-bottom: 4px;
	padding: 6px 12px;
}
.lp-faq-intro p {
	font-size: 15px;
	color: var(--lp-muted);
}
.lp-faq-list {
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 800px;
	margin: 0 auto;
}
.lp-faq-list details {
	border-radius: 16px;
	background: #fff;
	box-shadow:
		0 0 0 1px rgba(1, 5, 33, 0.05),
		0 1px 20px rgba(1, 5, 33, 0.04);
}
.lp-faq-list summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 20px;
	list-style: none;
	font-size: 16px;
	line-height: 24px;
	font-weight: 500;
	color: var(--lp-ink);
}
.lp-faq-list summary::-webkit-details-marker {
	display: none;
}
.lp-faq-plus {
	position: relative;
	flex-shrink: 0;
	width: 16px;
	height: 16px;
}
.lp-faq-plus::before,
.lp-faq-plus::after {
	content: "";
	position: absolute;
	left: 0;
	top: 7px;
	width: 16px;
	height: 2px;
	border-radius: 1px;
	background: var(--lp-deep);
	transition: transform 200ms ease;
}
.lp-faq-plus::after {
	transform: rotate(90deg);
}
.lp-faq-list details[open] .lp-faq-plus::after {
	transform: rotate(0deg);
}
.lp-faq-list details[open] summary {
	border-bottom: 1px solid var(--lp-line);
}
.lp-faq-list p {
	padding: 16px 20px 18px;
	font-size: 15px;
	line-height: 24px;
	color: var(--lp-muted);
}

/* Final call to action */
.lp-final {
	position: relative;
	padding: 88px 80px 0;
	text-align: center;
}
.lp-final-copy {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}
.lp-final-copy h2 {
	font-size: 40px;
	line-height: 46px;
}
.lp-final-copy p {
	font-size: 14px;
	color: var(--lp-muted);
}
.lp-final-copy .lp-button {
	margin-top: 12px;
}
.lp-final-scene {
	position: relative;
	height: 360px;
	margin-top: 16px;
	overflow: hidden;
}
.lp-ring {
	position: absolute;
	left: 50%;
	top: 46%;
	width: 520px;
	height: 520px;
	translate: -50% -50%;
	border: 1px solid var(--lp-line-soft);
	border-radius: 50%;
}
.lp-ring:nth-child(2) {
	width: 820px;
	height: 820px;
}
.lp-ring:nth-child(3) {
	width: 1140px;
	height: 1140px;
}
.lp-cover,
.lp-cover-tab {
	position: absolute;
	left: 50%;
	border-radius: 12px;
}
.lp-cover {
	top: 30px;
	width: 200px;
	height: 280px;
	translate: -60% 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-start;
	padding: 20px;
	background: linear-gradient(
		160deg,
		color-mix(in srgb, var(--lp-sky) 72%, #fff) 0%,
		var(--lp-sky) 60%,
		color-mix(in srgb, var(--lp-sky) 90%, var(--lp-deep)) 100%
	);
	box-shadow: inset 0 0 0 1.5px rgba(1, 5, 33, 0.1);
	backdrop-filter: blur(4px);
	text-align: left;
	font-family: var(--lp-mono);
	font-size: 13px;
	line-height: 20px;
	color: var(--lp-ink);
}
.lp-cover svg {
	width: 28px;
	height: 28px;
}
.lp-cover-tab {
	top: 56px;
	width: 184px;
	height: 256px;
	translate: 4% 0;
	rotate: 6deg;
	display: flex;
	align-items: flex-start;
	justify-content: flex-end;
	padding: 16px;
	background: #fff;
	box-shadow:
		0 0 0 1px var(--lp-line),
		0 10px 20px -12px rgba(1, 5, 33, 0.3);
	font-family: var(--lp-mono);
	font-size: 12px;
	color: var(--lp-muted);
}
.lp-cover-tab span {
	writing-mode: vertical-rl;
}

/* Footer */
.lp-footer {
	position: relative;
	padding: 0 80px 28px;
	background: linear-gradient(
		180deg,
		#fff 0%,
		#fff 52%,
		var(--lp-sky-soft) 78%,
		var(--lp-blue) 100%
	);
}
.lp-footer-card {
	position: relative;
	display: grid;
	grid-template-columns: 232px minmax(0, 1fr);
	gap: 28px;
	max-width: 1200px;
	margin: 0 auto;
	padding: 28px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.85);
	box-shadow: var(--lp-card-shadow);
}
.lp-footer-brand p {
	margin-top: 12px;
	font-size: 14px;
	line-height: 24px;
	font-weight: 500;
}
.lp-footer-nav {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 28px;
}
.lp-footer-nav > div {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	font-size: 14px;
	line-height: 24px;
}
.tekma-landing .lp-footer-nav h2 {
	font-size: 14px;
	line-height: 24px;
	font-weight: 500;
	color: var(--lp-ink);
}
.lp-footer-nav a,
.lp-footer-nav button {
	color: var(--lp-muted);
}
.lp-footer-nav button {
	padding: 0;
	border: 0;
	background: none;
	text-align: left;
}
.lp-footer-nav a:hover,
.lp-footer-nav button:hover {
	color: var(--lp-ink);
	text-decoration: underline;
	text-underline-offset: 4px;
}
.lp-footer-bottom {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px 24px;
	padding-top: 20px;
	border-top: 1px solid var(--lp-line);
	font-size: 14px;
	line-height: 24px;
	color: var(--lp-muted);
}
.lp-footer-bottom a {
	text-decoration: underline;
	text-underline-offset: 3px;
}
.lp-footer-tail {
	margin-top: 28px;
	text-align: center;
	font-size: 14px;
	font-weight: 500;
	color: #fff;
}
.lp-footer-tail a {
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* Reveal on scroll (JavaScript adds the classes; content is visible by default) */
.lp-reveal-ready {
	opacity: 0;
	translate: 0 18px;
	transition:
		opacity 600ms ease,
		translate 600ms ease;
}
.lp-reveal-ready.lp-revealed {
	opacity: 1;
	translate: 0 0;
}
@media (prefers-reduced-motion: reduce) {
	.tekma-landing *,
	.tekma-landing *::before,
	.tekma-landing *::after {
		/* biome-ignore lint/complexity/noImportantStyles: the preference must win over every component transition */
		transition: none !important;
		/* biome-ignore lint/complexity/noImportantStyles: the preference must win over every component animation */
		animation: none !important;
	}
	.lp-reveal-ready {
		opacity: 1;
		translate: 0 0;
	}
	.lp-explorer-progress {
		display: none;
	}
	.lp-hero-tilt {
		transform: none;
	}
}

/* Responsive */
@media (max-width: 1100px) {
	.lp-explorer-heading,
	.lp-explorer {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}
	.lp-explorer-heading h2 {
		font-size: 36px;
		line-height: 40px;
	}
	.lp-explorer-stage {
		order: -1;
		min-height: 400px;
	}
	.lp-explorer-scene {
		inset: 28px 28px -28px;
	}
	.lp-row {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}
	.lp-row-art {
		order: -1;
		height: 420px;
	}
	.lp-row-art .lp-terminal {
		inset: 24px;
	}
	.lp-recorder-layout {
		grid-template-columns: 320px minmax(0, 1fr);
	}
	.lp-handoff-grid {
		grid-template-columns: minmax(0, 1fr);
	}
	.lp-hero-floaters {
		display: none;
	}
	.lp-footer-card {
		grid-template-columns: minmax(0, 1fr);
	}
}
@media (max-width: 1000px) {
	.lp-footer-nav {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 860px) {
	.lp-nav-wrap {
		padding: 20px 20px 0;
	}
	.lp-nav {
		max-width: none;
		gap: 12px;
		min-height: 56px;
		padding: 8px 12px 8px 16px;
		border-radius: 32px;
	}
	.lp-nav > nav,
	.lp-nav-divider,
	.lp-nav-login {
		display: none;
	}
	.lp-nav-actions {
		margin-left: auto;
	}
	.lp-mobile-nav {
		display: block;
	}
	.lp-mobile-nav summary {
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 5px;
		width: 30px;
		height: 36px;
		list-style: none;
	}
	.lp-mobile-nav summary::-webkit-details-marker {
		display: none;
	}
	.lp-mobile-nav summary > span {
		display: block;
		width: 18px;
		height: 2px;
		margin: 0 auto;
		border-radius: 2px;
		background: var(--lp-deep);
	}
	.lp-mobile-nav > nav {
		position: absolute;
		left: 0;
		right: 0;
		top: calc(100% + 8px);
		display: flex;
		flex-direction: column;
		gap: 4px;
		padding: 12px;
		border-radius: 16px;
		background: #fff;
		box-shadow:
			0 0 0 1px var(--lp-line),
			0 16px 32px -12px rgba(1, 5, 33, 0.25);
	}
	.lp-mobile-nav > nav a {
		padding: 10px 12px;
		border-radius: 8px;
		font-size: 15px;
		font-weight: 500;
	}
	.lp-mobile-nav > nav a:hover {
		background: var(--lp-paper);
	}
	.lp-hero,
	.lp-section,
	.lp-final {
		padding-left: 20px;
		padding-right: 20px;
	}
	.lp-hero {
		padding-top: 104px;
	}
	.lp-hero h1 {
		font-size: 42px;
		line-height: 46px;
	}
	.lp-hero-actions {
		flex-direction: column;
		gap: 14px;
	}
	.lp-hero-stage {
		perspective: none;
	}
	.lp-hero-tilt {
		transform: none;
	}
	.lp-section {
		padding-top: 64px;
		padding-bottom: 64px;
	}
	.tekma-landing h1,
	.lp-final-copy h2,
	.lp-explorer-heading h2 {
		font-size: 34px;
		line-height: 38px;
	}
	.tekma-landing h2 {
		font-size: 26px;
		line-height: 32px;
	}
	.lp-hero-stage {
		margin-top: 40px;
	}
	.lp-ticker li {
		font-size: 14px;
	}
	.lp-explorer-item > button {
		font-size: 17px;
		padding: 14px 0;
	}
	.lp-explorer-item > div {
		padding: 0 0 16px;
	}
	.lp-integration-scene {
		height: 300px;
	}
	.lp-int-tile {
		width: 48px;
		height: 48px;
	}
	.lp-int-tile svg {
		width: 22px;
		height: 22px;
	}
	.lp-folder {
		width: 216px;
		height: 150px;
	}
	.lp-plans {
		grid-template-columns: minmax(0, 420px);
		gap: 20px;
	}
	.lp-plan-free {
		border-radius: 20px;
	}
	.lp-final-scene {
		height: 360px;
	}
	.lp-cover {
		width: 200px;
		height: 270px;
	}
	.lp-cover-tab {
		width: 180px;
		height: 250px;
	}
	.lp-footer {
		padding: 0 20px 24px;
	}
}
@media (max-width: 600px) {
	.lp-nav-wrap {
		padding-top: 12px;
	}
	.lp-lead {
		font-size: 16px;
		line-height: 25px;
	}
	.lp-explorer-stage {
		min-height: 360px;
	}
	.lp-explorer-scene {
		inset: 16px 16px -24px 16px;
	}
	.lp-recorder-layout {
		grid-template-columns: minmax(0, 1fr);
	}
	.lp-recent {
		display: none;
	}
	.lp-recorder,
	.lp-share-dialog,
	.lp-issue-card {
		padding: 14px;
	}
	.lp-devtools {
		padding: 12px 14px;
	}
	.lp-net-row {
		grid-template-columns: 52px minmax(0, 1fr) 40px 56px;
		gap: 8px;
	}
	.lp-row-art {
		height: auto;
		padding: 16px;
	}
	.lp-row-art .lp-terminal {
		position: relative;
		inset: auto;
	}
	.lp-handoff-grid article {
		padding: 24px;
	}
	.lp-plan-free {
		border-radius: 16px;
	}
	.lp-integration-scene {
		height: 320px;
	}
	.lp-folder {
		top: 34%;
		width: 150px;
		height: 106px;
	}
	.lp-int-tile {
		width: 44px;
		height: 44px;
	}
	.lp-int-tile[data-index="0"] {
		left: 2%;
		top: 40%;
	}
	.lp-int-tile[data-index="1"] {
		left: 12%;
		top: 10%;
	}
	.lp-int-tile[data-index="2"] {
		left: 32%;
		top: 0;
	}
	.lp-int-tile[data-index="3"] {
		left: auto;
		right: 32%;
		top: 0;
		translate: 0 0;
	}
	.lp-int-tile[data-index="4"] {
		right: 12%;
		top: 10%;
	}
	.lp-int-tile[data-index="5"] {
		right: 2%;
		top: 40%;
	}
	.lp-int-tile[data-index="6"] {
		left: 12%;
		right: auto;
		top: 76%;
	}
	.lp-int-tile[data-index="7"] {
		left: auto;
		right: 12%;
		top: 76%;
	}
	.lp-int-tile[data-index="8"] {
		display: none;
	}
	.lp-footer-nav {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px 16px;
	}
	.lp-footer-card {
		padding: 20px;
	}
	.lp-ring:nth-child(3) {
		display: none;
	}
}

/* Agent onboarding is one inline action; detailed setup lives in the docs. */
.lp-agent-setup {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	text-align: center;
}
.lp-agent-setup .lp-agent-actions {
	justify-content: center;
	margin-top: 0;
	gap: 16px;
}
.lp-agent-setup .lp-text-link {
	font-size: 14px;
}
.lp-agent-setup .lp-prompt-status {
	margin: 0;
	min-height: 20px;
	color: var(--lp-muted);
	font-size: 13px;
	line-height: 20px;
}
.lp-prompt-button:disabled {
	cursor: wait;
	opacity: 0.65;
}

/* Poster layout for /landing-v2. Inherits the reset, palette, window frame,
   explorer, agent block and footer from landing.css; everything here is
   lp2-prefixed. */
.lp2 {
	--lp2-cell: 72px;
	--lp2-grid: rgba(1, 5, 33, 0.07);
	--lp2-card: #f5f6f9;
	--lp2-card-edge: #eceef3;
	--lp2-tint: rgba(199, 219, 255, 0.35);
	--lp2-tint-2: rgba(151, 230, 255, 0.28);
	--lp2-call-shadow:
		inset 0 -3px 4px rgba(0, 65, 190, 0.18),
		0 8px 14px -6px rgba(1, 5, 33, 0.35);
	--lp2-navy:
		linear-gradient(transparent 0 60%, rgba(1, 5, 33, 0.9)),
		linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 48px
		48px,
		linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 /
		48px 48px,
		var(--lp-deep);
	background: #fff;
}
.lp2-sheet {
	position: relative;
	overflow: clip;
	background-image:
		linear-gradient(var(--lp2-grid) 1px, transparent 1px),
		linear-gradient(90deg, var(--lp2-grid) 1px, transparent 1px);
	background-size: var(--lp2-cell) var(--lp2-cell);
	background-position: calc(50% + var(--lp2-cell) / 2) 0;
}
/* A few tinted cells, aligned to the grid the way the reference tints its sheet. */
.lp2-tints {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(var(--lp2-tint), var(--lp2-tint))
		calc(50% - 9 * var(--lp2-cell) + var(--lp2-cell) / 2)
		calc(2 * var(--lp2-cell)) / calc(2 * var(--lp2-cell)) var(--lp2-cell)
		no-repeat,
		linear-gradient(var(--lp2-tint-2), var(--lp2-tint-2))
		calc(50% - 5 * var(--lp2-cell) + var(--lp2-cell) / 2)
		calc(4 * var(--lp2-cell)) / var(--lp2-cell) var(--lp2-cell) no-repeat,
		linear-gradient(var(--lp2-tint), var(--lp2-tint))
		calc(50% + 6 * var(--lp2-cell) + var(--lp2-cell) / 2)
		calc(3 * var(--lp2-cell)) / calc(2 * var(--lp2-cell)) var(--lp2-cell)
		no-repeat,
		linear-gradient(var(--lp2-tint-2), var(--lp2-tint-2))
		calc(50% + 3 * var(--lp2-cell) + var(--lp2-cell) / 2)
		calc(6 * var(--lp2-cell)) / var(--lp2-cell) var(--lp2-cell) no-repeat,
		linear-gradient(var(--lp2-tint), var(--lp2-tint))
		calc(50% - 7 * var(--lp2-cell) + var(--lp2-cell) / 2)
		calc(12 * var(--lp2-cell)) / var(--lp2-cell) var(--lp2-cell) no-repeat,
		linear-gradient(var(--lp2-tint-2), var(--lp2-tint-2))
		calc(50% + 8 * var(--lp2-cell) + var(--lp2-cell) / 2)
		calc(14 * var(--lp2-cell)) / calc(2 * var(--lp2-cell)) var(--lp2-cell)
		no-repeat,
		linear-gradient(var(--lp2-tint), var(--lp2-tint))
		calc(50% - 9 * var(--lp2-cell) + var(--lp2-cell) / 2)
		calc(21 * var(--lp2-cell)) / var(--lp2-cell) calc(2 * var(--lp2-cell))
		no-repeat,
		linear-gradient(var(--lp2-tint-2), var(--lp2-tint-2))
		calc(50% + 7 * var(--lp2-cell) + var(--lp2-cell) / 2)
		calc(27 * var(--lp2-cell)) / var(--lp2-cell) var(--lp2-cell) no-repeat,
		linear-gradient(var(--lp2-tint), var(--lp2-tint))
		calc(50% - 6 * var(--lp2-cell) + var(--lp2-cell) / 2)
		calc(34 * var(--lp2-cell)) / calc(2 * var(--lp2-cell)) var(--lp2-cell)
		no-repeat,
		linear-gradient(var(--lp2-tint-2), var(--lp2-tint-2))
		calc(50% + 9 * var(--lp2-cell) + var(--lp2-cell) / 2)
		calc(41 * var(--lp2-cell)) / var(--lp2-cell) calc(2 * var(--lp2-cell))
		no-repeat,
		linear-gradient(var(--lp2-tint), var(--lp2-tint))
		calc(50% - 8 * var(--lp2-cell) + var(--lp2-cell) / 2)
		calc(49 * var(--lp2-cell)) / var(--lp2-cell) var(--lp2-cell) no-repeat,
		linear-gradient(var(--lp2-tint-2), var(--lp2-tint-2))
		calc(50% + 5 * var(--lp2-cell) + var(--lp2-cell) / 2)
		calc(57 * var(--lp2-cell)) / calc(2 * var(--lp2-cell)) var(--lp2-cell)
		no-repeat;
}
.lp2-sheet > * {
	position: relative;
}
/* The sheet rule above would make the tints relative; they must cover the sheet. */
.lp2 .lp2-tints {
	position: absolute;
}
.lp2-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
.lp2 section[id] {
	scroll-margin-top: 96px;
}

/* Header: the main page's fixed white pill, with this page's thick edge and brand square. */
/* .lp2-sheet > * makes children relative; the nav must stay fixed like the main page. */
.lp2 .lp-nav-wrap {
	position: fixed;
}
.lp2 .lp2-topnav {
	max-width: 800px;
	min-height: 62px;
	gap: 24px;
	padding: 9px 22px 9px 12px;
	border-radius: 999px;
	box-shadow:
		0 0 0 3px var(--lp2-card-edge),
		0 10px 24px -16px rgba(1, 5, 33, 0.3);
}
.lp2-brand {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--lp-ink);
	font-size: 18px;
	font-weight: 600;
	letter-spacing: -0.02em;
}
.lp2-brand-square {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 999px;
	background: var(--lp-sky);
}
.lp2-brand-square svg {
	width: 24px;
	height: 24px;
	color: var(--lp-ink);
}
.lp2 .lp-nav > nav {
	gap: 4px;
}
.lp2 .lp-nav-actions {
	gap: 16px;
}
.lp2 .lp-nav > nav a {
	font-weight: 500;
}
.lp2 .lp-nav > nav a:hover {
	color: var(--lp-ink);
	background: none;
}
.lp2-call-small {
	min-height: 38px;
	padding: 6px 18px;
	font-size: 14px;
}
/* The reference's pill button: soft inset bottom, presses down on click. */
.lp2-call {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 10px 20px;
	border: 1px solid color-mix(in srgb, var(--lp-blue) 30%, var(--lp-sky));
	border-radius: 999px;
	background: linear-gradient(var(--lp-sky-soft), var(--lp-sky));
	color: var(--lp-ink);
	font-size: 16px;
	line-height: 24px;
	font-weight: 500;
	letter-spacing: -0.01em;
	white-space: nowrap;
	box-shadow: var(--lp2-call-shadow);
	transition:
		transform 0.15s,
		box-shadow 0.15s,
		filter 0.15s;
}
/* Beats the landing reset's `button { color: inherit }` inside the navy cards. */
.lp2 .lp2-call {
	color: var(--lp-ink);
}
.lp2-call:hover {
	filter: brightness(1.03);
}
.lp2-call:active {
	transform: translateY(3px);
	box-shadow:
		inset 0 3px 6px rgba(0, 65, 190, 0.25),
		0 2px 3px rgba(1, 5, 33, 0.15);
}
.lp2-call-large {
	min-height: 54px;
	padding: 14px 28px;
	font-size: 18px;
}
.lp2-call-ghost {
	border-color: var(--lp2-card-edge);
	background: #fff;
	box-shadow:
		inset 0 -3px 4px rgba(1, 5, 33, 0.06),
		0 8px 14px -8px rgba(1, 5, 33, 0.3);
}
.lp2-call-ghost:hover {
	filter: none;
	background: #fbfbfd;
}
.lp2-call-ghost:active {
	box-shadow:
		inset 0 3px 6px rgba(1, 5, 33, 0.1),
		0 2px 3px rgba(1, 5, 33, 0.1);
}
.lp2 .lp2-text-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 15px;
	font-weight: 500;
	color: var(--lp-blue-deep);
}
.lp2 .lp2-text-link:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* Hero */
.lp2-hero {
	position: relative;
	max-width: 1280px;
	margin: 0 auto;
	padding: 128px 48px 40px;
	text-align: center;
}
.lp2 h1 {
	display: flex;
	flex-direction: column;
	align-items: center;
	font-weight: 500;
	letter-spacing: -0.04em;
}
.lp2-line-one {
	font-size: clamp(48px, 7.6vw, 108px);
	line-height: 1.1;
	background: linear-gradient(
		var(--lp-ink) 10%,
		var(--lp-muted) 50%,
		var(--lp-ink) 72%,
		var(--lp-steel) 96%
	);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
}
/* Design-tool selection frame with four handles around the second line. */
.lp2-selection {
	position: relative;
	margin-top: 18px;
	padding: 8px;
	border: 1px solid var(--lp-blue);
}
.lp2-line-two {
	display: block;
	padding: 0 clamp(22px, 2.8vw, 44px) 3px;
	border: clamp(5px, 0.62vw, 9px) solid var(--lp-blue);
	border-radius: 999px;
	background: linear-gradient(#fff, #eef4ff);
	font-size: clamp(44px, 7.1vw, 100px);
	line-height: 1.3;
	color: var(--lp-ink);
	box-shadow:
		inset 0 -5px 6px rgba(0, 65, 190, 0.18),
		0 30px 44px -18px rgba(0, 85, 255, 0.35);
}
.lp2-handle {
	position: absolute;
	width: 14px;
	height: 14px;
	background: #fff;
	border: 2px solid var(--lp-blue);
}
.lp2-tl {
	left: -8px;
	top: -8px;
}
.lp2-tr {
	right: -8px;
	top: -8px;
}
.lp2-bl {
	left: -8px;
	bottom: -8px;
}
.lp2-br {
	right: -8px;
	bottom: -8px;
}
/* Scoped under .lp2 so the landing reset's `p { margin: 0 }` cannot strip these. */
.lp2 .lp2-lead {
	max-width: 560px;
	margin: 40px auto 0;
	font-size: 18px;
	line-height: 28px;
	color: var(--lp-muted);
	text-wrap: pretty;
}
/* Notes and app tiles sit outside the headline's box, never over it. */
.lp2-note {
	position: absolute;
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--lp-sky-soft);
	font-family: var(--lp-mono);
	font-size: 14px;
	line-height: 22px;
	color: var(--lp-blue-deep);
	box-shadow: inset 0 0 0 1px
		color-mix(in srgb, var(--lp-blue) 18%, transparent);
}
.lp2-note-record {
	left: 7%;
	top: 138px;
	transform: rotate(-8deg);
}
.lp2-note-share {
	right: 7%;
	top: 122px;
	transform: rotate(6deg);
}
.lp2-app {
	display: grid;
	place-items: center;
	width: 62px;
	height: 62px;
	border: 5px solid var(--lp-blue);
	border-radius: 18px;
	background: linear-gradient(140deg, #fff, #f3f7ff);
	/* No `color` here on purpose: the mark inside paints itself from its own
	   `[data-brand]` rule. Setting ink would restyle someone else's logo. */
	box-shadow:
		inset 0 -3px 3px rgba(0, 65, 190, 0.25),
		0 3px 1px var(--lp-blue-deep),
		0 16px 18px -8px rgba(0, 85, 255, 0.35);
}
.lp2-app svg {
	width: 26px;
	height: 26px;
}
.lp2-app-float {
	position: absolute;
}
.lp2-app-linear {
	left: 10%;
	top: 236px;
	transform: rotate(-16deg);
}
.lp2-app-claude {
	right: 10%;
	top: 212px;
	transform: rotate(9deg);
}
.lp2-hero-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin-top: 36px;
}
.lp2 .lp2-hero-note {
	margin-top: 16px;
	font-size: 14px;
	color: var(--lp-muted);
}

/* Steps: three tilted cards joined by connectors. */
.lp2-steps {
	position: relative;
	display: flex;
	justify-content: center;
	gap: 68px;
	width: min(1120px, 100%);
	margin: 36px auto 0;
	padding: 24px 0 40px;
}
.lp2-card {
	position: relative;
	flex-shrink: 0;
	width: 316px;
	height: 340px;
	border: 8px solid var(--lp2-card-edge);
	border-radius: 44px;
	background: var(--lp2-card);
	overflow: hidden;
}
.lp2-card-first {
	transform: rotate(-4deg);
}
.lp2-card-third {
	transform: rotate(4deg);
}
.lp2-card-copy {
	position: absolute;
	left: 18px;
	right: 16px;
	bottom: 20px;
	font-size: 17px;
	line-height: 1.35;
	letter-spacing: -0.01em;
	color: var(--lp-muted);
}
.lp2-step {
	display: block;
	margin-bottom: 8px;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--lp-muted);
}
.lp2-card-copy strong {
	font-weight: 500;
	color: var(--lp-ink);
}
/* Step 1: the recorder popover, stacked like the reference's calendar card. */
.lp2-recorder {
	position: absolute;
	left: 34px;
	top: 28px;
	width: 232px;
	padding: 14px;
	border: 1px solid var(--lp-line-soft);
	border-radius: 16px;
	background: #fff;
	box-shadow:
		8px -10px 0 -1px #fff,
		8px -10px 0 0 var(--lp-cloud);
}
.lp2-row {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 4px 0;
	font-size: 12px;
	color: var(--lp-ink);
}
.lp2-row-muted {
	color: var(--lp-muted);
}
.lp2-toggle {
	display: block;
	width: 30px;
	height: 18px;
	border-radius: 15px;
	background: var(--lp-raised-soft);
}
.lp2-toggle::after {
	content: "";
	display: block;
	width: 14px;
	height: 14px;
	margin: 2px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba(1, 5, 33, 0.2);
}
.lp2-toggle-on {
	background: var(--lp-blue);
}
.lp2-toggle-on::after {
	margin-left: 14px;
}
.lp2-row-muted .lp2-toggle {
	opacity: 0.5;
}
.lp2-record {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 10px;
	padding: 7px 12px;
	border-radius: 999px;
	background: var(--lp-sky);
	font-size: 12px;
	font-weight: 500;
	color: var(--lp-ink);
}
.lp2-record span {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--lp-error);
}
/* Step 2: rotated clue tags. */
.lp2-tags {
	position: absolute;
	inset: 0;
}
.lp2-tag {
	position: absolute;
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 4px 11px 4px 4px;
	border: 3px solid var(--lp2-card-edge);
	border-radius: 999px;
	background: #fff;
	font-size: 13px;
	letter-spacing: -0.01em;
	white-space: nowrap;
	color: var(--lp-ink);
	box-shadow: 1px 2px 3px rgba(1, 5, 33, 0.16);
}
.lp2-tag i {
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	color: #fff;
	background: var(--lp-blue);
}
.lp2-tag[data-index="1"] i {
	background: var(--lp-ink);
}
.lp2-tag[data-index="2"] i {
	background: var(--lp-blue-deep);
}
.lp2-tag[data-index="3"] i {
	background: var(--lp-sky);
	color: var(--lp-ink);
}
.lp2-tag[data-index="4"] i {
	background: var(--lp-blue-night);
}
.lp2-tag[data-index="0"] {
	left: 16px;
	top: 44px;
	transform: rotate(-4deg);
}
.lp2-tag[data-index="1"] {
	right: 30px;
	top: 28px;
	transform: rotate(3deg);
}
.lp2-tag[data-index="2"] {
	left: 28px;
	top: 118px;
	transform: rotate(-5deg);
}
.lp2-tag[data-index="3"] {
	right: 22px;
	top: 106px;
	transform: rotate(2deg);
}
.lp2-tag[data-index="4"] {
	left: 130px;
	top: 172px;
	transform: rotate(3deg);
}
/* Step 3: an area chart with the fixed ticket floating above it. */
.lp2-chart {
	position: absolute;
	left: 0;
	right: 0;
	top: 18px;
	height: 220px;
}
.lp2-chart > svg {
	width: 100%;
	height: 100%;
}
.lp2-ticket {
	position: absolute;
	left: 168px;
	top: 8px;
	font-size: 12px;
	color: var(--lp-ink);
	transform: rotate(-4deg);
}
.lp2-ticket > span {
	display: table;
	margin: -3px 0 10px -14px;
	padding: 2px 8px;
	border-radius: 999px;
	background: #dcefdf;
	font-size: 10px;
	font-weight: 500;
	color: var(--lp-green);
}
.lp2-ticket small {
	display: block;
	font-size: 9px;
	color: var(--lp-muted);
}
.lp2-ticket b {
	font-weight: 500;
	font-family: var(--lp-mono);
}
.lp2-chart-dot {
	position: absolute;
	left: 138px;
	top: 22px;
	width: 20px;
	height: 20px;
	border: 4px solid #fff;
	border-radius: 50%;
	background: var(--lp-blue);
	box-shadow: 0 1px 5px rgba(1, 5, 33, 0.25);
}
.lp2-connector {
	position: absolute;
	z-index: 2;
	fill: var(--lp-blue);
	stroke: var(--lp-blue);
	stroke-width: 1.8;
	overflow: visible;
	pointer-events: none;
}
.lp2-connector path {
	fill: none;
}
.lp2-connector-one {
	left: calc(50% - 265px);
	top: 20px;
	width: 150px;
}
.lp2-connector-two {
	left: calc(50% + 140px);
	top: 196px;
	width: 120px;
}

/* Bento */
.lp2-bento {
	padding: 72px 48px 0;
}
.lp2-bento-grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1.05fr;
	grid-template-rows: 400px 372px;
	gap: 10px;
	width: min(1120px, 100%);
	margin: 0 auto;
}
.lp2-bento-card {
	position: relative;
	overflow: hidden;
	border: 6px solid var(--lp2-card-edge);
	border-radius: 40px;
	background: var(--lp2-card);
}
.lp2-bento-card h2 {
	font-size: 23px;
	line-height: 1.15;
	font-weight: 500;
	letter-spacing: -0.02em;
}
.lp2-feature {
	grid-column: 1 / 3;
	display: flex;
	align-items: center;
	background: linear-gradient(125deg, #f7f8fb 28%, #eef4ff);
}
/* The report preview peeks out of the card's bottom-left like the reference's phone. */
.lp2-feature-visual {
	position: absolute;
	left: 28px;
	bottom: -30px;
	width: 52%;
}
.lp2-window {
	background: rgba(255, 255, 255, 0.75);
}
.lp2-report {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
	gap: 12px;
	padding: 12px;
	background: #fff;
}
.lp2-report-video {
	position: relative;
	aspect-ratio: 16 / 10;
	border-radius: 8px;
	background:
		radial-gradient(60% 70% at 30% 20%, rgba(151, 230, 255, 0.18), transparent),
		var(--lp-deep);
}
.lp2-report-play {
	position: absolute;
	left: 50%;
	top: 44%;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--lp-sky);
	color: var(--lp-ink);
	transform: translate(-50%, -50%);
	box-shadow: 0 8px 16px -6px rgba(1, 5, 33, 0.6);
}
.lp2-report-play svg {
	margin-left: 3px;
}
.lp2-report-timeline {
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 12px;
	height: 4px;
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.2);
}
.lp2-report-timeline::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 46%;
	height: 100%;
	border-radius: 2px;
	background: var(--lp-sky);
}
.lp2-report-timeline i {
	position: absolute;
	top: -3px;
	width: 10px;
	height: 10px;
	border: 2px solid var(--lp-deep);
	border-radius: 50%;
	background: #fff;
}
.lp2-report-side {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
	font-family: var(--lp-mono);
	font-size: 11px;
	line-height: 16px;
	color: var(--lp-ink);
}
.lp2-report-side code {
	padding: 4px 8px;
	border-radius: 6px;
	background: var(--lp-paper);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.lp2-report-side b {
	font-weight: 500;
	color: var(--lp-blue-deep);
}
.lp2-report-side em {
	font-style: normal;
	color: var(--lp-error);
}
.lp2-report-tab {
	margin-top: 4px;
	font-family: var(--lp-font);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--lp-muted);
}
.lp2-feature-copy {
	position: relative;
	z-index: 2;
	margin-left: calc(52% + 60px);
	padding-right: 32px;
}
.lp2-feature-copy h2 {
	font-size: 28px;
	margin-bottom: 12px;
}
.lp2-feature-copy p {
	margin-bottom: 20px;
	font-size: 15px;
	line-height: 22px;
	color: var(--lp-muted);
}
.lp2-orbit {
	position: absolute;
	right: -110px;
	top: -190px;
	width: 300px;
	height: 560px;
	border: 1px solid rgba(0, 85, 255, 0.14);
	border-radius: 50%;
	transform: rotate(24deg);
	box-shadow:
		0 0 0 28px rgba(0, 85, 255, 0.025),
		0 0 0 29px rgba(0, 85, 255, 0.08);
	pointer-events: none;
}
.lp2-stats {
	grid-row: 2;
	grid-column: 1;
}
.lp2-notification {
	position: absolute;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 11px 8px 6px;
	border: 2px solid var(--lp2-card-edge);
	border-radius: 999px;
	background: #fff;
	font-size: 12px;
	letter-spacing: -0.01em;
	white-space: nowrap;
	color: var(--lp-muted);
	box-shadow: 1px 3px 6px rgba(1, 5, 33, 0.05);
}
.lp2-notification i {
	display: grid;
	place-items: center;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	color: #fff;
	background: linear-gradient(var(--lp-blue), var(--lp-blue-deep));
}
.lp2-notification-sent {
	left: 22px;
	top: 22px;
	transform: rotate(-5deg);
}
.lp2-notification-seen {
	right: 12px;
	top: 74px;
	transform: rotate(5deg);
}
.lp2-bars {
	position: absolute;
	left: 18px;
	right: 18px;
	top: 122px;
	height: 140px;
	display: flex;
	align-items: flex-end;
	gap: 6px;
}
.lp2-bars > span {
	position: relative;
	display: block;
	flex: 1;
	height: var(--bar);
	border: 1px solid var(--lp-cloud);
	border-radius: 6px;
	background: repeating-linear-gradient(-45deg, #e6e8ee 0 2px, #eceef3 2px 5px);
}
.lp2-bars > span::before {
	content: "";
	position: absolute;
	inset: -7px -2px auto;
	height: 7px;
	border-top: 1px dashed var(--lp-cloud);
}
.lp2-bars .lp2-bar-win {
	border-color: var(--lp-blue);
	background: linear-gradient(var(--lp-sky), var(--lp-blue));
	box-shadow: 0 8px 14px -6px rgba(0, 85, 255, 0.45);
}
.lp2-bar-win b {
	position: absolute;
	left: 50%;
	top: -26px;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 4px solid #fff;
	border-radius: 50%;
	background: var(--lp-sky);
	color: var(--lp-ink);
	transform: translateX(-50%);
	box-shadow: 0 3px 8px rgba(1, 5, 33, 0.15);
}
.lp2-bar-win b svg {
	width: 22px;
	height: 22px;
}
.lp2-stats h2 {
	position: absolute;
	left: 20px;
	bottom: 20px;
}
.lp2-search {
	grid-row: 2;
	grid-column: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: linear-gradient(145deg, #f7f8fb, #eef4ff);
}
.lp2-search-field {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 250px;
	margin-bottom: 12px;
	padding: 7px 8px 7px 16px;
	border: 2px solid var(--lp2-card-edge);
	border-radius: 999px;
	background: #fff;
	font-family: var(--lp-mono);
	font-size: 14px;
	color: var(--lp-ink);
	box-shadow: 0 3px 6px rgba(1, 5, 33, 0.04);
}
.lp2-search-field i {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	color: var(--lp-ink);
	background: linear-gradient(var(--lp-sky-soft), var(--lp-sky));
}
.lp2-tiles {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 7px;
	width: 250px;
}
.lp2-tile {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	aspect-ratio: 1.42;
	padding: 10px 12px;
	border-radius: 10px;
	background: #fff;
	font-family: var(--lp-mono);
	font-size: 11px;
	line-height: 16px;
	color: var(--lp-ink);
	overflow: hidden;
	box-shadow: var(--lp-card-shadow);
}
.lp2-tile small {
	font-family: var(--lp-font);
	font-size: 10px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--lp-muted);
}
.lp2-tile code b {
	font-weight: 500;
	color: var(--lp-blue-deep);
}
.lp2-tile code em {
	font-style: normal;
	color: var(--lp-error);
}
.lp2-tile-chapter {
	flex-direction: row;
	align-items: center;
	gap: 8px;
	background: var(--lp-deep);
	color: #fff;
	font-family: var(--lp-font);
	font-size: 12px;
}
/* The tall card: navy, the agent promise, a typing bubble at the foot. */
.lp2-agent {
	grid-row: 1 / 3;
	grid-column: 3;
	padding: 32px 30px 150px;
	border-color: var(--lp-dark-raised);
	background: var(--lp2-navy);
	color: #fff;
}
.lp2-agent-marks {
	display: flex;
	gap: 6px;
	margin-bottom: 28px;
}
.lp2-agent-marks svg {
	width: 36px;
	height: 36px;
	padding: 8px;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.08);
	box-shadow: inset 0 0 0 1px var(--lp-dark-line);
}
.lp2-agent h2 {
	font-size: 34px;
	line-height: 1.12;
	letter-spacing: -0.03em;
}
.lp2-agent h2 span {
	color: var(--lp-sky);
}
.lp2-agent > p {
	margin-top: 16px;
	max-width: 300px;
	font-size: 15px;
	line-height: 23px;
	color: var(--lp-muted-on-dark);
}
.lp2 .lp2-agent-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 18px;
	font-size: 15px;
	font-weight: 500;
	color: var(--lp-sky);
}
.lp2 .lp2-agent-link:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}
/* The exchange the card promises: a capture in, a recorded fix out. */
.lp2-chat {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 28px;
}
.lp2-chat p {
	max-width: 88%;
	padding: 10px 14px;
	border-radius: 18px;
	font-size: 14px;
	line-height: 20px;
}
.lp2-chat p[data-from="you"] {
	align-self: flex-end;
	border-bottom-right-radius: 6px;
	background: var(--lp-sky);
	color: var(--lp-ink);
}
.lp2-chat p[data-from="agent"] {
	align-self: flex-start;
	border-bottom-left-radius: 6px;
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
	box-shadow: inset 0 0 0 1px var(--lp-dark-line);
}
.lp2-chat code {
	font-size: 13px;
}
.lp2-chat-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 8px;
	padding: 3px 10px 3px 6px;
	border-radius: 999px;
	background: rgba(1, 5, 33, 0.12);
	font-family: var(--lp-mono);
	font-size: 12px;
	line-height: 18px;
}
.lp2-chat p[data-from="agent"] .lp2-chat-link {
	background: rgba(255, 255, 255, 0.1);
	color: var(--lp-sky);
}
.lp2-chat-link svg {
	width: 16px;
	height: 16px;
}
.lp2-agent .lp2-agent-prompt {
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 84px;
	max-width: none;
	margin: 0;
	padding: 16px 12px;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.14);
	backdrop-filter: blur(12px);
	text-align: center;
	font-size: 18px;
	letter-spacing: -0.02em;
	color: #fff;
	white-space: nowrap;
}
.lp2-typing {
	position: absolute;
	right: 26px;
	bottom: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	width: 96px;
	height: 50px;
	border: 1px solid var(--lp-sky-soft);
	border-radius: 999px;
	background: linear-gradient(var(--lp-sky-soft), var(--lp-sky));
	box-shadow: 0 6px 14px -6px rgba(1, 5, 33, 0.6);
}
.lp2-typing span {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--lp-ink);
	animation: lp2-blink 1.2s infinite;
}
.lp2-typing span:nth-child(2) {
	animation-delay: 0.2s;
}
.lp2-typing span:nth-child(3) {
	animation-delay: 0.4s;
}
@keyframes lp2-blink {
	0%,
	80%,
	100% {
		opacity: 0.35;
	}
	40% {
		opacity: 1;
	}
}
@media (prefers-reduced-motion: reduce) {
	.lp2-typing span {
		animation: none;
		opacity: 0.7;
	}
}

/* Sections after the bento share one heading style and the same card edge. */
.lp2-section {
	max-width: 1216px;
	margin: 0 auto;
	padding: 88px 48px 0;
}
.lp2 .lp2-section > .lp2-text-link {
	display: flex;
	justify-content: center;
	margin-top: 28px;
}
.lp2-heading {
	max-width: 620px;
	margin: 0 auto 36px;
	text-align: center;
}
.lp2-heading h2 {
	font-size: clamp(30px, 3.6vw, 44px);
	line-height: 1.12;
	font-weight: 500;
	letter-spacing: -0.03em;
}
.lp2-heading h2 span {
	color: var(--lp-blue);
}
.lp2-heading p {
	margin-top: 14px;
	font-size: 17px;
	line-height: 26px;
	color: var(--lp-muted);
	text-wrap: pretty;
}
.lp2-panel {
	padding: 36px;
	border: 8px solid var(--lp2-card-edge);
	border-radius: 44px;
	background: var(--lp2-card);
}
/* Explorer: pill rows instead of hairline rows, a white stage with the same edge. */
.lp2-panel .lp-explorer {
	gap: 40px;
}
.lp2-panel .lp-explorer-item,
.lp2-panel .lp-explorer-item:last-child {
	border: 0;
	margin-bottom: 8px;
}
.lp2-panel .lp-explorer-item > button {
	padding: 10px 14px;
	border: 3px solid var(--lp2-card-edge);
	border-radius: 999px;
	background: #fff;
	font-size: 16px;
	box-shadow: 1px 2px 3px rgba(1, 5, 33, 0.1);
	transition: border-color 0.2s;
}
.lp2-panel .lp-explorer-item > button > i {
	width: 30px;
	height: 30px;
}
.lp2-panel .lp-explorer-item[data-open="true"] > button {
	border-color: var(--lp-blue);
}
.lp2-panel .lp-explorer-item[data-open="true"] > button > i {
	background: var(--lp-sky);
}
.lp2-panel .lp-explorer-item > div {
	padding: 10px 20px 14px 66px;
}
/* Auto-advance progress: a ring filling around the arrow instead of a line. */
@property --lp2-ring {
	syntax: "<percentage>";
	inherits: false;
	initial-value: 0%;
}
.lp2-panel .lp-explorer-progress {
	left: auto;
	right: 15px;
	top: 11px;
	bottom: auto;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: conic-gradient(var(--lp-blue) var(--lp2-ring), transparent 0);
	mask: radial-gradient(
		farthest-side,
		transparent calc(100% - 2.5px),
		#000 calc(100% - 2px)
	);
	transform: none;
	transform-origin: center;
	animation: lp2-ring 7s linear forwards;
}
@keyframes lp2-ring {
	from {
		--lp2-ring: 0%;
	}
	to {
		--lp2-ring: 100%;
	}
}
.lp2-panel .lp-explorer-stage {
	border: 3px solid var(--lp2-card-edge);
	border-radius: 30px;
	background: #fff;
	box-shadow: none;
}
/* Handoff: three numbered cards with a slight lean. */
.lp2-hand {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}
.lp2-hand article {
	padding: 26px 26px 28px;
	border: 6px solid var(--lp2-card-edge);
	border-radius: 34px;
	background: #fff;
}
.lp2-hand article:first-child {
	transform: rotate(-2deg);
}
.lp2-hand article:last-child {
	transform: rotate(2deg);
}
.lp2-hand span {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	margin-bottom: 18px;
	border-radius: 50%;
	background: var(--lp-sky);
	font-size: 14px;
	font-weight: 600;
	color: var(--lp-ink);
}
.lp2-hand h3 {
	font-size: 20px;
	line-height: 26px;
	font-weight: 500;
	letter-spacing: -0.01em;
}
.lp2-hand p {
	margin-top: 8px;
	font-size: 15px;
	line-height: 23px;
	color: var(--lp-muted);
}
/* Integrations: the hero's app tiles, one per destination. */
.lp2 .lp2-int {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 30px 34px;
	padding: 12px 0 4px;
}
.lp2-int li {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	font-size: 14px;
	font-weight: 500;
	color: var(--lp-ink);
}
.lp2-int li:nth-child(odd) .lp2-app {
	transform: rotate(-6deg);
}
.lp2-int li:nth-child(even) .lp2-app {
	transform: rotate(5deg);
}
.lp2-int li:nth-child(3n) .lp2-app {
	transform: rotate(-2deg);
}
.lp2-int .lp2-app {
	width: 72px;
	height: 72px;
	border-radius: 20px;
}
.lp2-int .lp2-app svg {
	width: 30px;
	height: 30px;
}
/* Agent setup is an inline action, without a panel. */
.lp2 #agents .lp2-heading {
	margin-bottom: 24px;
}
.lp2 .lp-agent-setup .lp-prompt-button {
	min-height: 42px;
	padding: 8px 16px;
	border: 1px solid color-mix(in srgb, var(--lp-blue) 25%, var(--lp-sky));
	background: var(--lp-sky);
	box-shadow: 0 1px 2px rgba(1, 5, 33, 0.1);
	font-size: 14px;
}
.lp2 .lp-agent-setup .lp-prompt-button:hover {
	filter: brightness(1.03);
}
/* Pricing: two leaning cards. */
.lp2-plans {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	gap: 44px;
	padding: 12px 0;
}
.lp2-plan {
	display: flex;
	flex-direction: column;
	width: 380px;
	padding: 32px 30px;
	border: 8px solid var(--lp2-card-edge);
	border-radius: 44px;
	background: #fff;
	transform: rotate(-2deg);
}
.lp2-plan-team {
	background: linear-gradient(160deg, #f7f8fb, #eef4ff);
	transform: rotate(2deg);
}
.lp2-plan > b {
	font-size: 15px;
	font-weight: 500;
	color: var(--lp-muted);
}
.lp2-price {
	display: block;
	margin-top: 8px;
	font-size: 46px;
	line-height: 1;
	font-weight: 500;
	letter-spacing: -0.03em;
}
.lp2-price small {
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0;
	color: var(--lp-muted);
}
.lp2-plan > p {
	margin-top: 12px;
	font-size: 15px;
	color: var(--lp-muted);
}
.lp2-plan ul {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 22px 0 26px;
	font-size: 15px;
}
.lp2-plan li {
	display: flex;
	align-items: center;
	gap: 10px;
}
.lp2-plan li i {
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--lp-sky);
	color: var(--lp-ink);
}
.lp2-plan .lp2-call {
	margin-top: auto;
}
.lp2-plan-note {
	margin-top: 12px;
	font-size: 13px;
	text-align: center;
	color: var(--lp-muted);
}
/* FAQ: two columns of white cards. */
.lp2-faq {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	align-items: start;
}
.lp2-faq details {
	padding: 0 22px;
	border: 4px solid var(--lp2-card-edge);
	border-radius: 26px;
	background: #fff;
}
.lp2-faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 0;
	list-style: none;
	font-size: 16px;
	line-height: 24px;
	font-weight: 500;
}
.lp2-faq summary::-webkit-details-marker {
	display: none;
}
.lp2-faq details[open] summary {
	color: var(--lp-blue-deep);
}
.lp2-faq details p {
	padding-bottom: 18px;
	font-size: 15px;
	line-height: 23px;
	color: var(--lp-muted);
}
/* Closing card. */
.lp2-final {
	width: min(1120px, 100%);
	margin: 88px auto 96px;
	padding: 72px 48px;
	border: 8px solid var(--lp-dark-raised);
	border-radius: 44px;
	background: var(--lp2-navy);
	color: #fff;
	text-align: center;
	box-sizing: border-box;
}
.lp2-final h2 {
	font-size: clamp(32px, 4.2vw, 52px);
	line-height: 1.1;
	font-weight: 500;
	letter-spacing: -0.03em;
}
.lp2-final p {
	margin-top: 16px;
	font-size: 17px;
	color: var(--lp-muted-on-dark);
}
.lp2-final .lp2-hero-cta {
	margin-top: 30px;
}

/* Demo dialog: the sample report in a browser frame inside a thick-edged card. */
[data-slot="dialog-content"].lp2-dialog {
	inset: 20px;
	/* Tailwind's centering translate is cleared by utilities on the element; the
	   CSS minifier folds `translate: none` into `transform`, which does not. */
	transform: none;
	display: grid;
	grid-template-rows: minmax(0, 1fr);
	width: calc(100vw - 40px);
	max-width: none;
	height: calc(100dvh - 40px);
	max-height: none;
	padding: 12px;
	gap: 0;
	border: 8px solid var(--lp2-card-edge);
	border-radius: 40px;
	background: var(--lp2-card);
	box-shadow: 0 40px 80px -30px rgba(1, 5, 33, 0.6);
	overflow: hidden;
	font-family: var(--lp-font);
	color: var(--lp-ink);
}
.lp2-dialog-window {
	min-height: 0;
	background: #fff;
}
.lp2-dialog-window .lp-window-bar {
	padding: 0 56px 0 8px;
}
.lp2-dialog-title {
	margin: 0;
	font-size: 12px;
	line-height: 16px;
	font-weight: 500;
	color: var(--lp-ink);
	white-space: nowrap;
}
.lp2-dialog-window .lp-window-app {
	flex: 1;
	min-height: 0;
	overflow: hidden;
}
.lp2-dialog-window iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}
[data-slot="dialog-content"].lp2-dialog [data-slot="dialog-close"] {
	top: 14px;
	right: 18px;
}

@media (max-width: 1120px) {
	.lp2-steps {
		gap: 40px;
	}
	.lp2-connector,
	.lp2-app-float,
	.lp2-note {
		display: none;
	}
	.lp2-bento-grid {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 400px 372px auto;
	}
	.lp2-agent {
		grid-row: 3;
		grid-column: 1 / 3;
		min-height: 420px;
	}
	.lp2-hand {
		grid-template-columns: 1fr;
		max-width: 520px;
		margin: 0 auto;
	}
	.lp2-hand article:first-child,
	.lp2-hand article:last-child {
		transform: none;
	}
}
@media (max-width: 860px) {
	.lp2 .lp2-topnav {
		gap: 12px;
		padding-right: 12px;
	}
	.lp2-plans {
		flex-direction: column;
		align-items: center;
	}
	.lp2-plan,
	.lp2-plan-team {
		width: min(420px, 100%);
		transform: none;
	}
	.lp2-faq {
		grid-template-columns: 1fr;
	}
	.lp2-panel {
		padding: 22px;
		border-radius: 34px;
	}
}
@media (max-width: 760px) {
	.lp2-hero {
		padding: 104px 20px 24px;
	}
	.lp2-line-one {
		letter-spacing: -0.05em;
	}
	.lp2-line-two {
		padding: 2px 18px 5px;
	}
	.lp2-handle {
		width: 10px;
		height: 10px;
	}
	.lp2-tl,
	.lp2-bl {
		left: -6px;
	}
	.lp2-tr,
	.lp2-br {
		right: -6px;
	}
	.lp2-tl,
	.lp2-tr {
		top: -6px;
	}
	.lp2-bl,
	.lp2-br {
		bottom: -6px;
	}
	.lp2 .lp2-lead {
		font-size: 16px;
		line-height: 24px;
	}
	.lp2-steps {
		flex-direction: column;
		align-items: center;
		gap: 28px;
		padding: 0 20px 32px;
	}
	.lp2-card {
		width: min(320px, 100%);
	}
	.lp2-bento {
		padding: 24px 20px 0;
	}
	.lp2-bento-grid {
		display: flex;
		flex-direction: column;
		gap: 14px;
	}
	.lp2-bento-card {
		border-width: 5px;
		border-radius: 32px;
	}
	.lp2-feature {
		flex-direction: column;
		align-items: stretch;
		padding: 24px 22px 0;
	}
	.lp2-feature-visual {
		position: relative;
		left: auto;
		bottom: -12px;
		width: 100%;
		margin-top: 22px;
	}
	.lp2-feature-copy {
		margin: 0;
		padding: 0;
	}
	.lp2-feature-copy h2 {
		font-size: 24px;
	}
	.lp2-stats,
	.lp2-search {
		height: 350px;
	}
	.lp2-agent {
		min-height: 520px;
		padding: 26px 22px 150px;
	}
	.lp2-agent .lp2-agent-prompt {
		font-size: 16px;
	}
	.lp2-section {
		padding: 64px 20px 0;
	}
	.lp2-final {
		margin: 64px 20px 72px;
		width: auto;
		padding: 48px 24px;
		border-radius: 34px;
	}
	.lp2 .lp2-int {
		gap: 22px 20px;
	}
	.lp2-int .lp2-app {
		width: 60px;
		height: 60px;
	}
	[data-slot="dialog-content"].lp2-dialog {
		inset: 8px;
		width: calc(100vw - 16px);
		height: calc(100dvh - 16px);
		padding: 6px;
		border-width: 5px;
		border-radius: 26px;
	}
}

@media (max-width: 380px) {
	.lp2 .lp-nav-actions {
		display: none;
	}
	.lp2 .lp-mobile-nav {
		margin-left: auto;
	}
}

.privacy-preferences {
	position: fixed;
	z-index: 40;
	right: 20px;
	bottom: 20px;
	width: min(392px, calc(100% - 32px));
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 14px;
	border-radius: 16px;
	background: #101638;
	color: #fff;
	box-shadow:
		0 0 0 1px rgba(255, 255, 255, 0.12),
		0 20px 40px -16px rgba(1, 5, 33, 0.5);
	font:
		13px / 20px "Geist Variable",
		Geist,
		"Inter Variable",
		Inter,
		system-ui,
		sans-serif;
}
.privacy-preferences-tabs {
	display: flex;
	gap: 4px;
}
.privacy-preferences-tabs [role="tab"] {
	padding: 4px 10px;
	border: 0;
	border-radius: 8px;
	background: none;
	color: #b8bccb;
	font: inherit;
	font-weight: 500;
	cursor: pointer;
}
.privacy-preferences-tabs [role="tab"]:hover {
	color: #fff;
}
.privacy-preferences-tabs [role="tab"][aria-selected="true"] {
	color: #fff;
	box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.85);
}
.privacy-preferences-panel {
	padding: 0 2px;
}
.privacy-preferences strong {
	display: block;
	font-size: 14px;
	font-weight: 600;
}
.privacy-preferences p {
	margin: 4px 0 0;
	color: #b8bccb;
}
.privacy-preferences a {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.privacy-preferences-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.privacy-preferences-list li {
	padding: 10px 12px;
	border-radius: 10px;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.privacy-preferences-list span {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}
.privacy-preferences-list i {
	padding: 1px 8px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.1);
	font-style: normal;
	font-size: 12px;
	color: #fff;
}
.privacy-preferences-list p {
	margin-top: 2px;
	font-size: 12px;
	line-height: 18px;
}
.privacy-preferences-actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}
.privacy-preferences-actions button {
	min-height: 38px;
	padding: 8px 12px;
	border: 0;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
	font: inherit;
	font-weight: 500;
	cursor: pointer;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}
.privacy-preferences-actions button:hover {
	background: rgba(255, 255, 255, 0.14);
}
.privacy-preferences-actions .privacy-preferences-allow {
	background: #97e6ff;
	color: #101638;
	box-shadow: none;
}
.privacy-preferences-actions .privacy-preferences-allow:hover {
	background: #c7dbff;
}
.privacy-preferences button:focus-visible,
.privacy-preferences a:focus-visible {
	outline: 2px solid #97e6ff;
	outline-offset: 2px;
}
/* Legal documents on the landing sheet: sticky sidebar, one text card. */
.legal-layout {
	display: grid;
	grid-template-columns: 264px minmax(0, 1fr);
	gap: 28px;
	align-items: start;
	max-width: 1216px;
	margin: 0 auto;
	padding: 124px 48px 80px;
}
.legal-side {
	position: sticky;
	top: 100px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.legal-toc,
.legal-docs {
	padding: 16px;
	border: 6px solid var(--lp2-card-edge);
	border-radius: 28px;
	background: var(--lp2-card);
}
.legal-side-title {
	display: block;
	margin: 0 0 10px 10px;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--lp-muted);
}
.legal-toc ol {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.legal-toc a,
.legal-docs a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px 10px;
	border-radius: 999px;
	font-size: 14px;
	line-height: 20px;
	color: var(--lp-muted);
	transition:
		background-color 0.15s,
		color 0.15s;
}
.legal-toc a:hover,
.legal-docs a:hover {
	color: var(--lp-ink);
	background: #fff;
}
.legal-toc a i {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #fff;
	box-shadow: inset 0 0 0 2px var(--lp2-card-edge);
	font-size: 11px;
	font-style: normal;
	font-weight: 600;
	color: var(--lp-ink);
}
.legal-toc a[aria-current] {
	color: var(--lp-ink);
	background: #fff;
	box-shadow: inset 0 0 0 2px var(--lp2-card-edge);
}
.legal-toc a[aria-current] i {
	background: var(--lp-sky);
	box-shadow: none;
}
.legal-docs a[aria-current] {
	color: var(--lp-blue-deep);
	font-weight: 500;
}
.legal-card {
	padding: 44px 56px 56px;
	border: 8px solid var(--lp2-card-edge);
	border-radius: 40px;
	background: #fff;
}
.legal-tag {
	display: inline-flex;
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--lp-sky-soft);
	font-family: var(--lp-mono);
	font-size: 13px;
	line-height: 20px;
	color: var(--lp-blue-deep);
	box-shadow: inset 0 0 0 1px rgba(0, 85, 255, 0.18);
}
.lp2 .legal-card h1 {
	display: block;
	text-align: left;
	margin: 18px 0 0;
	font-size: clamp(36px, 4vw, 54px);
	line-height: 1.08;
	font-weight: 500;
	letter-spacing: -0.03em;
}
.lp2 .legal-intro {
	max-width: 640px;
	margin: 18px 0 0;
	font-size: 18px;
	line-height: 28px;
	color: var(--lp-muted);
	text-wrap: pretty;
}
.lp2 .legal-updated {
	margin: 18px 0 0;
	padding-bottom: 28px;
	border-bottom: 1px solid var(--lp-line-soft);
	font-size: 13px;
	color: var(--lp-muted);
}
.legal-card section {
	padding-top: 36px;
	scroll-margin-top: 108px;
}
.lp2 .legal-card h2 {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 24px;
	line-height: 30px;
	font-weight: 500;
	letter-spacing: -0.02em;
}
.legal-card h2 i {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--lp-sky);
	font-size: 13px;
	font-style: normal;
	font-weight: 600;
	color: var(--lp-ink);
}
.lp2 .legal-card section p {
	max-width: 680px;
	margin: 12px 0 0;
	font-size: 16px;
	line-height: 27px;
	color: var(--lp-muted);
}
@media (max-width: 900px) {
	.legal-layout {
		grid-template-columns: 1fr;
		gap: 16px;
		padding: 100px 20px 56px;
	}
	.legal-side {
		position: static;
	}
	.legal-toc ol {
		flex-direction: row;
		flex-wrap: wrap;
	}
	.legal-docs {
		display: flex;
		flex-wrap: wrap;
		gap: 2px;
	}
	.legal-docs .legal-side-title {
		width: 100%;
	}
	.legal-card {
		padding: 26px 22px 32px;
		border-width: 6px;
		border-radius: 30px;
	}
	.legal-card section {
		padding-top: 28px;
	}
}
@media (max-width: 600px) {
	.privacy-preferences {
		right: 12px;
		bottom: 12px;
		width: calc(100% - 24px);
	}
}