/*
 * Linkd demo — the tour chrome around real product pages: tour bar, guide
 * panel, hotspots, plan gating and the device frame for public pages.
 * Product UI itself comes from the theme's style.css; nothing here restyles it
 * beyond positioning it under the tour bar.
 */

:root {
	--lk-tourbar-h: 56px;
	--lk-guide-w: 360px;
	--lk-grad: linear-gradient(90deg, #60a5fa, #2563eb 55%, #1d4ed8);
	--lk-ink: #0b1120;
	--lk-ink-2: #111827;
	--lk-ink-3: #1e293b;
	--lk-line: #1f2a3d;
	--lk-text: #f1f5f9;
	--lk-muted: #94a3b8;
	--lk-blue: #2563eb;
	--lk-sky: #60a5fa;
	--lk-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

body.lk-demo {
	margin: 0;
	min-height: 100vh;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	background: #ffffff;
	color: #111111;
}
[data-theme='dark'] body.lk-demo {
	background: #020617;
}
.lk-demo .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ---------- Plan gating ---------- */

html[data-plan='free'] [data-plans]:not([data-plans~='free']),
html[data-plan='individual'] [data-plans]:not([data-plans~='individual']),
html[data-plan='startup'] [data-plans]:not([data-plans~='startup']),
html[data-plan='enterprise'] [data-plans]:not([data-plans~='enterprise']) {
	display: none !important;
}

/* ---------- Tour bar ---------- */

.lk-tourbar {
	position: sticky;
	top: 0;
	z-index: 120;
	height: var(--lk-tourbar-h);
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0 0.875rem;
	background: rgba(11, 17, 32, 0.94);
	backdrop-filter: saturate(140%) blur(14px);
	-webkit-backdrop-filter: saturate(140%) blur(14px);
	border-bottom: 1px solid var(--lk-line);
	color: var(--lk-text);
	box-sizing: border-box;
}
.lk-tourbar::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -1px;
	height: 2px;
	width: var(--lk-progress, 0%);
	background: var(--lk-grad);
	transition: width 500ms var(--lk-ease);
}
.lk-tourbar button,
.lk-tourbar select {
	font: inherit;
}

.lk-tour-home {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--lk-text);
	text-decoration: none;
	font-weight: 700;
	font-size: 0.9375rem;
	letter-spacing: -0.01em;
	white-space: nowrap;
}
.lk-tour-home img {
	display: block;
	border-radius: 6px;
}
.lk-demo-tag {
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 3px 7px;
	border-radius: 999px;
	background: rgba(37, 99, 235, 0.18);
	border: 1px solid rgba(96, 165, 250, 0.35);
	color: #93c5fd;
}

.lk-tour-step {
	position: relative;
	margin: 0 auto;
	min-width: 0;
}
.lk-tour-step-btn {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	max-width: 100%;
	padding: 0.35rem 0.6rem 0.35rem 0.8rem;
	border-radius: 999px;
	border: 1px solid var(--lk-line);
	background: var(--lk-ink-2);
	color: var(--lk-muted);
	font-size: 0.8125rem;
	cursor: pointer;
	transition: border-color 120ms ease-out, color 120ms ease-out;
}
.lk-tour-step-btn:hover,
.lk-tour-step-btn[aria-expanded='true'] {
	border-color: var(--lk-blue);
	color: var(--lk-text);
}
.lk-tour-step-btn strong {
	color: var(--lk-text);
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.lk-num {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.lk-tour-menu {
	position: absolute;
	top: calc(100% + 10px);
	left: 50%;
	transform: translateX(-50%);
	width: min(600px, calc(100vw - 1.5rem));
	padding: 0.5rem;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2px;
	border: 1px solid var(--lk-line);
	border-radius: 14px;
	background: var(--lk-ink-2);
	box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.65);
	animation: lk-pop 160ms ease-out;
}
.lk-tour-menu[hidden] {
	display: none;
}
.lk-tour-menu a {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	padding: 0.5rem 0.625rem;
	border-radius: 9px;
	color: var(--lk-text);
	font-size: 0.875rem;
	font-weight: 500;
	text-decoration: none;
}
.lk-tour-menu small {
	display: block;
	color: var(--lk-muted);
	font-size: 0.75rem;
	font-weight: 400;
}
.lk-tour-menu a:hover {
	background: var(--lk-ink-3);
}
.lk-tour-menu a[aria-current='page'] {
	background: rgba(37, 99, 235, 0.16);
}
.lk-n {
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	flex-shrink: 0;
	border-radius: 999px;
	border: 1px solid var(--lk-line);
	font-size: 0.6875rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--lk-muted);
}
.lk-tour-menu a[aria-current='page'] .lk-n,
.lk-tour-menu a.is-done .lk-n {
	background: var(--lk-grad);
	border-color: transparent;
	color: #fff;
}

.lk-tour-controls {
	display: flex;
	align-items: center;
	gap: 0.375rem;
}
.lk-tour-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	height: 34px;
	padding: 0 0.75rem;
	border-radius: 9px;
	border: 1px solid var(--lk-line);
	background: var(--lk-ink-2);
	color: var(--lk-muted);
	font-size: 0.8125rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	box-sizing: border-box;
	transition: color 120ms ease-out, border-color 120ms ease-out, transform 120ms ease-out, filter 120ms ease-out;
}
.lk-tour-btn:hover {
	color: var(--lk-text);
	border-color: #334155;
}
.lk-tour-btn:active {
	transform: scale(0.97);
}
.lk-tour-btn.lk-square {
	width: 34px;
	padding: 0;
	justify-content: center;
}
.lk-tour-btn.lk-primary {
	border-color: transparent;
	background: var(--lk-grad);
	color: #fff;
	box-shadow: 0 8px 20px -10px rgba(37, 99, 235, 0.9);
}
.lk-tour-btn.lk-primary:hover {
	filter: brightness(1.1);
}
.lk-txt {
	display: none;
}
@media (min-width: 768px) {
	.lk-txt {
		display: inline;
	}
}
.lk-tour-word,
.lk-of {
	display: none;
}
@media (min-width: 640px) {
	.lk-tour-word,
	.lk-of {
		display: inline;
	}
}

.lk-plan-switch {
	display: none;
	align-items: center;
	gap: 2px;
	padding: 3px;
	border: 1px solid var(--lk-line);
	border-radius: 10px;
	background: var(--lk-ink-2);
}
.lk-plan-switch .lk-lbl {
	padding: 0 0.4rem;
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--lk-muted);
}
.lk-plan-switch button {
	padding: 0.3rem 0.6rem;
	border: 0;
	border-radius: 7px;
	background: none;
	color: var(--lk-muted);
	font-size: 0.75rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 150ms ease-out, color 150ms ease-out;
}
.lk-plan-switch button:hover {
	color: var(--lk-text);
}
.lk-plan-switch button[aria-pressed='true'] {
	background: var(--lk-blue);
	color: #fff;
	box-shadow: 0 4px 12px -6px rgba(37, 99, 235, 0.9);
}
.lk-plan-select select {
	height: 34px;
	padding: 0 1.75rem 0 0.625rem;
	border-radius: 9px;
	border: 1px solid var(--lk-line);
	background: var(--lk-ink-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 0.55rem center;
	color: var(--lk-text);
	font-size: 0.8125rem;
	font-weight: 600;
	-webkit-appearance: none;
	appearance: none;
}
@media (min-width: 1080px) {
	.lk-plan-switch {
		display: flex;
	}
	.lk-plan-select {
		display: none;
	}
}

/* ---------- Frame: app + guide ---------- */

.lk-frame {
	display: flex;
	align-items: stretch;
	min-height: calc(100vh - var(--lk-tourbar-h));
}
.lk-app,
.lk-public {
	flex: 1;
	min-width: 0;
}
.lk-demo .bc-body.bc-dbc-dashboard {
	min-height: calc(100vh - var(--lk-tourbar-h));
}
.lk-demo .bc-dbc-sidebar {
	top: var(--lk-tourbar-h);
}
.lk-demo .bc-dbc-main {
	transition: opacity 180ms ease-out, transform 180ms ease-out;
}
.lk-demo .bc-dbc-main > .bc-dbc-header,
.lk-demo .bc-dbc-main > .bc-dbc-stats-row,
.lk-demo .bc-dbc-main > .bc-dbc-card,
.lk-demo .bc-dbc-main > .lk-callout,
.lk-demo .bc-dbc-main > div {
	animation: lk-rise 380ms var(--lk-ease) both;
}
.lk-demo .bc-dbc-main > :nth-child(3) { animation-delay: 40ms; }
.lk-demo .bc-dbc-main > :nth-child(4) { animation-delay: 80ms; }
.lk-demo .bc-dbc-main > :nth-child(5) { animation-delay: 120ms; }
.lk-demo .bc-dbc-main > :nth-child(n + 6) { animation-delay: 160ms; }
body.lk-demo.is-leaving .bc-dbc-main,
body.lk-demo.is-leaving .lk-public {
	opacity: 0;
	transform: translateY(-6px);
	transition: opacity 150ms ease-in, transform 150ms ease-in;
}

@media (max-width: 768px) {
	.lk-demo .bc-dbc-sidebar {
		top: var(--lk-tourbar-h);
	}
}

.lk-guide {
	position: sticky;
	top: var(--lk-tourbar-h);
	z-index: 60;
	width: var(--lk-guide-w);
	height: calc(100vh - var(--lk-tourbar-h));
	flex-shrink: 0;
	display: none;
	overflow-y: auto;
	border-left: 1px solid var(--lk-line);
	background:
		radial-gradient(120% 50% at 100% 0%, rgba(37, 99, 235, 0.22), transparent 60%),
		var(--lk-ink);
	color: var(--lk-text);
	box-sizing: border-box;
}
@media (min-width: 1280px) {
	.lk-guide {
		display: block;
	}
	.lk-guide-collapsed .lk-guide {
		display: none;
	}
}
@media (max-width: 1279.98px) {
	body.lk-guide-open .lk-guide {
		display: block;
		position: fixed;
		z-index: 110;
		top: auto;
		bottom: 0;
		left: 0;
		right: 0;
		width: auto;
		height: min(72vh, 600px);
		border-left: 0;
		border-top: 1px solid var(--lk-line);
		border-radius: 18px 18px 0 0;
		box-shadow: 0 -30px 60px -20px rgba(0, 0, 0, 0.6);
		animation: lk-sheet-up 260ms var(--lk-ease);
	}
	body.lk-guide-open .lk-guide-scrim {
		display: block;
	}
}
@media (min-width: 769px) and (max-width: 1279.98px) {
	body.lk-guide-open .lk-guide {
		left: auto;
		top: var(--lk-tourbar-h);
		height: auto;
		width: var(--lk-guide-w);
		border-radius: 0;
		border-top: 0;
		border-left: 1px solid var(--lk-line);
		animation: lk-sheet-left 260ms var(--lk-ease);
	}
}
.lk-guide-scrim {
	display: none;
	position: fixed;
	inset: var(--lk-tourbar-h) 0 0 0;
	z-index: 105;
	background: rgba(2, 6, 23, 0.5);
	animation: lk-fade 200ms ease-out;
}

.lk-guide-inner {
	padding: 1.25rem 1.25rem 2rem;
}
.lk-guide-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.75rem;
}
.lk-guide-kicker {
	margin: 0;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	background: var(--lk-grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.lk-guide h2 {
	margin: 0.25rem 0 0;
	font-size: 1.3rem;
	line-height: 1.3;
	font-weight: 700;
	letter-spacing: -0.015em;
	color: var(--lk-text);
}
.lk-guide-close {
	padding: 0.3rem;
	border: 0;
	border-radius: 7px;
	background: none;
	color: var(--lk-muted);
	cursor: pointer;
}
.lk-guide-close:hover {
	background: var(--lk-ink-3);
	color: var(--lk-text);
}
.lk-guide-intro {
	margin: 0.6rem 0 0;
	color: #cbd5e1;
	font-size: 0.875rem;
	line-height: 1.55;
}
.lk-guide a {
	color: #93c5fd;
}

.lk-plan-card {
	margin-top: 1rem;
	padding: 0.85rem 0.95rem;
	border-radius: 12px;
	border: 1px solid rgba(96, 165, 250, 0.35);
	background: linear-gradient(160deg, rgba(37, 99, 235, 0.22), rgba(37, 99, 235, 0.06));
}
.lk-plan-card p {
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: #dbeafe;
}
.lk-plan-card__label {
	margin-bottom: 0.25rem !important;
	font-size: 0.6875rem !important;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #93c5fd !important;
}
.lk-plan-card__hint {
	margin-top: 0.5rem !important;
	font-size: 0.75rem !important;
	color: var(--lk-muted) !important;
}

.lk-guide-steps {
	margin: 1.25rem 0 0;
	padding: 0;
	list-style: none;
}
.lk-guide-step {
	border: 1px solid var(--lk-line);
	border-radius: 11px;
	background: rgba(17, 24, 39, 0.7);
	transition: border-color 160ms ease-out, background-color 160ms ease-out, box-shadow 160ms ease-out;
}
.lk-guide-step + .lk-guide-step {
	margin-top: 0.5rem;
}
.lk-guide-step > button {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	width: 100%;
	padding: 0.75rem;
	border: 0;
	background: none;
	color: var(--lk-text);
	font: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
}
.lk-guide-step .lk-body {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 260ms var(--lk-ease);
}
.lk-guide-step .lk-body > div {
	overflow: hidden;
}
.lk-guide-step .lk-body p {
	margin: 0;
	padding: 0 0.85rem 0.85rem 3.05rem;
	color: #cbd5e1;
	font-size: 0.8125rem;
	line-height: 1.5;
}
.lk-guide-step .lk-body p + p {
	margin-top: -0.35rem;
}
.lk-guide-step.is-active {
	border-color: rgba(96, 165, 250, 0.55);
	background: rgba(37, 99, 235, 0.12);
	box-shadow: 0 10px 30px -18px rgba(37, 99, 235, 0.8);
}
.lk-guide-step.is-active .lk-n {
	background: var(--lk-grad);
	border-color: transparent;
	color: #fff;
}
.lk-guide-step.is-active .lk-body {
	grid-template-rows: 1fr;
}

.lk-guide-nav {
	display: grid;
	gap: 0.6rem;
	margin-top: 1.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--lk-line);
}
.lk-guide-next {
	display: block;
	padding: 0.875rem 1rem;
	border-radius: 11px;
	background: var(--lk-grad);
	color: #fff !important;
	text-decoration: none;
	box-shadow: 0 14px 28px -14px rgba(37, 99, 235, 0.95);
	transition: transform 160ms ease-out;
}
.lk-guide-next:hover {
	transform: translateY(-1px);
}
.lk-guide-next small {
	display: block;
	opacity: 0.85;
	font-size: 0.75rem;
}
.lk-guide-next strong {
	display: flex;
	justify-content: space-between;
	font-size: 0.9375rem;
}
.lk-guide-prev {
	font-size: 0.8125rem;
	color: var(--lk-muted) !important;
	text-decoration: none;
}
.lk-guide-prev:hover {
	color: var(--lk-text) !important;
}
.lk-guide-fine {
	margin: 1.25rem 0 0;
	font-size: 0.75rem;
	line-height: 1.5;
	color: #64748b;
}

/* ---------- Hotspots ---------- */

.lk-hs-target {
	scroll-margin-top: calc(var(--lk-tourbar-h) + 24px);
}
.lk-hs-relative {
	position: relative;
}
.lk-hs-dot {
	position: absolute;
	top: -11px;
	left: -11px;
	z-index: 30;
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: var(--lk-grad);
	color: #fff;
	font: 700 0.75rem/1 'Inter', sans-serif;
	cursor: pointer;
	box-shadow: 0 0 0 3px #fff, 0 6px 16px -4px rgba(37, 99, 235, 0.9);
	animation: lk-hs-in 420ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
	animation-delay: calc(var(--i, 0) * 70ms + 250ms);
	transition: transform 160ms ease-out;
}
[data-theme='dark'] .lk-hs-dot {
	box-shadow: 0 0 0 3px #020617, 0 6px 16px -4px rgba(37, 99, 235, 0.9);
}
.lk-hs-dot::before {
	content: '';
	position: absolute;
	inset: -4px;
	border-radius: 999px;
	border: 2px solid var(--lk-sky);
	opacity: 0;
	animation: lk-hs-pulse 2.4s ease-out infinite;
	animation-delay: calc(var(--i, 0) * 300ms + 1s);
}
.lk-hs-dot:hover {
	transform: scale(1.12);
}
.lk-hs-target.lk-hs-active {
	outline: 2px solid var(--lk-sky);
	outline-offset: 4px;
	border-radius: 10px;
	animation: lk-hs-glow 1.4s ease-out;
}

/* ---------- Demo callouts inside product pages ---------- */

.lk-callout {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	flex-wrap: wrap;
	margin: 0 0 20px;
	padding: 0.85rem 1rem;
	border: 1px dashed rgba(37, 99, 235, 0.55);
	border-radius: 12px;
	background: rgba(37, 99, 235, 0.06);
	color: #1e3a8a;
	font-size: 0.875rem;
	line-height: 1.5;
}
.lk-callout p {
	flex: 1 1 260px;
	margin: 0;
}
.lk-callout strong {
	color: #1e40af;
}
[data-theme='dark'] .lk-callout {
	background: rgba(37, 99, 235, 0.12);
	border-color: rgba(96, 165, 250, 0.45);
	color: #dbeafe;
}
[data-theme='dark'] .lk-callout strong {
	color: #bfdbfe;
}
.lk-callout-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.45rem 0.85rem;
	border: 0;
	border-radius: 8px;
	background: var(--lk-grad);
	color: #fff;
	font: inherit;
	font-size: 0.8125rem;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
}
.lk-callout-btn:hover {
	filter: brightness(1.08);
}

/* ---------- End-of-tour sign-up ---------- */

.lk-finale {
	position: relative;
	margin: 8px 0 24px;
	padding: 2.25rem 2rem 1.75rem;
	border: 1px solid rgba(37, 99, 235, 0.25);
	border-radius: 18px;
	background:
		radial-gradient(120% 140% at 100% 0%, rgba(96, 165, 250, 0.22), transparent 55%),
		linear-gradient(135deg, #eff6ff, #ffffff 60%);
	text-align: center;
}
[data-theme='dark'] .lk-finale {
	border-color: rgba(96, 165, 250, 0.3);
	background:
		radial-gradient(120% 140% at 100% 0%, rgba(37, 99, 235, 0.35), transparent 55%),
		linear-gradient(135deg, #0f1b33, #0b1120 65%);
}
.lk-finale__kicker {
	margin: 0 0 0.35rem;
	color: var(--lk-blue);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
[data-theme='dark'] .lk-finale__kicker { color: var(--lk-sky); }
.lk-finale__title {
	margin: 0 0 0.5rem;
	color: #0f172a;
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	font-weight: 700;
	line-height: 1.2;
}
[data-theme='dark'] .lk-finale__title { color: var(--lk-text); }
.lk-finale__lead {
	max-width: 36rem;
	margin: 0 auto 1.25rem;
	color: #475569;
	font-size: 0.95rem;
	line-height: 1.6;
}
[data-theme='dark'] .lk-finale__lead { color: #cbd5e1; }
.lk-finale__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem;
	margin-bottom: 1.25rem;
}
.lk-finale__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.7rem 1.25rem;
	border: 1px solid rgba(37, 99, 235, 0.4);
	border-radius: 10px;
	color: var(--lk-blue);
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
	transition: filter 150ms ease, transform 150ms ease;
}
.lk-finale__btn:hover { transform: translateY(-1px); }
[data-theme='dark'] .lk-finale__btn { border-color: rgba(96, 165, 250, 0.45); color: #bfdbfe; }
.lk-finale__btn--primary,
[data-theme='dark'] .lk-finale__btn--primary {
	border-color: transparent;
	background: var(--lk-grad);
	color: #fff;
	box-shadow: 0 8px 24px rgba(37, 99, 235, 0.35);
}
.lk-finale__btn--primary:hover { filter: brightness(1.08); }
#lk-main .lk-finale .bc-donations-notice--demo {
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.2em 0.35em;
	margin: 0 auto 1.25rem;
	padding: 0.55rem 1rem;
	border-radius: 999px;
	background: rgba(37, 99, 235, 0.08);
	color: #334155;
	font-size: 0.875rem;
	line-height: 1.5;
}
#lk-main .lk-finale .bc-donations-notice--demo a { color: var(--lk-blue); font-weight: 600; text-decoration: none; }
#lk-main .lk-finale .bc-donations-notice--demo a:hover { text-decoration: underline; }
[data-theme='dark'] #lk-main .lk-finale .bc-donations-notice--demo { background: rgba(96, 165, 250, 0.12); color: #cbd5e1; }
[data-theme='dark'] #lk-main .lk-finale .bc-donations-notice--demo a { color: var(--lk-sky); }
.lk-finale__links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.35rem 1.25rem;
	padding-top: 1rem;
	border-top: 1px solid rgba(148, 163, 184, 0.25);
	font-size: 0.875rem;
}
.lk-finale__links a { color: #475569; text-decoration: none; }
.lk-finale__links a:hover { color: var(--lk-blue); }
[data-theme='dark'] .lk-finale__links a { color: var(--lk-muted); }
[data-theme='dark'] .lk-finale__links a:hover { color: var(--lk-sky); }

/* View-only fields keep the product look; only the cursor hints they are inert. */
#lk-main input[readonly],
#lk-main textarea[readonly] {
	cursor: default;
}
#lk-main [data-lk-locked] {
	cursor: not-allowed;
}

/* Locked feature state: the real content dimmed beneath an upgrade note. */
.lk-locked {
	position: relative;
}
.lk-locked > .lk-locked__content {
	opacity: 0.45;
	filter: grayscale(0.4);
	pointer-events: none;
	user-select: none;
}
.lk-lock-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 2px 8px;
	border-radius: 999px;
	background: #eff6ff;
	border: 1px solid #bfdbfe;
	color: #1d4ed8;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	vertical-align: middle;
	white-space: nowrap;
}
html[data-plan='startup'] .lk-m365-body {
	opacity: 0.5;
	filter: grayscale(0.4);
	pointer-events: none;
	user-select: none;
}
button.lk-lock-pill {
	margin: 0 0 8px;
	cursor: pointer;
	font-family: inherit;
}
[data-theme='dark'] .lk-lock-pill {
	background: rgba(37, 99, 235, 0.16);
	border-color: rgba(96, 165, 250, 0.4);
	color: #93c5fd;
}

/* ---------- Public pages (card, booking) ---------- */

.lk-public {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: clamp(1.5rem, 4vw, 3.5rem);
	flex-wrap: wrap;
	padding: clamp(1.25rem, 3vw, 2.5rem) clamp(1rem, 3vw, 2.5rem) 3rem;
	background:
		radial-gradient(60% 50% at 20% 0%, rgba(59, 130, 246, 0.16), transparent 70%),
		radial-gradient(50% 40% at 90% 20%, rgba(30, 58, 138, 0.12), transparent 70%),
		#f8fafc;
	box-sizing: border-box;
	animation: lk-rise 380ms var(--lk-ease) both;
}
.lk-device {
	width: min(100%, 410px);
	flex-shrink: 0;
	border-radius: 34px;
	padding: 10px;
	background: #0f172a;
	box-shadow: 0 40px 80px -30px rgba(15, 23, 42, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
	transition: width 320ms var(--lk-ease), border-radius 320ms var(--lk-ease);
}
.lk-device[data-size='desktop'] {
	width: min(100%, 900px);
	border-radius: 16px;
}
.lk-device__bar {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 10px 10px;
}
.lk-device__url {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border-radius: 999px;
	background: #1e293b;
	color: #cbd5e1;
	font-size: 0.75rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.lk-device__url svg {
	flex-shrink: 0;
	color: #4ade80;
}
.lk-device__screen {
	position: relative;
	height: min(76vh, 760px);
	border-radius: 24px;
	overflow: hidden;
	background: #fff;
}
.lk-device[data-size='desktop'] .lk-device__screen {
	border-radius: 8px;
	height: min(72vh, 720px);
}
.lk-device__screen iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	transition: opacity 200ms ease-out;
}
.lk-device__screen.is-loading iframe {
	opacity: 0.35;
}
.lk-size-toggle {
	display: inline-flex;
	gap: 2px;
	padding: 2px;
	border-radius: 999px;
	background: #1e293b;
}
.lk-size-toggle button {
	padding: 4px 10px;
	border: 0;
	border-radius: 999px;
	background: none;
	color: #94a3b8;
	font: 600 0.6875rem/1.4 'Inter', sans-serif;
	cursor: pointer;
}
.lk-size-toggle button[aria-pressed='true'] {
	background: #334155;
	color: #fff;
}

.lk-aside {
	width: min(100%, 360px);
	padding-top: 0.5rem;
	color: #0f172a;
}
.lk-aside h1 {
	margin: 0 0 0.4rem;
	font-size: 1.6rem;
	line-height: 1.2;
	letter-spacing: -0.02em;
}
.lk-aside > p {
	margin: 0 0 1.25rem;
	color: #475569;
	font-size: 0.9375rem;
	line-height: 1.55;
}
.lk-feature-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.5rem;
}
.lk-feature-list li {
	display: flex;
	gap: 0.7rem;
	align-items: flex-start;
	padding: 0.75rem 0.85rem;
	border-radius: 12px;
	background: #fff;
	border: 1px solid #e2e8f0;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
	font-size: 0.875rem;
	line-height: 1.45;
	color: #334155;
}
.lk-feature-list b {
	display: block;
	color: #0f172a;
	font-weight: 600;
}
.lk-feature-list .lk-ico {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	border-radius: 8px;
	background: #eff6ff;
	color: #2563eb;
}
.lk-feature-list li.is-off {
	background: #f8fafc;
	border-style: dashed;
	color: #64748b;
}
.lk-feature-list li.is-off .lk-ico {
	background: #f1f5f9;
	color: #94a3b8;
}
.lk-aside .lk-callout {
	margin-top: 1rem;
}

/* ---------- Toasts ---------- */

.lk-toasts {
	position: fixed;
	left: 50%;
	bottom: 24px;
	z-index: 200;
	transform: translateX(-50%);
	display: grid;
	gap: 8px;
	justify-items: center;
	pointer-events: none;
}
.lk-toast {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	max-width: min(92vw, 520px);
	padding: 0.65rem 1rem;
	border-radius: 12px;
	background: var(--lk-ink);
	border: 1px solid var(--lk-line);
	color: var(--lk-text);
	font-size: 0.875rem;
	line-height: 1.4;
	box-shadow: 0 20px 40px -16px rgba(2, 6, 23, 0.6);
	animation: lk-toast-in 260ms var(--lk-ease);
}
.lk-toast.is-leaving {
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 200ms ease-in, transform 200ms ease-in;
}
.lk-toast .lk-tick {
	display: grid;
	place-items: center;
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	border-radius: 999px;
	background: var(--lk-grad);
}

/* ---------- Motion ---------- */

@keyframes lk-rise {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
}
@keyframes lk-fade {
	from {
		opacity: 0;
	}
}
@keyframes lk-pop {
	from {
		opacity: 0;
		transform: translate(-50%, -4px);
	}
}
@keyframes lk-sheet-up {
	from {
		transform: translateY(100%);
	}
}
@keyframes lk-sheet-left {
	from {
		transform: translateX(100%);
	}
}
@keyframes lk-toast-in {
	from {
		opacity: 0;
		transform: translateY(10px) scale(0.98);
	}
}
@keyframes lk-hs-in {
	from {
		opacity: 0;
		transform: scale(0.3);
	}
}
@keyframes lk-hs-pulse {
	0% {
		opacity: 0.7;
		transform: scale(0.9);
	}
	70%,
	100% {
		opacity: 0;
		transform: scale(1.7);
	}
}
@keyframes lk-hs-glow {
	0% {
		box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.5);
	}
	100% {
		box-shadow: 0 0 0 18px rgba(59, 130, 246, 0);
	}
}
@keyframes lk-plan-flash {
	0% {
		background-color: rgba(59, 130, 246, 0.14);
	}
	100% {
		background-color: transparent;
	}
}
.lk-plan-changed [data-plans] {
	animation: lk-plan-flash 900ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
	.lk-demo *,
	.lk-demo *::before,
	.lk-demo *::after {
		animation-duration: 1ms !important;
		animation-delay: 0ms !important;
		transition-duration: 1ms !important;
	}
}