/* ==========================================================================
   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;
}

/* ==========================================================================
   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;
	}
}

/* ============================================================
   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 ----------
   Sections start VISIBLE. The hidden state is applied by JS (`.armed`), and
   only to sections that are below the fold at load — hiding above-the-fold
   content costs the first paint of the very thing the visitor came to read,
   and it makes the whole page depend on a script to be legible at all. */
.reveal { transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); }
.reveal.armed { opacity: 0; transform: translateY(28px); }
.reveal.armed.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: absolute; top: 64px; left: 0; right: 0;
		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; }
}

/* ==========================================================================
   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;
	}
}

/* ==========================================================================
   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;
	}
}

.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;
}

/* ==========================================================================
   The PLATFORM page — one layout serving /claude and /chatgpt.

   Both pages sell the same thing (connect Assistant Labs to an AI client, then
   let it run the day) over the same connectors, so they share this stylesheet
   and the component that uses it. Only the accent differs: .is-chatgpt
   re-points the palette at the bottom of this file.

   Reuses the global design system from website-home.css (tokens, .wrap,
   .eyebrow, .display, .h-section, .lead, .btn*, .reassure, .center, .surface,
   .feat-row, .feat-list, .ck, .reveal, .section-pad, .soft-section,
   .dark-section, .grad-text, .pill-new). Only page-specific components live
   here, scoped under .PlatformPage so nothing leaks.

   Two prefixes, one page: cl- is the connector half, pl- is the operator half
   (the tiers, the WhatsApp approval, the shortcuts) that used to live on the
   separate /plugin page.

   The base palette is terracotta — Claude's own accent. Every accent runs
   through a var so a sibling page overrides the block at the bottom and nothing
   else: --wash is an RGB triple rather than a colour because the hero and
   closing washes need it with an alpha. The vars are scoped to .PlatformPage,
   so the shared nav/footer (rendered outside this div) stay AssistantLabs
   purple. (Agents=purple, Sales=green, Helpdesk=blue, Marketing=coral,
   CRM=teal, /claude=terracotta, /chatgpt=graphite.)
   ========================================================================== */

.PlatformPage {
	--primary: #c15f3c;
	--primary-hover: #a44e2f;
	--primary-light: #fbeade;
	--cta: #c15f3c;
	--cta-hover: #a44e2f;
	--hero-gradient: linear-gradient(118deg, #e08256 0%, #c15f3c 52%, #8f3f24 100%);
	--cl-ink: #1f1b18;
	--cl-code: #6b4636;
	/* RGB triple (not a colour) so it can carry an alpha in the page washes. */
	--wash: 224, 130, 86;
	--pl-muted: #6b625c;
	--pl-line: #ece5e0;
	--pl-green: #1a8a45;
	--pl-amber: #b8760c;
	--pl-red: #c0392b;
}

.PlatformPage .btn-primary {
	background: var(--primary);
	color: #fff;
	box-shadow: 0 8px 20px -8px rgba(193, 95, 60, 0.55);
}
.PlatformPage .btn-primary:hover {
	background: var(--primary-hover);
	box-shadow: 0 14px 28px -10px rgba(193, 95, 60, 0.5);
}
.PlatformPage .pill-new {
	background: var(--primary);
}
.PlatformPage .reassure svg {
	color: var(--primary);
}
.PlatformPage .eyebrow {
	font-size: 15px;
	letter-spacing: 0.12em;
	margin-bottom: 18px;
}
.PlatformPage .eyebrow.on-dark {
	color: #f0b494;
}
.PlatformPage .grad-text {
	background: var(--hero-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}
.PlatformPage .feat-list .ck {
	background: rgba(193, 95, 60, 0.12);
	color: var(--primary);
}

/* ---------- Section heads ---------- */

.PlatformPage .cl-sect-head {
	max-width: 680px;
	margin: 0 auto 48px;
}
.PlatformPage .cl-sect-lead {
	margin-top: 18px;
}
.PlatformPage .cl-on-dark {
	color: #fff;
}

/* ---------- Hero ---------- */

.PlatformPage .cl-hero {
	padding: clamp(64px, 9vh, 112px) 0 clamp(56px, 8vh, 96px);
	background:
		radial-gradient(
			ellipse at 82% 4%,
			rgba(var(--wash), 0.16) 0%,
			rgba(var(--wash), 0) 58%
		),
		var(--bg-soft, #fbfaf9);
}
.PlatformPage .cl-hero-grid {
	display: grid;
	grid-template-columns: 1.02fr 0.98fr;
	gap: 60px;
	align-items: center;
}
.PlatformPage .cl-kicker {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 20px;
}
.PlatformPage .cl-kicker-eyebrow {
	margin-bottom: 0;
}
.PlatformPage .cl-hero-title {
	font-size: clamp(40px, 5.2vw, 68px);
}
.PlatformPage .cl-hero-lead {
	margin-top: 24px;
	max-width: 560px;
}
.PlatformPage .cl-cta-row {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	margin-top: 34px;
}
.PlatformPage .cl-hero-reassure {
	display: inline-flex;
	margin-top: 16px;
}
.PlatformPage .cl-hero-meta {
	display: flex;
	flex-direction: column;
	gap: 11px;
	margin-top: 28px;
	padding-top: 24px;
	border-top: 1px solid var(--border);
}

/* ---------- Hero chat mock ---------- */

.PlatformPage .cl-chat {
	max-width: 520px;
	margin-inline-start: auto;
	border: 1px solid var(--border);
}
.PlatformPage .cl-chat-bar {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 13px 18px;
	border-bottom: 1px solid var(--border);
	background: #fbfbfd;
}
.PlatformPage .cl-chat-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--primary);
	flex: none;
}
.PlatformPage .cl-chat-app {
	font-size: 13.5px;
	font-weight: 700;
	color: var(--fg-1);
}
.PlatformPage .cl-chat-conn {
	margin-inline-start: auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border-radius: var(--r-pill);
	background: var(--primary-light);
	color: var(--primary);
	font-size: 11.5px;
	font-weight: 700;
}
.PlatformPage .cl-chat-body {
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	background: #fff;
}
.PlatformPage .cl-msg {
	border-radius: 14px;
	padding: 13px 16px;
	font-size: 14.5px;
	line-height: 1.55;
}
.PlatformPage .cl-msg p {
	margin: 0;
}
.PlatformPage .cl-msg-user {
	background: var(--primary);
	color: #fff;
	align-self: flex-end;
	max-width: 88%;
	font-weight: 500;
}
.PlatformPage .cl-msg-bot {
	background: var(--bg-tint, #f5f4f2);
	color: var(--fg-1);
	align-self: stretch;
}
.PlatformPage .cl-msg-item {
	margin-top: 8px;
	padding-inline-start: 12px;
	border-inline-start: 2px solid rgba(193, 95, 60, 0.3);
	color: var(--fg-2);
	font-size: 13.5px;
}
.PlatformPage .cl-msg-done {
	display: flex;
	align-items: center;
	gap: 9px;
	background: rgba(16, 185, 129, 0.08);
	color: #0e7d5b;
	font-weight: 600;
}
.PlatformPage .cl-done-tick {
	width: 19px;
	height: 19px;
	border-radius: 50%;
	background: #10b981;
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
}
.PlatformPage .cl-tool {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	align-self: flex-start;
	padding: 5px 11px;
	border-radius: var(--r-pill);
	border: 1px dashed rgba(193, 95, 60, 0.4);
	color: var(--cl-code);
	font-size: 12px;
}
.PlatformPage .cl-tool svg {
	color: var(--primary);
	flex: none;
}
.PlatformPage .cl-tool-label {
	font-weight: 600;
}
.PlatformPage .cl-tool-name,
.PlatformPage .cl-tools-list code,
.PlatformPage .cl-conn-url code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 12px;
	color: var(--cl-code);
}

/* ---------- Trust strip ---------- */

.PlatformPage .cl-trust {
	margin-top: clamp(48px, 7vh, 80px);
	padding-top: 30px;
	border-top: 1px solid var(--border);
	text-align: center;
}
.PlatformPage .cl-trust-label {
	display: block;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--fg-3);
	margin-bottom: 16px;
}
.PlatformPage .cl-trust-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	flex-wrap: wrap;
}
.PlatformPage .cl-trust-item {
	padding: 8px 16px;
	border-radius: var(--r-pill);
	background: #fff;
	border: 1px solid var(--border);
	font-size: 14px;
	font-weight: 600;
	color: var(--fg-2);
}

/* ---------- Connectors ---------- */

.PlatformPage .cl-conn-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.PlatformPage .cl-conn {
	display: flex;
	flex-direction: column;
	padding: 30px 28px;
	border: 1px solid var(--border);
	background: #fff;
}
.PlatformPage .cl-conn-head {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 16px;
}
.PlatformPage .cl-conn-badge {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	color: #fff;
	background: var(--hero-gradient);
}
.PlatformPage .cl-conn-agents {
	background: var(--hero-gradient);
}
.PlatformPage .cl-conn-sales {
	background: linear-gradient(135deg, #34d399 0%, #0e9f70 100%);
}
.PlatformPage .cl-conn-tasks {
	background: linear-gradient(135deg, #60a5fa 0%, #2563eb 100%);
}
.PlatformPage .cl-conn-name {
	font-size: 20px;
	font-weight: 700;
	margin: 0;
	color: var(--fg-1);
}
.PlatformPage .cl-conn-tagline {
	margin: 3px 0 0;
	font-size: 13px;
	color: var(--fg-3);
}
.PlatformPage .cl-conn-desc {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--fg-2);
}
.PlatformPage .cl-conn-list {
	margin-top: 20px;
	gap: 11px;
	flex: 1;
}
.PlatformPage .cl-conn-list li {
	font-size: 14.5px;
}
.PlatformPage .cl-conn-url {
	margin-top: 24px;
	padding-top: 18px;
	border-top: 1px dashed var(--border);
}
.PlatformPage .cl-conn-url-label {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--fg-3);
	margin-bottom: 7px;
}
.PlatformPage .cl-conn-url code {
	display: block;
	/* The address is LTR; without this it inherits the RTL page's alignment
	   and a wrapped second line hugs the wrong edge. */
	text-align: left;
	word-break: break-all;
	line-height: 1.5;
	background: var(--bg-tint, #f5f4f2);
	border-radius: 8px;
	padding: 9px 11px;
}
.PlatformPage .cl-conn-note {
	margin: 34px auto 0;
	max-width: 620px;
	font-size: 14.5px;
	color: var(--fg-3);
}

/* ---------- Prompt examples ---------- */

.PlatformPage .cl-prompt-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px;
}
.PlatformPage .cl-prompt-col {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.PlatformPage .cl-prompt-label {
	margin: 0 0 4px;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--primary);
}
.PlatformPage .cl-prompt {
	margin: 0;
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 14px;
	padding: 15px 18px;
	font-size: 15px;
	line-height: 1.55;
	color: var(--fg-1);
	box-shadow: var(--shadow-sm);
	transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.PlatformPage .cl-prompt:hover {
	border-color: rgba(193, 95, 60, 0.45);
	transform: translateY(-2px);
}

/* ---------- Feature rows + tool cards ---------- */

.PlatformPage .cl-feat-stack {
	display: flex;
	flex-direction: column;
	gap: clamp(64px, 9vh, 108px);
}
.PlatformPage .cl-feat-title {
	margin-top: 0;
}
.PlatformPage .cl-tools {
	max-width: 420px;
	margin: 0 auto;
	border: 1px solid var(--border);
	background: #fff;
}
.PlatformPage .cl-tools-head {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 14px 20px;
	border-bottom: 1px solid var(--border);
	background: #fbfbfd;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--fg-3);
}
.PlatformPage .cl-tools-head svg {
	color: var(--primary);
	flex: none;
}
.PlatformPage .cl-tools-list {
	list-style: none;
	margin: 0;
	padding: 10px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.PlatformPage .cl-tools-list li {
	padding: 11px 14px;
	border-radius: 10px;
	background: var(--bg-tint, #f5f4f2);
}
.PlatformPage .cl-tools-list code {
	font-size: 13.5px;
	display: block;
	text-align: left;
}

/* ---------- Security ---------- */

.PlatformPage .cl-sec-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
}
.PlatformPage .cl-sec-card {
	padding: 28px 26px;
	border-radius: var(--r-lg);
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.1);
}
.PlatformPage .cl-sec-icon {
	width: 40px;
	height: 40px;
	border-radius: 11px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(var(--wash), 0.18);
	color: var(--cl-sec-icon, #f0b494);
	margin-bottom: 16px;
}
.PlatformPage .cl-sec-title {
	margin: 0 0 9px;
	font-size: 17.5px;
	font-weight: 700;
	color: #fff;
}
.PlatformPage .cl-sec-body {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.66);
}

/* ---------- Setup steps ---------- */

.PlatformPage .cl-steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.PlatformPage .cl-step {
	position: relative;
	padding: 30px 28px;
	border-radius: var(--r-lg);
	background: #fff;
	border: 1px solid var(--border);
	box-shadow: var(--shadow-sm);
}
.PlatformPage .cl-step-n {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--primary);
	color: #fff;
	font-weight: 700;
	font-size: 15px;
	margin-bottom: 16px;
}
.PlatformPage .cl-step-title {
	margin: 0 0 9px;
	font-size: 18px;
	font-weight: 700;
	color: var(--fg-1);
}
.PlatformPage .cl-step-body {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--fg-2);
}
.PlatformPage .cl-setup-cta {
	margin-top: 38px;
}
.PlatformPage .cl-clients {
	margin-top: 48px;
	padding-top: 30px;
	border-top: 1px solid var(--border);
	text-align: center;
}
.PlatformPage .cl-clients-label {
	display: block;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--fg-3);
	margin-bottom: 16px;
}
.PlatformPage .cl-clients-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 22px;
	flex-wrap: wrap;
}
.PlatformPage .cl-client {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	color: var(--fg-2);
}
.PlatformPage .cl-client svg {
	color: var(--primary);
	flex: none;
}

/* ---------- Final CTA ---------- */

.PlatformPage .cl-final {
	background:
		radial-gradient(
			ellipse at 50% 0%,
			rgba(var(--wash), 0.14) 0%,
			rgba(var(--wash), 0) 62%
		),
		var(--bg-soft, #fbfaf9);
}
.PlatformPage .cl-final-title {
	max-width: 760px;
	margin: 0 auto;
}
.PlatformPage .cl-final-lead {
	margin-top: 20px;
	max-width: 600px;
}
.PlatformPage .cl-final-cta {
	margin-top: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	flex-wrap: wrap;
}

/* ══════════════════════════════════════════════════════════════════════════
   Sections merged in from the former /plugin page. The pl- rules below are
   that page's, re-scoped; the cl- rules here are the joins this page needed.
   ══════════════════════════════════════════════════════════════════════════ */

/* ---------- The Claude Code shortcuts, under the prompt columns ---------- */

.PlatformPage .cl-cmds {
	margin-top: 64px;
	padding-top: 48px;
	border-top: 1px solid var(--pl-line);
}
.PlatformPage .cl-cmds-head {
	margin-bottom: 4px;
}
.PlatformPage .cl-cmds-title {
	font-size: 20px;
	font-weight: 700;
	margin: 0 0 8px;
	color: var(--cl-ink);
}
.PlatformPage .cl-cmds-lead {
	margin: 0 auto;
	max-width: 560px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--pl-muted);
}

/* ---------- Approvals: the steps beside the phone they describe ---------- */

.PlatformPage .cl-appr-grid {
	display: grid;
	grid-template-columns: 1fr minmax(280px, 380px);
	gap: 56px;
	align-items: center;
	margin-top: 44px;
}
.PlatformPage .cl-appr-grid .pl-steps {
	margin-top: 0;
}

/* ---------- The hard limits, closing the (dark) security section ---------- */

.PlatformPage .cl-never {
	max-width: 860px;
	margin: 56px auto 0;
	padding-top: 40px;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	text-align: center;
}
.PlatformPage .cl-never-title {
	font-size: 20px;
	font-weight: 700;
	margin: 0 0 8px;
	color: #fff;
}
.PlatformPage .cl-never-lead {
	margin: 0 auto 28px;
	max-width: 600px;
	font-size: 15px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.72);
}
.PlatformPage .cl-never-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px 26px;
	text-align: start;
}
.PlatformPage .cl-never-list li {
	display: flex;
	gap: 11px;
	align-items: flex-start;
	font-size: 15px;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.9);
}
.PlatformPage .cl-never-list svg {
	color: #ef8a7c;
	flex: none;
	margin-top: 3px;
}

/* ---------- Setup: the two paths in, A and B ---------- */

.PlatformPage .cl-path + .cl-path {
	margin-top: 64px;
	padding-top: 56px;
	border-top: 1px solid var(--pl-line);
}
.PlatformPage .cl-path-head {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	max-width: 760px;
	margin: 44px auto 0;
}
.PlatformPage .cl-path-badge {
	flex: none;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	display: grid;
	place-items: center;
	font-weight: 800;
	font-size: 15px;
	color: #fff;
	background: var(--primary);
}
.PlatformPage .cl-path-badge-a {
	background: var(--primary);
}
.PlatformPage .cl-path-badge-b {
	background: #2b2320;
}
.PlatformPage .cl-path-title {
	font-size: 19px;
	font-weight: 700;
	margin: 3px 0 6px;
	color: var(--cl-ink);
}
.PlatformPage .cl-path-blurb {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--pl-muted);
}
.PlatformPage .cl-path .cl-steps {
	margin-top: 32px;
}

.PlatformPage .pl-cmd {
	display: inline-block;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 13px;
	background: #2b2320;
	color: #f6ece6;
	padding: 9px 14px;
	border-radius: 8px;
	direction: ltr;
	unicode-bidi: isolate;
}
/* ── The phone: one approval, with the action attached ──────────────────── */

.PlatformPage .pl-phone {
	background: #fff;
	border: 1px solid var(--pl-line);
	border-radius: 22px;
	box-shadow: 0 18px 50px rgba(31, 27, 24, 0.13);
	overflow: hidden;
	max-width: 380px;
	margin-inline: auto;
	width: 100%;
}
.PlatformPage .pl-phone-top {
	background: #075e54;
	color: #fff;
	font-size: 12.5px;
	font-weight: 600;
	padding: 13px 16px;
}
.PlatformPage .pl-phone-body {
	background: #ece5dd;
	padding: 16px;
}
.PlatformPage .pl-msg {
	background: #fff;
	border-radius: 10px 10px 10px 2px;
	padding: 12px 14px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.13);
}
.PlatformPage .pl-msg-from {
	font-size: 11.5px;
	font-weight: 700;
	color: var(--primary);
	margin-bottom: 6px;
}
.PlatformPage .pl-msg p {
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--pl-ink);
	margin: 0 0 8px;
}
.PlatformPage .pl-msg-btns {
	display: flex;
	gap: 8px;
	border-top: 1px solid #eee;
	padding-top: 10px;
	margin-top: 4px;
}
.PlatformPage .pl-msg-btn {
	flex: 1;
	text-align: center;
	font-size: 13px;
	font-weight: 600;
	color: #1d9bf0;
	padding: 7px;
	border-radius: 7px;
	background: #f7f9fa;
}
.PlatformPage .pl-msg-btn-yes {
	background: var(--primary);
	color: #fff;
}
.PlatformPage .pl-msg-result {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 600;
	color: #1a8a45;
	margin-top: 12px;
}
/* ── Before / after ─────────────────────────────────────────────────────── */

.PlatformPage .pl-shift {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin-top: 36px;
}
.PlatformPage .pl-shift-col {
	background: #fff;
	border: 1px solid var(--pl-line);
	border-radius: 16px;
	padding: 24px;
}
.PlatformPage .pl-shift-after {
	border-color: #e6c3ae;
	box-shadow: 0 10px 30px rgba(193, 95, 60, 0.09);
}
.PlatformPage .pl-shift-label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--pl-muted);
	margin-bottom: 14px;
}
.PlatformPage .pl-shift-after .pl-shift-label {
	color: var(--primary);
}
.PlatformPage .pl-shift-col ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 12px;
}
.PlatformPage .pl-shift-col li {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-size: 14.5px;
	line-height: 1.55;
}
.PlatformPage .pl-shift-before svg {
	color: #b9aca4;
	flex: none;
	margin-top: 4px;
}
.PlatformPage .pl-shift-after svg {
	color: var(--pl-green);
	flex: none;
	margin-top: 4px;
}
.PlatformPage .pl-shift-before li span {
	color: var(--pl-muted);
}
/* ── The three tiers ────────────────────────────────────────────────────── */

.PlatformPage .pl-tiers {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-top: 36px;
}
.PlatformPage .pl-tier {
	background: #fff;
	border: 1px solid var(--pl-line);
	border-radius: 16px;
	padding: 24px;
}
.PlatformPage .pl-tier h3 {
	font-size: 17px;
	margin: 0 0 8px;
}
.PlatformPage .pl-tier > p {
	color: var(--pl-muted);
	font-size: 14.5px;
	margin: 0 0 16px;
}
.PlatformPage .pl-tier ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 9px;
	border-top: 1px solid var(--pl-line);
	padding-top: 16px;
}
.PlatformPage .pl-tier li {
	font-size: 14px;
	line-height: 1.5;
	padding-inline-start: 16px;
	position: relative;
}
.PlatformPage .pl-tier li::before {
	content: '';
	position: absolute;
	inset-inline-start: 0;
	top: 8px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.35;
}
.PlatformPage .pl-tier-head {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;
}
.PlatformPage .pl-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	flex: none;
}
.PlatformPage .pl-tier-label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.PlatformPage .pl-tier-green .pl-dot { background: var(--pl-green); }
.PlatformPage .pl-tier-green .pl-tier-label { color: var(--pl-green); }
.PlatformPage .pl-tier-green { background: #f6fbf7; border-color: #d6ecdd; }
.PlatformPage .pl-tier-amber .pl-dot { background: var(--pl-amber); }
.PlatformPage .pl-tier-amber .pl-tier-label { color: var(--pl-amber); }
.PlatformPage .pl-tier-amber { background: #fffbf4; border-color: #f0e2c8; }
.PlatformPage .pl-tier-red .pl-dot { background: var(--pl-red); }
.PlatformPage .pl-tier-red .pl-tier-label { color: var(--pl-red); }
.PlatformPage .pl-tier-red { background: #fdf6f5; border-color: #f2d9d5; }
.PlatformPage .pl-note {
	max-width: 720px;
	margin: 28px auto 0;
	text-align: center;
	font-size: 15px;
	line-height: 1.6;
	color: var(--pl-muted);
}
/* ── Numbered steps ─────────────────────────────────────────────────────── */

.PlatformPage .pl-steps {
	list-style: none;
	counter-reset: none;
	padding: 0;
	margin: 36px auto 0;
	max-width: 800px;
	display: grid;
	gap: 20px;
}
.PlatformPage .pl-steps li {
	display: flex;
	gap: 18px;
	align-items: flex-start;
}
.PlatformPage .pl-step-n {
	flex: none;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-weight: 700;
	font-size: 15px;
	background: var(--primary);
	color: #fff;
}
.PlatformPage .pl-steps h3 {
	font-size: 17px;
	margin: 4px 0 6px;
}
.PlatformPage .pl-steps p {
	margin: 0;
	line-height: 1.6;
	opacity: 0.85;
}
.PlatformPage .pl-steps .pl-cmd {
	margin-top: 10px;
}
/* The same steps on a white section rather than the dark one: opacity alone
   reads as washed-out ink on white, so the muted colour is set explicitly. */
.PlatformPage .pl-steps-light p {
	color: var(--pl-muted);
	opacity: 1;
}
/* ── Command list ───────────────────────────────────────────────────────── */

.PlatformPage .pl-cmd-list {
	list-style: none;
	padding: 0;
	margin: 36px auto 0;
	max-width: 860px;
	display: grid;
	gap: 2px;
	border: 1px solid var(--pl-line);
	border-radius: 14px;
	overflow: hidden;
	background: var(--pl-line);
}
.PlatformPage .pl-cmd-list li {
	display: grid;
	grid-template-columns: 190px 1fr;
	gap: 16px;
	align-items: baseline;
	background: #fff;
	padding: 15px 20px;
}
.PlatformPage .pl-cmd-list code {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--primary);
	direction: ltr;
	unicode-bidi: isolate;
}
.PlatformPage .pl-cmd-list span {
	font-size: 14.5px;
	line-height: 1.55;
	color: #4a423d;
}
/* ── Cards ──────────────────────────────────────────────────────────────── */

.PlatformPage .pl-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-top: 36px;
}
.PlatformPage .pl-card {
	background: #fff;
	border: 1px solid var(--pl-line);
	border-radius: 16px;
	padding: 24px;
}
.PlatformPage .pl-card h3 {
	font-size: 16.5px;
	margin: 0 0 8px;
}
.PlatformPage .pl-card p {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--pl-muted);
}
/* ── Optional steps ─────────────────────────────────────────────────────── */

.PlatformPage .pl-optional {
	max-width: 800px;
	margin: 32px auto 0;
	background: var(--primary-light);
	border-radius: 14px;
	padding: 22px 26px;
}
.PlatformPage .pl-optional h3 {
	font-size: 15.5px;
	margin: 0 0 12px;
	color: #8f3f24;
}
.PlatformPage .pl-optional ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.PlatformPage .pl-optional li {
	font-size: 13.5px;
	background: #fff;
	border-radius: 999px;
	padding: 6px 14px;
	color: #6b4636;
}

/* ---------- Responsive ---------- */

@media (max-width: 1000px) {
	.PlatformPage .cl-conn-grid,
	.PlatformPage .cl-prompt-grid,
	.PlatformPage .cl-sec-grid,
	.PlatformPage .cl-steps {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 860px) {
	.PlatformPage .cl-appr-grid,
	.PlatformPage .pl-shift,
	.PlatformPage .pl-tiers,
	.PlatformPage .pl-cards,
	.PlatformPage .cl-never-list {
		grid-template-columns: 1fr;
	}
	.PlatformPage .pl-phone {
		max-width: 340px;
		margin-inline: auto;
	}
	.PlatformPage .pl-cmd-list li {
		grid-template-columns: 1fr;
		gap: 6px;
	}
	.PlatformPage .cl-hero-grid {
		grid-template-columns: 1fr;
		gap: 44px;
	}
	.PlatformPage .cl-chat {
		max-width: 100%;
		margin-inline-start: 0;
	}
	.PlatformPage .cl-feat-row {
		grid-template-columns: 1fr;
		gap: 36px;
	}
	/* Keep the text above its tool card on every row, flipped or not. */
	.PlatformPage .cl-feat-row.rev .feat-text {
		order: 0;
	}
	.PlatformPage .cl-tools {
		margin-inline: 0;
	}
}

@media (max-width: 640px) {
	.PlatformPage .cl-conn-grid,
	.PlatformPage .cl-prompt-grid,
	.PlatformPage .cl-sec-grid,
	.PlatformPage .cl-steps {
		grid-template-columns: 1fr;
	}
	.PlatformPage .cl-clients-row {
		gap: 14px;
	}
}

/* ══════════════════════════════════════════════════════════════════════════
   /chatgpt — the same page, OpenAI's accent.

   Graphite rather than a green primary: OpenAI's own green (#10a37f) is within
   a shade of the Sales page's (#0ea371), and two product pages that look like
   each other is worse than one that looks like nobody. Black is unclaimed in
   our set (Agents=purple, Sales=green, Helpdesk=blue, Marketing=coral,
   CRM=teal, /claude=terracotta) and reads as OpenAI on sight. The green
   survives where it is unmistakable and cannot collide: the headline gradient.
   ══════════════════════════════════════════════════════════════════════════ */

.PlatformPage.is-chatgpt {
	--primary: #1c1c1c;
	--primary-hover: #000000;
	--primary-light: #eef2f1;
	--cta: #1c1c1c;
	--cta-hover: #000000;
	--hero-gradient: linear-gradient(118deg, #10a37f 0%, #17806a 52%, #10221e 100%);
	--cl-ink: #16181a;
	--cl-code: #2f3b38;
	--wash: 16, 163, 127;
	--cl-sec-icon: #7fd9bf;
}

.PlatformPage.is-chatgpt .cl-never-list svg {
	color: #7fd9bf;
}

.PlatformPage.is-chatgpt .btn-primary {
	box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.45);
}
.PlatformPage.is-chatgpt .btn-primary:hover {
	box-shadow: 0 14px 28px -10px rgba(0, 0, 0, 0.4);
}

/* The step and path badges are solid --primary, which is near-black here; the
   hero pill and the connector badges need the green so the page is not a wall
   of grey. */
.PlatformPage.is-chatgpt .pill-new,
.PlatformPage.is-chatgpt .cl-conn-badge {
	background: #10a37f;
}
.PlatformPage.is-chatgpt .eyebrow,
.PlatformPage.is-chatgpt .cl-prompt-label {
	color: #0f7d64;
}
.PlatformPage.is-chatgpt .reassure svg,
.PlatformPage.is-chatgpt .ck svg,
.PlatformPage.is-chatgpt .cl-conn-url code,
.PlatformPage.is-chatgpt .pl-cmd-list code {
	color: #0f7d64;
}
.PlatformPage.is-chatgpt .cl-optional h3,
.PlatformPage.is-chatgpt .pl-optional h3 {
	color: #0f7d64;
}