/* ==========================================================================
   Custom Fonts
   ========================================================================== */
@font-face {
	font-family: 'Simpler';
	src:
		url('/website/fonts/simpler-regular-webfont.woff2')
			format('woff2'),
		url('/website/fonts/simpler-regular-webfont.woff')
			format('woff');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Simpler';
	src:
		url('/website/fonts/simpler-bold-webfont.woff2')
			format('woff2'),
		url('/website/fonts/simpler-bold-webfont.woff')
			format('woff');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* Inter — self-hosted (Latin subset) so it loads same-origin through the CDN
   instead of render-blocking from Google Fonts. Served by /website/fonts/*. */
@font-face {
	font-family: 'Inter';
	src: url('/website/fonts/inter-latin-400-normal.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Inter';
	src: url('/website/fonts/inter-latin-500-normal.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Inter';
	src: url('/website/fonts/inter-latin-600-normal.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Inter';
	src: url('/website/fonts/inter-latin-700-normal.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* ==========================================================================
   CSS Variables - Design Tokens (matching website)
   ========================================================================== */
:root {
	/* Fonts */
	--blog-font-heading: 'Simpler', 'Inter', system-ui, sans-serif;
	--blog-font-body: 'Inter', system-ui, -apple-system, sans-serif;

	/* Primary Colors */
	--blog-primary: #5d32d0;
	--blog-primary-hover: #4a28a8;
	--blog-gradient: linear-gradient(to right, #ad06ff 0%, #294eb1 100%);
	--blog-cta-green: #10b981;

	/* Dark Theme (header/footer) */
	--blog-dark-bg: #18181b;
	--blog-dark-bg-gradient: linear-gradient(
		180deg,
		rgba(24, 24, 27, 1) 0%,
		rgba(0, 0, 0, 1) 100%
	);
	--blog-dark-text: #ffffff;
	--blog-dark-text-muted: rgba(255, 255, 255, 0.7);
	--blog-dark-text-faded: rgba(255, 255, 255, 0.5);
	--blog-dark-border: rgba(255, 255, 255, 0.1);

	/* Light Theme (content) */
	--blog-text-primary: #111827;
	--blog-text-body: #4b5563;
	--blog-text-secondary: #6b7280;

	/* Background Colors */
	--blog-bg-page: #f3f4f6;
	--blog-bg-surface: #ffffff;
	--blog-bg-secondary: rgba(0, 0, 0, 0.03);

	/* Borders */
	--blog-border: #e5e7eb;

	/* Border Radius */
	--blog-radius-sm: 6px;
	--blog-radius-md: 1.5rem;
	--blog-radius-pill: 50px;

	/* Shadows (matching website AppCard) */
	--blog-shadow-card: 0 4px 24px rgba(0, 0, 0, 0.08);
	--blog-shadow-card-hover: 0 8px 40px rgba(0, 0, 0, 0.15);

	/* Layout */
	--blog-max-width: 1200px;
	--blog-content-width: 800px;
}

/* ==========================================================================
   Base Styles
   ========================================================================== */
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	font-family: var(--blog-font-body);
	font-size: 15px;
	line-height: 1.6;
	color: var(--blog-text-body);
	/* background-color: var(--blog-dark-bg); */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

body.rtl {
	direction: rtl;
	text-align: right;
}

body.ltr {
	direction: ltr;
	text-align: left;
}

a {
	color: var(--blog-primary);
	text-decoration: none;
	transition: color 0.2s ease;
}

a:hover {
	color: var(--blog-primary-hover);
}

/* ==========================================================================
   Print Styles
   ========================================================================== */
@media print {
	body {
		background: white;
	}
}

/* ==========================================================================
   Header & Navbar (matching website)
   ========================================================================== */
.BlogHeader {
	background: transparent;
	position: sticky;
	top: 14px;
	z-index: 100;
	margin: 18px;
}

.BlogNavbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-direction: row;
	max-width: var(--blog-max-width);
	margin: 0 auto;
	background: #18181bd4;
	padding: 10px 18px;
	border-radius: var(--blog-radius-pill);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.Logo {
	display: flex;
	align-items: center;
	width: 140px;
}

.Logo svg {
	width: 140px;
	height: auto;
}

/* Hamburger menu (hidden on desktop) */
.Hamburger {
	display: none;
	background: none;
	border: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 32px;
	height: 32px;
	cursor: pointer;
	z-index: 200;
}

.HamburgerBar {
	display: block;
	width: 24px;
	height: 3px;
	background: #fff;
	margin: 3px 0;
	border-radius: 2px;
	transition: all 0.3s;
}

.NavLinks {
	display: flex;
	gap: 2rem;
	list-style: none;
	margin: 0;
	padding: 0;
	font-family: 'Simpler', sans-serif;
}

.NavLinks a {
	color: var(--blog-dark-text);
	text-decoration: none;
	font-family: 'Simpler', sans-serif;
	font-weight: 700;
	font-size: 1em;
	transition: color 0.2s;
}

.NavLinks a:hover {
	color: #a5b4fc;
}

.NavActive {
	color: #a5b4fc !important;
}

.CtaWrapper {
	display: block;
}

.CtaWrapper .CtaButton {
	background: var(--blog-cta-green);
	color: var(--blog-dark-text);
	padding: 10px 18px;
	border-radius: var(--blog-radius-pill);
	font-family: 'Simpler', sans-serif;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.1em;
	line-height: 1;
	text-decoration: none;
	transition: 0.3s all;
	border: 1px solid #000;
}

.CtaWrapper .CtaButton:hover {
	background: #0ea572;
	color: var(--blog-dark-text);
}

/* ==========================================================================
   RTL Support
   ========================================================================== */

/* ==========================================================================
   Responsive Design
   ========================================================================== */
/* Mobile navbar (matching website at 600px breakpoint) */
@media (max-width: 600px) {
	.BlogHeader {
		margin: 8px;
	}

	.BlogNavbar {
		align-items: flex-end;
		padding: 0.5rem 1rem;
	}

	.Hamburger {
		display: flex;
	}

	.NavLinks {
		display: none;
		flex-direction: column-reverse;
		align-items: flex-start;
		gap: 1.9rem;
		font-size: 0.95rem;
		background: #18181b;
		position: absolute;
		top: 56px;
		right: 0;
		width: 100vw;
		padding: 1rem 2rem 1rem 1rem;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
		z-index: 150;
	}

	.NavLinksOpen {
		display: flex !important;
	}

	.TryNowMobile {
		display: block;
		background: var(--blog-cta-green);
		color: #fff !important;
		padding: 10px 18px;
		border-radius: var(--blog-radius-pill);
		font-weight: 700;
		text-align: center;
		text-decoration: none;
	}

	.WhatsappMobile {
		display: block;
		color: #25d366 !important;
		text-decoration: none;
		font-weight: 600;
	}

	.CtaWrapper {
		display: none;
	}
}

/* Hide mobile-only links on desktop */
.TryNowMobile,
.WhatsappMobile {
	display: none;
}

/* ==========================================================================
   Website-mode navbar overrides
   ========================================================================== */
.BlogHeader.WebsiteMode {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	margin: 18px;
}

.BlogHeader.WebsiteMode .BlogNavbar {
	max-width: 1080px;
}

@media (max-width: 600px) {
	.WebsiteMode .NavLinks {
		/* Override blog's display:none with animated menu */
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		background: linear-gradient(
			135deg,
			rgba(24, 24, 27, 0.98) 0%,
			rgba(32, 32, 38, 0.98) 100%
		);
		backdrop-filter: blur(20px);
		-webkit-backdrop-filter: blur(20px);
		top: 66px;
		right: 10px;
		left: 10px;
		width: auto;
		padding: 0;
		border-radius: 24px;
		border: 1px solid rgba(255, 255, 255, 0.1);
		box-shadow:
			0 8px 32px rgba(0, 0, 0, 0.4),
			inset 0 1px 0 rgba(255, 255, 255, 0.05);
		max-height: 0;
		opacity: 0;
		transform: translateY(-20px) scale(0.95);
		transition:
			max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
			opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
			transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
		overflow: hidden;
		pointer-events: none;
	}

	.WebsiteMode .NavLinksOpen {
		max-height: 600px !important;
		opacity: 1 !important;
		transform: translateY(0) scale(1) !important;
		pointer-events: auto !important;
		flex-direction: column-reverse !important;
	}

	.WebsiteMode .TryNowMobile,
	.WebsiteMode .WhatsappMobile {
		padding: 16px 20px;
		border-bottom: 1px solid rgba(255, 255, 255, 0.08);
		margin: 0;
		border-radius: 0;
	}
	.WebsiteMode .TryNowMobile {
		padding-top: 20px;
	}
	.WebsiteMode .WhatsappMobile {
		display: flex;
		justify-content: stretch;
	}

	.WebsiteMode .NavLinks > a:not(.TryNowMobile):not(.WhatsappMobile) {
		display: block;
		padding: 16px 20px;
		color: #e5e5e5;
		font-size: 15px;
		font-weight: 500;
		border-bottom: 1px solid rgba(255, 255, 255, 0.05);
		transition: all 0.2s ease;
	}
	.WebsiteMode
		.NavLinks
		> a:not(.TryNowMobile):not(.WhatsappMobile):last-child {
		border-bottom: none;
	}
	.WebsiteMode .NavLinks > a:not(.TryNowMobile):not(.WhatsappMobile):hover {
		background: rgba(255, 255, 255, 0.03);
		color: #10b981;
		padding-left: 26px;
	}

	.WebsiteMode .BlogNavbar {
		margin: 10px;
	}

	.WebsiteMode .CtaWrapper {
		display: none;
	}
}

/* ==========================================================================
   Print
   ========================================================================== */
@media print {
	.BlogHeader {
		display: none;
	}
}

/* ==========================================================================
   WebsitePage — SSR landing page styles
   Replicates the SPA CSS with identical class names where possible.
   ========================================================================== */

/* --- Page wrapper --- */
.WebsitePage {
	padding: 0;
	display: flex;
	flex-direction: column;
	left: 0;
	right: 0;
	margin: auto;
	position: relative;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	overflow-x: hidden;
	width: 100%;
	max-width: 100vw;
	background-color: #fff;
}

/* --- WebsiteSection base --- */
.WebsiteSection {
	width: 100%;
	padding: 80px;
	font-size: 18px;
}

.WebsiteSection h1 {
	line-height: 1.2;
	text-align: center;
}

/* ==========================================================================
   HERO
   ========================================================================== */
.Hero {
	height: 100dvh;
	padding-top: 120px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.Hero header {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1.5em;
}

.Hero header h1 {
	font-size: 2.4em;
	font-weight: bold;
	font-family: 'Simpler', sans-serif;
	letter-spacing: 0.07em;
	color: #000;
}

.ProductHuntBadge {
	display: flex;
	flex-direction: row;
	justify-content: center;
	margin-top: 45px;
}

.ProductHuntBadge img {
	width: 250px;
	height: 54px;
}

/* --- NewAgentPrompt --- */
.NewAgentPrompt {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 800px;
	padding: 12px;
	border-radius: 34px;
	margin: 0 auto;
	width: 100%;
}

.PromptTitle {
	color: #000;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	font-weight: normal;
	font-size: 16px;
	text-align: center;
	margin-bottom: 1em;
}

.Prompt {
	height: 200px;
	background-color: white;
	border-radius: 25px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	position: relative;
	overflow: hidden;
	font-size: 18px;
}

.EditContainer {
	width: 100%;
	height: 100%;
	min-height: inherit;
}

.EditTextarea {
	width: 100%;
	height: 100%;
	min-height: inherit;
	font-size: 1em;
	border: none;
	border-radius: 6px;
	font-family: inherit;
	line-height: 1.5;
	resize: horizontal;
	outline: none;
	background-color: transparent;
	overflow: auto;
	padding: 1.5em;
	box-sizing: border-box;
}

.EditTextarea::placeholder {
	color: rgba(0, 0, 0, 0.35);
}

.SendIcon {
	position: absolute;
	bottom: 12px;
	inset-inline-end: 12px;
	width: 2.4em;
	height: 2.4em;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	cursor: pointer;
	background: #000;
	border: none;
	transition: all 0.2s ease;
}

.SendIcon:global(.Disabled) {
	opacity: 0.4;
	cursor: default;
	pointer-events: none;
}

.SendIcon svg {
	width: 1.9em;
	height: 1.9em;
}

.SendIcon:hover {
	transform: scale(1.05);
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* --- Prompt examples --- */
.PromptExamples {
	display: flex;
	flex-direction: row;
	gap: 10px;
	flex-wrap: wrap;
	width: 100%;
}

.PromptExample {
	background-color: rgba(255, 255, 255, 0.52);
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 0.6em;
	padding: 0.6em;
	border-radius: 8px;
	min-width: 0;
	max-width: 100%;
	flex: 1 1 calc((100% - 20px) / 3);
	transition: background-color 0.3s ease;
	font-size: 16px;
	margin-top: 10px;
}

.PromptExample:hover {
	background-color: rgba(255, 255, 255, 1);
}

.PromptExample svg {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

.PromptExampleText {
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	font-size: 0.7em;
	flex: 1;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: #000;
}

/* ==========================================================================
   FEATURES
   ========================================================================== */
.Features {
	padding: 40px;
	max-width: 1080px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 130px;
}

/* --- CardWithVisual --- */
.CardWithVisual {
	display: flex;
	flex-direction: row;
	justify-content: center;
	width: fit-content;
}

.Card {
	display: flex;
	flex-direction: column;
	border-radius: 40px;
	padding: 80px;
	position: relative;
	background-color: #f4f4f4;
}

.CardContent {
	position: relative;
	z-index: 1;
	height: 100%;
	overflow: auto;
}

.VisualCard {
	z-index: 2;
	flex-shrink: 0;
}

.VisualCard > div {
	overflow: hidden;
}

.VisualContent {
	width: 520px;
	max-width: 50%;
	overflow: hidden;
	padding: 0;
	min-width: 320px;
}

.VisualContent img {
	position: relative;
}

.ContentCard {
	width: auto;
	min-width: 400px;
	z-index: 1;
	position: relative;
	margin-inline-start: -80px;
}

.ContentCard .CardContent {
	padding-inline-start: 80px;
}

.ContentCardReversed {
	margin-inline-start: 0;
	margin-inline-end: -80px;
}

.ContentCardReversed .CardContent {
	padding-inline-start: 0;
	padding-inline-end: 80px;
}

.FeatureCardContent {
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	display: flex;
	flex-direction: column;
	gap: 36px;
}

.FeatureCardContent h2 {
	font-size: 30px;
	line-height: 36px;
	font-family: 'Simpler', sans-serif;
	color: #000;
	letter-spacing: 0.03em;
}

.FeatureCardContent p {
	font-size: 15px;
	line-height: 24px;
}

/* Gradient overlay (matching gradients.css .Gradient) */
.Card.VisualCard::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(255, 255, 255, 0.708);
	pointer-events: none;
	border-radius: 40px;
}

/* ==========================================================================
   APPS
   ========================================================================== */
.Apps {
	padding: 6rem 2rem;
	width: 100%;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
}

.AppsHeader {
	max-width: 1280px;
	margin: 0 auto 4rem;
	text-align: center;
}

.AppsTitle {
	font-size: 56px;
	font-weight: 700;
	color: white;
	margin-bottom: 1rem;
	line-height: 1.2;
	font-family: var(--blog-font-heading);
}

.AppsSubtitle {
	font-size: 22px;
	color: rgba(255, 255, 255, 0.8);
	line-height: 1.6;
	max-width: 680px;
	margin: 0 auto;
}

.AppsGrid {
	max-width: 1280px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2.5rem;
}

.AppCard {
	background: rgba(255, 255, 255, 0.97);
	border-radius: 1.5rem;
	padding: 2.5rem;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1rem;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
	transition:
		box-shadow 0.2s ease,
		transform 0.2s ease;
}

.AppCard:hover {
	box-shadow: 0 8px 40px rgba(0, 0, 0, 0.3);
	transform: translateY(-2px);
}

.AppLogo {
	width: 72px;
	height: 72px;
	object-fit: contain;
	border-radius: 0.75rem;
}

.AppName {
	font-size: 1.5rem;
	font-weight: 700;
	color: #111827;
}

.AppDescription {
	font-size: 1.1rem;
	color: #4b5563;
	line-height: 1.6;
	flex: 1;
	margin: 0;
}

.InstallButton {
	display: inline-block;
	margin-top: 0.5rem;
	background: #4f46e5;
	color: #fff;
	font-size: 1.05rem;
	font-weight: 600;
	padding: 0.75rem 1.75rem;
	border-radius: 999px;
	text-decoration: none;
	transition:
		background 0.25s,
		color 0.25s,
		box-shadow 0.25s;
	border: 2px solid #4f46e5;
}

.InstallButton:hover {
	background: transparent;
	color: #4f46e5;
}

.ComingSoonCard {
	background: rgba(255, 255, 255, 0.08);
	border: 2px dashed rgba(255, 255, 255, 0.25);
	border-radius: 1.5rem;
	padding: 2rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ComingSoonText {
	font-size: 1.1rem;
	color: rgba(255, 255, 255, 0.5);
	font-style: italic;
	text-align: center;
	margin: 0;
}

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */
.Testimonials {
	background-color: #f8fafc;
	width: 100%;
}

.TestimonialsInner {
	padding: 6rem 2rem;
}

.TestimonialsHeader {
	text-align: center;
	margin-bottom: 3rem;
}

.TestimonialsTitle {
	font-size: 2.8rem;
	font-weight: 900;
	margin-bottom: 1rem;
	color: #18181b;
	letter-spacing: -1px;
	line-height: 1.2;
	font-family: var(--blog-font-heading);
}

.TestimonialsSubtitle {
	font-size: 1.1rem;
	color: #6b7280;
	max-width: 600px;
	margin: 0 auto;
	line-height: 1.6;
}

.TestimonialsGrid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2rem;
	max-width: 1100px;
	margin: 0 auto;
}

.TestimonialCard {
	background-color: #ffffff;
	border-radius: 1.5rem;
	padding: 1.25rem 1.5rem;
	box-shadow:
		0 1px 3px rgba(0, 0, 0, 0.08),
		0 4px 16px rgba(0, 0, 0, 0.06);
	border: 1px solid #e5e7eb;
	display: flex;
	flex-direction: column;
}

.TestimonialQuote {
	font-size: 3rem;
	color: #111827;
	line-height: 1;
	margin-bottom: 0.5rem;
	font-family: Georgia, serif;
	font-weight: 700;
}

.TestimonialMessage {
	font-size: 1rem;
	color: #374151;
	line-height: 1.7;
	flex: 1;
	margin: 0 0 1.25rem 0;
}

.Stars {
	display: flex;
	align-items: center;
	gap: 2px;
	margin-bottom: 1.25rem;
}

.StarIcon {
	width: 18px;
	height: 18px;
}

.Author {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: auto;
}

.Avatar {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	flex-shrink: 0;
}

.AuthorInfo {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.AuthorName {
	font-weight: 700;
	font-size: 0.95rem;
	color: #111827;
}

.AuthorRole {
	font-size: 0.85rem;
	color: #6b7280;
}

.TestimonialsCta {
	margin-top: 4rem;
	text-align: center;
	display: flex;
	justify-content: center;
}

/* ==========================================================================
   PRICING
   ========================================================================== */
.Pricing {
	padding: 6rem 2rem;
	width: 100%;
	min-height: 600px;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.PricingContainer {
	max-width: 1400px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 4rem;
}

.PricingLeft {
	flex: 0 0 400px;
	color: white;
}

.PricingTitle {
	font-size: 48px;
	font-weight: 700;
	margin-bottom: 1.5rem;
	color: white;
	line-height: 1.2;
	font-family: var(--blog-font-heading);
}

.PricingSubtitle {
	font-size: 20px;
	font-weight: normal;
	line-height: 1.6;
	color: white;
	opacity: 0.9;
}

.PricingCards {
	flex: 1;
	display: flex;
	gap: 2rem;
	justify-content: center;
}

.PricingCard {
	background: white;
	border-radius: 1.5rem;
	overflow: hidden;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
	flex: 1;
	max-width: 380px;
	min-width: 320px;
	display: flex;
	flex-direction: column;
}

.CardHeaderGray {
	background: white;
	padding: 2rem 2rem 1.5rem 2rem;
	color: #111827;
	border-top: 20px solid #979797;
	border-top-left-radius: 1.5rem;
	border-top-right-radius: 1.5rem;
}

.CardHeaderGreen {
	background: white;
	padding: 2rem 2rem 1.5rem 2rem;
	color: #111827;
	border-top: 20px solid #10b981;
	border-top-left-radius: 1.5rem;
	border-top-right-radius: 1.5rem;
}

.PricingCardTitle {
	font-size: 1.5rem;
	font-weight: 600;
	margin-bottom: 0.5rem;
}

.PricingCardSubtitle {
	font-size: 1rem;
	opacity: 0.95;
}

.SubBadges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-top: 0.6rem;
	justify-content: center;
}

.SubBadge {
	font-size: 0.78rem;
	color: #4b5563;
	background: #f3f4f6;
	padding: 0.25rem 0.65rem;
	border-radius: 1rem;
	font-weight: 500;
}

.PriceSection {
	display: flex;
	align-items: baseline;
	gap: 0.25rem;
	margin-top: 0.75rem;
}

.Price {
	font-size: 3rem;
	font-weight: 700;
}

.PriceUnit {
	font-size: 1.25rem;
	font-weight: 500;
}

.UsagePrice {
	font-size: 1rem;
	color: #374151;
	margin-top: 0.5rem;
}

.PricingCardBody {
	padding: 2rem;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 1.5rem;
	min-height: 335px;
	flex: 1;
}

.Badge {
	background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
	color: #065f46;
	padding: 0.75rem 1.25rem;
	border-radius: 0.75rem;
	font-weight: 600;
	font-size: 1rem;
	text-align: center;
	align-self: flex-start;
	width: 100%;
	margin-bottom: 1.5rem;
}

.FeatureList {
	list-style: none;
	padding: 0;
	margin: 0;
}

.CheckmarkItem {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-bottom: 16px;
	padding: 2px;
}

.CheckmarkItem span {
	line-height: 1.5;
}

.Checkmark {
	flex-shrink: 0;
}

.FeatureWithIcons {
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 16px;
}

.FeatureWithIcons .CheckmarkItem {
	flex: 1;
	min-width: 0;
	margin-bottom: 0;
}

.IconRow {
	display: flex;
	gap: 6px;
	align-items: center;
	flex-shrink: 0;
}

.IconRow svg {
	width: 18px;
	height: 18px;
}

.AppsIcons img {
	width: 35px;
	height: 35px;
}

.IntegrationIcon {
	width: 18px;
	height: 18px;
	object-fit: contain;
}

.ConversationNote {
	color: #6b7280;
	font-size: 0.85rem;
	line-height: 1.5;
	margin-top: 1rem;
}

.ButtonWrapper {
	display: flex;
	justify-content: flex-start;
	margin-top: auto;
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.FAQ {
	padding: 5rem 2rem;
	background: #f9fafb;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.FAQContainer {
	max-width: 800px;
	margin: 0 auto;
}

.FAQTitle {
	font-size: 2.4rem;
	font-weight: 700;
	text-align: center;
	margin-bottom: 3rem;
	color: #111827;
	font-family: var(--blog-font-heading);
}

.FAQList {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.FAQItem {
	background: #fff;
	border-radius: 1rem;
	padding: 1.5rem 2rem;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
	border: 1px solid #e5e7eb;
}

.FAQQuestion {
	font-size: 1.1rem;
	font-weight: 600;
	color: #111827;
	margin: 0 0 0.5rem 0;
	line-height: 1.4;
}

.FAQAnswer {
	font-size: 1rem;
	color: #4b5563;
	line-height: 1.7;
	margin: 0;
}

@media (max-width: 768px) {
	.FAQ {
		padding: 3rem 1.5rem;
	}

	.FAQTitle {
		font-size: 1.8rem;
		margin-bottom: 2rem;
	}

	.FAQItem {
		padding: 1.25rem 1.5rem;
	}

	.FAQQuestion {
		font-size: 1rem;
	}

	.FAQAnswer {
		font-size: 0.9rem;
	}
}

/* ==========================================================================
   CTA BUTTON
   ========================================================================== */
.CtaWrap {
	display: flex;
	max-width: 150px;
	flex-direction: column;
	min-width: 150px;
}

.CtaButton {
	display: flex;
	justify-content: center;
	align-items: center;
	background: #000;
	color: #fff;
	font-family: 'Simpler', sans-serif;
	font-size: 14px;
	font-weight: 700;
	padding: 0.9em 1.5em 0.7em;
	border-radius: 3em;
	letter-spacing: 0.1em;
	line-height: 1;
	text-decoration: none;
	text-align: center;
	transition: 0.3s all;
	border: 1px solid #000;
	outline: none;
	cursor: pointer;
}

.CtaButton:hover {
	background: transparent;
	color: #000;
}

.CtaDark .CtaSubtext {
	color: #000;
}

.CtaSubtext {
	margin-top: 0.5rem;
	font-size: 11px;
	letter-spacing: 0.01em;
	text-align: center;
	color: #000;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 768px) {
	.WebsiteSection {
		font-size: 12px;
		padding: 20px;
	}

	.Hero header h1 {
		text-align: center;
	}

	.NewAgentPrompt {
		padding: 10px;
	}

	.PromptExamples {
		flex-direction: column;
	}

	.PromptExample {
		flex: 0 0 auto;
		width: 100%;
	}

	.PromptExampleText {
		white-space: normal;
		overflow: visible;
		text-overflow: clip;
		line-height: 1.4;
	}

	/* Features */
	.Features {
		padding: 20px;
		gap: 60px;
	}

	.CardWithVisual {
		flex-direction: column !important;
		width: 100%;
		border-radius: 20px;
		overflow: hidden;
	}

	.Card {
		padding: 20px;
		border-radius: 20px;
	}

	.Card.VisualCard::before {
		border-radius: 20px;
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
	}

	.VisualContent {
		width: 100%;
		max-width: 100%;
		min-width: unset;
		height: 200px;
		max-height: 200px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.VisualContent img {
		position: static !important;
		width: auto !important;
		height: 100% !important;
		max-width: 100%;
		max-height: 200px;
		object-fit: contain;
		left: auto !important;
		right: auto !important;
		top: auto !important;
		bottom: auto !important;
	}

	.ContentCard,
	.ContentCardReversed,
	.ContentCard .CardContent,
	.ContentCardReversed .CardContent {
		width: 100%;
		min-width: unset;
		margin-inline-start: 0;
		margin-inline-end: 0;
		padding-inline-start: 0;
		padding-inline-end: 0;
		padding: 24px 12px;
	}

	.ContentCard {
		margin-block-start: -16px;
	}

	.FeatureCardContent {
		gap: 20px;
	}

	.FeatureCardContent h2 {
		font-size: 22px;
		line-height: 28px;
	}

	.FeatureCardContent p {
		font-size: 13px;
		line-height: 17px;
	}

	/* Testimonials */
	.TestimonialsInner {
		padding: 4rem 1rem;
	}

	.TestimonialsTitle {
		font-size: 2rem;
	}

	.TestimonialsSubtitle {
		font-size: 1rem;
	}

	.TestimonialsGrid {
		grid-template-columns: 1fr;
	}

	/* Pricing */
	.Pricing {
		padding: 4rem 1.5rem;
	}

	.PricingTitle {
		font-size: 2.5rem;
	}

	.PricingSubtitle {
		font-size: 1.1rem;
	}

	.PricingCards {
		flex-direction: column;
		align-items: center;
	}

	.PricingCard {
		max-width: 400px;
		width: 100%;
	}
}

@media (max-width: 1200px) {
	.PricingContainer {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.PricingLeft {
		flex: unset;
		max-width: 600px;
	}

	.PricingCards {
		padding: 0 30px;
		width: 100%;
		max-width: 800px;
	}
}

@media (max-width: 900px) {
	.AppsGrid {
		grid-template-columns: repeat(2, 1fr);
	}

	.ComingSoonCard {
		grid-column: span 2;
	}
}

@media (max-width: 600px) {
	.Apps {
		padding: 4rem 1.5rem;
	}

	.AppsTitle {
		font-size: 2rem;
	}

	.AppsSubtitle {
		font-size: 1rem;
	}

	.AppsGrid {
		grid-template-columns: 1fr;
	}

	.ComingSoonCard {
		grid-column: span 1;
	}
}

/* ==========================================================================
   Pricing page — net-new styles.
   Reuses the global design system from website-home.css (tokens, .wrap,
   .eyebrow, .h-section, .display, .lead, .btn*, .pill, .reveal, .reassure,
   .price-grid, .price-card, .honest-note, .faq-grid, details.faq,
   .final-cta, .section-pad, .soft-section). Only pricing-specific
   components live here, scoped under .PricingRedesign so nothing leaks.
   ========================================================================== */

/* ===== hero ===== */
.PricingRedesign .pr-hero {
	padding: clamp(56px, 8vh, 100px) 0 clamp(28px, 4vh, 44px);
	text-align: center;
	background:
		radial-gradient(54% 60% at 50% 0%, rgba(173, 6, 255, 0.08), transparent 62%),
		radial-gradient(40% 50% at 90% 20%, rgba(41, 78, 177, 0.06), transparent 60%);
}
.PricingRedesign .pr-hero .eyebrow {
	font-size: 16px;
	margin-bottom: 22px;
}
.PricingRedesign .pr-hero-title {
	font-size: clamp(38px, 5vw, 64px);
}
.PricingRedesign .pr-hero-lead {
	max-width: 560px;
	margin: 22px auto 0;
}

/* ===== plans ===== */
.PricingRedesign .pr-plans {
	padding-top: 36px;
}

/* ===== usage explainer ===== */
.PricingRedesign .pr-usage {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin-top: 48px;
}
.PricingRedesign .ucard {
	background: #fff;
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
	padding: 30px 28px;
	transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.PricingRedesign .ucard:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-card);
}
.PricingRedesign .ucard .fic {
	width: 46px;
	height: 46px;
	border-radius: 12px;
	background: var(--primary-light);
	color: var(--primary);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 18px;
}
.PricingRedesign .ucard h3 {
	font-size: 18px;
	font-weight: 700;
	margin: 0 0 9px;
	letter-spacing: -0.01em;
	color: var(--fg-1);
}
.PricingRedesign .ucard p {
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--fg-2);
	margin: 0;
}

/* ===== comparison table ===== */
.PricingRedesign .pr-cmp {
	max-width: 900px;
	margin: 44px auto 0;
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
	overflow: hidden;
	background: #fff;
}
.PricingRedesign .pr-cmp table {
	width: 100%;
	border-collapse: collapse;
}
.PricingRedesign .pr-cmp th,
.PricingRedesign .pr-cmp td {
	text-align: start;
	padding: 16px 24px;
	font-size: 15px;
	border-bottom: 1px solid var(--border-soft);
}
.PricingRedesign .pr-cmp thead th {
	background: #fbfbfd;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--fg-3);
}
.PricingRedesign .pr-cmp thead th:not(:first-child),
.PricingRedesign .pr-cmp td:not(:first-child) {
	text-align: center;
	width: 150px;
}
.PricingRedesign .pr-cmp tbody tr:last-child td {
	border-bottom: none;
}
.PricingRedesign .pr-cmp .grp td {
	background: var(--bg-soft);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--fg-3);
	padding: 12px 24px;
}
.PricingRedesign .pr-cmp .ft {
	font-weight: 700;
	color: var(--fg-1);
}
.PricingRedesign .pr-cmp .yes,
.PricingRedesign .pr-cmp .no {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.PricingRedesign .pr-cmp .yes {
	color: var(--success);
}
.PricingRedesign .pr-cmp .no {
	color: var(--fg-4);
}
.PricingRedesign .pr-cmp .val {
	font-weight: 700;
	color: var(--fg-1);
}
.PricingRedesign .pr-cmp thead .feat-col {
	color: var(--primary);
}

/* ===== responsive ===== */
@media (max-width: 920px) {
	.PricingRedesign .pr-usage {
		grid-template-columns: 1fr;
	}
	.PricingRedesign .pr-cmp {
		overflow-x: auto;
	}
}

/* ===== RTL ===== */
.PricingRedesign[dir='rtl'] .eyebrow {
	letter-spacing: 0;
}
.PricingRedesign[dir='rtl'] .h-section,
.PricingRedesign[dir='rtl'] .display {
	letter-spacing: -0.01em;
}
.PricingRedesign[dir='rtl'] .pr-cmp thead th {
	letter-spacing: 0;
}

/* ==========================================================================
   Shared CTA Button Styles
   ========================================================================== */
.SharedCtaWrap {
	display: flex;
	max-width: 150px;
	flex-direction: column;
	min-width: 150px;
}

.SharedCtaButton {
	display: flex;
	justify-content: center;
	align-items: center;
	background: #000;
	color: #fff;
	font-family: 'Simpler', sans-serif;
	font-size: 14px;
	font-weight: 700;
	padding: 0.9em 1.5em 0.7em;
	border-radius: 3em;
	letter-spacing: 0.1em;
	line-height: 1;
	text-decoration: none;
	text-align: center;
	transition: 0.3s all;
	border: 1px solid #000;
	outline: none;
	cursor: pointer;
}

.SharedCtaButton:hover {
	background: transparent;
	color: #000;
}

.SharedCtaDark .SharedCtaSubtext {
	color: #000;
}

.SharedCtaSubtext {
	margin-top: 0.5rem;
	font-size: 11px;
	letter-spacing: 0.01em;
	text-align: center;
	color: #000;
}

/* ==========================================================================
   Shared Checkmark
   ========================================================================== */
.SharedCheckmark {
	flex-shrink: 0;
}

/* ==========================================================================
   Shared CheckmarkItem
   ========================================================================== */
.SharedCheckmarkItem {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-bottom: 16px;
	padding: 2px;
}

.SharedCheckmarkItem span {
	line-height: 1.5;
}

/* ==========================================================================
   Shared FAQ styles
   ========================================================================== */
.SharedFAQ {
	padding: 5rem 2rem;
	background: #f9fafb;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.SharedFAQContainer {
	max-width: 800px;
	margin: 0 auto;
}

.SharedFAQTitle {
	font-size: 2.4rem;
	font-weight: 700;
	text-align: center;
	margin-bottom: 3rem;
	color: #111827;
	font-family: var(--blog-font-heading);
}

.SharedFAQList {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.SharedFAQItem {
	background: #fff;
	border-radius: 1rem;
	padding: 1.5rem 2rem;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
	border: 1px solid #e5e7eb;
}

.SharedFAQQuestion {
	font-size: 1.1rem;
	font-weight: 600;
	color: #111827;
	margin: 0 0 0.5rem 0;
	line-height: 1.4;
}

.SharedFAQAnswer {
	font-size: 1rem;
	color: #4b5563;
	line-height: 1.7;
	margin: 0;
}

@media (max-width: 768px) {
	.SharedFAQ {
		padding: 3rem 1.5rem;
	}

	.SharedFAQTitle {
		font-size: 1.8rem;
		margin-bottom: 2rem;
	}

	.SharedFAQItem {
		padding: 1.25rem 1.5rem;
	}

	.SharedFAQQuestion {
		font-size: 1rem;
	}

	.SharedFAQAnswer {
		font-size: 0.9rem;
	}
}

/* ==========================================================================
   WebsiteFaqSection — shared FAQ block for .WebsiteHome design-system pages.
   Un-scoped (usable on any .WebsiteHome page). Reuses the global
   .faq-grid/.eyebrow/.h-section/.lead/.btn classes from website-home.css.
   ========================================================================== */

/* Always-open questions (no accordion toggle). */
.al-faq-item {
	border-bottom: 1px solid var(--border);
	padding: 4px 0;
}
.al-faq-q {
	padding: 22px 0 0;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--fg-1);
}
.al-faq-a {
	padding: 10px 0 22px;
	font-size: 16px;
	line-height: 1.6;
	color: var(--fg-2);
	max-width: 92%;
}
.al-faq-link {
	color: var(--primary);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.al-faq-link:hover {
	color: var(--primary-hover);
}

/* Left heading + CTA column follows the scroll (nav is 64px sticky). */
.al-faq-aside {
	position: sticky;
	top: 96px;
	align-self: start;
}

/* website-home.css sets .WebsiteHome { overflow-x: hidden }, which turns the
   wrapper into a scroll context and breaks position: sticky. `clip` prevents
   horizontal overflow the same way without establishing a scroll container.
   Scoped via :has() so only pages that actually render this section are
   affected (never the homepage). */
.WebsiteHome:has(.al-faq-aside) {
	overflow-x: clip;
}

@media (max-width: 920px) {
	/* grid stacks to one column here — sticky would trap the header */
	.al-faq-aside {
		position: static;
	}
}

/* ============================================================
   AssistantLabs — Marketing Homepage (redesign)
   Ported from the Claude Design handoff bundle (site.css +
   Home.html <style>). Global base resets and @font-face are
   intentionally omitted — globals.css already provides them.
   Page-level base is scoped under .WebsiteHome so it never
   leaks into the blog or other website pages.
   ============================================================ */

:root {
	/* Brand */
	--primary: #5d32d0;
	--primary-hover: #4a28a8;
	--primary-light: #ede9fe;
	--cta: #10b981;
	--cta-hover: #0e9f70;
	--navbar-bg: #0d0b21;
	--dark-2: #18181b;

	/* Hero / brand gradients */
	--hero-gradient: linear-gradient(96deg, #ad06ff 0%, #294eb1 100%);
	--brand-radial: radial-gradient(ellipse at 78% 12%, #22d3ee 0%, #ef4444 43%, #4f46e5 100%);

	/* Neutrals */
	--fg-1: #111827;
	--fg-2: #4b5563;
	--fg-3: #6b7280;
	--fg-4: #9ca3af;
	--bg-soft: #f6f7f9;
	--bg-tint: #f3f4f6;
	--border: #e5e7eb;
	--border-soft: rgba(0, 0, 0, 0.07);

	/* Channels */
	--whatsapp: #25d366;
	--instagram: #e1306c;
	--messenger: #0084ff;
	--success: #10b981;
	--warning: #ff7800;
	--danger: #ef4444;

	/* Type */
	--font: 'Simpler', 'Helvetica Neue', Helvetica, Arial, sans-serif;

	/* Radii */
	--r-sm: 8px;
	--r-md: 14px;
	--r-lg: 24px;
	--r-xl: 32px;
	--r-pill: 999px;

	/* Shadow */
	--shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.04);
	--shadow-card: 0 4px 24px rgba(0, 0, 0, 0.08);
	--shadow-lift: 0 24px 60px -16px rgba(17, 24, 39, 0.22), 0 8px 24px -12px rgba(17, 24, 39, 0.14);
	--shadow-float: 0 40px 90px -30px rgba(45, 30, 110, 0.35), 0 12px 32px -16px rgba(17, 24, 39, 0.18);

	--maxw: 1200px;
	--ease: cubic-bezier(0.4, 0, 0.2, 1);
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Page base (scoped) ---------- */
.WebsiteHome {
	font-family: var(--font);
	color: var(--fg-1);
	background: #ffffff;
	line-height: 1.5;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}
.WebsiteHome img { display: block; max-width: 100%; }
:where(.WebsiteHome a) { color: inherit; text-decoration: none; }
.WebsiteHome section { position: relative; }

/* ---------- Type scale ---------- */
.eyebrow {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--primary);
	margin: 0 0 18px;
}
.eyebrow.on-dark { color: #c4b5fd; }

.display {
	font-size: clamp(44px, 6.2vw, 82px);
	font-weight: 700;
	line-height: 1.02;
	letter-spacing: -0.03em;
	margin: 0;
	text-wrap: balance;
}
.h-section {
	font-size: clamp(34px, 4.4vw, 56px);
	font-weight: 700;
	line-height: 1.06;
	letter-spacing: -0.025em;
	margin: 0;
	text-wrap: balance;
}
.h-block {
	font-size: clamp(26px, 2.6vw, 36px);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -0.02em;
	margin: 0;
}
.lead {
	font-size: clamp(18px, 1.5vw, 22px);
	line-height: 1.55;
	color: var(--fg-2);
	margin: 0;
	font-weight: 400;
	text-wrap: pretty;
}
.body { font-size: 17px; line-height: 1.6; color: var(--fg-2); margin: 0; }
.grad-text {
	background: var(--hero-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

/* ---------- Layout ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 32px; }
.wrap-narrow { max-width: 820px; margin: 0 auto; padding: 0 32px; }
.section-pad { padding: clamp(80px, 11vh, 140px) 0; }
.section-pad-sm { padding: clamp(56px, 7vh, 96px) 0; }

.dark-section { background: var(--navbar-bg); color: #fff; }
.dark-section .lead, .dark-section .body { color: rgba(255, 255, 255, 0.66); }
.soft-section { background: var(--bg-soft); }

.center { text-align: center; }
.center .lead { margin-left: auto; margin-right: auto; }

/* ---------- Buttons ---------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	font-family: var(--font);
	font-size: 16px;
	font-weight: 700;
	padding: 15px 30px;
	border-radius: var(--r-pill);
	border: none;
	cursor: pointer;
	transition: transform 0.18s var(--ease), background 0.18s var(--ease), box-shadow 0.18s var(--ease);
	white-space: nowrap;
	line-height: 1;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--cta); color: #fff; box-shadow: 0 8px 20px -8px rgba(16, 185, 129, 0.6); }
.btn-primary:hover { background: var(--cta-hover); transform: translateY(-2px); box-shadow: 0 14px 28px -10px rgba(16, 185, 129, 0.55); }
.btn-dark { background: var(--navbar-bg); color: #fff; }
.btn-dark:hover { transform: translateY(-2px); background: #1b1740; }
.btn-purple { background: var(--primary); color: #fff; box-shadow: 0 8px 20px -8px rgba(93, 50, 208, 0.55); }
.btn-purple:hover { background: var(--primary-hover); transform: translateY(-2px); }
.btn-white { background: #fff; color: var(--fg-1); }
.btn-white:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -10px rgba(0,0,0,0.3); }
.btn-ghost { background: transparent; color: var(--fg-1); border: 1.5px solid var(--border); }
.btn-ghost:hover { border-color: var(--fg-3); }
.btn-lg { padding: 18px 38px; font-size: 17px; }
.btn-link {
	display: inline-flex; align-items: center; gap: 6px;
	font-weight: 700; color: var(--primary); font-size: 16px;
	transition: gap 0.2s var(--ease);
}
.btn-link svg { transition: transform 0.2s var(--ease); }
.btn-link:hover svg { transform: translateX(4px); }
.btn-link.on-dark { color: #c4b5fd; }

/* Keep button label colors on hover — overrides the blog globals.css
   `a:hover { color }` leak (specificity 0-1-1) that otherwise tints solid
   button text on hover. */
.btn-primary:hover,
.btn-purple:hover,
.btn-dark:hover { color: #fff; }
.btn-white:hover,
.btn-ghost:hover { color: var(--fg-1); }
.btn-link:hover { color: var(--primary); }
.btn-link.on-dark:hover { color: #c4b5fd; }

.reassure { font-size: 14px; color: var(--fg-3); display: inline-flex; align-items: center; gap: 7px; }
.reassure svg { color: var(--cta); }

/* ---------- Pills / badges ---------- */
.pill {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 7px 14px; border-radius: var(--r-pill);
	font-size: 13.5px; font-weight: 700; letter-spacing: -0.01em;
	background: var(--primary-light); color: var(--primary);
}
.pill-new { background: var(--cta); color: #fff; padding: 4px 10px; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; }
.tag {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 5px 11px; border-radius: 6px; font-size: 12px; font-weight: 700;
}
.tag-green { background: rgba(16,185,129,0.12); color: #0e9f70; }
.tag-amber { background: rgba(255,120,0,0.12); color: #c2570a; }
.tag-purple { background: var(--primary-light); color: var(--primary); }
.tag-gray { background: var(--bg-tint); color: var(--fg-3); }

/* ---------- Card ---------- */
.card {
	background: #fff;
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-sm);
}

/* ---------- Navbar (design) ---------- */
.nav {
	position: sticky; top: 0; z-index: 100;
	background: rgba(255, 255, 255, 0.94);
	backdrop-filter: saturate(180%) blur(8px);
	border-bottom: 1px solid transparent;
	transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.nav.scrolled { border-bottom-color: var(--border-soft); }
:where(.nav a) { color: inherit; text-decoration: none; }
.nav-inner {
	max-width: var(--maxw); margin: 0 auto; padding: 0 32px;
	height: 64px; display: flex; align-items: center; justify-content: space-between;
}
.nav-logo { height: 26px; width: auto; }
.nav-links { display: flex; align-items: center; gap: 34px; list-style: none; margin: 0; padding: 0; }
.nav-links a {
	position: relative;
	font-size: 15px;
	font-weight: 500;
	color: var(--fg-2);
	transition: color 0.15s var(--ease);
}
.nav-links a::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -7px;
	height: 2px;
	border-radius: 2px;
	background: var(--primary);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 0.2s var(--ease);
}
.nav-links a:hover { color: var(--primary); }
.nav-links a:hover::after { transform: scaleX(1); }
.nav-links a.active { color: var(--primary); font-weight: 700; }
.nav-links a.active::after { transform: scaleX(1); }
.nav-cta { display: flex; align-items: center; gap: 18px; }
.nav-cta .signin { font-size: 15px; font-weight: 700; color: var(--fg-1); }
.nav .btn { padding: 10px 22px; font-size: 15px; }
.nav-toggle {
	display: none; background: none; border: none; cursor: pointer;
	padding: 8px; color: var(--fg-1);
}
.nav-logo-link { display: inline-flex; align-items: center; }

/* ---------- Shared navbar: mega-menus (SiteNav) ---------- */
.nav-links { gap: 6px; }
.nav-item { position: relative; }
/* Top-level triggers + plain links share one look */
.nav-trigger,
.nav-plain {
	display: inline-flex; align-items: center; gap: 5px;
	background: none; border: none; cursor: pointer;
	font-family: inherit; font-size: 15px; font-weight: 500;
	color: var(--fg-2); padding: 10px 12px; border-radius: 8px;
	transition: color 0.15s var(--ease), background 0.15s var(--ease);
	white-space: nowrap;
}
.nav-trigger:hover,
.nav-plain:hover,
.nav-item:hover .nav-trigger,
.nav-item:focus-within .nav-trigger { color: var(--primary); }
.nav-trigger.active,
.nav-plain.active { color: var(--primary); font-weight: 700; }
.nav-chevron { transition: transform 0.2s var(--ease); opacity: 0.75; }
.nav-item:hover .nav-chevron,
.nav-item:focus-within .nav-chevron { transform: rotate(180deg); }

/* Panels: hidden by default, revealed on hover / keyboard focus */
.mega {
	position: absolute; top: calc(100% + 10px); left: 0;
	background: #fff; border: 1px solid var(--border-soft);
	border-radius: var(--r-lg); box-shadow: var(--shadow-float);
	padding: 18px; z-index: 120;
	opacity: 0; visibility: hidden; transform: translateY(6px);
	transition: opacity 0.16s var(--ease), transform 0.16s var(--ease),
		visibility 0.16s var(--ease);
}
/* A hover bridge so the panel doesn't close crossing the 10px gap */
.mega::before {
	content: ''; position: absolute; top: -12px; left: 0; right: 0; height: 12px;
}
.nav-item:hover .mega,
.nav-item:focus-within .mega {
	opacity: 1; visibility: visible; transform: translateY(0);
}
.mega-products { display: grid; grid-template-columns: 300px 260px; gap: 10px; width: 580px; }
.mega-industries { display: grid; grid-template-columns: repeat(2, 240px); gap: 6px; width: 500px; }
.mega-simple { width: 280px; }
.mega-col-side {
	border-inline-start: 1px solid var(--border-soft);
	padding-inline-start: 16px;
	display: flex; flex-direction: column;
}
.mega-label {
	font-size: 11px; font-weight: 700; letter-spacing: 0.07em;
	text-transform: uppercase; color: var(--fg-3);
	padding: 4px 10px 8px;
}
/* Reset the top-level underline styling for links inside panels */
.nav-links .mega a { position: static; }
.nav-links .mega a::after { content: none; }
.mega-link {
	display: flex; flex-direction: column; gap: 2px;
	padding: 9px 10px; border-radius: 9px;
	color: var(--fg-1); text-decoration: none;
	transition: background 0.14s var(--ease);
}
a.mega-link:hover { background: var(--bg-tint); }
.mega-link-name {
	display: flex; align-items: center; gap: 7px;
	font-size: 14.5px; font-weight: 600; color: var(--fg-1);
}
.mega-link-desc { font-size: 12.5px; line-height: 1.4; color: var(--fg-3); }
.mega-link.is-flagship .mega-link-name { color: var(--primary); }
.mega-link.is-flagship { background: var(--primary-light); }
a.mega-link.is-flagship:hover { background: var(--primary-light); filter: brightness(0.97); }
.mega-link.is-soon { cursor: default; opacity: 0.72; }
.mega-soon-badge {
	font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
	text-transform: uppercase; color: var(--fg-3);
	background: var(--bg-tint); padding: 2px 7px; border-radius: 20px;
}
.mega-foot { margin-top: auto; padding: 12px 10px 2px; }
.mega-foot-label {
	display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
	text-transform: uppercase; color: var(--fg-3); margin-bottom: 8px;
}
.mega-chips { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.mega-chips img { width: 22px; height: 22px; object-fit: contain; border-radius: 5px; }
.mega-foot-links { display: flex; flex-direction: column; gap: 6px; }
.mega-foot-links a {
	font-size: 13px; font-weight: 600; color: var(--primary); text-decoration: none;
}
.mega-foot-links a:hover { text-decoration: underline; }
/* RTL: panels are anchored to the trigger's inline-start edge and open toward
   the opposite side. `dir` sits on .nav-links, so match there. */
.nav-links[dir='rtl'] .mega { left: auto; right: 0; }
.nav-links[dir='rtl'] .mega-foot-links a { text-align: right; }

/* ---------- Mock surfaces (product visuals) ---------- */
.surface {
	background: #fff;
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-float);
	overflow: hidden;
}
.surface-head {
	display: flex; align-items: center; gap: 8px;
	padding: 13px 16px; border-bottom: 1px solid var(--border);
	background: #fbfbfd;
}
.avatar {
	border-radius: 50%; object-fit: cover; background: var(--bg-tint);
	display: inline-flex; align-items: center; justify-content: center;
	font-weight: 700; color: #fff; flex: none;
}
.channel-chip {
	width: 28px; height: 28px; border-radius: 8px; flex: none;
	display: flex; align-items: center; justify-content: center;
	background: #fff; box-shadow: var(--shadow-sm);
}
.channel-chip img { width: 100%; height: 100%; border-radius: 8px; }

/* chat bubbles */
.bubble { padding: 11px 15px; border-radius: 16px; font-size: 14.5px; line-height: 1.45; max-width: 78%; }
.bubble-in { background: var(--bg-tint); color: var(--fg-1); border-bottom-left-radius: 5px; }
.bubble-out { background: var(--primary); color: #fff; border-bottom-right-radius: 5px; align-self: flex-end; }
.bubble-wa-in { background: #fff; border: 1px solid var(--border); }
.bubble-wa-out { background: #d9fdd3; color: #111b21; }

/* ---------- Reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: 0.08s; }
.reveal-d2 { transition-delay: 0.16s; }
.reveal-d3 { transition-delay: 0.24s; }
.reveal-d4 { transition-delay: 0.32s; }
@media (prefers-reduced-motion: reduce) {
	.reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Misc ---------- */
.kicker-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.stat-num { font-size: clamp(40px, 4vw, 56px); font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.trust-bar-item {
	display: inline-block;
	min-width: 9.5em;
	text-align: center;
	white-space: nowrap;
	transition: opacity 0.9s var(--ease);
}

/* ===== Home-specific composition & mockups ===== */
.hero {
	padding: clamp(56px, 8vh, 104px) 0 clamp(60px, 9vh, 120px);
	background:
		radial-gradient(60% 70% at 88% 0%, rgba(173, 6, 255, 0.07), transparent 60%),
		radial-gradient(50% 60% at 0% 30%, rgba(41, 78, 177, 0.06), transparent 60%);
}
.hero-grid {
	display: grid;
	grid-template-columns: 1.04fr 0.96fr;
	gap: 56px;
	align-items: center;
}
.hero-cta-row { display: flex; align-items: center; gap: 20px; margin-top: 34px; flex-wrap: wrap; }
.hero-meta { display: flex; gap: 22px; margin-top: 26px; flex-wrap: wrap; }
.hero-meta .reassure { font-size: 14.5px; }

/* hero floating composition */
.hero-visual { position: relative; }
.hero-chat { position: relative; z-index: 2; max-width: 430px; margin-left: auto; }
.chat-head {
	display: flex; align-items: center; gap: 12px;
	padding: 16px 18px; border-bottom: 1px solid var(--border);
}
.chat-head .name { font-weight: 700; font-size: 15px; color: var(--fg-1); }
.chat-head .status { font-size: 12px; color: var(--success); display: flex; align-items: center; gap: 5px; }
.chat-body { padding: 20px 18px; display: flex; flex-direction: column; gap: 12px; background: #f7f8fa; }
.msg-row { display: flex; }
.msg-row.out { justify-content: flex-end; }
.assistant-tag { font-size: 11px; font-weight: 700; color: var(--primary); letter-spacing: 0.02em; margin: 4px 0 -4px 2px; display: flex; align-items: center; gap: 5px; }
.booked-card {
	align-self: flex-end; background: #fff; border: 1px solid var(--border);
	border-radius: 14px; padding: 12px 14px; display: flex; align-items: center; gap: 11px;
	box-shadow: var(--shadow-sm); max-width: 80%;
}
.booked-ic { width: 34px; height: 34px; border-radius: 9px; background: rgba(16,185,129,0.12); display: flex; align-items: center; justify-content: center; flex: none; }
.booked-card .t1 { font-size: 13px; font-weight: 700; color: var(--fg-1); }
.booked-card .t2 { font-size: 11.5px; color: var(--fg-3); }

.float-chip {
	position: absolute; z-index: 3; background: #fff; border-radius: 14px;
	box-shadow: var(--shadow-lift); padding: 13px 16px; display: flex; align-items: center; gap: 11px;
}
.float-stat { top: 28px; left: -18px; }
.float-stat .n { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.float-stat .l { font-size: 11.5px; color: var(--fg-3); line-height: 1.3; }
.float-channels { bottom: 24px; left: -34px; gap: 9px; padding: 11px 13px; }
.hero-glow {
	position: absolute; inset: -14% -12%; z-index: 1; border-radius: 50%;
	background: radial-gradient(closest-side, rgba(173,6,255,0.20), rgba(41,78,177,0.12) 55%, transparent 78%);
	opacity: 0.9;
}

/* generic feature row */
.feat-row { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.feat-row.rev .feat-text { order: 2; }
.feat-list { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-direction: column; gap: 14px; }
.feat-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; color: var(--fg-2); }
.feat-list .ck { width: 22px; height: 22px; border-radius: 50%; background: rgba(16,185,129,0.12); color: var(--success); display: flex; align-items: center; justify-content: center; flex: none; margin-top: 1px; }
.dark-section .feat-list li { color: rgba(255,255,255,0.72); }

/* instant setup browser mock */
.browser { max-width: 520px; }
.browser-bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--border); background: #fbfbfd; }
.url-field { flex: 1; background: #fff; border: 1px solid var(--border); border-radius: var(--r-pill); padding: 8px 16px; font-size: 13px; color: var(--fg-2); display: flex; align-items: center; gap: 8px; }
.scan-body { padding: 22px; }
.scan-line { height: 10px; border-radius: 5px; background: var(--bg-tint); margin-bottom: 12px; }
.scan-flow { display: flex; align-items: center; gap: 14px; margin-top: 8px; }
.agent-card { flex: 1; border: 1px solid var(--border); border-radius: var(--r-md); padding: 16px; display: flex; gap: 13px; align-items: center; box-shadow: var(--shadow-sm); }
.agent-card .ring { width: 44px; height: 44px; border-radius: 50%; background: var(--hero-gradient); flex: none; display:flex; align-items:center; justify-content:center; }

/* channels mock */
.inbox-mock { max-width: 540px; }
.inbox-rail { display: flex; flex-direction: column; }
.inbox-item { display: flex; gap: 13px; align-items: center; padding: 15px 18px; border-bottom: 1px solid var(--border-soft); }
.inbox-item.active { background: rgba(93,50,208,0.04); box-shadow: inset 3px 0 0 var(--primary); }
.inbox-item .meta { flex: 1; min-width: 0; }
.inbox-item .top { display: flex; justify-content: space-between; align-items: center; }
.inbox-item .nm { font-weight: 700; font-size: 14px; }
.inbox-item .tm { font-size: 11px; color: var(--fg-4); }
.inbox-item .sn { font-size: 13px; color: var(--fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.unread { width: 18px; height: 18px; border-radius: 50%; background: var(--whatsapp); color: #fff; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex: none; }
.ch-dot { position: relative; }
.ch-dot .mini { position: absolute; bottom: -2px; right: -3px; width: 16px; height: 16px; border-radius: 5px; border: 2px solid #fff; }

/* helpdesk dark ticket mock */
.ticket-surface { background: #14122e; border: 1px solid rgba(255,255,255,0.08); border-radius: var(--r-lg); overflow: hidden; box-shadow: 0 40px 90px -30px rgba(0,0,0,0.6); }
.ticket-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.ticket-head .ttl { font-weight: 700; font-size: 15px; color: #fff; }
.ticket { padding: 16px 20px; border-bottom: 1px solid rgba(255,255,255,0.06); display: flex; gap: 14px; align-items: flex-start; }
.ticket .body-t { flex: 1; min-width: 0; }
.ticket .subj { font-weight: 700; font-size: 14px; color: #fff; }
.ticket .summ { font-size: 12.5px; color: rgba(255,255,255,0.5); margin-top: 4px; line-height: 1.45; }
.ticket .row2 { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.ai-summary-tag { background: rgba(93,50,208,0.25); color: #c4b5fd; }
.avatar-stack { display: flex; }
.avatar-stack .avatar { width: 26px; height: 26px; font-size: 10px; border: 2px solid #14122e; margin-left: -8px; }
.avatar-stack .avatar:first-child { margin-left: 0; }

/* order card in chat */
.order-card { background: #fff; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; max-width: 86%; box-shadow: var(--shadow-sm); }
.order-top { padding: 12px 14px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border); }
.order-line { display: flex; gap: 11px; align-items: center; padding: 12px 14px; }
.order-thumb { width: 42px; height: 42px; border-radius: 9px; background: var(--bg-tint); flex: none; }
.order-foot { padding: 10px 14px; background: #f7f8fa; font-size: 12px; display: flex; align-items: center; gap: 7px; color: #0e9f70; font-weight: 700; }

/* integrations grid */
.logo-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; margin-top: 12px; }
.logo-tile { aspect-ratio: 1.5 / 1; background: #fff; border: 1px solid var(--border); border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; padding: 18px; transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease); }
.logo-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }
.logo-tile img { max-height: 36px; max-width: 78%; width: auto; object-fit: contain; }

/* model choice */
.model-row { display: flex; gap: 18px; justify-content: center; margin-top: 36px; flex-wrap: wrap; }
.model-chip { display: flex; align-items: center; gap: 14px; padding: 18px 26px; border: 1px solid var(--border); border-radius: var(--r-lg); background: #fff; box-shadow: var(--shadow-sm); }
.model-chip .mk { width: 40px; height: 40px; border-radius: 11px; display: flex; align-items: center; justify-content: center; flex: none; }
.model-chip .mn { font-weight: 700; font-size: 17px; }
.model-chip .ms { font-size: 12.5px; color: var(--fg-3); }

/* testimonials */
.tcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 12px; }
.tcard { background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); padding: 30px 28px; display: flex; flex-direction: column; gap: 18px; box-shadow: var(--shadow-sm); }
.tcard .quote { font-size: 17px; line-height: 1.55; color: var(--fg-1); flex: 1; }
.tcard .who { display: flex; align-items: center; gap: 12px; }
.tcard .who .nm { font-weight: 700; font-size: 14.5px; }
.tcard .who .rl { font-size: 12.5px; color: var(--fg-3); }
.stars { display: flex; gap: 3px; color: #ff9f1c; }
.stat-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 56px; text-align: center; }
.stat-strip .l { font-size: 14px; color: var(--fg-3); margin-top: 8px; }

/* pricing */
.price-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 44px; }
.price-card { background: #fff; border: 1px solid var(--border); border-radius: var(--r-xl); padding: 36px; display: flex; flex-direction: column; }
.price-card.feature { border: 1.5px solid var(--primary); box-shadow: 0 20px 50px -24px rgba(93,50,208,0.35); position: relative; }
.price-name { font-size: 15px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--fg-3); }
.price-amt { display: flex; align-items: baseline; gap: 6px; margin: 16px 0 4px; }
.price-amt .a { font-size: 52px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.price-amt .u { font-size: 16px; color: var(--fg-3); }
.price-sub { font-size: 14px; color: var(--fg-2); min-height: 22px; }
.price-list { list-style: none; padding: 0; margin: 26px 0; display: flex; flex-direction: column; gap: 13px; flex: 1; }
.price-list li { display: flex; gap: 11px; align-items: flex-start; font-size: 15px; color: var(--fg-2); }
.price-list .ck { width: 20px; height: 20px; border-radius: 50%; background: rgba(16,185,129,0.12); color: var(--success); display: flex; align-items: center; justify-content: center; flex: none; margin-top: 1px; }
.price-list .chrow { display: flex; gap: 5px; margin-left: auto; }
.price-list .chrow img { width: 17px; height: 17px; border-radius: 4px; }
.honest-note { background: var(--primary-light); border-radius: var(--r-md); padding: 16px 18px; display: flex; gap: 12px; align-items: flex-start; margin-top: 40px; }
.honest-note .t { font-size: 14.5px; color: #4a28a8; line-height: 1.5; }
.honest-note strong { color: var(--primary); }

/* faq */
.faq-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 56px; align-items: start; }
.faq-list { display: flex; flex-direction: column; }
details.faq { border-bottom: 1px solid var(--border); padding: 4px 0; }
details.faq summary { list-style: none; cursor: pointer; padding: 22px 0; font-size: 18px; font-weight: 700; color: var(--fg-1); display: flex; justify-content: space-between; align-items: center; gap: 16px; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary .ic { width: 26px; height: 26px; flex: none; border-radius: 50%; border: 1.5px solid var(--border); display: flex; align-items: center; justify-content: center; transition: transform 0.25s var(--ease), background 0.2s; color: var(--fg-3); }
details.faq[open] summary .ic { transform: rotate(45deg); background: var(--primary); border-color: var(--primary); color: #fff; }
details.faq .ans { padding: 0 0 22px; font-size: 16px; line-height: 1.6; color: var(--fg-2); max-width: 92%; }

/* final cta */
.final-cta { background: var(--hero-gradient); color: #fff; text-align: center; border-radius: var(--r-xl); padding: clamp(56px, 8vw, 96px) 32px; position: relative; overflow: hidden; }
.final-cta h2 { color: #fff; }
.final-cta .lead { color: rgba(255,255,255,0.85); }
.final-cta .reassure { color: rgba(255,255,255,0.8); }
.final-cta .reassure svg { color: #fff; }

/* ===== build an agent (vibe) ===== */
.build-wrap { max-width: 720px; margin: 50px auto 0; }
.prompt-box { background:#fff; border:1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-float); padding: 22px 22px 16px; text-align:left; }
.prompt-box .plabel { font-size:11.5px; font-weight:700; color:var(--primary); text-transform:uppercase; letter-spacing:.12em; display:flex; align-items:center; gap:7px; margin-bottom:14px; }
.prompt-text { font-size:19px; line-height:1.55; color:var(--fg-1); min-height:3.1em; }
.prompt-text .hl { background:var(--primary-light); color:var(--primary); font-weight:700; border-radius:6px; padding:1px 7px; white-space:nowrap; }
.caret { display:inline-block; width:2px; height:20px; background:var(--primary); vertical-align:-4px; margin-left:2px; animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity:0; } }
.prompt-actions { display:flex; align-items:center; justify-content:space-between; margin-top:18px; padding-top:14px; border-top:1px solid var(--border-soft); gap:12px; }
.prompt-hint { font-size:12.5px; color:var(--fg-4); display:flex; align-items:center; gap:7px; }
.chips { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:18px; }
.chip { padding:9px 16px; border:1px solid var(--border); border-radius:var(--r-pill); font-size:14px; font-weight:700; color:var(--fg-2); background:#fff; transition: border-color .15s, color .15s, background .15s; cursor:pointer; }
.chip:hover { border-color:var(--primary); color:var(--primary); }
.chip.active { border-color:var(--primary); color:var(--primary); background:var(--primary-light); }
.prompt-text:focus { outline:none; }
.prompt-text:empty::before { content:"Describe your business in a sentence…"; color:var(--fg-4); }
.build-down { display:flex; justify-content:center; margin:24px 0; }
.build-down span { width:42px; height:42px; border-radius:50%; background:#fff; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; color:var(--primary); box-shadow:var(--shadow-sm); }
.gen-card { max-width:480px; margin:0 auto; }
.gen-head { display:flex; align-items:center; gap:13px; padding:18px; border-bottom:1px solid var(--border); }
.gen-head .ring { width:46px;height:46px;border-radius:50%;background:var(--hero-gradient);flex:none;display:flex; align-items:center; justify-content:center; }

/* ===== features bento ===== */
.features-bento { display:grid; grid-template-columns: repeat(6, 1fr); gap:20px; margin-top:52px; }
.fcard { background:#fff; border:1px solid var(--border); border-radius:var(--r-lg); padding:30px; display:flex; flex-direction:column; transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.fcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
.fcard .fic { width:46px;height:46px;border-radius:12px;background:var(--primary-light);color:var(--primary);display:flex;align-items:center;justify-content:center;margin-bottom:18px; }
.fcard h3 { font-size:20px; font-weight:700; margin:0 0 9px; letter-spacing:-0.01em; }
.fcard p { font-size:14.5px; line-height:1.55; color:var(--fg-2); margin:0; }
.fcard .outcome { margin-top:auto; padding-top:20px; font-size:13.5px; font-weight:700; color:var(--primary); display:flex; align-items:center; gap:8px; }
.fcard.wide { grid-column: span 3; }
.fcard.tri { grid-column: span 2; }
.mini-rows { margin:18px 0 4px; display:flex; flex-direction:column; gap:8px; }
.mini-row { display:flex; align-items:center; gap:11px; padding:9px 12px; border:1px solid var(--border-soft); border-radius:10px; }
.mini-row .nm { font-size:13px; font-weight:700; }
.mini-row .sub { font-size:11.5px; color:var(--fg-3); }
.seq { margin:18px 0 4px; display:flex; flex-direction:column; }
.seq-step { display:flex; align-items:flex-start; gap:11px; }
.seq-step .num { width:22px;height:22px;border-radius:50%;background:var(--primary);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none;margin-top:2px; }
.seq-step .bub { background:var(--bg-tint); border-radius:10px; padding:9px 12px; font-size:13px; flex:1; }
.seq-wait { font-size:11.5px; color:var(--fg-4); padding:6px 0 6px 11px; margin-left:10px; border-left:2px dashed var(--border); }

/* ===== trust strip ===== */
.trust-strip { display:flex; align-items:center; justify-content:center; gap:36px; flex-wrap:wrap; }
.trust-item { display:flex; align-items:center; gap:13px; }
.trust-item img { height:42px; width:auto; }
.trust-item .tt { font-size:14px; font-weight:700; color:var(--fg-1); }
.trust-item .ts { font-size:12.5px; color:var(--fg-3); }
.trust-sep { width:1px; height:44px; background:var(--border); }

/* ===== training panel ===== */
.train-panel { max-width:480px; margin:0 auto; }
.train-head { display:flex; align-items:center; justify-content:space-between; padding:15px 18px; border-bottom:1px solid var(--border); }
.know-row { display:flex; gap:13px; padding:14px 18px; border-bottom:1px solid var(--border-soft); align-items:flex-start; }
.know-row .qa { flex:1; }
.know-q { font-weight:700; font-size:13.5px; }
.know-a { font-size:12.5px; color:var(--fg-3); margin-top:3px; line-height:1.45; }
.train-toast { display:flex; align-items:center; gap:9px; padding:13px 18px; background:rgba(16,185,129,0.07); font-size:12.5px; font-weight:700; color:#0e9f70; }

/* ===== coexistence ===== */
.src-tag { font-size:11px; font-weight:700; display:flex; align-items:center; gap:5px; margin:3px 0 -4px 2px; }
.src-ai { color:var(--primary); }
.src-phone { color:var(--fg-3); }
.coex-note { display:flex; align-items:center; gap:8px; padding:12px 16px; background:#fff; border-top:1px solid var(--border); font-size:12px; color:var(--fg-3); }

/* products trio */
.prod-grid { display:grid; grid-template-columns: repeat(4,1fr); gap:20px; margin-top:44px; text-align:left; }
.prod-card { display:flex; flex-direction:column; background:#fff; border:1px solid var(--border); border-radius:var(--r-lg); padding:30px 28px; text-decoration:none; color:inherit; transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.prod-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-card); }
.prod-card.soon { background:var(--bg-soft); border-style:dashed; }
.prod-ic { width:50px;height:50px;border-radius:13px;display:flex;align-items:center;justify-content:center;margin-bottom:20px; }
.prod-card h3 { font-size:19px; font-weight:700; margin:0 0 9px; letter-spacing:-0.01em; }
.prod-card p { font-size:14px; line-height:1.5; color:var(--fg-2); margin:0 0 20px; flex:1; }
.prod-foot { display:flex; align-items:center; justify-content:space-between; }
.prod-foot .btn-link { font-size:14px; }
.soon-tag { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--fg-3); background:var(--bg-tint); padding:5px 11px; border-radius:999px; }

/* personal assistant daily-brief card (in chat) */
.pa-brief { align-self:flex-start; background:#fff; border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow-sm); padding:6px 16px; max-width:88%; width:100%; }
.pa-brief-row { display:flex; align-items:center; gap:12px; padding:11px 0; }
.pa-brief-row + .pa-brief-row { border-top:1px solid var(--border-soft); }
.pa-brief-ic { width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex:none; }
.pa-brief-row .t { font-size:13.5px; font-weight:700; color:var(--fg-1); line-height:1.3; }
.pa-brief-row .s { font-size:11.5px; color:var(--fg-3); }
.pa-brief-row .flag { margin-left:auto; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:3px 8px; border-radius:6px; }

@media (max-width: 920px) {
	.hero-grid, .feat-row, .faq-grid { grid-template-columns: 1fr; gap: 40px; }
	.feat-row.rev .feat-text { order: 0; }
	.tcards, .stat-strip, .price-grid, .features-bento, .prod-grid { grid-template-columns: 1fr; }
	.fcard.wide, .fcard.tri { grid-column: auto; }
	.logo-grid { grid-template-columns: repeat(3, 1fr); }
	.hero-chat { margin: 0 auto; }
	.trust-sep { display:none; }
}
@media (min-width: 921px) and (max-width: 1080px) {
	.prod-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Navbar responsive (mobile menu) ---------- */
@media (max-width: 900px) {
	.nav-toggle { display: inline-flex; }
	.nav-links {
		display: none; position: fixed; top: 64px; left: 0; right: 0; z-index: 99;
		flex-direction: column; align-items: flex-start; gap: 2px;
		background: #fff; border-bottom: 1px solid var(--border-soft);
		padding: 10px 24px 18px; box-shadow: var(--shadow-card);
		max-height: calc(100vh - 64px); overflow-y: auto;
	}
	.nav-links.NavLinksOpen { display: flex; }
	.nav-links li { width: 100%; }

	/* Top-level rows become full-width tappable rows */
	.nav-item { border-bottom: 1px solid var(--border-soft); }
	.nav-item:last-child { border-bottom: none; }
	.nav-trigger,
	.nav-plain {
		display: flex; width: 100%; justify-content: space-between;
		padding: 14px 2px; font-size: 16px; border-radius: 0;
	}
	.nav-item.open .nav-chevron { transform: rotate(180deg); }

	/* Panels collapse into accordions — hover reveal is disabled here */
	.mega {
		position: static; display: none; width: auto;
		opacity: 1; visibility: visible; transform: none;
		box-shadow: none; border: none; border-radius: 0;
		padding: 0 2px 12px;
	}
	.mega::before { display: none; }
	.nav-item.open .mega { display: block; }
	.mega-products,
	.mega-industries,
	.mega-simple { display: block; width: auto; }
	.mega-col-side {
		border-inline-start: none; padding-inline-start: 0;
		margin-top: 8px; border-top: 1px solid var(--border-soft); padding-top: 8px;
	}
	.mega-label { padding: 8px 8px 4px; }
	.mega-link { padding: 8px; }
	.mega-foot { padding: 12px 8px 0; }
}

/* ============================================================
   RTL — flip the direction-specific bits. Flexbox/grid mirror
   automatically; these handle the explicit left/right values.
   ============================================================ */
.WebsiteHome[dir='rtl'] .eyebrow { letter-spacing: 0; }
/* Hebrew headings wrap better greedily than balanced (which forces short,
   awkward lines and splits hyphenated Latin tokens like "ה-AI"). */
.WebsiteHome[dir='rtl'] .display,
.WebsiteHome[dir='rtl'] .h-section,
.WebsiteHome[dir='rtl'] .h-block {
	text-wrap: normal;
}
.WebsiteHome[dir='rtl'] .prompt-box { text-align: right; }
.WebsiteHome[dir='rtl'] .prompt-text:empty::before {
	content: 'תארו את העסק שלכם במשפט…';
}
/* assistant/source tags: nudge sits on the inline-start (right in RTL) */
.WebsiteHome[dir='rtl'] .assistant-tag,
.WebsiteHome[dir='rtl'] .src-tag { margin: 4px 2px -4px 0; }
/* unified-inbox active rail accent moves to the right edge */
.WebsiteHome[dir='rtl'] .inbox-item.active {
	box-shadow: inset -3px 0 0 var(--primary);
}
/* follow-up sequence connector */
.WebsiteHome[dir='rtl'] .seq-wait {
	border-left: none;
	border-right: 2px dashed var(--border);
	margin-left: 0;
	margin-right: 10px;
	padding: 6px 11px 6px 0;
}
/* push-to-end helpers flip side */
.WebsiteHome[dir='rtl'] .price-list .chrow,
.WebsiteHome[dir='rtl'] .pa-brief-row .flag {
	margin-left: 0;
	margin-right: auto;
}
/* hero floating composition */
.WebsiteHome[dir='rtl'] .hero-chat { margin-left: 0; margin-right: auto; }
.WebsiteHome[dir='rtl'] .float-stat { left: auto; right: -18px; }
.WebsiteHome[dir='rtl'] .float-channels { left: auto; right: -34px; }
/* chat bubble tails mirror */
.WebsiteHome[dir='rtl'] .bubble-in {
	border-bottom-left-radius: 16px;
	border-bottom-right-radius: 5px;
}
.WebsiteHome[dir='rtl'] .bubble-out {
	border-bottom-right-radius: 16px;
	border-bottom-left-radius: 5px;
}
.WebsiteHome[dir='rtl'] .feat-list .ck,
.WebsiteHome[dir='rtl'] .price-list .ck { margin-top: 1px; }
/* nav: drop the latin tracking, keep underline centered */
.nav[dir='rtl'] .eyebrow { letter-spacing: 0; }

/* ============================================================
   Phone (≤640px) — tighten spacing, tame the hero floats, let
   cramped rows wrap, and keep the nav compact.
   ============================================================ */
@media (max-width: 640px) {
	.wrap, .wrap-narrow { padding: 0 20px; }
	.nav-inner { padding: 0 20px; }
	.section-pad { padding: clamp(54px, 9vh, 84px) 0; }
	.section-pad-sm { padding: clamp(40px, 6vh, 64px) 0; }

	/* Nav: hide the text sign-in link, keep Start now + hamburger */
	.nav-cta { gap: 10px; }
	.nav-cta .signin { display: none; }
	.nav .btn { padding: 9px 16px; font-size: 14px; }

	/* Hero floating chips: tuck flush so they never cause side-scroll */
	.float-stat { left: 0; top: 6px; }
	.float-channels { left: 0; bottom: 6px; }
	.WebsiteHome[dir='rtl'] .float-stat { left: auto; right: 0; }
	.WebsiteHome[dir='rtl'] .float-channels { left: auto; right: 0; }

	/* Integrations: two columns reads better than three on a phone */
	.logo-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }

	/* Let the build prompt action row stack instead of squeezing */
	.prompt-actions { flex-wrap: wrap; }

	/* A little less inner padding on dense cards */
	.fcard, .price-card { padding: 26px 22px; }
	.tcard { padding: 26px 22px; }
	.final-cta { padding: 52px 22px; }

	/* Trust bar: smaller cells so more fit per line */
	.trust-bar-item { min-width: 7.5em; }
}

@media (max-width: 380px) {
	.display { font-size: 38px; }
}

.Footer {
	background: linear-gradient(
		180deg,
		rgba(24, 24, 27, 1) 0%,
		rgba(0, 0, 0, 1) 100%
	);
	color: #fff;
	padding: 4rem 2rem 2rem 2rem;
}

.Content {
	max-width: 1200px;
	margin: 0 auto;
}

.TopSection {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 4rem;
	padding-bottom: 3rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.BrandSection {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.LogoWrapper {
	display: flex;
	align-items: center;
	margin-bottom: 0.5rem;
}

.LogoWrapper svg {
	height: 40px;
	width: auto;
}

.Description {
	font-size: 0.8rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.7);
	margin: 0;
	max-width: 500px;
}

.LinksSection {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 2.5rem;
}

/* Trust badges + social icons in the brand block */
.Badges {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.Badges img {
	height: 44px;
	width: auto;
	object-fit: contain;
	background: #fff;
	padding: 6px 10px;
	border-radius: 8px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
	transition: transform 0.2s;
}

.Badges img:hover {
	transform: translateY(-1px);
}

.Socials {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.Socials a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 8px;
	color: rgba(255, 255, 255, 0.7);
	background: rgba(255, 255, 255, 0.06);
	transition: color 0.2s, background 0.2s;
}

.Socials a:hover {
	color: #fff;
	background: rgba(255, 255, 255, 0.14);
}

.Socials svg {
	width: 18px;
	height: 18px;
}

.Column {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.ColumnTitle {
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	color: #fff;
	margin: 0 0 0.5rem 0;
}

.SubTitle {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	color: rgba(255, 255, 255, 0.45);
	margin-top: 0.75rem;
}

.Column a {
	color: rgba(255, 255, 255, 0.7);
	text-decoration: none;
	font-size: 0.9rem;
	transition: color 0.2s;
}

.Column a:hover {
	color: #fff;
}

.BottomSection {
	padding-top: 2rem;
	text-align: center;
}

.Copyright {
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 0.5);
	margin: 0;
}

/* RTL Support */
:global(.rtl) .LinksSection {
	direction: rtl;
}

/* Responsive Design */
@media (max-width: 968px) {
	.TopSection {
		grid-template-columns: 1fr;
		gap: 3rem;
	}

	.LinksSection {
		grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
		gap: 2rem;
	}
}

@media (max-width: 640px) {
	.Footer {
		padding: 3rem 1.5rem 1.5rem 1.5rem;
	}

	.TopSection {
		gap: 2.5rem;
		padding-bottom: 2rem;
	}

	.LinksSection {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	.Description {
		font-size: 0.875rem;
	}

	.LogoWrapper svg {
		height: 35px;
	}
}

.CyanfireGradient {
	background: radial-gradient(
		ellipse at 76.4% 16.1%,
		#22d3ee 0%,
		#ef4444 43%,
		#4f46e5 100%
	);
}

.Cyanfire2Gradient {
	background: radial-gradient(
		ellipse at 83.2% 0%,
		#22d3ee 0%,
		#ef4444 43%,
		#4f46e5 100%
	);
}

.IndigowaveGradient {
	background: radial-gradient(
		ellipse at 87.7% 97.9%,
		#22d3ee 0%,
		#4f46e5 42.7%,
		#156dff 100%
	);
}

.SunsetglowGradient {
	background: radial-gradient(
		ellipse at 113.5% 108.4%,
		#22d3ee 0%,
		#ef4444 43%,
		#e5a146 100%
	);
}

.DarkabyssGradient {
	background: radial-gradient(
		ellipse at 50% 50%,
		#05272c 0%,
		#05050e 44%,
		#01102a 100%
	);
}

.FrostfireGradient {
	background: radial-gradient(54% 100%, #b5f5ff 0%, #ef4444 77%, #4f46e5 100%);
}

.StarsetGradient {
	background: radial-gradient(
		102% 88% at 50% 100px,
		#05272c 0%,
		#05050e 44%,
		#01102a 100%
	);
}

.Gradient::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(255, 255, 255, 0.708);

	pointer-events: none;
}

.Gradient {
	position: relative;
}

.Gradient > * {
	position: relative;
}