/* Hora: Inter (SIL Open Font License — ok for commercial web). System sans as fallback. */

:root {
	--lqd-body-font-family:
		"Inter",
		system-ui,
		"Segoe UI",
		Roboto,
		"Helvetica Neue",
		Helvetica,
		Arial,
		sans-serif;

	--lqd-heading-font-family:
		"Inter",
		system-ui,
		"Segoe UI",
		Roboto,
		"Helvetica Neue",
		Helvetica,
		Arial,
		sans-serif;

	--lqd-heading-font-weight: 600;

	/* Top bar: distance from viewport top + row height (used by bar + #banner). */
	--hora-top-bar-inset: 12px;
	--hora-top-bar-h: 40px;
}

body,
#wrap {
	font-family: var(--lqd-body-font-family);
}

html {
	scrollbar-gutter: stable;
}

/* Fixed top tools — replaces Liquid .main-header / sticky (no snap). */
.hora-top-bar {
	position: fixed;
	top: max(var(--hora-top-bar-inset), env(safe-area-inset-top, 0px));
	left: 0;
	right: 0;
	z-index: 10050;
}

/* No full-width tray tint — only the glass nav / pills read as surfaces. */
.hora-top-bar__shell {
	background: transparent;
	border-bottom: none;
	box-shadow: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

.hora-top-bar__row {
	min-height: 0;
	padding-top: 4px;
	padding-bottom: 4px;
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	column-gap: 12px;
	row-gap: 8px;
}

.hora-top-bar__brand {
	justify-self: start;
}

.hora-top-bar__desknav {
	justify-self: center;
	grid-column: 2;
	width: max-content;
	max-width: min(100%, 100vw - 240px);
	flex-grow: 0 !important;
}

.hora-top-bar__tools {
	justify-self: end;
	grid-column: 3;
}

@media (max-width: 1199px) {
	.hora-top-bar__row {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.hora-top-bar__brand {
		grid-column: 1;
	}

	.hora-top-bar__tools {
		grid-column: 2;
	}
}

.hora-top-bar .hora-theme-switch-wrap {
	margin-right: 0;
}

.hora-top-bar__brand .logo-default {
	display: block;
	max-height: 26px;
	width: auto;
}

.hora-brand-lockup {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--hora-text);
}

.hora-brand-lockup__icon {
	display: block;
	width: 33px;
	height: 33px;
	object-fit: contain;
}

.hora-brand-lockup__text {
	font-size: 18px;
	line-height: 1;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--hora-text);
}

/* Slimmer segment nav pill inside the bar (full-width shell stays transparent). */
.hora-top-bar .hora-header-nav.hora-navtray-glass {
	padding: 5px 10px;
}

.hora-top-bar .hora-theme-segment {
	padding: 4px;
}

.hora-top-bar .hora-theme-seg-btn {
	height: 34px;
	min-width: 44px;
	padding: 0 10px;
}

.hora-top-bar__menu {
	display: none;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
}

.hora-top-bar__drawer {
	border-top: 1px solid var(--hora-border);
	background-color: var(--hora-panel);
	color: var(--hora-text);
}

.hora-top-bar__drawer a {
	color: inherit;
}

@media (max-width: 1199px) {
	.hora-top-bar__desknav {
		display: none !important;
	}

	.hora-top-bar__menu {
		display: inline-flex !important;
	}
}

@media (min-width: 1200px) {
	.hora-top-bar__drawer {
		display: none !important;
		height: 0 !important;
		overflow: hidden !important;
		visibility: hidden !important;
		border: none !important;
	}
}

@media (max-width: 1199px) {
	:root {
		--hora-top-bar-h: 50px;
	}
}

#wrap {
	padding-top: 0;
}

/* Standalone legal / help pages — clear fixed top bar */
.hora-simple-page {
	padding-top: calc(max(var(--hora-top-bar-inset), env(safe-area-inset-top, 0px)) + var(--hora-top-bar-h) + 28px);
	padding-bottom: 28px;
	min-height: 55vh;
	box-sizing: border-box;
}

.hora-simple-page__placeholder {
	margin: 0;
	font-size: 18px;
	line-height: 1.5;
	color: var(--hora-subtle);
}

/* One top inset for the fixed bar (avoid #wrap padding + 100vh hero double-push). */
#banner.banner {
	padding-top: calc(max(var(--hora-top-bar-inset), env(safe-area-inset-top, 0px)) + var(--hora-top-bar-h) + 16px);
	box-sizing: border-box;
}

@media (max-width: 991px) {
	#banner.banner {
		padding-top: calc(max(var(--hora-top-bar-inset), env(safe-area-inset-top, 0px)) + var(--hora-top-bar-h) + 18px);
		padding-bottom: 60px;
	}
}

@media (max-width: 767px) {
	#banner.banner {
		padding-top: calc(max(var(--hora-top-bar-inset), env(safe-area-inset-top, 0px)) + var(--hora-top-bar-h) + 14px);
		padding-bottom: 30px;
	}
}

h1,
h2,
h3,
h4,
h5,
h6,
.ld-fh-element {
	font-family: var(--lqd-heading-font-family);
}

/* Hero copy tuning */
.banner .ld-fancy-heading h1.ld-fh-element {
	font-weight: 800;
}

.banner .ld-fancy-heading p.ld-fh-element.mb-0\/5em.leading-1\/5em.text-20 {
	color: #fff;
	font-size: 24px;
	line-height: 1.45;
}

/* Light / Dark: segmented control (matches in-app Text / Motion toggles) */
.hora-theme-switch-wrap {
	margin-right: 12px;
}

/*
 * Liquid dark-app header only (.main-header). Marketing pages (index-light / index-dark) use .hora-theme-segment links instead.
 */
.main-header .hora-theme-switch {
	position: relative;
	width: 52px;
	height: 30px;
	border: none;
	padding: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.96);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.75) inset,
		0 2px 10px rgba(15, 23, 42, 0.1);
	cursor: pointer;
	flex-shrink: 0;
	-webkit-tap-highlight-color: transparent;
}

.main-header .hora-theme-switch .hora-theme-knob {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: #0f172a;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.28s cubic-bezier(0.2, 0.82, 0.22, 1);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.main-header .hora-theme-switch.is-dark .hora-theme-knob {
	transform: translateX(22px);
}

.main-header .hora-theme-switch .hora-theme-icon {
	display: block;
}

.main-header .hora-theme-switch .hora-theme-icon-sun {
	width: 16px;
	height: 16px;
	color: #fff;
}

.main-header .hora-theme-switch .hora-theme-icon-moon {
	position: absolute;
	top: 50%;
	right: 7px;
	width: 16px;
	height: 16px;
	transform: translateY(-50%);
	pointer-events: none;
	color: #0f172a;
	stroke: #0f172a;
}

.main-header .hora-theme-switch.is-dark .hora-theme-icon-moon {
	right: auto;
	left: 7px;
}

body[data-theme="dark"] .main-header .hora-theme-switch {
	background: rgba(28, 28, 30, 0.92);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.06) inset,
		0 2px 12px rgba(0, 0, 0, 0.45);
	border: 1px solid rgba(255, 255, 255, 0.1);
}

body[data-theme="dark"] .main-header .hora-theme-switch .hora-theme-knob {
	background: #f1f5f9;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

body[data-theme="dark"] .main-header .hora-theme-switch .hora-theme-icon-sun {
	color: #0f172a;
	stroke: #0f172a;
}

body[data-theme="dark"] .main-header .hora-theme-switch .hora-theme-icon-moon {
	color: rgba(248, 250, 252, 0.55);
	stroke: rgba(248, 250, 252, 0.55);
}

.hora-theme-segment {
	display: inline-flex;
	align-items: stretch;
	padding: 3px;
	border-radius: 999px;
	border: 1px solid var(--hora-navtray-border);
	background: var(--hora-navtray-bg);
	box-shadow: var(--hora-navtray-shadow);
	-webkit-backdrop-filter: blur(10px) saturate(1.35);
	backdrop-filter: blur(10px) saturate(1.35);
	gap: 2px;
}

body[data-theme="light"] .hora-theme-segment {
	border-color: var(--hora-navtray-border);
	box-shadow: var(--hora-navtray-shadow);
}

.hora-theme-seg-btn {
	flex: 1 1 0;
	min-width: 40px;
	height: 32px;
	margin: 0;
	padding: 0 10px;
	border: none;
	border-radius: 999px;
	background: transparent;
	color: #000;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background 0.22s ease, color 0.22s ease, transform 0.18s ease;
	-webkit-tap-highlight-color: transparent;
}

/* Must not use color:inherit — body still uses dark-app --lqd-body-text-color (light gray) on light pages */
a.hora-theme-seg-btn {
	-webkit-appearance: none;
	appearance: none;
	text-decoration: none;
	color: #000;
	box-sizing: border-box;
}

.hora-theme-seg-btn:hover:not(.is-active) {
	background: rgba(0, 0, 0, 0.04);
}

.hora-theme-seg-btn.is-active {
	background: #000;
	color: #fff;
}

.hora-theme-seg-btn:focus-visible {
	outline: 2px solid #000;
	outline-offset: 2px;
}

.hora-theme-seg-btn svg {
	display: block;
	flex-shrink: 0;
}

/* Dark site theme: all-black chrome (selected side stays white pill for contrast) */
body[data-theme="dark"] .hora-theme-segment {
	background: var(--hora-navtray-bg);
	border-color: var(--hora-card-outline);
	box-shadow: var(--hora-navtray-shadow);
}

body[data-theme="dark"] .hora-theme-seg-btn {
	color: rgba(255, 255, 255, 0.42);
}

body[data-theme="dark"] .hora-theme-seg-btn:hover:not(.is-active) {
	background: rgba(255, 255, 255, 0.06);
}

body[data-theme="dark"] .hora-theme-seg-btn.is-active {
	background: #fff;
	color: #000;
}

body[data-theme="dark"] .hora-theme-seg-btn:focus-visible {
	outline-color: #fff;
}

/* Theme tokens */
body[data-theme="light"] {
	--hora-bg: #f7fafc;
	--hora-text: #0f172a;
	--hora-subtle: rgba(15, 23, 42, 0.74);
	--hora-panel: #f8fafc;
	--hora-border: rgba(15, 23, 42, 0.1);
	/* Shared with feature cards + Get the App CTA */
	--hora-card-outline: rgba(15, 23, 42, 0.12);
	--hora-card-elevation: 0 0 0 1px rgba(15, 23, 42, 0.05), 0 3px 12px rgba(15, 23, 42, 0.055),
		0 9px 30px rgba(15, 23, 42, 0.075), 0 0 30px rgba(15, 23, 42, 0.045);
	--hora-card-elevation-hover: 0 0 0 1px rgba(15, 23, 42, 0.08), 0 5px 16px rgba(15, 23, 42, 0.065),
		0 12px 34px rgba(15, 23, 42, 0.095), 0 0 36px rgba(15, 23, 42, 0.055);
	/* Floating nav tray — BlurView “light” tint (lighter blur so shapes read through) */
	--hora-navtray-bg: rgba(255, 255, 255, 0.38);
	--hora-navtray-border: rgba(15, 23, 42, 0.14);
	--hora-navtray-fg: #0f172a;
	--hora-navtray-shadow: 0 10px 40px rgba(15, 23, 42, 0.12), 0 1px 0 rgba(255, 255, 255, 0.65) inset;
	--hora-navtray-hover-bg: rgba(15, 23, 42, 0.07);
	--hora-navtray-active-fg: #0f172a;
	color: var(--hora-text);
}

body[data-theme="dark"] {
	--hora-bg: #000;
	--hora-text: #f8fafc;
	--hora-subtle: rgba(248, 250, 252, 0.72);
	--hora-panel: #050505;
	--hora-border: rgba(255, 255, 255, 0.1);
	--hora-card-outline: rgba(255, 255, 255, 0.12);
	--hora-card-elevation: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 0 10px rgba(255, 255, 255, 0.06),
		0 8px 24px rgba(0, 0, 0, 0.42), 0 0 28px rgba(255, 255, 255, 0.04);
	--hora-card-elevation-hover: 0 0 0 1px rgba(255, 255, 255, 0.09), 0 0 14px rgba(255, 255, 255, 0.08),
		0 12px 30px rgba(0, 0, 0, 0.46), 0 0 40px rgba(255, 255, 255, 0.05);
	/* Floating nav tray — BlurView “dark” tint */
	--hora-navtray-bg: rgba(22, 22, 24, 0.42);
	--hora-navtray-border: rgba(255, 255, 255, 0.14);
	--hora-navtray-fg: rgba(248, 250, 252, 0.92);
	--hora-navtray-shadow: 0 12px 48px rgba(0, 0, 0, 0.55), 0 1px 0 rgba(255, 255, 255, 0.06) inset;
	--hora-navtray-hover-bg: rgba(255, 255, 255, 0.1);
	--hora-navtray-active-fg: #fff;
	color: var(--hora-text);
}

/* Text selection — dark mode: avoid light-on-light; keep selected glyphs black */
body[data-theme="dark"] ::selection {
	background-color: rgba(167, 243, 208, 0.92);
	color: #000;
}
body[data-theme="dark"] ::-moz-selection {
	background-color: rgba(167, 243, 208, 0.92);
	color: #000;
}

/* Light mode: consistent readable selection */
body[data-theme="light"] ::selection {
	background-color: rgba(15, 23, 42, 0.14);
	color: #0f172a;
}
body[data-theme="light"] ::-moz-selection {
	background-color: rgba(15, 23, 42, 0.14);
	color: #0f172a;
}

/* Dark mode: true black page shell + common template surfaces */
html:has(body[data-theme="dark"]) {
	background-color: #000;
}

body[data-theme="dark"],
body[data-theme="dark"] #wrap,
body[data-theme="dark"] #lqd-contents-wrap {
	background-color: #000 !important;
}

body[data-theme="dark"] .banner {
	background-color: #000 !important;
}

body[data-theme="dark"] #download {
	background-color: #000 !important;
	background-image: none !important;
}

/* Header glass nav pill (RN BlurView-style light / dark tint) */
.hora-header-nav.hora-navtray-glass {
	display: inline-flex;
	align-items: center;
	max-width: 100%;
	padding: 8px 12px;
	border-radius: 50em;
	background: var(--hora-navtray-bg) !important;
	border: 1px solid var(--hora-navtray-border) !important;
	box-shadow: var(--hora-navtray-shadow) !important;
	-webkit-backdrop-filter: blur(10px) saturate(1.35);
	backdrop-filter: blur(10px) saturate(1.35);
	isolation: isolate;
}

.hora-header-nav__inner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Morphing white oval (theme-switch style) behind the active item */
.hora-header-nav__thumb {
	position: absolute;
	left: 0;
	top: 0;
	width: 2.5rem;
	height: 2.25rem;
	border-radius: 999px;
	background: #fff;
	z-index: 0;
	pointer-events: none;
	opacity: 0;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
	transition:
		left 0.4s cubic-bezier(0.2, 0.82, 0.22, 1),
		top 0.4s cubic-bezier(0.2, 0.82, 0.22, 1),
		width 0.4s cubic-bezier(0.2, 0.82, 0.22, 1),
		height 0.4s cubic-bezier(0.2, 0.82, 0.22, 1),
		opacity 0.2s ease;
}

.hora-header-nav.hora-navtray-glass.is-thumb-ready .hora-header-nav__thumb {
	opacity: 1;
}

body[data-theme="dark"] .hora-header-nav__thumb {
	box-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
}

.hora-header-nav__list {
	position: relative;
	z-index: 1;
	flex-wrap: wrap;
	row-gap: 0.35rem;
	column-gap: 0.1rem;
}

.hora-header-nav__item {
	margin: 0 0.15em;
	padding: 0;
}

.hora-header-nav__link {
	position: relative;
	z-index: 1;
	display: block;
	padding: 0.55em 1.05em;
	border-radius: 2em;
	font-size: 15px;
	line-height: 1.25;
	font-weight: 600;
	letter-spacing: -0.015em;
	white-space: nowrap;
	transition: color 0.25s ease;
}

.hora-header-nav.hora-navtray-glass .hora-header-nav__link.text-black {
	color: var(--hora-navtray-fg) !important;
}

/* Active tab sits on white thumb — must beat rule above (same specificity + !important). */
.hora-header-nav.hora-navtray-glass .hora-header-nav__item.is-active .hora-header-nav__link,
.hora-header-nav.hora-navtray-glass .hora-header-nav__item.is-active .hora-header-nav__link.text-black {
	color: #0f172a !important;
}

.hora-header-nav__link:hover {
	opacity: 0.92;
}

/* In-page anchors for Privacy / Terms / Support links */
.hora-scroll-target {
	scroll-margin-top: 6rem;
	height: 0;
	margin: 0;
	padding: 0;
	overflow: hidden;
	pointer-events: none;
}

body[data-theme="dark"] .lqd-pt .lqd-pt-bg,
body[data-theme="dark"] .lqd-pt-featured .lqd-pt-bg {
	background-color: #000 !important;
}

body[data-theme="dark"] .pricing .lqd-tabs-nav li a.active {
	background: #000 !important;
}

body[data-theme="dark"] .bg-slate-900,
body[data-theme="dark"] .bg-gray-900 {
	background-color: #000 !important;
}

body[data-theme] .content.bg-dark,
body[data-theme] .bg-dark {
	background-color: var(--hora-bg) !important;
}

body[data-theme] .bg-gray-800,
body[data-theme] .bg-footer {
	background-color: var(--hora-panel) !important;
}

/* Dark: footer was --hora-panel (#050505) vs shell #000 — copyright band read as a mismatched strip */
body[data-theme="dark"] .bg-footer,
body[data-theme="dark"] #site-footer.main-footer {
	background-color: #000 !important;
}

body[data-theme] .text-white,
body[data-theme] h1,
body[data-theme] h2,
body[data-theme] h3,
body[data-theme] h4,
body[data-theme] h5,
body[data-theme] h6 {
	color: var(--hora-text) !important;
}

body[data-theme] .text-white-70,
body[data-theme] .text-white-50,
body[data-theme] .text-white-40,
body[data-theme] .text-gray-700,
body[data-theme] p {
	color: var(--hora-subtle) !important;
}

body[data-theme] .border-white-10,
body[data-theme] .border-white-40 {
	border-color: var(--hora-border) !important;
}

/* Header: Get the App — same outline + elevation as feature cards */
a.hora-cta-app {
	border: 1px solid var(--hora-card-outline) !important;
	box-shadow: var(--hora-card-elevation) !important;
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}

a.hora-cta-app:hover {
	box-shadow: var(--hora-card-elevation-hover) !important;
	transform: translateY(-2px);
}

/* Get the App: light theme (global .text-white → dark text breaks dark pill) */
body[data-theme="light"] a.hora-cta-app,
body[data-theme="light"] a.hora-cta-app .btn-txt {
	color: #0f172a !important;
}

body[data-theme="light"] a.hora-cta-app.bg-slate-900 {
	background-color: #fff !important;
}

body[data-theme="light"] a.hora-cta-app:hover {
	background-color: #f1f5f9 !important;
	border-color: rgba(15, 23, 42, 0.18) !important;
	color: #0f172a !important;
	box-shadow: var(--hora-card-elevation-hover) !important;
}

body[data-theme="light"] a.hora-cta-app:hover .btn-txt {
	color: #0f172a !important;
}

/* In-page “Get the app” (hero / tabs / download) — card outline + halo shadow
   Theme .btn uses overflow:hidden — clips outer glow with backdrop-filter in Chrome/Edge */
a.hora-cta-screen.btn {
	overflow: visible !important;
	border: 1px solid var(--hora-card-outline) !important;
	box-shadow: var(--hora-card-elevation) !important;
	transition:
		box-shadow 0.25s ease,
		transform 0.25s ease,
		border-color 0.25s ease,
		background-color 0.25s ease,
		color 0.25s ease;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

/* App Store pending: dim + disable CTA interaction */
a.hora-cta-screen.hora-cta-pending.btn,
a.hora-cta-screen.hora-cta-pending.btn:hover,
a.hora-cta-screen.hora-cta-pending.btn.btn-solid:hover,
a.hora-cta-screen.hora-cta-pending.btn.btn-border-lg:hover {
	opacity: 0.52;
	filter: saturate(0.6);
	pointer-events: none;
	cursor: not-allowed;
	transform: none !important;
}

/* Hero CTA: dark = soft white glow; light = neutral grey shadow (no mint) */
#banner.banner a.hora-cta-screen.btn {
	box-shadow:
		0 0 0 1px rgba(255, 255, 255, 0.14),
		0 6px 20px rgba(0, 0, 0, 0.55),
		0 0 36px rgba(255, 255, 255, 0.08),
		0 0 72px rgba(255, 255, 255, 0.05) !important;
}

body[data-theme="light"] #banner.banner a.hora-cta-screen.btn {
	box-shadow:
		0 0 0 1px rgba(15, 23, 42, 0.1),
		0 6px 22px rgba(15, 23, 42, 0.1),
		0 0 40px rgba(15, 23, 42, 0.08),
		0 0 80px rgba(15, 23, 42, 0.05) !important;
}

#banner.banner a.hora-cta-screen.btn:hover,
#banner.banner a.hora-cta-screen.btn.btn-solid:hover {
	box-shadow:
		0 0 0 1px rgba(255, 255, 255, 0.18),
		0 10px 28px rgba(0, 0, 0, 0.58),
		0 0 48px rgba(255, 255, 255, 0.1),
		0 0 96px rgba(255, 255, 255, 0.06) !important;
}

body[data-theme="light"] #banner.banner a.hora-cta-screen.btn:hover,
body[data-theme="light"] #banner.banner a.hora-cta-screen.btn.btn-solid:hover {
	box-shadow:
		0 0 0 1px rgba(15, 23, 42, 0.12),
		0 10px 28px rgba(15, 23, 42, 0.12),
		0 0 52px rgba(15, 23, 42, 0.1),
		0 0 96px rgba(15, 23, 42, 0.06) !important;
}

body[data-theme="dark"] a.hora-cta-screen.btn {
	background-color: var(--hora-panel) !important;
}

body[data-theme="light"] a.hora-cta-screen.btn {
	background-color: rgba(255, 255, 255, 0.92) !important;
}

a.hora-cta-screen.btn:hover,
a.hora-cta-screen.btn.btn-border-lg:hover,
a.hora-cta-screen.btn.btn-solid:hover {
	box-shadow: var(--hora-card-elevation-hover) !important;
	transform: translateY(-2px);
	border-color: var(--hora-card-outline) !important;
}

body[data-theme="dark"] a.hora-cta-screen.btn:hover,
body[data-theme="dark"] a.hora-cta-screen.btn.btn-border-lg:hover,
body[data-theme="dark"] a.hora-cta-screen.btn.btn-solid:hover {
	background-color: #141414 !important;
	color: var(--hora-text) !important;
}

body[data-theme="dark"] a.hora-cta-app.bg-slate-900 {
	background-color: var(--hora-panel) !important;
}

body[data-theme="light"] a.hora-cta-screen,
body[data-theme="light"] a.hora-cta-screen .btn-txt {
	color: #0f172a !important;
}

body[data-theme="light"] a.hora-cta-screen.btn:hover,
body[data-theme="light"] a.hora-cta-screen.btn.btn-border-lg:hover,
body[data-theme="light"] a.hora-cta-screen.btn.btn-solid:hover {
	background-color: #f1f5f9 !important;
	border-color: rgba(15, 23, 42, 0.2) !important;
	color: #0f172a !important;
	box-shadow: var(--hora-card-elevation-hover) !important;
}

body[data-theme="light"] a.hora-cta-screen.btn:hover .btn-txt {
	color: #0f172a !important;
}

/* Feature grid: schedule / tray-style cards (radius 18, white halo) */
section.hora-feature-cards {
	--hora-fcard-bg: #0f0f0f;
	--hora-fcard-border: var(--hora-card-outline);
	--hora-fcard-shadow: var(--hora-card-elevation);
	--hora-fcard-icon-well: #181818;
	--hora-fcard-hover-y: -3px;
}

body[data-theme="dark"] section.hora-feature-cards {
	--hora-fcard-bg: var(--hora-panel);
	--hora-fcard-icon-well: #000;
}

body[data-theme="light"] section.hora-feature-cards {
	--hora-fcard-bg: rgba(255, 255, 255, 0.78);
	--hora-fcard-icon-well: #181818;
}

/* dark-app.css sets .features row gutter to 4px — halos get clipped at common desktop widths */
section.hora-feature-cards.features .container {
	--lqd-row-gutter-x: 18px;
}

section.hora-feature-cards.features .row {
	margin-inline-start: -9px;
	margin-inline-end: -9px;
	--lqd-row-gutter-x: 18px;
}

/* Allow box-shadow halos to paint outside grid / banner cells (theme often uses overflow-x clip paths) */
section.hora-feature-cards,
section.hora-feature-cards .container,
section.hora-feature-cards .row,
section.hora-feature-cards .col,
section.hora-feature-cards .module-icon-box-1,
section.hora-gallery,
section.hora-gallery .container,
#pricing,
#pricing .container,
#pricing .row,
#pricing .col,
#banner.banner,
#banner.banner .container,
#banner.banner .row,
#banner.banner .col {
	overflow-x: visible;
	overflow-y: visible;
}

section.hora-feature-cards .hora-feature-card-shell {
	width: 100%;
	padding: 0;
	margin: 0 0 10px;
	background: transparent !important;
}

@media (min-width: 768px) {
	section.hora-feature-cards .hora-feature-card-shell {
		margin-bottom: 16px;
	}
}

section.hora-feature-cards .hora-app-feature-card {
	width: 100%;
	min-height: 100%;
	margin-bottom: 0 !important;
	border-radius: 18px;
	border: 1px solid var(--hora-fcard-border) !important;
	background: var(--hora-fcard-bg) !important;
	box-shadow: var(--hora-card-elevation);
	/* backdrop-filter + radius can flatten composited box-shadow on some GPUs */
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	overflow: visible !important;
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

body[data-theme="light"] section.hora-feature-cards .hora-app-feature-card {
	background: rgba(255, 255, 255, 0.88) !important;
}

section.hora-feature-cards .hora-app-feature-card:hover {
	transform: translateY(var(--hora-fcard-hover-y));
	box-shadow: var(--hora-card-elevation-hover);
}

section.hora-feature-cards .hora-app-feature-card__icon-well {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: auto;
	min-width: 0;
	min-height: 0;
	padding: 0 !important;
	margin-bottom: 1.15rem !important;
	border-radius: 0;
	background: transparent !important;
	box-shadow: none !important;
}

section.hora-feature-cards .hora-feature-lucide {
	width: 24px;
	height: 24px;
	stroke: currentColor;
	stroke-width: 2.2;
	fill: none !important;
	color: #0f172a;
}

body[data-theme="dark"] section.hora-feature-cards .hora-feature-lucide {
	color: #fff;
}

/* Theme.css sets .iconbox-icon-container > svg { fill: currentColor; }.
   Force Lucide back to stroke-only so icons don't render as filled blobs. */
section.hora-feature-cards .iconbox-icon-container > svg.hora-feature-lucide,
section.hora-feature-cards .iconbox-icon-container > svg.hora-feature-lucide * {
	fill: none !important;
	stroke: currentColor !important;
}

section.hora-feature-cards .hora-app-feature-card .contents p {
	line-height: 1.5;
}

/* Pricing card: match feature-card shell (shape + outline + halo). overflow:visible so glow isn’t clipped */
#pricing .lqd-pt {
	border-radius: 18px;
	border: 1px solid var(--hora-card-outline) !important;
	box-shadow: var(--hora-card-elevation) !important;
	background: rgba(255, 255, 255, 0.88) !important;
	overflow: visible;
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

body[data-theme="dark"] #pricing .lqd-pt {
	background: var(--hora-panel) !important;
}

#pricing .lqd-pt:hover {
	transform: translateY(-3px);
	box-shadow: var(--hora-card-elevation-hover) !important;
}

/* Follow us — sits on page background (no card chrome) */
.hora-follow {
	padding-top: 12px;
	padding-bottom: 72px;
}

.hora-follow__stack {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	margin: 0 auto;
	padding: 0;
}

.hora-follow__label {
	margin: 0;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--hora-subtle);
}

.hora-follow__list {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.hora-follow__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	color: var(--hora-subtle);
	background: transparent;
	border: none;
	box-shadow: none;
	transition: transform 0.2s ease, color 0.2s ease;
}

.hora-follow__btn:hover {
	transform: scale(1.08);
	color: var(--hora-text);
}

.hora-follow__btn:focus-visible {
	outline: 2px solid var(--hora-card-outline);
	outline-offset: 3px;
}

.hora-follow__icon {
	display: block;
	flex-shrink: 0;
}

/* ─── Home (index): entrances — CSS hero fade + slight twist + scroll fades ─── */
@keyframes hora-hero-fade-in {
	from {
		opacity: 0;
		/* perspective + rotateY = subtle swing around vertical axis; translateY = lift */
		transform: perspective(960px) translateY(12px) rotateY(10deg);
	}
	to {
		opacity: 1;
		transform: perspective(960px) translateY(0) rotateY(0deg);
	}
}

/* Scope + specificity so Liquid/theme utilities cannot zero out the hero animation */
#banner.banner .hora-enter {
	animation-name: hora-hero-fade-in;
	animation-duration: 0.85s;
	animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
	animation-fill-mode: both;
	transform-origin: center center;
}

#banner.banner .hora-enter--d0 {
	animation-delay: 0.06s;
}

#banner.banner .hora-enter--d1 {
	animation-delay: 0.14s;
}

#banner.banner .hora-enter--d2 {
	animation-delay: 0.22s;
}

#banner.banner .hora-enter--d3 {
	animation-delay: 0.3s;
}

.hora-enter-scroll {
	opacity: 0;
	transform: translateY(18px);
	transition:
		opacity 0.52s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.52s cubic-bezier(0.22, 1, 0.36, 1);
}

.hora-enter-scroll.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.hora-stagger-1 {
	transition-delay: 0.04s;
}

.hora-stagger-2 {
	transition-delay: 0.08s;
}

.hora-stagger-3 {
	transition-delay: 0.12s;
}

.hora-stagger-4 {
	transition-delay: 0.16s;
}

.hora-stagger-5 {
	transition-delay: 0.2s;
}

.hora-stagger-6 {
	transition-delay: 0.24s;
}

.hora-stagger-7 {
	transition-delay: 0.28s;
}

.hora-stagger-8 {
	transition-delay: 0.32s;
}

.hora-stagger-9 {
	transition-delay: 0.36s;
}

@media (prefers-reduced-motion: reduce) {
	#banner.banner .hora-enter {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}

	figure.hora-mockup img.hora-hero-device {
		transform: none !important;
	}

	#banner.banner figure.hora-mockup:has(> img.hora-hero-device) {
		transform: none !important;
	}

	.hora-enter-scroll {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}

	.hora-stagger-1,
	.hora-stagger-2,
	.hora-stagger-3,
	.hora-stagger-4,
	.hora-stagger-5,
	.hora-stagger-6,
	.hora-stagger-7,
	.hora-stagger-8,
	.hora-stagger-9 {
		transition-delay: 0s !important;
	}
}