/*
Theme Name: Orbit
Theme URI: https://orbit.devotel.io
Author: Devotel
Author URI: https://devotel.com
Description: Orbit landing-page theme. Content is editable via ACF Pro (Theme Settings + page fields).
Version: 1.0.0
Requires at least: 6.2
Requires PHP: 8.0
Text Domain: orbit
Update URI: https://orbit.devotel.io
*/

/* -------------------------------------------------------------------------
   Design tokens
   Source of truth: Figma file p3WnusZf5AbFXCnDlpazsp, node 1:60
   ("Orbit"), 1440 × 15089. Values pulled from get_design_context.
   ---------------------------------------------------------------------- */
:root {
	--orbit-black: #0b0a0b;
	--orbit-white: #ffffff;
	--orbit-brand: #325fec;
	--orbit-brand-solid: #2f6fed;
	--orbit-text: #ededee;
	--orbit-font: "Geist", system-ui, sans-serif;
	--orbit-mono: "Geist Mono", ui-monospace, monospace;
	--orbit-header-pad-inline: clamp(16px, calc((100vw - 375px) * 0.1164 + 16px), 140px);
	--orbit-nav-gap: clamp(12px, 1.944vw, 28px);
	--orbit-header-height: 68px;
	--orbit-page: 1440;
	--orbit-s: calc(100vw / var(--orbit-page));
	--orbit-z: calc(min(100vw, 1440px) / 1440px);
	--orbit-light-blue: #316bff;
	--orbit-light-mid: #1a49c2;
	--orbit-light-deep: #0e39a4;
	--orbit-light-navy: #032886;
	--orbit-glow-blue: rgb(50, 95, 236);
	--orbit-glow-blue-fade: rgba(59, 117, 246, 0.75);
	--orbit-glow-pink: rgba(241, 55, 129, 0.438);
	--orbit-frame-stroke: rgba(255, 255, 255, 0.1);
	--orbit-chat-hang: calc(min(1241px, 100vw - 32px) * 202 / 1241);
	--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
	--ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
	--ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	overflow-x: clip;
	scroll-padding-top: calc(var(--orbit-header-height) + 12px);
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

::selection {
	background: rgba(50, 95, 236, 0.35);
	color: var(--orbit-white);
}

a,
button {
	-webkit-tap-highlight-color: transparent;
}

.orbit-skip {
	position: absolute;
	left: 12px;
	top: 12px;
	z-index: 400;
	padding: 10px 14px;
	border-radius: 99px;
	background: var(--orbit-brand);
	color: var(--orbit-white);
	font-weight: 500;
	font-size: 14px;
	line-height: 1;
	transform: translateY(-160%);
}

.orbit-skip:focus {
	transform: none;
}

body {
	position: relative;
	margin: 0;
	min-height: 100vh;
	overflow-x: clip;
	background: var(--orbit-black);
	color: var(--orbit-white);
	font-family: var(--orbit-font);
}

/* Full-width sections with content constrained by inner frames */
section,
main,
.page-default {
	width: 100%;
	display: block;
}

img {
	max-width: 100%;
	height: auto;
}

a {
	color: inherit;
	text-decoration: none;
}

/* -------------------------------------------------------------------------
   Header — Figma 1:81, 1440 × 68
   padding 140 × 16, nav gap 28, buttons 36 tall / radius 99
   Geist Regular 14 / 21.7 / -0.07px (nav), Medium 14 (buttons)
   ---------------------------------------------------------------------- */
.price__dots {
	display: none;
}

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: transparent;
	transition: background-color 220ms var(--ease-out);
	width: 100%;
}

.site-header::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: rgba(255, 255, 255, 0.08);
	opacity: 0;
	pointer-events: none;
	transition: opacity 220ms var(--ease-out);
}

.site-header.is-stuck {
	background-color: var(--orbit-black);
}

.site-header.is-stuck::after {
	opacity: 1;
}

.site-header--static {
	position: relative;
	top: auto;
}

.site-header__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 68px;
	padding: 16px var(--orbit-header-pad-inline);
	gap: 16px;
	max-width: 1440px;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
}

.site-header__logo {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	line-height: 0;
}

.site-header__logo-img {
	display: block;
	width: 118px;
	height: 32px;
	object-fit: contain;
}

.site-header__nav {
	display: flex;
	align-items: center;
	gap: var(--orbit-nav-gap);
	font-family: var(--orbit-font);
	font-weight: 400;
	font-size: clamp(12px, 0.972vw, 14px);
	line-height: 21.7px;
	letter-spacing: -0.07px;
	color: var(--orbit-white);
	white-space: nowrap;
}

.site-header__nav a {
	display: inline-flex;
	align-items: center;
	height: 28px;
	padding: 0 10px;
	margin-inline: -10px;
	border-radius: 99px;
}

/*
 * "Platform" mega-menu — <details>/<summary> so open/close works with
 * zero JS (a tiny outside-click script just closes it early).
 */
.site-header__dropdown {
	position: relative;
}

.site-header__dropdown-trigger {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	height: 28px;
	padding: 0 10px;
	margin-inline: -10px;
	border-radius: 99px;
	cursor: pointer;
	list-style: none;
}

.site-header__dropdown-trigger::-webkit-details-marker {
	display: none;
}

.site-header__dropdown-chevron {
	width: 10px;
	height: 7px;
	flex-shrink: 0;
	transition: transform 150ms ease-out;
}

.site-header__dropdown[open] > .site-header__dropdown-chevron,
.site-header__dropdown[open] .site-header__dropdown-trigger .site-header__dropdown-chevron {
	transform: rotate(180deg);
}

.site-header__dropdown-panel {
	position: absolute;
	top: calc(100% + 12px);
	left: 0;
	z-index: 40;
	width: 340px;
	max-height: 70vh;
	overflow-y: auto;
	padding: 8px;
	border-radius: 16px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	background: #0c0c0e;
	box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
	scrollbar-color: #3f3f46 #0c0c0e;
	scrollbar-width: thin;
}

.site-header__dropdown-panel::-webkit-scrollbar {
	width: 8px;
}

.site-header__dropdown-panel::-webkit-scrollbar-track {
	background: #0c0c0e;
	border-radius: 16px;
}

.site-header__dropdown-panel::-webkit-scrollbar-thumb {
	background: #3f3f46;
	border-radius: 8px;
}

.site-header__dropdown-panel::-webkit-scrollbar-thumb:hover {
	background: #52525b;
}

.site-header__dropdown-panel .site-header__dropdown-item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	height: auto;
	gap: 2px;
	padding: 10px 12px;
	margin-inline: 0;
	border-radius: 10px;
	color: var(--orbit-white);
	white-space: normal;
}

.site-header__dropdown-item:hover,
.site-header__dropdown-item:focus-visible {
	background: rgba(47, 111, 237, 0.16);
}

.site-header__dropdown-item-title {
	font-size: 13.5px;
	font-weight: 500;
	color: #f3f4f6;
}

.site-header__dropdown-item-body {
	font-size: 12px;
	font-weight: 400;
	color: #9ca3af;
	line-height: 1.4;
}

.site-header__actions {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}

.site-header__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 36px;
	border-radius: 99px;
	font-family: var(--orbit-font);
	font-weight: 500;
	font-size: 14px;
	line-height: normal;
	letter-spacing: -0.07px;
	color: var(--orbit-white);
	white-space: nowrap;
	cursor: pointer;
}

.site-header__btn--ghost {
	border: 1px solid var(--orbit-white);
	background: transparent;
	padding: 0 15px;
}

.site-header__btn--solid {
	border: 0;
	background: var(--orbit-brand);
	padding: 0 14px;
}

.site-header__menu-toggle {
	display: none;
	position: relative;
	width: 36px;
	height: 36px;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 1px solid var(--orbit-white);
	border-radius: 99px;
	background: transparent;
	color: var(--orbit-white);
	cursor: pointer;
}

.site-header__menu-icon,
.site-header__menu-icon::before,
.site-header__menu-icon::after {
	display: block;
	width: 14px;
	height: 1.5px;
	background: var(--orbit-white);
	border-radius: 1px;
	transition:
		transform 200ms var(--ease-out),
		top 200ms var(--ease-out),
		background-color 200ms var(--ease-out);
}

.site-header__menu-icon {
	margin: 0 auto;
	position: relative;
}

.site-header__menu-icon::before,
.site-header__menu-icon::after {
	content: "";
	position: absolute;
	left: 0;
}

.site-header__menu-icon::before {
	top: -5px;
}

.site-header__menu-icon::after {
	top: 5px;
}

.site-header__menu-toggle[aria-expanded="true"] .site-header__menu-icon {
	background: transparent;
}

.site-header__menu-toggle[aria-expanded="true"] .site-header__menu-icon::before {
	top: 0;
	transform: rotate(45deg);
}

.site-header__menu-toggle[aria-expanded="true"] .site-header__menu-icon::after {
	top: 0;
	transform: rotate(-45deg);
}

.mobile-menu-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 150;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition:
		opacity 280ms var(--ease-out),
		visibility 0ms 280ms;
}

.mobile-menu-backdrop.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition:
		opacity 280ms var(--ease-out),
		visibility 0ms;
}

.mobile-menu-panel {
	display: none;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(320px, 85vw);
	background: var(--orbit-black);
	border-left: 1px solid rgba(255, 255, 255, 0.08);
	z-index: 151;
	flex-direction: column;
	overflow-y: auto;
	transform: translateX(100%);
	visibility: hidden;
	pointer-events: none;
	transition:
		transform 360ms var(--ease-drawer),
		opacity 280ms var(--ease-out),
		visibility 0ms 360ms;
}

.mobile-menu-panel.is-open {
	transform: translateX(0);
	visibility: visible;
	pointer-events: auto;
	transition:
		transform 360ms var(--ease-drawer),
		opacity 280ms var(--ease-out),
		visibility 0ms;
}

.mobile-menu-panel__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 20px 16px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.mobile-menu-panel__title {
	font-weight: 500;
	font-size: 16px;
	color: var(--orbit-white);
}

.mobile-menu-panel__close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-right: -12px;
	background: none;
	border: none;
	font-size: 28px;
	line-height: 1;
	color: var(--orbit-white);
	cursor: pointer;
}

.mobile-menu-panel__nav {
	display: flex;
	flex-direction: column;
	padding: 8px 12px;
}

.mobile-menu-panel__nav a {
	display: flex;
	align-items: center;
	min-height: 48px;
	padding: 0 8px;
	font-weight: 400;
	font-size: 16px;
	letter-spacing: -0.07px;
	color: var(--orbit-white);
}

.mobile-menu-panel__dropdown .site-header__dropdown-trigger {
	min-height: 48px;
	padding: 0 8px;
	font-weight: 400;
	font-size: 16px;
	letter-spacing: -0.07px;
	color: var(--orbit-white);
}

.mobile-menu-panel__dropdown-panel {
	display: flex;
	flex-direction: column;
	padding: 4px 0 8px 8px;
}

.mobile-menu-panel__dropdown-panel .site-header__dropdown-item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-height: auto;
	padding: 8px;
}

.mobile-menu-panel__signin {
	margin-top: 12px;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.mobile-menu-panel__cta {
	padding: 16px 20px 24px;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.mobile-menu-panel__cta-btn {
	width: 100%;
	min-height: 48px;
}

html.mobile-menu-lock,
body.mobile-menu-lock {
	overflow: hidden;
}

@media (max-width: 900px) {
	html {
		scroll-padding-top: calc(64px + env(safe-area-inset-top, 0px) + 8px);
	}

	.site-header__nav,
	.site-header__actions {
		display: none;
	}

	.site-header__bar {
		min-height: 64px;
		padding-top: max(10px, env(safe-area-inset-top, 0px));
		padding-bottom: 10px;
		padding-left: max(16px, env(safe-area-inset-left, 0px));
		padding-right: max(16px, env(safe-area-inset-right, 0px));
	}

	.site-header__logo {
		min-width: 44px;
		min-height: 44px;
	}

	.site-header__menu-toggle {
		display: flex;
		width: 44px;
		height: 44px;
	}

	.mobile-menu-panel {
		display: flex;
		padding-top: env(safe-area-inset-top, 0px);
		padding-bottom: env(safe-area-inset-bottom, 0px);
	}
}

.page-default {
	padding: 64px var(--orbit-header-pad-inline);
}

/* -------------------------------------------------------------------------
   Hero — Figma 45:5 / 1:6559 / 19:704 / 1:64 / 1:77
   Copy y=172–554, tabs y=598–650, dashboard 1180×664 at y=681
   ---------------------------------------------------------------------- */
.orbit-light {
	position: absolute;
	top: calc(-347 * var(--orbit-s));
	left: 50%;
	z-index: 0;
	width: calc(1442 * var(--orbit-s));
	height: calc(831 * var(--orbit-s));
	transform: translateX(-50%);
	pointer-events: none;
	background:
		radial-gradient(
			ellipse calc(721 * var(--orbit-s)) calc(666 * var(--orbit-s)) at 50% 0%,
			var(--orbit-light-blue) 0%,
			var(--orbit-light-blue) 8%,
			var(--orbit-light-mid) 22%,
			var(--orbit-light-deep) 32%,
			var(--orbit-light-navy) 42%,
			var(--orbit-light-navy) 55%,
			rgba(7, 35, 107, 0.78) 68%,
			rgba(11, 31, 80, 0.45) 82%,
			rgba(0, 0, 0, 0) 100%
		);
}

.hero {
	position: relative;
	isolation: isolate;
	z-index: 1;
	padding-top: clamp(48px, calc((100vw - 375px) * 0.0526 + 48px), 104px);
	padding-bottom: clamp(48px, 5.56vw, 80px);
	overflow: visible;
	width: 100%;
}

.hero__copy {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	width: min(868px, calc(100% - 32px));
	margin-inline: auto;
	text-align: center;
}

.hero__announce {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 4px 5px;
	border: 1px solid rgba(255, 255, 255, 0.05);
	border-radius: 9999px;
	background: rgba(255, 255, 255, 0.1);
	color: var(--orbit-white);
	font-weight: 500;
	font-size: 14px;
	line-height: normal;
	white-space: nowrap;
	max-width: 100%;
}

.hero__announce-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 2px 5px;
	border-radius: 16px;
	background: #007bff;
	color: #f9fafb;
	font-weight: 500;
	font-size: 12px;
	line-height: normal;
}

.hero__announce-text {
	overflow: hidden;
	text-overflow: ellipsis;
}

.hero__announce-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 29px;
	height: 20px;
	flex-shrink: 0;
	border-radius: 9999px;
	background: rgba(255, 255, 255, 0.05);
}

.hero__announce-arrow-img {
	display: block;
	width: 11px;
	height: 9px;
	object-fit: contain;
}

.hero__headline {
	margin: 0;
	max-width: 868px;
	color: var(--orbit-text);
	font-weight: 500;
	font-size: clamp(32px, calc((100vw - 375px) * 0.0225 + 32px), 56px);
	line-height: 1.071;
	letter-spacing: clamp(-2.56px, -0.178vw, -1.2px);
}

.hero__body {
	margin: 0;
	max-width: 600px;
	color: var(--orbit-white);
	font-weight: 400;
	font-size: clamp(16px, 1.25vw, 18px);
	line-height: normal;
	letter-spacing: -0.07px;
}

.hero__ctas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 24px;
}

.hero__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 133px;
	height: 38px;
	padding: 0 15px;
	border-radius: 99px;
	font-weight: 600;
	font-size: 14px;
	line-height: 21.7px;
	letter-spacing: -0.07px;
	color: var(--orbit-white);
	white-space: nowrap;
	cursor: pointer;
}

.hero__cta--ghost {
	border: 1px solid #d1d5db;
	background: transparent;
}

.hero__cta--solid {
	border: 1px solid transparent;
	background: var(--orbit-brand-solid);
}

.hero__tabs-wrap {
	width: min(1184px, calc(100% - 32px));
	margin: clamp(28px, 3.06vw, 44px) auto 0;
}

.hero__tabs {
	display: flex;
	align-items: center;
	overflow-x: auto;
	padding: 6px 16px;
	border-radius: 99px;
	background: rgba(255, 255, 255, 0.05);
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	scroll-snap-type: x proximity;
	overscroll-behavior-x: contain;
}

.hero__tabs::-webkit-scrollbar {
	display: none;
}

.hero__tab {
	flex: 0 0 auto;
	width: 130px;
	padding: 10px 6px;
	border: 0;
	border-radius: 99px;
	background: transparent;
	color: var(--orbit-white);
	font-family: inherit;
	font-weight: 500;
	font-size: clamp(13px, 1.11vw, 16px);
	line-height: normal;
	letter-spacing: -0.07px;
	white-space: nowrap;
	cursor: pointer;
	scroll-snap-align: center;
}

.hero__tab.is-active {
	background: rgba(255, 255, 255, 0.2);
}

.hero__stage {
	position: relative;
	width: min(1180px, calc(100% - 32px));
	margin: clamp(20px, 2.15vw, 31px) auto 0;
	overflow: visible;
}

.hero__glow {
	position: absolute;
	z-index: 0;
	top: -17px;
	right: -18px;
	bottom: -17px;
	left: -18px;
	border-radius: 6px 6px 12px 12px;
	filter: blur(55px);
	pointer-events: none;
}

.hero__glow--blue {
	background: linear-gradient(107.66deg, var(--orbit-glow-blue) 0%, var(--orbit-glow-blue-fade) 100%);
}

.hero__glow--color {
	background: linear-gradient(107.66deg, rgba(50, 95, 236, 0.5) 0%, var(--orbit-glow-pink) 62.203%, rgba(59, 117, 246, 0.375) 100%);
}

.hero__frame {
	position: relative;
	z-index: 1;
	max-width: 1440px;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
}

.hero__frame[hidden] {
	display: none;
}

.hero__preview {
	position: relative;
	z-index: 1;
	aspect-ratio: 1180 / 664;
	/* Figma stroke: #FFFFFF 10%, weight 13px, position Outside — box-shadow
	   (not border) so the stroke sits outside the box without shrinking it
	   and still follows the 32px corner radius exactly. */
	box-shadow: 0 0 0 13px var(--orbit-frame-stroke);
	border-radius: 32px;
	overflow: hidden;
	background: #f3f4f6;
}

.hero__preview-img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: top left;
	border-radius: inherit;
}

@media (max-width: 900px) {
	.hero {
		padding-top: 72px;
		padding-bottom: 40px;
		overflow: clip;
	}

	/* Desktop light uses full 1440 artboard math — tighten for phone. */
	.hero .orbit-light {
		top: -18%;
		width: 160%;
		height: 62%;
		opacity: 0.9;
		background:
			radial-gradient(
				ellipse 55% 70% at 50% 0%,
				rgba(49, 107, 255, 0.72) 0%,
				rgba(26, 73, 194, 0.45) 28%,
				rgba(14, 57, 164, 0.22) 48%,
				rgba(3, 40, 134, 0.08) 68%,
				transparent 100%
			);
	}

	.hero__glow {
		filter: blur(36px);
		opacity: 0.75;
	}

	.hero__copy {
		width: min(868px, calc(100% - 40px));
		gap: 14px;
	}

	.hero__announce {
		align-self: center;
		width: fit-content;
		max-width: 100%;
		justify-content: center;
		flex-wrap: wrap;
		row-gap: 4px;
		padding: 5px 8px 5px 5px;
		font-size: 12px;
		line-height: 1.35;
		white-space: normal;
		text-align: center;
	}

	.hero__announce-badge {
		flex-shrink: 0;
	}

	.hero__announce-text {
		overflow: visible;
		text-overflow: unset;
		flex: 0 1 auto;
		min-width: 0;
		max-width: 16em;
		text-align: left;
	}

	.hero__announce-arrow {
		width: 24px;
		height: 18px;
	}

	.hero__headline {
		font-size: clamp(28px, 7.2vw, 36px);
		line-height: 1.15;
		letter-spacing: -0.04em;
	}

	.hero__body {
		max-width: 34em;
		font-size: 16px;
		line-height: 1.45;
		opacity: 0.92;
	}

	.hero__ctas {
		margin-top: 8px;
		gap: 10px;
	}

	.hero__cta {
		width: auto;
		min-width: 133px;
		height: 44px;
		padding: 0 18px;
	}

	.hero__tab {
		min-height: 44px;
	}

	.hero__tabs {
		padding-inline: 10px 20px;
	}
}

@media (max-width: 768px) {
	.hero__announce {
		white-space: normal;
	}

	.hero__tab {
		width: auto;
		min-width: 110px;
		padding-inline: 12px;
	}

	.hero__preview {
		border-radius: 20px;
	}

	.hero__preview-img {
		border-radius: 20px;
	}
}

@media (max-width: 375px) {
	.hero__preview,
	.hero__preview-img {
		border-radius: 16px;
	}
}

/* -------------------------------------------------------------------------
   Why Orbit — Figma 1:103, 1280 × 255 at (80, 1433)
   4 columns, 30px gap, 297.5 wide, border-top #bbb, pt 33 / pb 10
   Title Geist Medium 20 / 26 / −0.4px, body Regular 16 / 24
   ---------------------------------------------------------------------- */
.why-orbit {
	width: min(1440px, calc(100% - 32px));
	margin: clamp(48px, 6.11vw, 88px) auto 0;
	padding-bottom: clamp(24px, 3.47vw, 50px);
	max-width: 1440px;
	margin-left: auto;
	margin-right: auto;
}

.why-orbit__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(16px, 2.08vw, 30px);
	align-items: start;
}

.why-orbit__item {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding-top: 33px;
	padding-bottom: 10px;
	border-top: 1px solid #bbbbbb;
}

.why-orbit__head {
	display: flex;
	align-items: center;
	gap: 8px;
}

.why-orbit__icon {
	display: flex;
	flex-shrink: 0;
	width: 21px;
	height: 21px;
}

.why-orbit__icon-img {
	display: block;
	width: 21px;
	height: 21px;
}

.why-orbit__title {
	margin: 0;
	color: var(--orbit-white);
	font-weight: 500;
	font-size: clamp(17px, 1.39vw, 20px);
	line-height: 1.3;
	letter-spacing: -0.4px;
}

.why-orbit__body {
	margin: 0;
	color: var(--orbit-white);
	font-weight: 400;
	font-size: clamp(14px, 1.11vw, 16px);
	line-height: 1.5;
}

@media (max-width: 1024px) {
	.why-orbit__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.why-orbit__grid {
		grid-template-columns: 1fr;
	}
}

/* -------------------------------------------------------------------------
   Compliance — Figma 48:10, 1440 × 574 at y=1796
   bg #f8f9fb, pad 100 × 120, tiles 95 × 100 r16, logos 65
   ---------------------------------------------------------------------- */
.compliance {
	background: #f8f9fb;
	padding: clamp(64px, 8.33vw, 120px) clamp(16px, 6.94vw, 100px);
	border: 0;
	box-shadow: none;
	width: 100%;
}

.compliance__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
	max-width: 1240px;
	margin-inline: auto;
}

.compliance__copy {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	width: min(650px, 100%);
	text-align: center;
}

.compliance__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: #6b7280;
	font-weight: 500;
	font-size: 11px;
	line-height: 17.05px;
	letter-spacing: 1.76px;
	text-transform: uppercase;
}

.compliance__dot {
	width: 6px;
	height: 6px;
	border-radius: 3px;
	--orbit-pulse: #2f6fed;
}

.compliance__headline {
	margin: 0;
	color: #111318;
	font-weight: 500;
	font-size: clamp(24px, 2.36vw, 34px);
	line-height: 1.174;
	letter-spacing: -1.33px;
}

.compliance__badges {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: center;
	gap: clamp(16px, 2.22vw, 32px);
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
}

.compliance__badge {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	width: 95px;
}

.compliance__tile {
	width: 95px;
	height: 100px;
	border-radius: 16px;
	overflow: hidden;
	background:
		linear-gradient(180deg, rgb(121, 159, 240) 0%, rgb(226, 236, 249) 100%),
		#ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
}

.compliance__mark {
	display: block;
	width: 65px;
	height: 65px;
	object-fit: contain;
}

.compliance__label {
	margin: 0;
	width: 100%;
	color: #1f2937;
	font-weight: 500;
	font-size: 16px;
	line-height: normal;
	text-align: center;
}

.compliance__footer {
	margin: 0;
	color: #1f2937;
	font-weight: 400;
	font-size: clamp(14px, 1.11vw, 16px);
	line-height: normal;
	text-align: center;
}

@media (max-width: 900px) {
	.compliance {
		padding-bottom: 40px;
	}

	.channels-grid {
		padding-top: 40px;
		margin-top: -1px;
	}
}

/* -------------------------------------------------------------------------
   Channels + SwiftShop — Figma 1:5744 (y=2370) + 1:6183 (y=3022)
   Cards 148 × 144, r24, gap 16. Chat 1241 × 619, r32.
   ---------------------------------------------------------------------- */
.channels-grid {
	background: #f8f9fb;
	overflow: visible;
	padding: clamp(64px, 7.08vw, 102px) clamp(16px, 6.94vw, 100px) 0;
	border: 0;
	box-shadow: none;
	width: 100%;
}

.channels-grid__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(40px, 4.58vw, 66px);
	max-width: 1242px;
	margin-inline: auto;
}

.channels-grid__copy {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	width: min(736px, 100%);
	text-align: center;
}

.channels-grid__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: #76767d;
	font-weight: 500;
	font-size: 11px;
	line-height: 17.05px;
	letter-spacing: 1.76px;
	text-transform: uppercase;
}

.channels-grid__dot {
	width: 6px;
	height: 6px;
	border-radius: 3px;
	--orbit-pulse: #3a7dff;
}

.channels-grid__headline {
	margin: 0;
	color: #111318;
	font-weight: 500;
	font-size: clamp(24px, 2.36vw, 34px);
	line-height: 1.174;
	letter-spacing: -1.33px;
}

.channels-grid__body {
	margin: 0;
	max-width: 658px;
	color: #3f4652;
	font-weight: 400;
	font-size: clamp(16px, 1.32vw, 19px);
	line-height: 1.5;
	letter-spacing: -0.07px;
}

.channels-grid__cards {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 148px));
	justify-content: center;
	gap: 16px;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.channels-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 28px 18px;
	border-radius: 24px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 8px 12px rgba(0, 0, 0, 0.03);
}

.channels-card__well {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	padding: 6.667px;
	border-radius: 16px;
	overflow: hidden;
	background: rgba(50, 95, 236, 0.1);
}

.channels-card__well--full {
	padding: 0;
	background: transparent;
}

.channels-card__mark {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42.667px;
	height: 42.667px;
	border-radius: 11.2px;
	overflow: hidden;
}

.channels-card__mark--gradient {
	background: linear-gradient(to top, #0cbd2a 6.638%, #5bf675 87.59%);
}

.channels-card__mark--brand {
	background: #325fec;
}

.channels-card__mark--white {
	background: #fff;
}

.channels-card__icon {
	display: block;
	width: 42.667px;
	height: 42.667px;
	object-fit: contain;
}

.channels-card__well--full .channels-card__icon {
	width: 56px;
	height: 56px;
}

.channels-card__icon--glyph {
	width: 28px;
	height: 28px;
}

.channels-card__label {
	margin: 0;
	color: #111318;
	font-weight: 500;
	font-size: clamp(14px, 1.25vw, 18px);
	line-height: normal;
	letter-spacing: -0.07px;
	text-align: center;
	white-space: nowrap;
}

.channels-card__label--tight {
	letter-spacing: -1px;
}

.channels-chat {
	position: relative;
	z-index: 2;
	width: min(1241px, 100%);
	aspect-ratio: 1241 / 619;
	margin: 0 0 calc(-1 * var(--orbit-chat-hang));
	border-radius: 32px;
	overflow: hidden;
}

.channels-chat__photo {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.channels-chat__photo-img {
	position: absolute;
	width: 120.47%;
	height: 161.03%;
	max-width: none;
	left: -18.46%;
	top: -21.08%;
	object-fit: cover;
}

.channels-chat__dim {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.2);
}

.channels-chat__fade {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 51.37%;
	border-radius: 0 0 32px 32px;
	background: linear-gradient(to bottom, rgba(241, 245, 249, 0) 14.024%, #f1f5f9 100%);
	pointer-events: none;
}

.channels-chat__thread {
	position: absolute;
	z-index: 1;
	right: clamp(12px, 6%, 74px);
	bottom: clamp(16px, 10.5%, 65px);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: min(420px, 86%);
}

.channels-chat__person {
	display: flex;
	align-items: center;
	gap: 7.5px;
	margin-bottom: 11px;
}

.channels-chat__avatar {
	width: 33px;
	height: 34px;
	border-radius: 99px;
	object-fit: cover;
	background: #db473a;
}

.channels-chat__name {
	margin: 0;
	color: #f3f4f6;
	font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Geist", sans-serif;
	font-weight: 600;
	font-size: clamp(14px, 1.25vw, 18px);
	line-height: normal;
}

.channels-chat__bubble {
	margin: 0 0 10px;
	padding: 15.658px;
	font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Geist", sans-serif;
	font-weight: 400;
	font-size: clamp(14px, 1.18vw, 17px);
	line-height: 1.4;
}

.channels-chat__bubble--agent {
	width: min(295px, 100%);
	border-radius: 23.487px 23.487px 23.487px 0;
	background: #086df2;
	color: #fff;
}

.channels-chat__bubble--user {
	align-self: flex-end;
	width: min(318px, 100%);
	border-radius: 23.487px 23.487px 0 23.487px;
	background: #fff;
	color: #000;
}

.channels-chat__bubble:last-child {
	margin-bottom: 0;
}

@media (max-width: 1100px) {
	.channels-grid__cards {
		grid-template-columns: repeat(4, minmax(0, 148px));
	}
}

@media (max-width: 900px) {
	.channels-grid__cards {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 8px;
		width: min(100%, 440px);
		max-width: 100%;
		margin-inline: auto;
	}

	.channels-card {
		padding: 10px 6px 8px;
		border-radius: 16px;
		gap: 6px;
	}

	.channels-card__well {
		width: 40px;
		height: 40px;
		padding: 3px;
		border-radius: 12px;
	}

	.channels-card__mark,
	.channels-card__icon {
		width: 32px;
		height: 32px;
		border-radius: 10px;
	}

	.channels-card__well--full .channels-card__icon {
		width: 40px;
		height: 40px;
	}

	.channels-card__icon--glyph {
		width: 20px;
		height: 20px;
	}

	.channels-card__label {
		white-space: normal;
		font-size: 12px;
		line-height: 1.2;
		text-align: center;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}
}

@media (min-width: 561px) and (max-width: 900px) {
	.channels-grid__cards {
		width: min(100%, 520px);
		gap: 10px;
	}

	.channels-card {
		padding: 12px 8px 10px;
	}
}

@media (max-width: 720px) {
	.channels-chat {
		aspect-ratio: auto;
		min-height: 420px;
		border-radius: 24px;
	}

	.channels-chat__photo-img {
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		object-fit: cover;
		object-position: center top;
	}

	.channels-chat__thread {
		right: 14px;
		left: 14px;
		bottom: 16px;
		width: auto;
	}

	.channels-chat__bubble {
		padding: 12px 14px;
		font-size: 14px;
	}

	.channels-chat__bubble--agent,
	.channels-chat__bubble--user {
		width: min(280px, 92%);
	}
}

@media (max-width: 480px) {
	.channels-grid__cards {
		width: 100%;
		gap: 6px;
	}

	.channels-card {
		padding: 8px 4px 7px;
	}

	.channels-card__label {
		font-size: 11px;
	}
}

/* -------------------------------------------------------------------------
   One API — Figma 1:5839, 1004 × 184 at (218, 3721)
   3 × 2, col start 0 / 379 / 758, row gap 36, icon 16, Geist 16/24
   ---------------------------------------------------------------------- */
.orbit-api-hub {
	position: relative;
	background: var(--orbit-black);
	overflow: visible;
}

.orbit-api-hub__join {
	position: relative;
	z-index: 0;
	height: 0;
}

/* Soft Figma glows: use the exported layer render (Media Library),
   not a CSS box + filter:blur. Blur in CSS blooms past the oval. */
.orbit-api-hub__wash {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 0;
	width: calc(960.5 * var(--orbit-s));
	height: calc(742.5 * var(--orbit-s));
	transform: translate(-18%, -50%);
	pointer-events: none;
	mix-blend-mode: screen;
}

.orbit-api-hub__wash-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.channels-api {
	position: relative;
	z-index: 1;
	background: transparent;
	padding:
		calc(var(--orbit-chat-hang) + clamp(48px, 5.56vw, 80px))
		clamp(16px, 15.14vw, 218px)
		clamp(56px, 7.78vw, 112px);
	max-width: 1440px;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
}

.channels-api__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	justify-content: space-between;
	column-gap: clamp(24px, 9.24vw, 133px);
	row-gap: 36px;
	max-width: 1004px;
	margin-inline: auto;
}

.channels-api__item {
	display: flex;
	flex-direction: column;
	gap: 2px;
	align-items: flex-start;
}

.channels-api__head {
	display: flex;
	align-items: center;
	gap: 6px;
}

.channels-api__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	overflow: hidden;
}

.channels-api__icon-img {
	display: block;
	width: 16px;
	height: 16px;
	object-fit: contain;
}

.channels-api__title {
	margin: 0;
	color: var(--orbit-white);
	font-weight: 500;
	font-size: 16px;
	line-height: 24px;
	white-space: nowrap;
}

.channels-api__body {
	margin: 0;
	color: #b4bcd0;
	font-weight: 500;
	font-size: 16px;
	line-height: 24px;
}

@media (max-width: 1100px) {
	.channels-api__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		justify-content: stretch;
		column-gap: 32px;
	}
}

@media (max-width: 560px) {
	.channels-api__grid {
		grid-template-columns: 1fr;
		row-gap: 28px;
	}
}

/* -------------------------------------------------------------------------
   Channel hub — Figma 1:6025, 1442 × 854 at (−1, 4017)
   4 × 4 tiles 96 × 95, chat 319 × 415 r32, diagram in 1440 space
   ---------------------------------------------------------------------- */
.hub {
	position: relative;
	z-index: 1;
	background: transparent;
	overflow: visible;
}

.hub__frame {
	position: relative;
	z-index: 1;
	height: calc(854px * var(--orbit-z));
	overflow: visible;
	max-width: 1440px;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
}

.hub__stage {
	position: absolute;
	left: 50%;
	top: 0;
	width: 1440px;
	height: 854px;
	margin-left: -720px;
	transform: scale(var(--orbit-z));
	transform-origin: top center;
}

.hub__copy {
	position: absolute;
	z-index: 1;
	left: 411px;
	top: 72px;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 620px;
	text-align: center;
}

.hub__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 8px;
	color: #9ca3af;
	font-weight: 500;
	font-size: 11px;
	line-height: 17.05px;
	letter-spacing: 1.76px;
	text-transform: uppercase;
}

.hub__dot {
	width: 6px;
	height: 6px;
	border-radius: 3px;
	--orbit-pulse: #3a7dff;
}

.hub__headline {
	margin: 0;
	color: #f3f4f6;
	font-weight: 500;
	font-size: 34px;
	line-height: 39.9px;
	letter-spacing: -1.33px;
	white-space: nowrap;
}

.hub__body {
	margin: 8px 0 0;
	color: #9ca3af;
	font-weight: 400;
	font-size: 19px;
	line-height: 28.5px;
	letter-spacing: -0.07px;
}

.hub__wires {
	position: absolute;
	z-index: 1;
	inset: 0;
	pointer-events: none;
}

.hub__curve {
	position: absolute;
	left: 458px;
	width: 248px;
	/* plus-lighter cannot live inside .hub__stage's transform: scale() — it isolates. */
	overflow: visible;
}

.hub__curve--top {
	top: 348px;
	height: 168px;
}

.hub__curve--mid {
	top: 458px;
	height: 58px;
}

.hub__curve--low {
	top: 516px;
	height: 56px;
	transform: scaleY(-1);
}

.hub__curve--bottom {
	top: 516px;
	height: 168px;
	transform: scaleY(-1);
}

.hub__line {
	position: absolute;
	left: 848px;
	top: 502px;
	width: 172px;
	height: 22px;
	overflow: visible;
}

.hub__nodes {
	position: absolute;
	z-index: 2;
	inset: 0;
	pointer-events: none;
}

.hub__node {
	position: absolute;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #6db1ff;
	box-shadow: 0 0 12.8px #67b0ff;
}

.hub__rings {
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 0;
	width: 0;
	height: 0;
	pointer-events: none;
}

.hub__ring {
	position: absolute;
	border-radius: 50%;
	background: #0161c9;
}

/* Centered on hub core (148×148) — same Figma rings as stage coords. */
.hub__ring--outer {
	left: -128px;
	top: -128px;
	width: 256px;
	height: 256px;
	opacity: 0.05;
}

.hub__ring--inner {
	left: -90px;
	top: -90px;
	width: 180px;
	height: 180px;
	opacity: 0.1;
}

.hub__core {
	position: absolute;
	left: 722px;
	top: 439px;
	z-index: 2;
	width: 148px;
	height: 148px;
	overflow: visible;
}

.hub__core-disc {
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 119.5px;
	height: 119.5px;
	margin: -59.75px 0 0 -59.75px;
	border-radius: 50%;
	background: linear-gradient(180deg, #007bff 0%, #004a99 100%);
	box-shadow:
		0 0 162px rgb(0, 123, 255),
		inset 0 20px 31px rgba(0, 123, 255, 0.45);
}

.hub__core-mark {
	display: block;
	width: 62px;
	height: 64px;
}

.hub__tiles {
	position: absolute;
	z-index: 1;
	inset: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hub-tile {
	position: absolute;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	width: 96px;
	height: 95px;
	padding: 13px 0;
	border: 1px solid #1f2937;
	border-radius: 20px;
	overflow: hidden;
	background: #111827;
	box-shadow: 0 8px 8px rgba(0, 0, 0, 0.05);
}

.hub-tile:nth-child(1) { left: 80px; top: 299px; }
.hub-tile:nth-child(2) { left: 192px; top: 299px; }
.hub-tile:nth-child(3) { left: 304px; top: 299px; }
.hub-tile:nth-child(4) { left: 416px; top: 299px; }
.hub-tile:nth-child(5) { left: 80px; top: 410px; }
.hub-tile:nth-child(6) { left: 192px; top: 410px; }
.hub-tile:nth-child(7) { left: 304px; top: 410px; }
.hub-tile:nth-child(8) { left: 416px; top: 410px; }
.hub-tile:nth-child(9) { left: 80px; top: 521px; }
.hub-tile:nth-child(10) { left: 192px; top: 521px; }
.hub-tile:nth-child(11) { left: 304px; top: 521px; }
.hub-tile:nth-child(12) { left: 416px; top: 521px; }
.hub-tile:nth-child(13) { left: 80px; top: 632px; }
.hub-tile:nth-child(14) { left: 192px; top: 632px; }
.hub-tile:nth-child(15) { left: 304px; top: 632px; }
.hub-tile:nth-child(16) { left: 416px; top: 632px; }

.hub-tile__well {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 4px;
	border-radius: 16px;
	overflow: hidden;
	background: rgba(50, 95, 236, 0.2);
}

.hub-tile__well--full {
	padding: 0;
	background: transparent;
}

.hub-tile__mark {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 39px;
	height: 39px;
	border-radius: 12px;
	overflow: hidden;
}

.hub-tile__mark--gradient {
	background: linear-gradient(to top, #0cbd2a 6.638%, #5bf675 87.59%);
}

.hub-tile__mark--brand {
	background: #325fec;
}

.hub-tile__mark--white {
	background: #fff;
}

.hub-tile__icon {
	display: block;
	width: 39px;
	height: 39px;
	max-width: none;
	object-fit: contain;
}

.hub-tile__well--full .hub-tile__icon {
	width: 48px;
	height: 48px;
}

.hub-tile__icon--glyph {
	width: 25.5px;
	height: 25.5px;
}

.hub-tile__label {
	margin: 0;
	color: #fff;
	font-weight: 500;
	font-size: 12px;
	line-height: normal;
	letter-spacing: -0.07px;
	text-align: center;
	white-space: nowrap;
}

.hub-tile__label--tight {
	letter-spacing: -1px;
}

.hub-chat {
	position: absolute;
	left: 1028px;
	top: 305px;
	z-index: 3;
	width: 319px;
	height: 415px;
	margin: 0;
	padding: 0;
	border: 1px solid transparent;
	border-radius: 32px;
	overflow: hidden;
	background:
		linear-gradient(#111827, #111827) padding-box,
		linear-gradient(
			135deg,
			#0a6cff 0%,
			#0a6cff 18%,
			rgba(10, 108, 255, 0.28) 42%,
			#1f2937 78%,
			#1f2937 100%
		) border-box;
}

.hub-chat__head {
	position: absolute;
	left: 24px;
	top: 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 271px;
}

.hub-chat__person {
	display: flex;
	align-items: center;
	gap: 10px;
}

.hub-chat__avatar {
	width: 42px;
	height: 42px;
	max-width: none;
	border-radius: 27.5px;
	object-fit: cover;
}

.hub-chat__meta {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.hub-chat__name {
	margin: 0;
	color: #d1d5db;
	font-weight: 600;
	font-size: 16px;
	line-height: normal;
	letter-spacing: -0.07px;
	white-space: nowrap;
}

.hub-chat__status {
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	color: #9ca3af;
	font-weight: 500;
	font-size: 14px;
	line-height: normal;
	letter-spacing: -0.07px;
}

.hub-chat__online {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #22c55e;
}

.hub-chat__menu {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 5px;
	height: 19px;
}

.hub-chat__menu::before,
.hub-chat__menu::after {
	content: "";
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #9ca3af;
	box-shadow: 0 7px 0 #9ca3af;
}

.hub-chat__menu::after {
	box-shadow: none;
}

.hub-chat__bubble {
	position: absolute;
	overflow: hidden;
	letter-spacing: -0.07px;
}

.hub-chat__bubble--user {
	left: 93px;
	top: 88px;
	width: 201px;
	height: 61px;
	border-radius: 14px 0 14px 14px;
	background: #3276fc;
}

.hub-chat__bubble--reply {
	left: 23px;
	top: 159px;
	width: 201px;
	height: 83px;
	border-radius: 0 14px 14px 14px;
	background: #1f2937;
}

.hub-chat__bubble--delivery {
	left: 23px;
	top: 252px;
	width: 263px;
	height: 81px;
	border-radius: 0 14px 14px 14px;
	background: #1f2937;
}

.hub-chat__text {
	position: absolute;
	margin: 0;
	font-weight: 400;
	font-size: 14px;
	line-height: normal;
}

.hub-chat__bubble--user .hub-chat__text {
	left: 16px;
	top: 13px;
	width: 128px;
	color: #fff;
}

.hub-chat__bubble--reply .hub-chat__text {
	left: 16px;
	top: 13px;
	width: 170px;
	color: #e5e7eb;
}

.hub-chat__bubble--delivery .hub-chat__text {
	left: 16px;
	top: 14px;
	width: 236px;
	color: #e5e7eb;
}

.hub-chat__time {
	position: absolute;
	font-weight: 500;
	font-size: 10px;
	line-height: normal;
	white-space: nowrap;
}

.hub-chat__bubble--user .hub-chat__time {
	left: 151px;
	top: 41px;
	color: #c0d7ff;
}

.hub-chat__bubble--reply .hub-chat__time {
	left: 148px;
	top: 60px;
	color: #9ca3af;
}

.hub-chat__bubble--delivery .hub-chat__time {
	left: 212px;
	top: 61px;
	color: #9ca3af;
}

.hub-chat__composer {
	position: absolute;
	left: 23px;
	top: 353px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 271px;
}

.hub-chat__field {
	position: relative;
	width: 216px;
	height: 42px;
	border: 1px solid #374151;
	border-radius: 999px;
	overflow: hidden;
}

.hub-chat__placeholder {
	position: absolute;
	left: 15px;
	top: 50%;
	color: #6b7280;
	font-weight: 500;
	font-size: 14px;
	letter-spacing: -0.07px;
	transform: translateY(-50%);
	white-space: nowrap;
}

.hub-chat__attach {
	position: absolute;
	top: 50%;
	right: 13px;
	width: 20px;
	height: 18px;
	transform: translateY(-50%);
}

.hub-chat__send {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 51px;
	height: 42px;
	border-radius: 999px;
	overflow: hidden;
	background: #3276fc;
}

.hub-chat__send svg {
	display: block;
	width: 22px;
	height: 22px;
}

@media (max-width: 900px) {
	.hub {
		overflow: visible;
	}

	.hub__frame {
		height: auto;
	}

	.hub__stage {
		position: relative;
		left: auto;
		width: 100%;
		height: auto;
		margin: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 28px;
		padding: clamp(48px, 8vw, 72px) clamp(16px, 4vw, 24px) clamp(48px, 8vw, 80px);
		transform: none;
	}

	.hub__copy {
		position: static;
		width: min(620px, 100%);
	}

	.hub__headline {
		white-space: normal;
		font-size: clamp(24px, 6vw, 34px);
		line-height: 1.18;
	}

	.hub__body {
		font-size: clamp(16px, 3.4vw, 19px);
	}

	.hub__wires,
	.hub__nodes {
		display: none;
	}

	.hub__rings {
		display: block;
		z-index: 0;
	}

	.hub__core {
		position: relative;
		left: auto;
		top: auto;
		z-index: 0;
		order: 2;
		margin: 0 0 4px;
		overflow: visible;
		pointer-events: none;
	}

	/* Keep the Figma disc glow; do not add a second wash over the tiles. */
	.hub__core-disc {
		box-shadow:
			0 0 80px rgb(0, 123, 255),
			inset 0 20px 31px rgba(0, 123, 255, 0.45);
	}

	.hub__tiles {
		position: relative;
		z-index: 2;
		inset: auto;
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		justify-content: center;
		gap: 8px;
		width: min(100%, 440px);
		order: 3;
	}

	.hub-tile {
		position: relative;
		z-index: 1;
		left: auto !important;
		top: auto !important;
		width: 100%;
		height: auto;
		min-height: 0;
		padding: 10px 6px 8px;
		gap: 6px;
		border-radius: 16px;
	}

	.hub-tile__well {
		width: 40px;
		height: 40px;
		padding: 3px;
		border-radius: 12px;
	}

	.hub-tile__mark,
	.hub-tile__icon {
		width: 32px;
		height: 32px;
		border-radius: 10px;
	}

	.hub-tile__well--full .hub-tile__icon {
		width: 40px;
		height: 40px;
	}

	.hub-tile__icon--glyph {
		width: 20px;
		height: 20px;
	}

	.hub-tile__label {
		white-space: normal;
		font-size: 12px;
		line-height: 1.2;
		padding: 0 2px;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.hub-chat {
		position: relative;
		left: auto;
		top: auto;
		display: flex;
		flex-direction: column;
		gap: 12px;
		width: min(408px, 100%);
		height: auto;
		min-height: 0;
		padding: 20px 18px 18px;
		border-radius: 24px;
		order: 4;
		box-sizing: border-box;
	}

	.hub-chat__head,
	.hub-chat__bubble,
	.hub-chat__composer {
		position: static;
		left: auto;
		top: auto;
		width: 100%;
		height: auto;
	}

	.hub-chat__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		margin: 0 0 4px;
	}

	.hub-chat__name {
		font-size: 16px;
		white-space: normal;
	}

	.hub-chat__status {
		font-size: 13px;
	}

	.hub-chat__avatar {
		width: 42px;
		height: 42px;
	}

	/*
	 * Drop absolute Figma bubble coords — flex column with real padding
	 * so message text + timestamps sit cleanly on phone widths.
	 */
	.hub-chat__bubble,
	.hub-chat__bubble--user,
	.hub-chat__bubble--reply,
	.hub-chat__bubble--delivery {
		position: static;
		left: auto;
		top: auto;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
		width: auto;
		max-width: 88%;
		height: auto;
		min-height: 0;
		margin: 0;
		padding: 14px 16px;
		box-sizing: border-box;
		overflow: visible;
	}

	.hub-chat__bubble--user {
		align-self: flex-end;
		border-radius: 16px 0 16px 16px;
	}

	.hub-chat__bubble--agent,
	.hub-chat__bubble--reply,
	.hub-chat__bubble--delivery {
		align-self: flex-start;
		border-radius: 0 16px 16px 16px;
	}

	.hub-chat__text,
	.hub-chat__bubble--user .hub-chat__text,
	.hub-chat__bubble--reply .hub-chat__text,
	.hub-chat__bubble--delivery .hub-chat__text {
		position: static;
		left: auto;
		top: auto;
		width: 100%;
		max-width: none;
		margin: 0;
		font-size: 15px;
		line-height: 1.45;
		letter-spacing: -0.02em;
	}

	/* Desktop Figma uses hard line breaks; let text reflow on phone. */
	.hub-chat__text br {
		display: none;
	}

	.hub-chat__time,
	.hub-chat__bubble--user .hub-chat__time,
	.hub-chat__bubble--reply .hub-chat__time,
	.hub-chat__bubble--delivery .hub-chat__time {
		position: static;
		left: auto;
		top: auto;
		align-self: flex-end;
		margin: 0;
		font-size: 12px;
		line-height: 1;
		white-space: nowrap;
	}

	.hub-chat__composer {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		width: 100%;
		margin-top: 4px;
	}

	.hub-chat__field {
		position: relative;
		flex: 1 1 auto;
		width: auto;
		min-width: 0;
		height: 44px;
	}

	.hub-chat__placeholder {
		font-size: 15px;
	}

	.hub-chat__send {
		flex-shrink: 0;
		width: 44px;
		height: 44px;
	}
}

@media (min-width: 561px) and (max-width: 900px) {
	.hub__tiles {
		width: min(100%, 520px);
		gap: 10px;
	}

	.hub-tile {
		padding: 12px 8px 10px;
	}
}

@media (max-width: 560px) {
	.hub__tiles {
		width: 100%;
		gap: 6px;
	}

	.hub-tile {
		padding: 8px 4px 7px;
	}

	.hub-tile__label {
		font-size: 11px;
	}
}

/* -------------------------------------------------------------------------
   Voice transcript — Figma 48:122 + 1:6678
   Copy 459 × 269 at (100, 5007). Visual 622 × 455 r40 at (718, 4999).
   Cards are HTML. Photo + avatar + control icons from Media Library.
   ---------------------------------------------------------------------- */
.voice-tsec {
	background: var(--orbit-black);
	padding: 0;
	width: 100%;
}

.voice-tsec .voice__frame {
	position: relative;
	height: calc(583px * var(--orbit-z));
	overflow: visible;
	max-width: 1440px;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
}

.voice-tsec .voice__stage {
	position: absolute;
	left: 50%;
	top: 0;
	width: 1440px;
	height: 583px;
	margin-left: -720px;
	transform: scale(var(--orbit-z));
	transform-origin: top center;
}

.voice-tsec .voice__copy {
	position: absolute;
	left: 100px;
	top: 136px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 459px;
}

.voice-tsec .voice__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: #9ca3af;
	font-weight: 500;
	font-size: 11px;
	line-height: 17.05px;
	letter-spacing: 1.76px;
	text-transform: uppercase;
}

.voice-tsec .voice__dot {
	width: 6px;
	height: 6px;
	border-radius: 3px;
	--orbit-pulse: #2f6fed;
}

.voice-tsec .voice__lead {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.voice-tsec .voice__headline {
	margin: 0;
	color: #f3f4f6;
	font-weight: 500;
	font-size: 34px;
	line-height: 1.15;
	letter-spacing: -0.5px;
}

.voice-tsec .voice__body {
	margin: 0;
	color: #b6b6bb;
	font-weight: 400;
	font-size: 19px;
	line-height: 1.5;
	letter-spacing: -0.07px;
}

.voice-tsec .voice__visual {
	position: absolute;
	left: 718px;
	top: 128px;
	width: 622px;
	height: 455px;
	border: 0;
	border-radius: 40px;
	overflow: hidden;
	isolation: isolate;
	container-type: inline-size;
	container-name: voice-visual;
}

.voice-tsec .voice__photo {
	position: absolute;
	inset: 0;
}

.voice-tsec .voice__photo-img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center;
}

.voice-wave,
.voice-note,
.voice-caller {
	position: absolute;
	background: #fff;
	border: 0;
	border-radius: calc(16 * 100cqi / 622);
	overflow: hidden;
}

.voice-wave {
	left: calc(28 / 622 * 100%);
	top: calc(89 / 455 * 100%);
	width: calc(307 / 622 * 100%);
	height: calc(55 / 455 * 100%);
	box-shadow: 0 20px 50px -12px rgba(0, 0, 0, 0.08);
	container-type: inline-size;
}

.voice-wave__bars {
	position: absolute;
	left: calc(11 / 307 * 100%);
	top: calc(10 / 55 * 100%);
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: calc(285 / 307 * 100%);
	height: calc(35 / 55 * 100%);
}

.voice-wave__bar {
	width: calc(2 * 100cqi / 307);
	height: calc(var(--h) / 35 * 100%);
	border-radius: 999px;
	background: #007bff;
	transform-origin: center center;
}

.voice-tsec .voice__visual.is-in .voice-wave__bar {
	animation: voice-wave-pulse 1.6s ease-in-out infinite;
	animation-delay: calc(var(--i) * 28ms);
}

@keyframes voice-wave-pulse {
	0%,
	100% {
		transform: scaleY(1);
	}
	50% {
		transform: scaleY(0.72);
	}
}

.voice-note {
	left: calc(37 / 622 * 100%);
	top: calc(136 / 455 * 100%);
	z-index: 1;
	width: calc(308 / 622 * 100%);
	height: calc(176 / 455 * 100%);
	box-shadow: -10px -7px 34.5px rgba(96, 117, 255, 0.18);
	container-type: inline-size;
}

.voice-note__head {
	position: absolute;
	left: calc(24 / 308 * 100%);
	top: calc(21 / 176 * 100%);
	display: flex;
	align-items: center;
	gap: calc(5 * 100cqi / 308);
}

.voice-note__icon {
	display: flex;
	width: calc(14 * 100cqi / 308);
	height: calc(14 * 100cqi / 308);
}

.voice-note__icon-img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
}

.voice-note__title {
	margin: 0;
	color: #3f444d;
	font-weight: 500;
	font-size: calc(14 * 100cqi / 308);
	line-height: 1;
	white-space: nowrap;
}

.voice-note__rule {
	position: absolute;
	left: 50%;
	top: calc(51 / 176 * 100%);
	width: calc(262 / 308 * 100%);
	height: 1px;
	transform: translateX(-50%);
	background: #ececee;
}

.voice-note__line {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.voice-note__time {
	position: absolute;
	left: calc(24 / 308 * 100%);
	top: calc(var(--line-top) / 176 * 100%);
	color: #3a7dff;
	font-weight: 600;
	font-size: calc(12 * 100cqi / 308);
	line-height: normal;
	letter-spacing: -0.07px;
	white-space: nowrap;
}

.voice-note__text {
	position: absolute;
	left: calc(64 / 308 * 100%);
	top: calc(var(--line-top) / 176 * 100%);
	width: calc(221 / 308 * 100%);
	margin: 0;
	color: #76767d;
	font-weight: 400;
	font-size: calc(12 * 100cqi / 308);
	line-height: normal;
	letter-spacing: -0.07px;
}

.voice-caller {
	left: calc(43 / 622 * 100%);
	top: calc(282 / 455 * 100%);
	z-index: 2;
	width: calc(326 / 622 * 100%);
	height: calc(110 / 455 * 100%);
	box-shadow: -10px -7px 20.3px rgba(96, 117, 255, 0.18);
	container-type: inline-size;
}

.voice-caller__avatar {
	position: absolute;
	left: calc(14 / 326 * 100%);
	top: calc(14 / 110 * 100%);
	width: calc(39 / 326 * 100%);
	aspect-ratio: 1;
	border-radius: 50%;
	overflow: hidden;
}

.voice-caller__avatar-img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

.voice-caller__name {
	position: absolute;
	left: calc(59 / 326 * 100%);
	top: calc(18 / 110 * 100%);
	margin: 0;
	color: #313131;
	font-weight: 600;
	font-size: calc(12 * 100cqi / 326);
	line-height: 1;
	white-space: nowrap;
}

.voice-caller__phone {
	position: absolute;
	left: calc(59 / 326 * 100%);
	top: calc(34 / 110 * 100%);
	margin: 0;
	color: #7d818e;
	font-weight: 500;
	font-size: calc(11 * 100cqi / 326);
	line-height: 1;
	white-space: nowrap;
}

.voice-caller__live {
	position: absolute;
	left: calc(192 / 326 * 100%);
	top: calc(23 / 110 * 100%);
	display: flex;
	align-items: center;
	gap: calc(4 * 100cqi / 326);
	height: calc(20 / 110 * 100%);
	padding: 0 calc(6 * 100cqi / 326);
	border-radius: 56px;
	background: #faeaea;
	box-sizing: border-box;
}

.voice-caller__live-dot {
	flex-shrink: 0;
	width: calc(6 * 100cqi / 326);
	height: calc(6 * 100cqi / 326);
	border-radius: 50%;
	background: #ed2f2f;
}

.voice-caller__live-label {
	color: #ed2f2f;
	font-weight: 600;
	font-size: calc(10 * 100cqi / 326);
	line-height: 1;
	letter-spacing: -0.07px;
}

.voice-caller__timer {
	position: absolute;
	left: calc(242 / 326 * 100%);
	top: calc(17 / 110 * 100%);
	margin: 0;
	color: #000;
	font-weight: 500;
	font-size: calc(26 * 100cqi / 326);
	line-height: 1;
	white-space: nowrap;
}

.voice-caller__controls {
	position: absolute;
	inset: 0;
}

.voice-caller__ctrl {
	position: absolute;
	top: calc(66 / 110 * 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(52 / 326 * 100%);
	height: calc(30 / 110 * 100%);
	box-sizing: border-box;
	border: 1px solid #a7b6c2;
	border-radius: 999px;
	overflow: hidden;
	background: #fff;
}

.voice-caller__ctrl--record {
	left: calc(15 / 326 * 100%);
	border: 0;
	background: #1163f1;
}

.voice-caller__ctrl--mute {
	left: calc(76 / 326 * 100%);
	width: calc(53 / 326 * 100%);
}

.voice-caller__ctrl--pause {
	left: calc(137 / 326 * 100%);
}

.voice-caller__ctrl--keypad {
	left: calc(197 / 326 * 100%);
	width: calc(53 / 326 * 100%);
}

.voice-caller__ctrl--more {
	left: calc(259 / 326 * 100%);
}

.voice-caller__ctrl-img {
	display: block;
	max-width: none;
	height: auto;
	object-fit: contain;
	flex-shrink: 0;
}

.voice-caller__ctrl-img--record {
	width: calc(13.333 * 100cqi / 326);
	height: calc(13.333 * 100cqi / 326);
}

.voice-caller__ctrl-img--mute {
	width: calc(11 * 100cqi / 326);
	height: calc(15 * 100cqi / 326);
}

.voice-caller__ctrl-img--pause {
	width: calc(9.625 * 100cqi / 326);
	height: calc(12.25 * 100cqi / 326);
}

.voice-caller__ctrl-img--keypad {
	width: calc(10.907 * 100cqi / 326);
	height: calc(10.911 * 100cqi / 326);
}

.voice-caller__ctrl-img--more {
	width: calc(13 * 100cqi / 326);
	height: calc(13 * 100cqi / 326);
}

@media (max-width: 900px) {
	.voice-tsec .voice__frame {
		height: auto;
	}

	.voice-tsec .voice__stage {
		position: relative;
		left: auto;
		width: 100%;
		height: auto;
		margin: 0;
		transform: none;
		display: flex;
		flex-direction: column;
		gap: 32px;
		padding: 48px 16px 64px;
	}

	.voice-tsec .voice__copy {
		position: static;
		left: auto;
		top: auto;
		width: min(459px, 100%);
	}

	.voice-tsec .voice__visual {
		position: relative;
		left: auto;
		top: auto;
		width: 100%;
		max-width: 535px;
		height: auto;
		aspect-ratio: 535 / 466;
		align-self: center;
	}

	.voice-tsec .voice__headline {
		font-size: clamp(26px, 7vw, 34px);
	}

	.voice-tsec .voice__body {
		font-size: clamp(16px, 4.2vw, 19px);
	}
}

@media (max-width: 480px) {
	.voice-tsec .voice__visual {
		border-radius: 28px;
	}
}

/* -------------------------------------------------------------------------
   Voice stack — Figma 1:6582 + 48:116
   Diagram 575 × 651 at (132, 5599). Copy 499 × 204 at (774, 5758).
   145px after the transcript visual (5454 → 5599). Same 1440 stage as hub.
   Cards are HTML. Icons from Media Library. Motion empty — group + fade.
   ---------------------------------------------------------------------- */
.vstack {
	background: var(--orbit-black);
	padding: 0;
}

.vstack__frame {
	position: relative;
	height: calc(796px * var(--orbit-z));
	overflow: visible;
	max-width: 1440px;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
}

.vstack__stage {
	position: absolute;
	left: 50%;
	top: 0;
	width: 1440px;
	height: 796px;
	margin-left: -720px;
	transform: scale(var(--orbit-z));
	transform-origin: top center;
}

.vstack__diagram {
	position: absolute;
	left: 132px;
	top: 145px;
	width: 575px;
	height: 651px;
	transform-origin: center center;
}

.vstack__board {
	position: relative;
	width: 575px;
	height: 651px;
}

.vstack-row {
	position: absolute;
	inset: 0;
	z-index: calc(8 - var(--i));
}

.vstack-row__card {
	position: absolute;
	left: -16px;
	top: var(--card-top);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 192.617px;
	height: 120.36px;
	pointer-events: none;
}

.vstack-row__face {
	width: 122.484px;
	height: 122.484px;
	border: 1px solid #fff;
	border-radius: 40px;
	background-image: linear-gradient(45deg, #fff 3.28%, #ccdfff 100%);
	box-shadow: 0 57px 40px rgba(0, 0, 0, 0.15);
	transform: rotate(54deg) skewX(-26deg) scaleY(0.9);
}

.vstack-row__line {
	position: absolute;
	left: 120px;
	top: calc(var(--line-t) - 4px);
	width: 136px;
	height: 8px;
	line-height: 0;
}

.vstack-row__line svg {
	display: block;
}

.vstack-row__icon {
	position: absolute;
	left: var(--icon-l);
	top: var(--icon-t);
	width: var(--icon-w);
	height: var(--icon-h);
	pointer-events: none;
}

.vstack-row__icon-img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
}

.vstack-row__copy {
	position: absolute;
	left: 261px;
	top: calc(var(--line-t) - 26px);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	white-space: nowrap;
}

.vstack-row__label {
	margin: 0;
	color: #3a7dff;
	font-weight: 400;
	font-size: 18px;
	line-height: 22px;
}

.vstack-row__stack {
	margin: 0;
	color: #fff;
	font-weight: 500;
	font-size: 20px;
	line-height: 25px;
}

.vstack__copy {
	position: absolute;
	left: 774px;
	top: 304px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 499px;
}

.vstack__headline {
	margin: 0;
	color: #f3f4f6;
	font-weight: 500;
	font-size: 34px;
	line-height: 1.235;
	letter-spacing: -0.5px;
}

.vstack__body {
	margin: 0;
	color: #b6b6bb;
	font-weight: 400;
	font-size: 18px;
	line-height: 26px;
	letter-spacing: -0.07px;
}

@media (max-width: 900px) {
	.vstack__frame {
		height: auto;
	}

	.vstack__stage {
		position: relative;
		left: auto;
		width: 100%;
		height: auto;
		margin: 0;
		transform: none;
		display: flex;
		flex-direction: column;
		gap: 40px;
		padding: 48px 16px 64px;
	}

	.vstack__diagram {
		position: relative;
		left: auto;
		top: auto;
		width: min(575px, calc(100vw - 32px));
		height: calc(min(575px, 100vw - 32px) * 651 / 575);
		align-self: center;
	}

	.vstack__board {
		transform: scale(calc(min(575px, 100vw - 32px) / 575px));
		transform-origin: top left;
	}

	.vstack__copy {
		position: static;
		left: auto;
		top: auto;
		width: min(499px, 100%);
		order: -1;
	}

	.vstack__headline {
		font-size: clamp(26px, 7vw, 34px);
	}

	.vstack__body {
		font-size: clamp(16px, 4.2vw, 18px);
	}
}

/* -------------------------------------------------------------------------
   Voice compare — Figma 48:120 + table 1:6989
   Copy 499 × 412 at (119, 6523). Table 659 × 567 at (681, 6445).
   195px after the stack visual (6250 → 6445). Same 1440 stage.
   Table is HTML. X / check / list icons are Figma SVG paths.
   ---------------------------------------------------------------------- */
.vcmp {
	background: var(--orbit-black);
	padding: 0;
}

.vcmp__frame {
	position: relative;
	height: calc(762px * var(--orbit-z));
	overflow: visible;
	max-width: 1440px;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
}

.vcmp__stage {
	position: absolute;
	left: 50%;
	top: 0;
	width: 1440px;
	height: 762px;
	margin-left: -720px;
	transform: scale(var(--orbit-z));
	transform-origin: top center;
}

.vcmp__copy {
	position: absolute;
	left: 119px;
	top: 273px;
	display: flex;
	flex-direction: column;
	gap: 32px;
	width: 499px;
}

.vcmp__lead {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
}

.vcmp__headline {
	margin: 0;
	color: #f3f4f6;
	font-weight: 500;
	font-size: 34px;
	line-height: 1.235;
	letter-spacing: -0.5px;
}

.vcmp__body {
	margin: 0;
	width: 455px;
	color: #b6b6bb;
	font-weight: 400;
	font-size: 18px;
	line-height: 26px;
	letter-spacing: -0.07px;
}

.vcmp__points {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vcmp__point {
	display: flex;
	align-items: center;
	gap: 6px;
}

.vcmp__point-icon {
	display: flex;
	flex-shrink: 0;
	width: 16px;
	height: 16px;
}

.vcmp__point-icon svg {
	display: block;
	width: 16px;
	height: 16px;
}

.vcmp__point-text {
	color: #fff;
	font-weight: 500;
	font-size: 16px;
	line-height: normal;
	letter-spacing: -0.32px;
	white-space: nowrap;
}

.vcmp-table {
	position: absolute;
	left: 681px;
	top: 195px;
	display: grid;
	grid-template-columns: 406px 139px 114px;
	grid-template-rows: 72px 61px repeat(7, 62px);
	width: 659px;
	height: 567px;
	border: 1px solid #3b3b40;
	border-radius: 24px;
	overflow: hidden;
	background: #18181b;
	box-sizing: border-box;
}

.vcmp-table__orbit {
	position: absolute;
	right: 0;
	top: 0;
	width: 114px;
	height: 100%;
	border-radius: 24px;
	background: #325fec;
	pointer-events: none;
}

.vcmp-table__head,
.vcmp-table__row {
	display: contents;
}

.vcmp-table__h,
.vcmp-table__label,
.vcmp-table__mark {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	margin: 0;
	border-bottom: 1px solid #3b3b40;
}

.vcmp-table__h {
	align-items: flex-start;
	padding-top: 26px;
	color: #e4e4e7;
	font-weight: 600;
	font-size: 18px;
	line-height: normal;
	white-space: nowrap;
}

.vcmp-table__h--req {
	padding-left: 22px;
}

.vcmp-table__h--asm {
	justify-content: center;
}

.vcmp-table__h--orb {
	justify-content: center;
	color: #fff;
	border-bottom-color: rgba(255, 255, 255, 0.22);
}

.vcmp-table__label {
	align-items: flex-start;
	padding: 20px 24px 0 22px;
	color: #fff;
	font-weight: 400;
	font-size: 14px;
	line-height: normal;
}

.vcmp-table__mark {
	align-items: flex-start;
	justify-content: center;
	padding-top: 20px;
}

.vcmp-table__mark--check {
	border-bottom-color: rgba(255, 255, 255, 0.22);
}

.vcmp-table__mark svg {
	display: block;
	width: 24px;
	height: 24px;
	flex-shrink: 0;
}

.vcmp-table__row:last-child .vcmp-table__label,
.vcmp-table__row:last-child .vcmp-table__mark {
	border-bottom: 0;
}

@media (max-width: 900px) {
	.vcmp__frame {
		height: auto;
	}

	.vcmp__stage {
		position: relative;
		left: auto;
		width: 100%;
		height: auto;
		margin: 0;
		transform: none;
		display: flex;
		flex-direction: column;
		gap: 40px;
		padding: 48px 16px 64px;
	}

	.vcmp__copy {
		position: static;
		left: auto;
		top: auto;
		width: min(499px, 100%);
	}

	.vcmp__body {
		width: 100%;
	}

	.vcmp__headline {
		font-size: clamp(26px, 7vw, 34px);
	}

	.vcmp__point-text {
		white-space: normal;
	}

	.vcmp-table {
		position: relative;
		left: auto;
		top: auto;
		width: min(659px, 100%);
		height: auto;
		grid-template-columns: minmax(0, 1fr) 72px 72px;
		grid-template-rows: none;
	}

	.vcmp-table__orbit {
		width: 72px;
	}

	.vcmp-table__h,
	.vcmp-table__label,
	.vcmp-table__mark {
		min-height: 56px;
		padding-top: 12px;
		padding-bottom: 12px;
	}

	.vcmp-table__h {
		align-items: center;
		padding-bottom: 12px;
		font-size: 14px;
		white-space: normal;
	}
}

/* -------------------------------------------------------------------------
   Channel memory — same 1440 stage as compare (vcmp copy x=119).
   Compare ends y=7012. Glow 1:62 at (-129, 7065). Photo A at y=7234.
   Left column x=119 (photo A + row 2 copy). Right copy x=755, photo B x=835.
   Glows overflow up into compare — do not clip.
   ---------------------------------------------------------------------- */
.memory {
	background: var(--orbit-black);
	overflow: visible;
	width: 100%;
}

.memory__frame {
	position: relative;
	/* +200px of trailing space so "Customer Data Platform" below doesn't
	   crowd the photo/copy block above it, matching the Figma gap. */
	height: calc(1467px * var(--orbit-z));
	overflow: visible;
	max-width: 1440px;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
}

.memory__stage {
	position: absolute;
	left: 50%;
	top: 0;
	z-index: 0;
	width: 1440px;
	height: 1267px;
	margin-left: -720px;
	transform: scale(var(--orbit-z));
	transform-origin: top center;
	overflow: visible;
}

.memory__glow {
	position: absolute;
	z-index: 0;
	width: 485px;
	height: 485px;
	pointer-events: none;
	mix-blend-mode: screen;
}

/* Figma 1:62 / 1:191 — 485 circle. Inside the 1440 stage so --orbit-z scales it. */
.memory__glow--left {
	left: -129px;
	top: 53px;
}

.memory__glow--right {
	left: 1129px;
	top: 501px;
}

.memory__glow-img {
	position: absolute;
	inset: -123.71%;
	display: block;
	width: calc(100% + 247.42%);
	height: calc(100% + 247.42%);
	max-width: none;
}

.memory__row {
	display: contents;
}

.memory__photo {
	position: absolute;
	z-index: 1;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 32px;
	overflow: hidden;
}

.memory__photo--a {
	left: 119px;
	top: 222px;
	width: 535px;
	height: 466px;
	aspect-ratio: 31 / 27;
}

.memory__photo--b {
	left: 835px;
	top: 801px;
	width: 505px;
	height: 466px;
	aspect-ratio: 505 / 466;
}

.memory__photo-img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

.memory__photo--a .memory__photo-img {
	object-position: 66% 0;
}

.memory__photo--b .memory__photo-img {
	object-position: 100% 50%;
}

.memory__copy {
	position: absolute;
	z-index: 1;
	display: flex;
	flex-direction: column;
	width: 494px;
}

.memory__row--photo-start .memory__copy {
	left: 755px;
	top: 276px;
}

.memory__row--photo-end .memory__copy {
	left: 119px;
	top: 882px;
}

.memory__headline {
	margin: 0;
	color: #f3f4f6;
	font-weight: 500;
	font-size: 34px;
	line-height: 1.235;
	letter-spacing: -0.5px;
}

.memory__body {
	margin: 19px 0 0;
	color: #b6b6bb;
	font-weight: 400;
	font-size: 18px;
	line-height: 28.5px;
	letter-spacing: -0.07px;
}

.memory__body--on-brand {
	margin-top: 26px;
	color: #c0d7ff;
	line-height: 28px;
}

.memory__row--photo-start .memory__point {
	margin-top: 29px;
}

.memory__points {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin: 47px 0 0;
	padding: 0;
	list-style: none;
}

.memory__point {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
}

.memory__point-icon {
	display: flex;
	flex-shrink: 0;
	width: 16px;
	height: 16px;
}

.memory__point-icon svg {
	display: block;
	width: 16px;
	height: 16px;
}

.memory__point-text {
	color: #fff;
	font-weight: 500;
	font-size: 16px;
	line-height: 24px;
}

@media (max-width: 900px) {
	.memory__frame {
		height: auto;
	}

	.memory__stage {
		position: relative;
		left: auto;
		width: 100%;
		height: auto;
		margin: 0;
		transform: none;
		display: flex;
		flex-direction: column;
		gap: 48px;
		padding: 48px 16px 64px;
	}

	.memory__row {
		position: relative;
		display: flex;
		flex-direction: column;
		gap: 24px;
		overflow: visible;
	}

	/* Same #1B50FF SVG as desktop — left on photo A, right on photo B. */
	.memory__glow {
		width: min(72vw, 300px);
		height: min(72vw, 300px);
		mix-blend-mode: screen;
	}

	.memory__glow--left {
		left: -8%;
		top: 6%;
	}

	.memory__glow--right {
		left: auto;
		right: -8%;
		top: 6%;
	}

	/* Fit the 1685 viewBox (circle + blur 300) into the mobile box. */
	.memory__glow-img {
		inset: 0;
		width: 100%;
		height: 100%;
	}

	.memory__photo,
	.memory__copy {
		position: relative;
		z-index: 1;
	}

	/* Keep the photo above the copy for the second row on mobile. */
	.memory__row--photo-end .memory__photo {
		order: -1;
	}

	.memory__photo,
	.memory__copy,
	.memory__row--photo-start .memory__copy,
	.memory__row--photo-end .memory__copy,
	.memory__photo--a,
	.memory__photo--b {
		position: relative;
		left: auto;
		top: auto;
		width: 100%;
		height: auto;
	}

	.memory__photo--a,
	.memory__photo--b {
		max-width: 535px;
		aspect-ratio: 535 / 466;
	}

	.memory__photo--b {
		aspect-ratio: 505 / 466;
	}

	.memory__copy {
		max-width: none;
	}

	.memory__headline {
		font-size: clamp(26px, 7vw, 34px);
	}
}

/* -------------------------------------------------------------------------
   CDP — Figma 607:11020, 1440 × 1123 at (0, 8464)
   Glow 607:11039 #2E6CFF. Logos and wires from exported Figma assets.
   ---------------------------------------------------------------------- */
.cdp {
	background: var(--orbit-black);
	overflow: visible;
	width: 100%;
}

.cdp__frame {
	position: relative;
	height: calc(1123px * var(--orbit-z));
	overflow: visible;
	max-width: 1440px;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
}

.cdp__stage {
	position: absolute;
	left: 50%;
	top: 0;
	width: 1440px;
	height: 1123px;
	margin-left: -720px;
	transform: scale(var(--orbit-z));
	transform-origin: top center;
	overflow: visible;
}

.cdp__eyebrow {
	position: absolute;
	left: 78px;
	top: 56px;
	display: flex;
	align-items: center;
	gap: 13px;
	margin: 0;
	color: #7e97c0;
	font-weight: 500;
	font-size: 11.5px;
	line-height: 16px;
	letter-spacing: 0;
	text-transform: uppercase;
	white-space: nowrap;
}

.cdp__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	margin-right: 0;
}

.cdp__headline {
	position: absolute;
	left: 78px;
	top: 96px;
	margin: 0;
	width: 830px;
	color: #fff;
	font-weight: 700;
	font-size: 44px;
	line-height: 56px;
	letter-spacing: -0.8px;
}

.cdp__body {
	position: absolute;
	left: 78px;
	top: 222px;
	margin: 0;
	width: 720px;
	color: #9fb2ce;
	font-weight: 400;
	font-size: 15.5px;
	line-height: 27px;
}

.cdp-stage {
	position: absolute;
	top: 332px;
}

.cdp-stage--1 { left: 78px; }
.cdp-stage--2 { left: 578px; }
.cdp-stage--3 { left: 1038px; }

.cdp-stage__ring {
	position: absolute;
	left: 0;
	top: 0;
	width: 42px;
	height: 42px;
}

.cdp-stage__ring img {
	position: absolute;
	inset: -38.1%;
	display: block;
	width: 74px;
	height: 74px;
	max-width: none;
}

.cdp-stage__n {
	position: absolute;
	left: 0;
	top: 11px;
	width: 42px;
	color: #fff;
	font-weight: 500;
	font-size: 17px;
	line-height: 22px;
	text-align: center;
}

.cdp-stage__title {
	position: absolute;
	left: 64px;
	top: 4px;
	margin: 0;
	width: 400px;
	color: #fff;
	font-weight: 500;
	font-size: 13px;
	line-height: 18px;
	text-transform: uppercase;
}

.cdp-stage__body {
	position: absolute;
	left: 64px;
	top: 30px;
	margin: 0;
	width: 330px;
	color: #99acc8;
	font-weight: 400;
	font-size: 13px;
	line-height: 21px;
}

.cdp-flow {
	position: absolute;
	left: 0;
	top: 0;
	width: 1440px;
	height: 1080px;
	overflow: visible;
}

.cdp-flow__glow {
	position: absolute;
	left: 158px;
	top: 124px;
	width: 1124px;
	height: 936px;
	pointer-events: none;
	z-index: 0;
}

.cdp-flow__glow-img,
.cdp-flow__halo-img,
.cdp-flow__platform img,
.cdp-wire {
	display: block;
	max-width: none;
}

.cdp-flow__halo {
	position: absolute;
	left: 420px;
	top: 467px;
	width: 600px;
	height: 400px;
	pointer-events: none;
	z-index: 1;
}

.cdp-flow__platform {
	position: absolute;
	left: 457px;
	top: 660px;
	width: 520px;
	height: 140px;
	z-index: 1;
}

.cdp-wire {
	position: absolute;
	z-index: 2;
	pointer-events: none;
}

.cdp-wire--40 { left: 352px; top: 498px; width: 97px; height: 88px; }
.cdp-wire--41 { left: 351.5px; top: 583px; width: 97.5px; height: 2px; }
.cdp-wire--42 { left: 352px; top: 584px; width: 97px; height: 88px; }
.cdp-wire--43 { left: 348.5px; top: 494.5px; width: 7px; height: 7px; }
.cdp-wire--44 { left: 348.5px; top: 580.5px; width: 7px; height: 7px; }
.cdp-wire--45 { left: 348.5px; top: 666.5px; width: 7px; height: 7px; }
.cdp-wire--46 { left: 519px; top: 583px; width: 17px; height: 2px; }
.cdp-wire--47 { left: 515px; top: 448px; width: 30px; height: 272px; }
.cdp-wire--48 { left: 538.25px; top: 470px; width: 25px; height: 228px; }
.cdp-wire--49 { left: 896px; top: 587px; width: 16px; height: 2px; }
.cdp-wire--50 { left: 983px; top: 502px; width: 79px; height: 86px; }
.cdp-wire--51 { left: 983px; top: 587px; width: 79px; height: 2px; }
.cdp-wire--52 { left: 983px; top: 588px; width: 79px; height: 94px; }
.cdp-wire--53 { left: 1058.5px; top: 498.5px; width: 7px; height: 7px; }
.cdp-wire--54 { left: 1058.5px; top: 585.5px; width: 7px; height: 7px; }
.cdp-wire--55 { left: 1058.5px; top: 678.5px; width: 7px; height: 7px; }
.cdp-wire--56 { left: 899px; top: 474px; width: 25px; height: 228px; }

.cdp-chip {
	position: absolute;
	z-index: 3;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	overflow: hidden;
}

.cdp-chip--in {
	left: 62px;
	width: 290px;
	height: 64px;
	padding: 0 18px 0 20px;
	gap: 16px;
	border: 1px solid rgba(255, 255, 255, 0.11);
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.04);
}

.cdp-chip--1 { top: 470px; }
.cdp-chip--2 { top: 556px; }
.cdp-chip--3 { top: 642px; }

.cdp-chip__icon {
	display: block;
	width: 22px;
	height: 22px;
	flex-shrink: 0;
}

.cdp-chip__label {
	flex: 1 1 auto;
	min-width: 0;
	color: #fff;
	font-weight: 500;
	font-size: 15.5px;
	line-height: 22px;
}

.cdp-chip--out .cdp-chip__label {
	font-size: 14.5px;
	line-height: 21px;
}


.cdp-chip--out {
	left: 1064px;
	width: 322px;
	height: 69px;
	padding: 0 18px 0 20px;
	gap: 12px;
	border-radius: 14px;
	background: rgba(10, 14, 25, 0.85);
}

.cdp-chip--meta {
	top: 468px;
	border: 1.2px solid rgba(61, 139, 255, 0.75);
	box-shadow: 0 0 26px rgba(61, 139, 255, 0.28);
}

.cdp-chip--crm {
	top: 555px;
	border: 1.2px solid rgba(245, 158, 11, 0.75);
	box-shadow: 0 0 26px rgba(245, 158, 11, 0.28);
}

.cdp-chip--data {
	top: 648px;
	border: 1.2px solid rgba(34, 211, 238, 0.75);
	box-shadow: 0 0 26px rgba(34, 211, 238, 0.28);
}

.cdp-dest__logo {
	display: block;
	flex-shrink: 0;
	object-fit: contain;
}

.cdp-dest__logo--meta { width: 26px; height: 17px; }
.cdp-dest__logo--tiktok { width: 17px; height: 22px; }
.cdp-dest__logo--hubspot { width: 22px; height: 22px; }
.cdp-dest__logo--salesforce { width: 24px; height: 17px; }
.cdp-dest__logo--snowflake { width: 21px; height: 21px; }
.cdp-dest__logo--bigquery { width: 25px; height: 25px; }

.cdp-node {
	position: absolute;
	z-index: 3;
	top: 555px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 66px;
	height: 66px;
	border: 1.5px solid rgba(61, 139, 255, 0.9);
	border-radius: 99px;
	background: rgba(61, 139, 255, 0.08);
	box-shadow: 0 0 22px rgba(61, 139, 255, 0.4);
}

.cdp-node img {
	display: block;
	width: 22px;
	height: 22px;
}

.cdp-node--resolve { left: 452px; }
.cdp-node--activate { left: 915px; }

.cdp-profile {
	position: absolute;
	z-index: 4;
	left: 540px;
	top: 440px;
	display: flex;
	flex-direction: column;
	gap: 20px;
	box-sizing: border-box;
	width: 354px;
	height: 288px;
	padding: 26px;
	overflow: hidden;
	border: 2px solid rgba(61, 139, 255, 0.95);
	border-radius: 22px;
	background: rgba(9, 14, 27, 0.92);
	box-shadow: 0 0 90px rgba(46, 108, 255, 0.25), 0 0 38px rgba(46, 108, 255, 0.55);
}

.cdp-profile__id {
	display: flex;
	align-items: center;
	gap: 18px;
}

.cdp-profile__avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 70px;
	height: 70px;
	border-radius: 99px;
	background: linear-gradient(135deg, #598cff 0%, #424dd9 71.43%);
	color: #fff;
	font-weight: 500;
	font-size: 21px;
	line-height: 28px;
	flex-shrink: 0;
}

.cdp-profile__who {
	min-width: 0;
}

.cdp-profile__name {
	margin: 0;
	color: #fff;
	font-weight: 500;
	font-size: 26px;
	line-height: 33px;
	letter-spacing: -0.4px;
}

.cdp-profile__sub {
	margin: 4px 0 0;
	color: #91a3c0;
	font-weight: 400;
	font-size: 14.5px;
	line-height: 21px;
}

.cdp-profile__rule {
	width: 100%;
	height: 1px;
	background: rgba(38, 56, 98, 0.9);
}

.cdp-profile__fields {
	display: flex;
	flex-direction: column;
	gap: 15px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cdp-profile__field {
	display: flex;
	align-items: center;
	gap: 14px;
}

.cdp-profile__field img {
	display: block;
	width: 17px;
	height: 17px;
	flex-shrink: 0;
}

.cdp-profile__k {
	width: 74px;
	flex-shrink: 0;
	color: #91a3c0;
	font-weight: 400;
	font-size: 13.5px;
	line-height: 20px;
}

.cdp-profile__v {
	min-width: 0;
	color: #fff;
	font-weight: 400;
	font-size: 14.5px;
	line-height: 20px;
}

.cdp__rule {
	position: absolute;
	left: 78px;
	top: 839px;
	width: 1308px;
	height: 1px;
	background: rgba(255, 255, 255, 0.09);
}

.cdp-feats {
	position: absolute;
	left: 78px;
	top: 878px;
	display: flex;
	gap: 65px;
	width: 1283px;
}

.cdp-feat {
	position: relative;
	width: 272px;
	flex-shrink: 0;
}

.cdp-feat__n {
	margin: 0;
	color: #3a7dff;
	font-weight: 500;
	font-size: 14px;
	line-height: 19px;
	letter-spacing: 0.6px;
}

.cdp-feat__dash {
	position: absolute;
	left: 34px;
	top: 9px;
	width: 42px;
	height: 1.5px;
	background: rgba(58, 125, 255, 0.85);
}

.cdp-feat__title {
	margin: 13px 0 0;
	color: #fff;
	font-weight: 500;
	font-size: 17px;
	line-height: 25px;
	letter-spacing: -0.2px;
}

.cdp-feat__body {
	margin: 8px 0 0;
	color: #99acc8;
	font-weight: 400;
	font-size: 13.5px;
	line-height: 22px;
}

/* Mobile-only layout — Figma 681:442, dedicated single-column adaptation.
   Hidden on desktop; the desktop diagram (.cdp__stage) hides in exchange
   below 900px, matching this theme's sitewide mobile breakpoint. */

.cdp-mobile {
	display: none;
}

@media (max-width: 900px) {
	.cdp__frame {
		height: auto;
	}

	.cdp__stage {
		display: none;
	}

	.cdp-mobile {
		display: flex;
		flex-direction: column;
		/* Figma's mobile frame uses its own near-black, not the sitewide token. */
		background: #060911;
		padding: 48px 16px;
		gap: 30px;
	}
}

/* Hero */

.cdp-m__hero {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.cdp-m__eyebrow {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-weight: 600;
	font-size: 11.5px;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: #7e97c0;
}

.cdp-m__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #3d8bff;
	flex-shrink: 0;
}

.cdp-m__headline {
	margin: 0;
	font-weight: 700;
	font-size: 32px;
	line-height: 40px;
	letter-spacing: -0.5px;
	color: #ffffff;
}

.cdp-m__body {
	margin: 0;
	font-weight: 400;
	font-size: 15px;
	line-height: 24px;
	color: #9fb2ce;
}

/* Three-step flow */

.cdp-m__steps {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.cdp-m-step {
	display: flex;
	align-items: flex-start;
	gap: 16px;
}

.cdp-m-step__badge {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	border-radius: 99px;
	font-weight: 600;
	font-size: 15px;
	color: #ffffff;
}

.cdp-m-step--1 .cdp-m-step__badge {
	background: rgba(61, 139, 255, 0.07);
	border: 1.5px solid rgba(61, 139, 255, 0.85);
	filter: drop-shadow(0 0 8px rgba(61, 139, 255, 0.35));
}

.cdp-m-step--2 .cdp-m-step__badge {
	background: rgba(99, 102, 241, 0.07);
	border: 1.5px solid rgba(99, 102, 241, 0.85);
	filter: drop-shadow(0 0 8px rgba(99, 102, 241, 0.35));
}

.cdp-m-step--3 .cdp-m-step__badge {
	background: rgba(16, 185, 129, 0.07);
	border: 1.5px solid rgba(16, 185, 129, 0.85);
	filter: drop-shadow(0 0 8px rgba(16, 185, 129, 0.35));
}

.cdp-m-step__copy {
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 1 0 0;
	min-width: 0;
	padding-top: 6px;
}

.cdp-m-step__title {
	margin: 0;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.5px;
	color: #ffffff;
}

.cdp-m-step__body {
	margin: 0;
	font-weight: 400;
	font-size: 13px;
	line-height: 20px;
	color: #9fb2ce;
}

/* Data pipeline */

.cdp-m__pipeline {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
}

.cdp-m__label {
	margin: 0 0 12px;
	font-weight: 600;
	font-size: 11px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: #7e97c0;
	text-align: center;
}

.cdp-m__inputs {
	width: 100%;
}

.cdp-m__signals {
	display: flex;
	gap: 8px;
	width: 100%;
}

.cdp-m-signal {
	display: flex;
	flex: 1 0 0;
	min-width: 0;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 10px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.11);
	border-radius: 12px;
}

.cdp-m-signal__icon {
	display: block;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

.cdp-m-signal__label {
	font-weight: 500;
	font-size: 14px;
	color: #ffffff;
	white-space: nowrap;
}

.cdp-m__connector {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px 0;
}

.cdp-m__connector img {
	/* Native 64×64 canvas — the visible ring is only the inner 32px, the rest
	   is padding for the asset's own drop-shadow bleed. Forcing it down to
	   32px shrinks the visible ring to half size, so render at native scale. */
	display: block;
	width: 64px;
	height: 64px;
	transform: rotate(90deg);
}

/* Golden profile card */

.cdp-m-profile {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 20px;
	background: rgba(9, 14, 27, 0.92);
	border: 1.5px solid rgba(61, 139, 255, 0.95);
	border-radius: 20px;
	box-shadow: 0 0 30px rgba(46, 108, 255, 0.25), 0 0 12px rgba(46, 108, 255, 0.55);
}

.cdp-m-profile__id {
	display: flex;
	align-items: center;
	gap: 14px;
}

.cdp-m-profile__avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	border-radius: 99px;
	background: linear-gradient(90deg, #598cff, #424dd9);
	font-weight: 600;
	font-size: 16px;
	color: #ffffff;
}

.cdp-m-profile__who {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.cdp-m-profile__name {
	margin: 0;
	font-weight: 600;
	font-size: 18px;
	color: #ffffff;
}

.cdp-m-profile__sub {
	margin: 0;
	font-weight: 400;
	font-size: 12px;
	color: #91a3c0;
}

.cdp-m-profile__rule {
	height: 1px;
	background: rgba(255, 255, 255, 0.1);
}

.cdp-m-profile__fields {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.cdp-m-profile__field {
	display: flex;
	align-items: center;
	gap: 10px;
}

.cdp-m-profile__field img {
	display: block;
	flex-shrink: 0;
	width: 16px;
	height: 17px;
}

.cdp-m-profile__k {
	flex: 0 0 50px;
	font-weight: 400;
	font-size: 12px;
	color: #91a3c0;
}

.cdp-m-profile__v {
	flex: 1 0 0;
	min-width: 0;
	font-weight: 500;
	font-size: 13px;
	color: #ffffff;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Destinations */

.cdp-m__dests {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

.cdp-m-dest {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 12px 16px;
	background: rgba(10, 14, 25, 0.85);
	border: 1.2px solid;
	border-radius: 12px;
}

.cdp-m-dest--meta {
	border-color: rgba(61, 139, 255, 0.75);
	box-shadow: 0 0 10px rgba(61, 139, 255, 0.28);
}

.cdp-m-dest--crm {
	border-color: rgba(245, 158, 11, 0.75);
	box-shadow: 0 0 10px rgba(245, 158, 11, 0.28);
}

.cdp-m-dest--data {
	border-color: rgba(34, 211, 238, 0.75);
	box-shadow: 0 0 10px rgba(34, 211, 238, 0.28);
}

.cdp-m-dest__logo {
	display: block;
	flex-shrink: 0;
}

.cdp-m-dest__label {
	font-weight: 500;
	font-size: 14px;
	color: #ffffff;
	white-space: nowrap;
}

.cdp-m__rule {
	width: 100%;
	height: 1px;
	background: rgba(255, 255, 255, 0.08);
}

/* Features */

.cdp-m__feats {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.cdp-m-feat {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.cdp-m-feat__num-row {
	display: flex;
	align-items: center;
	gap: 10px;
}

.cdp-m-feat__n {
	font-weight: 600;
	font-size: 13px;
}

.cdp-m-feat__dash {
	display: block;
	width: 16px;
	height: 1.5px;
}

.cdp-m-feat:nth-child(1) .cdp-m-feat__n { color: #3d8bff; }
.cdp-m-feat:nth-child(1) .cdp-m-feat__dash { background: rgba(61, 139, 255, 0.85); }
.cdp-m-feat:nth-child(2) .cdp-m-feat__n { color: #6366f1; }
.cdp-m-feat:nth-child(2) .cdp-m-feat__dash { background: rgba(99, 102, 241, 0.85); }
.cdp-m-feat:nth-child(3) .cdp-m-feat__n { color: #10b981; }
.cdp-m-feat:nth-child(3) .cdp-m-feat__dash { background: rgba(16, 185, 129, 0.85); }
.cdp-m-feat:nth-child(4) .cdp-m-feat__n { color: #f59e0b; }
.cdp-m-feat:nth-child(4) .cdp-m-feat__dash { background: rgba(245, 158, 11, 0.85); }

.cdp-m-feat__title {
	margin: 0;
	font-weight: 600;
	font-size: 16px;
	color: #ffffff;
}

.cdp-m-feat__body {
	margin: 0;
	font-weight: 400;
	font-size: 13.5px;
	line-height: 20px;
	color: #9fb2ce;
}

/* -------------------------------------------------------------------------
   CPaaS — Figma 1:7054, 1217 × 382 at (112, 8487)
   Cards 290 × 250 r16 #18181b, icon wells 60 × 60 r10 #27272a, gap 19.
   Section occupies 8279 → 8966 (687) on the 1440 stage.
   ---------------------------------------------------------------------- */
.cpaas {
	background: var(--orbit-black);
	overflow: visible;
	width: 100%;
}

.cpaas__frame {
	position: relative;
	height: calc(687px * var(--orbit-z));
	overflow: visible;
	max-width: 1440px;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
}

.cpaas__stage {
	position: absolute;
	left: 50%;
	top: 0;
	width: 1440px;
	height: 687px;
	margin-left: -720px;
	transform: scale(var(--orbit-z));
	transform-origin: top center;
}

.cpaas__content {
	position: absolute;
	left: 112px;
	top: 208px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 48px;
	width: 1217px;
}

.cpaas__headline {
	margin: 0;
	width: 353px;
	color: #e5e7eb;
	font-weight: 500;
	font-size: 34px;
	line-height: normal;
	letter-spacing: -0.5px;
	text-align: center;
}

.cpaas__cards {
	display: flex;
	align-items: flex-start;
	gap: 19px;
	width: 100%;
}

.cpaas-card {
	box-sizing: border-box;
	width: 290px;
	height: 250px;
	padding: 24px;
	border: 0;
	border-radius: 16px;
	overflow: hidden;
	background: #18181b;
	flex-shrink: 0;
}

.cpaas-icon {
	position: relative;
	display: block;
	width: 60px;
	height: 60px;
	border-radius: 10px;
	background: #27272a;
	overflow: hidden;
	flex-shrink: 0;
}

.cpaas-icon i {
	position: absolute;
	display: block;
	margin: 0;
	padding: 0;
	border-radius: 1px;
	background: var(--cpaas-dot);
}

.cpaas-card__title {
	margin: 38px 0 0;
	color: #fff;
	font-weight: 400;
	font-size: 18px;
	line-height: 22px;
}

.cpaas-card__body {
	margin: 10px 0 0;
	width: 247px;
	color: #a1a1a1;
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
}

@media (max-width: 900px) {
	.cpaas__frame {
		height: auto;
	}

	.cpaas__stage {
		position: relative;
		left: auto;
		width: 100%;
		height: auto;
		margin: 0;
		transform: none;
		padding: 48px 16px 64px;
	}

	.cpaas__content {
		position: relative;
		left: auto;
		top: auto;
		width: 100%;
		gap: 32px;
	}

	.cpaas__headline {
		width: min(353px, 100%);
		font-size: clamp(26px, 7vw, 34px);
	}

	.cpaas__cards {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
	}

	.cpaas-card {
		width: 100%;
		height: auto;
		min-height: 0;
		padding: 22px 20px 24px;
	}

	.cpaas-card__title {
		margin-top: 20px;
		font-size: 20px;
		line-height: 1.25;
	}

	.cpaas-card__body {
		width: auto;
		margin-top: 8px;
		font-size: 16px;
		line-height: 1.45;
	}
}

@media (max-width: 560px) {
	.cpaas__cards {
		grid-template-columns: 1fr;
	}

	.cpaas-card {
		padding: 24px 22px 28px;
	}

	.cpaas-card__title {
		font-size: 22px;
		line-height: 1.3;
	}

	.cpaas-card__body {
		font-size: 17px;
		line-height: 1.5;
	}

	.cpaas-icon {
		width: 56px;
		height: 56px;
	}
}

/* -------------------------------------------------------------------------
   Architecture — Figma 1:6199, 1440 × 1021 at (0, 8966)
   Two 600 × 520 diagrams r48. Glows 1:6200 / 1:6201.
   ---------------------------------------------------------------------- */
.arch {
	background: var(--orbit-black);
	overflow: visible;
	width: 100%;
}

.arch__frame {
	position: relative;
	height: calc(1021px * var(--orbit-z));
	overflow: visible;
	max-width: 1440px;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
}

.arch__glow {
	position: absolute;
	z-index: 0;
	pointer-events: none;
}

/* Figma 1:6200 Ellipse 434 — #FF3131 20%, 575×515 at (78, 83). */
.arch__glow--left {
	left: 77.82px;
	top: 83px;
	width: 574.89px;
	height: 515.14px;
}

/* Figma 1:6201 Ellipse 435 — #316BFF 40%, 611×383 at (893, 102). */
.arch__glow--right {
	left: 892.88px;
	top: 102px;
	width: 611.15px;
	height: 382.73px;
}

.arch__glow-img {
	position: absolute;
	display: block;
	max-width: none;
}

.arch__glow--left .arch__glow-img {
	top: -134.68%;
	left: -36.84%;
	width: 173.68%;
	height: 369.36%;
}

.arch__glow--right .arch__glow-img {
	top: -158.87%;
	left: -36.84%;
	width: 173.68%;
	height: 417.74%;
}

.arch__stage {
	position: absolute;
	left: 50%;
	top: 0;
	z-index: 1;
	width: 1440px;
	height: 1021px;
	margin-left: -720px;
	transform: scale(var(--orbit-z));
	transform-origin: top center;
}

.arch__intro {
	position: absolute;
	left: 417px;
	top: 87px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	width: 606px;
}

.arch__eyebrow {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: #9ca3af;
	font-weight: 500;
	font-size: 11px;
	line-height: 17.05px;
	letter-spacing: 1.76px;
	text-transform: uppercase;
	white-space: nowrap;
}

.arch__dot {
	width: 6px;
	height: 6px;
	border-radius: 3px;
	background: #2f6fed;
	box-shadow: 0 0 8px 0 #2f6fed;
}

.arch__headline {
	margin: 0;
	width: 100%;
	color: #f3f4f6;
	font-weight: 500;
	font-size: 34px;
	line-height: normal;
	letter-spacing: -0.5px;
	text-align: center;
}

.arch__col-label {
	position: absolute;
	top: 271px;
	margin: 0;
	color: #fff;
	font-weight: 500;
	font-size: 24px;
	line-height: normal;
	letter-spacing: -0.07px;
	white-space: nowrap;
}

.arch__col-label--left {
	left: 302px;
}

.arch__col-label--right {
	left: 1024px;
}

.arch-panel {
	position: absolute;
	top: 327px;
	width: 600px;
	height: 520px;
	border: 0;
	border-radius: 48px;
	overflow: hidden;
	background: rgba(17, 24, 39, 0.2);
	box-sizing: border-box;
}

.arch-panel::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	padding: 1px;
	border-radius: inherit;
	pointer-events: none;
	background: var(--arch-stroke);
	-webkit-mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
}

.arch-panel--trad {
	left: 88px;
	--arch-stroke: linear-gradient(
		135deg,
		rgba(255, 0, 0, 0.6) 0%,
		rgba(255, 0, 0, 0.42) 22%,
		rgba(255, 0, 0, 0.16) 52%,
		rgba(255, 0, 0, 0.05) 100%
	);
}

.arch-panel--orbit {
	left: 752px;
	--arch-stroke: linear-gradient(
		135deg,
		#007bff 0%,
		rgba(0, 123, 255, 0.7) 28%,
		rgba(0, 123, 255, 0.32) 62%,
		rgba(0, 123, 255, 0.18) 100%
	);
}

/* Desktop: wrappers are transparent — panels and glows keep stage coords. */
.arch-col,
.arch-panel-fit {
	display: contents;
}

.arch-wire {
	position: absolute;
	z-index: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

.arch-wire--cx {
	left: 50%;
	transform: translateX(-50%);
}

.arch-wire__rot {
	flex: none;
}

.arch-wire__rot--90 {
	transform: rotate(90deg);
}

.arch-wire__rot--90-flip {
	transform: rotate(90deg) scaleY(-1);
}

.arch-wire__rot--neg90 {
	transform: rotate(-90deg);
}

.arch-wire__rot--neg90-flip {
	transform: rotate(-90deg) scaleY(-1);
}

.arch-wire__src {
	position: relative;
}

.arch-wire__img {
	position: absolute;
}

.arch-wire__img svg {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	overflow: visible;
}

.arch-node {
	position: absolute;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 8px 12px 8px 8px;
	border: 1px solid #1f2937;
	border-radius: 14px;
	background: #111827;
	box-sizing: border-box;
}

.arch-node--company {
	left: 257px;
	top: 56px;
	flex-direction: column;
	gap: 8px;
	width: 86px;
	padding: 12px 26px;
	border-radius: 16px;
}

.arch-node--company-orbit {
	top: 67px;
}

.arch-node--sms {
	left: 27px;
	top: 222px;
	gap: 6px;
	padding: 8px;
}

.arch-node--msg {
	left: 164px;
	top: 222px;
	width: 131px;
	gap: 6px;
	padding: 8px;
}

.arch-node--wa {
	left: 303px;
	top: 222px;
	width: 131px;
	gap: 6px;
	padding: 8px;
}

.arch-node--email {
	left: 442px;
	top: 222px;
	width: 131px;
	gap: 6px;
	padding: 8px;
}

.arch-node--c {
	left: 76px;
	top: 384px;
}

.arch-node--b {
	left: 234px;
	top: 384px;
}

.arch-node--a {
	left: 391px;
	top: 384px;
}

.arch-node--oc {
	left: 73px;
	top: 373px;
}

.arch-node--ob {
	left: 234px;
	top: 373px;
}

.arch-node--oa {
	left: 394px;
	top: 373px;
}

.arch-node__label {
	color: #f3f4f6;
	font-weight: 400;
	font-size: 14px;
	line-height: normal;
	letter-spacing: -0.5px;
	white-space: nowrap;
}

.arch-well {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 33px;
	height: 33px;
	padding: 3.3px;
	border-radius: 8.25px;
	box-sizing: border-box;
	flex-shrink: 0;
}

.arch-well--muted {
	background: rgba(55, 65, 81, 0.2);
}

.arch-well--sms {
	background: rgba(67, 228, 94, 0.2);
}

.arch-well--wa {
	background: rgba(37, 211, 102, 0.2);
}

.arch-well--email,
.arch-well--msg {
	background: rgba(50, 95, 236, 0.2);
}

.arch-mark {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26.779px;
	height: 26.779px;
	border-radius: 5.5px;
	overflow: hidden;
	flex-shrink: 0;
}

.arch-mark--building {
	background: #374151;
}

.arch-mark--person {
	background: linear-gradient(90deg, #374151 0%, #374151 100%), linear-gradient(90deg, #13386b 0%, #13386b 100%);
}

.arch-mark--sms {
	background: linear-gradient(to top, #0cbd2a 6.638%, #5bf675 87.59%);
}

.arch-mark--email {
	background: #325fec;
}

.arch-mark--msg {
	background: #fff;
}

.arch-mark--wa {
	background: transparent;
}

.arch-mark svg {
	display: block;
	flex-shrink: 0;
}

.arch-hub {
	position: absolute;
	z-index: 1;
	left: 50%;
	top: 242px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 11.542px;
	border-radius: 16px;
	background: #007bff;
	transform: translate(-50%, -50%);
	box-sizing: border-box;
}

.arch-caption {
	position: absolute;
	top: 877px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 0;
	padding: 8px;
	border-radius: 16px;
	box-sizing: border-box;
	font-weight: 400;
	font-size: 18px;
	line-height: normal;
	letter-spacing: -0.07px;
	white-space: nowrap;
}

.arch-caption--bad {
	left: 109px;
	background: rgba(244, 63, 94, 0.1);
	color: #ff7088;
}

.arch-caption--good {
	left: 840px;
	background: rgba(0, 166, 62, 0.2);
	color: #34e576;
}

.arch-caption__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	flex-shrink: 0;
}

@media (max-width: 900px) {
	.arch__frame {
		height: auto;
	}

	.arch-col {
		position: relative;
		display: flex;
		justify-content: center;
		width: min(535px, 100%);
		overflow: visible;
		container-type: inline-size;
		container-name: arch-col;
	}

	/* Same SVG ellipses as desktop — red Traditional, blue Orbit — outside the scale. */
	.arch-col .arch__glow {
		left: 50%;
		top: 48%;
		transform: translate(-50%, -50%);
	}

	.arch-col--trad .arch__glow--left {
		width: min(100%, 420px);
		height: 105%;
	}

	.arch-col--orbit .arch__glow--right {
		width: min(108%, 440px);
		height: 88%;
	}

	.arch-col .arch__glow-img {
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	.arch__stage {
		position: relative;
		left: auto;
		width: 100%;
		height: auto;
		margin: 0;
		transform: none;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 16px;
		padding: 48px 16px 64px;
		overflow: visible;
		box-sizing: border-box;
		container-type: inline-size;
		container-name: arch-stage;
	}

	.arch__intro {
		position: relative;
		left: auto;
		top: auto;
		width: min(606px, 100%);
		order: 0;
	}

	.arch__headline {
		width: 100%;
		font-size: clamp(26px, 7vw, 34px);
	}

	/* Label → chart → caption for each side (not stacked captions). */
	.arch__col-label--left {
		order: 1;
	}

	.arch-col--trad {
		order: 2;
	}

	.arch-caption--bad {
		order: 3;
	}

	.arch__col-label--right {
		order: 4;
		margin-top: 16px;
	}

	.arch-col--orbit {
		order: 5;
	}

	.arch-caption--good {
		order: 6;
	}

	.arch__col-label,
	.arch-col,
	.arch-panel-fit,
	.arch-caption {
		position: relative;
		left: auto;
		top: auto;
	}

	.arch__col-label {
		width: 100%;
		text-align: center;
		font-size: 20px;
	}

	/*
	 * Scale wrapper (not .arch-panel) so [data-animate=group] transform
	 * does not wipe the mobile fit scale.
	 */
	.arch-panel-fit {
		position: relative;
		width: 100%;
		display: flex;
		justify-content: center;
		transform: scale(min(1, calc(100cqi / 600px)));
		transform-origin: top center;
		margin-bottom: calc(520px * (min(1, calc(100cqi / 600px)) - 1));
	}

	.arch-panel {
		position: relative;
		z-index: 1;
		left: auto;
		top: auto;
		width: 600px;
		height: 520px;
		max-width: none;
		aspect-ratio: auto;
		flex-shrink: 0;
	}

	.arch-caption {
		display: flex;
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
		padding: 10px 14px;
		white-space: normal;
		text-align: left;
		font-size: 15px;
		line-height: 1.35;
		border-radius: 14px;
	}

	.arch-caption--bad,
	.arch-caption--good {
		left: auto;
	}
}

/* -------------------------------------------------------------------------
   Supervisor — Figma 1:6796, 1440 × 1020 at (0, 9987)
   Dashboard 778 × 607 r40. Photos from Media Library. Motion empty.
   ---------------------------------------------------------------------- */
.sup {
	background: var(--orbit-black);
	overflow: visible;
}

.sup__frame {
	position: relative;
	height: calc(1020px * var(--orbit-z));
	overflow: visible;
	max-width: 1440px;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
}

.sup__stage {
	position: absolute;
	left: 50%;
	top: 0;
	width: 1440px;
	height: 1020px;
	margin-left: -720px;
	transform: scale(var(--orbit-z));
	transform-origin: top center;
}

.sup__intro {
	position: absolute;
	left: 50%;
	top: 96px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	width: 632px;
	margin-left: -316px;
}

.sup__eyebrow {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: #9ca3af;
	font-weight: 500;
	font-size: 11px;
	line-height: 17.05px;
	letter-spacing: 1.76px;
	text-transform: uppercase;
	white-space: nowrap;
}

.sup__dot {
	width: 6px;
	height: 6px;
	border-radius: 3px;
}

.sup__headline {
	margin: 0;
	color: #f3f4f6;
	font-weight: 500;
	font-size: 34px;
	line-height: normal;
	letter-spacing: -0.5px;
	text-align: center;
	white-space: nowrap;
}

.sup__body {
	margin: 0;
	width: 620px;
	color: #9ca3af;
	font-weight: 400;
	font-size: 19px;
	line-height: 28.5px;
	letter-spacing: -0.07px;
	text-align: center;
}

.sup-list {
	position: absolute;
	left: 100px;
	top: 395px;
	width: 374px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.sup-feat {
	position: relative;
	padding-left: 8px;
	opacity: 0.5;
}

.sup-feat.is-active {
	padding-left: 11px;
	opacity: 1;
}

.sup-feat:not(.is-active):hover,
.sup-feat:not(.is-active):focus-within {
	opacity: 0.72;
}

.sup-feat.is-active::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 3px;
	height: 30px;
	background: #2f6fed;
}

.sup-feat__row {
	display: flex;
	align-items: center;
	gap: 8px;
	width: auto;
	max-width: 100%;
	height: 30px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: inherit;
	text-align: left;
	white-space: nowrap;
	cursor: pointer;
}

.sup-feat__row:focus-visible {
	outline: 1px solid #2f6fed;
	outline-offset: 4px;
}

.sup-feat__num {
	color: #2f6fed;
	font-weight: 600;
	font-size: 24px;
	line-height: normal;
	text-transform: uppercase;
}

.sup-feat__title {
	color: #f4f4f5;
	font-weight: 500;
	font-size: 24px;
	line-height: normal;
}

.sup-feat__panel[hidden] {
	display: none;
}

.sup-feat.is-active .sup-feat__panel {
	animation: sup-feat-in 380ms ease-out;
}

.sup-feat__lead,
.sup-feat__body {
	margin: 8px 0 0 -3px;
	width: 366px;
	color: #f4f4f5;
}

.sup-feat__lead {
	font-weight: 500;
	font-size: 22px;
	line-height: 25.3px;
	letter-spacing: -0.33px;
}

.sup-feat__body {
	font-weight: 400;
	font-size: 14px;
	line-height: 21.7px;
	letter-spacing: -0.07px;
}

.sup-feat__body--intro {
	font-size: 16px;
}

@keyframes sup-feat-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.sup-board-scale {
	position: absolute;
	left: 562px;
	top: 309px;
	width: 778px;
	height: 607px;
}

.sup-board {
	position: relative;
	width: 778px;
	height: 607px;
	overflow: hidden;
	border-radius: 40px;
	background: #18181b;
	font-family: "Inter", var(--orbit-font);
}

.sup-board img {
	max-width: none;
}

.sup-card__face-img,
.sup-lead__face-img {
	height: 100%;
}

.sup-wire {
	position: absolute;
	pointer-events: none;
}

.sup-wire--mid {
	left: 50%;
	top: 148px;
	width: 0;
	height: 77px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.sup-wire--mid svg {
	flex: none;
	transform: rotate(-90deg);
	display: block;
}

.sup-wire--tr {
	left: 484px;
	top: 229px;
	width: 61px;
	height: 75px;
}

.sup-wire--tl {
	left: 233px;
	top: 229px;
	width: 62px;
	height: 75px;
}

.sup-wire--br {
	left: 484px;
	top: 368px;
	width: 61px;
	height: 75px;
}

.sup-wire--bl {
	left: 233px;
	top: 368px;
	width: 62px;
	height: 75px;
}

.sup-wire__rot {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

.sup-wire__rot--tl {
	transform: rotate(180deg) scaleY(-1);
}

.sup-wire__rot--br {
	transform: scaleY(-1);
}

.sup-wire__rot--bl {
	transform: rotate(180deg);
}

.sup-wire__img {
	display: block;
	line-height: 0;
}

.sup-wire--tr .sup-wire__img {
	position: absolute;
	inset: -1% -1.23%;
}

.sup-wire--tl .sup-wire__img,
.sup-wire--bl .sup-wire__img {
	width: 62px;
	height: 75px;
}

.sup-wire--br .sup-wire__img {
	width: 61px;
	height: 75px;
}

.sup-wire svg {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
}

.sup-pin {
	position: absolute;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #3a79fd;
}

.sup-pin--mid {
	left: 384px;
	top: 186px;
}

.sup-pin--bl {
	left: 249px;
	top: 400px;
}

.sup-pin--tr {
	left: 521px;
	top: 262px;
}

.sup-whisper {
	position: absolute;
	left: 50%;
	top: 51px;
	width: 227px;
	height: 108px;
	margin-left: -113px;
	overflow: hidden;
	border-radius: 16px;
	background: #007bff;
	box-shadow:
		0 4px 64px 0 rgba(50, 95, 236, 0.3),
		0 20px 50px -12px rgba(0, 0, 0, 0.08);
}

.sup-whisper__icon {
	position: absolute;
	left: 14px;
	top: 11px;
	display: block;
	width: 25px;
	height: 25px;
	overflow: hidden;
	border-radius: 99px;
	background: #e6eefd;
}

.sup-whisper__icon svg {
	position: absolute;
	top: 22.5%;
	right: 24.57%;
	bottom: 21.63%;
	left: 25%;
	width: auto;
	height: auto;
	max-width: none;
}

.sup-whisper__title {
	position: absolute;
	left: 43px;
	top: 14px;
	margin: 0;
	color: #fff;
	font-weight: 600;
	font-size: 14px;
	line-height: normal;
	letter-spacing: -0.56px;
	white-space: nowrap;
}

.sup-whisper__note {
	position: absolute;
	left: 50%;
	top: 43px;
	width: 200px;
	height: 52px;
	margin-left: -100px;
	overflow: hidden;
	border-radius: 12px;
	background: #fff;
}

.sup-whisper__note p {
	position: absolute;
	left: 11px;
	top: 7px;
	margin: 0;
	width: 108px;
	color: #4a5578;
	font-weight: 500;
	font-size: 13px;
	line-height: 19px;
	letter-spacing: -0.52px;
}

.sup-whisper__send {
	position: absolute;
	left: 161px;
	top: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 31px;
	height: 32px;
	overflow: hidden;
	border-radius: 10px;
	background: #dae5f3;
}

.sup-whisper__send svg {
	display: block;
	width: 19px;
	height: 19px;
	max-width: none;
}

.sup-card {
	position: absolute;
	width: 176px;
	height: 196px;
	overflow: hidden;
	border-radius: 16px;
	border: 0;
	background: #27272a;
	box-shadow: 0 20px 50px -12px rgba(0, 0, 0, 0.08);
	--sup-stroke: linear-gradient(90deg, #656565 0%, #000 100%);
}

.sup-card--ai {
	--sup-stroke: linear-gradient(90deg, #656565 0%, #000 100%);
}

.sup-card--human {
	--sup-stroke: linear-gradient(90deg, #000 0%, #666 100%);
}

.sup-card::before,
.sup-lead::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	padding: 1px;
	border-radius: inherit;
	pointer-events: none;
	background: var(--sup-stroke);
	-webkit-mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
}

.sup-card--tl {
	left: 57px;
	top: 90px;
}

.sup-card--tr {
	left: 545px;
	top: 90px;
}

.sup-card--bl {
	left: 57px;
	top: 359px;
}

.sup-card--br {
	left: 545px;
	top: 359px;
}

.sup-card__live {
	position: absolute;
	left: 16px;
	top: 15px;
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 4px 6px;
	border-radius: 99px;
	background: #114129;
	color: #29c376;
	font-weight: 600;
	font-size: 10px;
	line-height: normal;
	letter-spacing: -0.4px;
	white-space: nowrap;
}

.sup-card__live-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
}

.sup-card__wave {
	position: absolute;
	left: 74px;
	top: 18px;
	width: 69px;
	height: 15px;
	overflow: visible;
}

.sup-card__wave svg {
	display: block;
	width: 70px;
	height: 15px;
	max-width: none;
}

.sup-card__face {
	position: absolute;
	left: 16px;
	top: 51px;
	width: 52px;
	height: 52px;
	overflow: hidden;
	border-radius: 121.5px;
}

.sup-card__face-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

.sup-card--tl .sup-card__face-img {
	width: 237.9%;
	height: 242.88%;
	inset: auto;
	left: -12.23%;
	top: -59.16%;
	object-fit: fill;
}

.sup-card__bot {
	position: absolute;
	left: 14px;
	top: 48px;
	width: 53px;
	height: 53px;
	line-height: 0;
}

.sup-card__bot svg {
	display: block;
	width: 53px;
	height: 53px;
	max-width: none;
}

.sup-card__name,
.sup-card__role {
	position: absolute;
	left: 74px;
	margin: 0;
	font-weight: 600;
	font-size: 13px;
	line-height: normal;
	letter-spacing: -0.52px;
	white-space: nowrap;
}

.sup-card__name {
	top: 60px;
	color: #fafafa;
}

.sup-card__role {
	top: 78px;
	color: #a1a1aa;
}

.sup-card--tr .sup-card__name {
	top: 57px;
}

.sup-card--tr .sup-card__role {
	top: 75px;
}

.sup-card--bl .sup-card__role {
	top: 79px;
}

.sup-card__quote {
	position: absolute;
	left: 14px;
	top: 121px;
	width: 143px;
	height: 54px;
	overflow: hidden;
	border-radius: 16px;
	background: #3f3f46;
}

.sup-card__quote p {
	margin: 8px 0 0 14px;
	width: 109px;
	color: #e4e4e7;
	font-weight: 500;
	font-size: 13px;
	line-height: 19px;
	letter-spacing: -0.52px;
}

.sup-lead {
	position: absolute;
	left: calc(50% + 0.5px);
	top: calc(50% + 44px);
	width: 189px;
	height: 245px;
	overflow: hidden;
	border-radius: 24px;
	border: 0;
	background: linear-gradient(180deg, #52525b 0%, #27272a 67.755%);
	box-shadow: 0 20px 50px -12px rgba(0, 0, 0, 0.08);
	transform: translate(-50%, -50%);
	--sup-stroke: linear-gradient(
		180deg,
		#437efe 0%,
		#5886e9 12%,
		#6985c4 31%,
		#69789b 49%,
		#595f6f 67%,
		#424349 86%,
		#27272a 100%
	);
}

.sup-lead__face {
	position: absolute;
	left: 50%;
	top: 15px;
	width: 138px;
	height: 138px;
	margin-left: -69px;
	overflow: hidden;
	border-radius: 199px;
}

.sup-lead__face-img {
	position: absolute;
	left: -6.19%;
	top: 0;
	width: 112.39%;
	height: 125.36%;
	max-width: none;
	object-fit: fill;
}

.sup-lead__name {
	position: absolute;
	left: 0;
	right: 0;
	top: 168px;
	margin: 0;
	color: #fafafa;
	font-weight: 500;
	font-size: 18px;
	line-height: normal;
	letter-spacing: -0.72px;
	text-align: center;
}

.sup-lead__status {
	position: absolute;
	left: 50%;
	top: 199px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 8px 8px 8px 10px;
	border-radius: 99px;
	background: #233756;
	color: #f4f4f5;
	font-weight: 500;
	font-size: 12px;
	line-height: normal;
	letter-spacing: -0.48px;
	white-space: nowrap;
	transform: translateX(-50%);
}

.sup-lead__status-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
}

@media (max-width: 900px) {
	.sup__frame {
		height: auto;
	}

	.sup__stage {
		position: relative;
		left: auto;
		width: 100%;
		height: auto;
		margin: 0;
		transform: none;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 32px;
		padding: 48px 16px 64px;
	}

	.sup__intro,
	.sup-list,
	.sup-board-scale {
		position: relative;
		left: auto;
		top: auto;
		margin: 0;
	}

	.sup__intro,
	.sup__headline,
	.sup__body {
		width: min(632px, 100%);
		white-space: normal;
	}

	.sup__headline {
		font-size: clamp(24px, 7vw, 34px);
	}

	.sup-list {
		width: min(374px, 100%);
	}

	.sup-feat.is-active::before {
		top: 7px;
	}

	.sup-feat__row {
		height: auto;
		min-height: 44px;
	}

	.sup-feat__lead,
	.sup-feat__body {
		width: 100%;
		max-width: 366px;
	}

	.sup-board-scale {
		width: 100%;
		max-width: 535px;
		height: auto;
		aspect-ratio: 778 / 607;
		overflow: hidden;
		container-type: inline-size;
		margin-inline: auto;
	}

	.sup-board {
		position: absolute;
		left: 0;
		top: 0;
		transform: scale(calc(100cqi / 778px));
		transform-origin: top left;
	}
}

/* -------------------------------------------------------------------------
   Network CTA — Figma 1:198, 1240 × 367 r32 at (100, 11103)
   96px canvas gap after Supervisor (ends y=11007).
   Card fill: linear-gradient(95deg, #001A6D 8.49%, #007BFF 93.23%), r40.
   Globe 1:202. Copy 48:104. Motion empty.
   ---------------------------------------------------------------------- */
.ncta {
	background: var(--orbit-black);
	overflow: visible;
}

.ncta__frame {
	position: relative;
	height: calc(463px * var(--orbit-z));
	overflow: visible;
	max-width: 1440px;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
}

.ncta__stage {
	position: absolute;
	left: 50%;
	top: 0;
	width: 1440px;
	height: 463px;
	margin-left: -720px;
	transform: scale(var(--orbit-z));
	transform-origin: top center;
}

.ncta-card {
	position: absolute;
	left: 100px;
	top: 96px;
	width: 1240px;
	height: 367px;
	overflow: hidden;
	border-radius: 40px;
	background: linear-gradient(95deg, #001a6d 8.49%, #007bff 93.23%);
}

.ncta-globe {
	position: absolute;
	left: 711px;
	top: 0;
	z-index: 1;
	width: 509px;
	height: 367px;
	pointer-events: none;
}

.ncta-globe__img {
	display: block;
	width: 509px;
	height: 367px;
	max-width: none;
}

.ncta-copy {
	position: absolute;
	left: 64px;
	top: 86px;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 24px;
	width: 569px;
}

.ncta-copy__text {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
}

.ncta-copy__headline {
	margin: 0;
	color: #f3f4f6;
	font-weight: 500;
	font-size: 34px;
	line-height: normal;
	letter-spacing: -0.5px;
}

.ncta-copy__body {
	margin: 0;
	color: #c0d7ff;
	font-weight: 400;
	font-size: 18px;
	line-height: 28px;
}

.ncta-copy__ctas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

@media (max-width: 900px) {
	.ncta__frame {
		height: auto;
	}

	.ncta__stage {
		position: relative;
		left: auto;
		width: 100%;
		height: auto;
		margin: 0;
		transform: none;
		padding: 40px 16px 56px;
	}

	.ncta-card {
		position: relative;
		left: auto;
		top: auto;
		width: 100%;
		height: auto;
		min-height: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 16px;
		padding: 0 20px 28px;
		border-radius: 28px;
		overflow: hidden;
		text-align: center;
	}

	.ncta-copy {
		position: relative;
		left: auto;
		top: auto;
		width: 100%;
		max-width: 420px;
		align-items: center;
		gap: 20px;
	}

	.ncta-copy__text {
		align-items: center;
	}

	.ncta-copy__headline {
		font-size: clamp(24px, 6.5vw, 32px);
		line-height: 1.2;
		text-align: center;
	}

	.ncta-copy__body {
		font-size: 16px;
		line-height: 1.45;
		text-align: center;
	}

	.ncta-copy__ctas {
		justify-content: center;
		width: 100%;
		gap: 10px;
	}

	/* Stick globe to the top edge of the blue card (desktop top: 0). */
	.ncta-globe {
		position: relative;
		left: auto;
		top: 0;
		order: -1;
		width: min(260px, 78%);
		height: auto;
		aspect-ratio: 509 / 367;
		align-self: center;
		margin: 0;
		opacity: 0.95;
		line-height: 0;
	}

	.ncta-globe__img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: top center;
	}
}

@media (max-width: 420px) {
	.ncta-copy__ctas {
		flex-direction: column;
		align-items: stretch;
	}

	.ncta-copy__ctas .hero__cta {
		width: 100%;
	}
}

/* -------------------------------------------------------------------------
   Developers — Figma 1:6329, 1441 × 745 at (0, 11487).
   17px canvas gap after Network CTA (ends y=11470). Glow 1:6330.
   Patterns 1:6331 / 1:6332. Code 1:6340. Copy 48:107. Motion empty.
   ---------------------------------------------------------------------- */
.dev {
	background: var(--orbit-black);
	overflow: visible;
}

.dev__frame {
	position: relative;
	height: calc(762px * var(--orbit-z));
	overflow: visible;
	max-width: 1440px;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
}

.dev__glows {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: visible;
}

.dev-code-fit {
	display: contents;
}

.dev-glow {
	position: absolute;
	left: 751px;
	top: 208px;
	z-index: 0;
	width: 554px;
	height: 415px;
	pointer-events: none;
	mix-blend-mode: screen;
}

.dev-glow__img {
	position: absolute;
	left: -283px;
	top: -283px;
	display: block;
	width: 1120px;
	height: 981px;
	max-width: none;
}

/* Ellipse 7479 — 531×531 at page (−205, 12037), opacity 0.3, into Pricing. */
.dev-wash {
	position: absolute;
	left: calc(-205px * var(--orbit-z));
	top: calc(550px * var(--orbit-z));
	width: calc(531px * var(--orbit-z));
	height: calc(531px * var(--orbit-z));
	opacity: 0.3;
	pointer-events: none;
}

.dev-wash__img {
	position: absolute;
	left: calc(-333px * var(--orbit-z));
	top: calc(-333px * var(--orbit-z));
	display: block;
	width: calc(1197px * var(--orbit-z));
	height: calc(1197px * var(--orbit-z));
	max-width: none;
}

.dev__stage {
	position: absolute;
	left: 50%;
	top: 0;
	z-index: 1;
	width: 1440px;
	height: 762px;
	margin-left: -720px;
	transform: scale(var(--orbit-z));
	transform-origin: top center;
}

.dev-pattern {
	position: absolute;
	z-index: 0;
	opacity: 0.2;
	pointer-events: none;
}

.dev-pattern--a {
	left: 1012px;
	top: 17px;
	width: 429px;
	height: 429px;
}

.dev-pattern--b {
	left: 604px;
	top: 210px;
	width: 440px;
	height: 440px;
}

.dev-pattern__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

.dev-copy {
	position: absolute;
	left: 100px;
	top: 264px;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 498px;
}

.dev-copy__lead {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
}

.dev-copy__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: #76767d;
	font-weight: 500;
	font-size: 11px;
	line-height: 17.05px;
	letter-spacing: 1.76px;
	text-transform: uppercase;
}

.dev-copy__dot {
	width: 6px;
	height: 6px;
	border-radius: 3px;
	--orbit-pulse: #3a7dff;
}

.dev-copy__text {
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 100%;
}

.dev-copy__headline {
	margin: 0;
	color: #f3f4f6;
	font-weight: 500;
	font-size: 34px;
	line-height: normal;
	letter-spacing: -0.5px;
}

.dev-copy__body {
	margin: 0;
	color: #9ca3af;
	font-weight: 400;
	font-size: 18px;
	line-height: 28px;
}

.dev-copy__footnote {
	margin: 0;
	width: 353px;
	color: #fff;
	font-weight: 400;
	font-size: 14px;
	line-height: normal;
}

.dev-code {
	position: absolute;
	left: 752px;
	top: 218px;
	z-index: 2;
	display: flex;
	flex-direction: column;
	width: 553px;
	height: 405px;
	overflow: hidden;
	border: 0;
	border-radius: 24px;
	background: #111827;
}

.dev-code::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	padding: 1.5px;
	border-radius: inherit;
	pointer-events: none;
	/* Pixel-sampled from Figma 1:6340 — 135° stroke, bright TL/BR, transparent TR/BL. */
	background: linear-gradient(
		135deg,
		rgba(50, 95, 236, 0.95) 0%,
		rgba(50, 95, 236, 0.82) 8%,
		rgba(50, 95, 236, 0.62) 18%,
		rgba(50, 95, 236, 0.44) 26%,
		rgba(50, 95, 236, 0.28) 34%,
		rgba(50, 95, 236, 0.12) 42%,
		rgba(50, 95, 236, 0) 50%,
		rgba(50, 95, 236, 0.12) 58%,
		rgba(50, 95, 236, 0.28) 66%,
		rgba(50, 95, 236, 0.44) 74%,
		rgba(50, 95, 236, 0.62) 82%,
		rgba(50, 95, 236, 0.8) 90%,
		rgba(50, 95, 236, 0.9) 100%
	);
	-webkit-mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	mask-composite: exclude;
}

.dev-code__header {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	gap: 24px;
	width: 100%;
	height: 53px;
	padding: 16px 24px 16px 25px;
	border-bottom: 1px solid #374151;
	background: #111827;
}

.dev-code__lights {
	display: flex;
	flex-shrink: 0;
	gap: 6px;
	width: 52.5px;
	height: 13.5px;
}

.dev-code__light {
	flex-shrink: 0;
	width: 13.5px;
	height: 13.5px;
	border-radius: 6.75px;
	background: #1f2937;
}

.dev-code__tabs {
	display: flex;
	flex: 1 0 0;
	align-items: center;
	min-width: 0;
}

.dev-code__tab {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 27px;
	margin: 0;
	padding: 4px 8px;
	border: 0;
	border-radius: 6px;
	background: transparent;
	appearance: none;
	color: #ededee;
	font-family: var(--orbit-mono);
	font-weight: 400;
	font-size: 12px;
	line-height: 18.6px;
	letter-spacing: -0.07px;
	white-space: nowrap;
	cursor: pointer;
}

.dev-code__tab.is-active,
.dev-code__tab[aria-selected="true"] {
	background: #1d293d;
}

.dev-code__tab:hover:not(.is-active):not([aria-selected="true"]) {
	background: rgba(29, 41, 61, 0.55);
}

.dev-code__panes {
	flex: 1 0 0;
	min-height: 0;
}

.dev-code__content {
	height: 100%;
	padding: 20px 20px 20px 24px;
	overflow: hidden;
}

.dev-code__content[hidden] {
	display: none;
}

.dev-code__line {
	margin: 0 0 1px;
	font-family: var(--orbit-mono);
	font-weight: 400;
	font-size: 12px;
	line-height: 19.2px;
	letter-spacing: -0.07px;
	white-space: pre;
}

.dev-code__line--blank {
	line-height: 20px;
}

.dev-k {
	color: #c084fc;
}

.dev-p {
	color: #d6d6dc;
}

.dev-i {
	color: #ededee;
}

.dev-s {
	color: #fcb96a;
}

.dev-f {
	color: #6aa1ff;
}

.dev-c {
	color: #4a4a52;
}

@media (max-width: 900px) {
	.dev__frame {
		height: auto;
		overflow: visible;
	}

	.dev-pattern {
		display: none;
	}

	.dev-code-fit {
		display: block;
		position: relative;
		width: 100%;
		max-width: 553px;
	}

	/* Figma 1:6330 #325FEC — same SVG, locked behind the code card. */
	.dev-glow {
		left: 0;
		top: -6px;
		width: 100%;
		height: 100%;
	}

	.dev-glow__img {
		left: -51%;
		top: -68%;
		width: 202%;
		height: 236%;
	}

	.dev-wash {
		display: none;
	}

	.dev__stage {
		position: relative;
		left: auto;
		width: 100%;
		height: auto;
		margin: 0;
		transform: none;
		display: flex;
		flex-direction: column;
		gap: 32px;
		padding: 48px 16px 64px;
	}

	.dev-copy {
		position: relative;
		left: auto;
		top: auto;
		width: 100%;
		max-width: 498px;
	}

	.dev-copy__headline {
		font-size: clamp(24px, 7vw, 34px);
	}

	.dev-copy__footnote {
		width: 100%;
		max-width: 353px;
	}

	.dev-code {
		position: relative;
		left: auto;
		top: auto;
		width: 100%;
		max-width: 553px;
		height: auto;
		min-height: 380px;
	}

	.dev-code__header {
		flex-wrap: wrap;
		row-gap: 8px;
		height: auto;
		min-height: 44px;
		padding: 10px 12px;
	}

	.dev-code__tabs {
		flex-wrap: wrap;
		gap: 4px;
		width: 100%;
	}

	.dev-code__tab {
		min-height: 36px;
		height: auto;
	}

	.dev-code__panes {
		flex: 1 1 auto;
		min-height: 280px;
	}

	.dev-code__content {
		height: auto;
		min-height: 260px;
		overflow: auto;
		-webkit-overflow-scrolling: touch;
	}

	.dev-code__line {
		font-size: 11px;
		line-height: 1.55;
	}
}

/* -------------------------------------------------------------------------
   Pricing — Figma 48:112, 1442 × 912 at (0, 12232).
   Header 48:111. Grid 48:110, 4×2 cards 298.5 × 193 r24.
   Icons from Media Library. Motion empty.
   ---------------------------------------------------------------------- */
.price {
	/* Transparent so Developers glow 1:6330 + Ellipse 7479 wash bleed through. */
	background: transparent;
	overflow: visible;
}

.price__frame {
	position: relative;
	height: calc(912px * var(--orbit-z));
	overflow: visible;
	max-width: 1440px;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
}

.price__stage {
	position: absolute;
	left: 50%;
	top: 0;
	width: 1440px;
	height: 912px;
	margin-left: -720px;
	transform: scale(var(--orbit-z));
	transform-origin: top center;
}

.price__head {
	position: absolute;
	left: 412px;
	top: 120px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	width: 616px;
}

.price__intro {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	width: 100%;
}

.price__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: #76767d;
	font-weight: 500;
	font-size: 11px;
	line-height: 17.05px;
	letter-spacing: 1.76px;
	text-transform: uppercase;
}

.price__dot {
	width: 6px;
	height: 6px;
	border-radius: 3px;
	--orbit-pulse: #3a7dff;
}

.price__headline {
	margin: 0;
	color: #f3f4f6;
	font-weight: 500;
	font-size: 34px;
	line-height: normal;
	letter-spacing: -0.5px;
	text-align: center;
	white-space: nowrap;
}

.price__body {
	margin: 0;
	width: 100%;
	color: #9ca3af;
	font-weight: 400;
	font-size: 18px;
	line-height: 28px;
	text-align: center;
}

.price__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 38px;
	padding: 0 15px;
	border: 1px solid transparent;
	border-radius: 99px;
	background: var(--orbit-brand-solid);
	color: var(--orbit-white);
	font-weight: 500;
	font-size: 14px;
	line-height: 21.7px;
	letter-spacing: -0.07px;
	white-space: nowrap;
	cursor: pointer;
	transition: transform 150ms ease-out, background-color 150ms ease-out, box-shadow 150ms ease-out;
}

.price__cta:hover,
.price__cta:focus-visible {
	background: #4782f0;
	transform: scale(1.02);
	box-shadow: 0 4px 16px rgba(47, 111, 237, 0.35);
}

.price__grid {
	position: absolute;
	left: 99px;
	top: 390px;
	display: grid;
	grid-template-columns: repeat(4, 298.5px);
	grid-template-rows: repeat(2, 193px);
	gap: 16px;
	width: 1242px;
	height: 402px;
}

.price-card {
	box-sizing: border-box;
	width: 298.5px;
	height: 193px;
	padding: 24px;
	overflow: hidden;
	border: 1px solid #27272a;
	border-radius: 24px;
	background: #18181b;
}

.price-card__inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	width: 100%;
}

.price-icon {
	position: relative;
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	overflow: hidden;
	border-radius: 13.714px;
}

.price-icon--sms,
.price-icon--record {
	background: #2a3e6b;
}

.price-icon--wa {
	background: #03471c;
}

.price-icon--voice {
	background: rgba(37, 98, 211, 0.3);
}

.price-icon--video {
	background: rgba(210, 52, 52, 0.3);
}

.price-icon--number {
	background: rgba(0, 123, 255, 0.2);
}

.price-icon--ai {
	background: rgba(132, 78, 255, 0.3);
}

.price-icon__img {
	position: absolute;
	left: 7.85px;
	top: 7.85px;
	display: block;
	width: 32.299px;
	height: 32.299px;
	max-width: none;
}

.price-icon__tile {
	position: absolute;
	left: 7.85px;
	top: 7.85px;
	width: 32.299px;
	height: 32.299px;
	overflow: hidden;
	border-radius: 7.178px;
}

.price-icon--video .price-icon__tile {
	background: #d23434;
}

.price-icon--number .price-icon__tile {
	background: #007bff;
}

.price-icon--ai .price-icon__tile {
	background: #844eff;
}

.price-icon--record .price-icon__tile {
	background: #fff;
}

.price-icon__leaf {
	position: absolute;
	overflow: hidden;
}

.price-icon--video .price-icon__leaf {
	left: 6.72px;
	top: 6.72px;
	width: 18.857px;
	height: 18.857px;
}

.price-icon--number .price-icon__leaf {
	left: 4.15px;
	top: 5.01px;
	width: 24px;
	height: 24px;
}

.price-icon--ai .price-icon__leaf {
	left: 3.29px;
	top: 4.15px;
	width: 24px;
	height: 24px;
}

.price-icon--record .price-icon__leaf {
	left: 5.86px;
	top: 5.86px;
	width: 19.714px;
	height: 19.714px;
}

.price-icon__leaf-img {
	position: absolute;
	display: block;
	max-width: none;
}

.price-icon--video .price-icon__leaf-img {
	left: 0.986px;
	top: 0.981px;
	width: 16.893px;
	height: 16.894px;
}

.price-icon--number .price-icon__leaf-img {
	left: 3.926px;
	top: 1.09px;
	width: 16.144px;
	height: 21.82px;
}

.price-icon--ai .price-icon__leaf-img {
	left: 3.281px;
	top: 1.5px;
	width: 17.455px;
	height: 21.001px;
}

.price-icon--record .price-icon__leaf-img {
	left: 1.975px;
	top: 0;
	width: 15.777px;
	height: 19.715px;
}

.price-card__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	width: 100%;
}

.price-card__title {
	margin: 0;
	width: 100%;
	color: #f8fafc;
	font-family: "Inter", var(--orbit-font);
	font-weight: 600;
	font-size: 18px;
	line-height: 28px;
}

.price-card__rate {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.price-card__amount {
	margin: 0;
	color: #007bff;
	font-family: "Inter", var(--orbit-font);
	font-weight: 600;
	font-size: 24px;
	line-height: normal;
	white-space: nowrap;
}

.price-card__unit {
	margin: 0;
	color: #90a1b9;
	font-family: "Inter", var(--orbit-font);
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
}

@media (max-width: 900px) {
	.price {
		background: var(--orbit-black);
		overflow: hidden;
	}

	.price__frame {
		height: auto;
	}

	.price__stage {
		position: relative;
		left: auto;
		width: 100%;
		height: auto;
		margin: 0;
		transform: none;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 48px;
		padding: 64px 16px 72px;
	}

	.price__head {
		position: relative;
		left: auto;
		top: auto;
		width: 100%;
		max-width: 616px;
	}

	.price__headline {
		white-space: normal;
		font-size: clamp(24px, 7vw, 34px);
	}

	.price__cta {
		height: 44px;
		padding: 0 18px;
	}

	.price__grid {
		position: relative;
		left: auto;
		top: auto;
		width: 100%;
		height: auto;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: none;
		gap: 12px;
	}

	.price-card {
		width: 100%;
		height: auto;
		min-height: 0;
		padding: 18px 16px;
		border-radius: 20px;
	}

	.price-card__title {
		font-size: 15px;
		line-height: 1.3;
	}

	.price-card__amount {
		font-size: 22px;
		line-height: 1.2;
	}

	.price-card__unit {
		font-size: 13px;
	}
}

@media (max-width: 560px) {
	.price__stage {
		padding-left: 0;
		padding-right: 0;
	}

	.price__head {
		padding-inline: 16px;
	}

	.price__grid {
		display: flex;
		grid-template-columns: none;
		width: 100%;
		max-width: none;
		gap: 12px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: 16px;
		padding: 0 16px 4px;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.price__grid::-webkit-scrollbar {
		display: none;
	}

	.price-card {
		flex: 0 0 min(78vw, 300px);
		width: min(78vw, 300px);
		padding: 18px 18px;
		scroll-snap-align: start;
	}

	.price-card__inner {
		flex-direction: row;
		align-items: center;
		gap: 14px;
	}

	.price-card__text {
		flex: 1 1 auto;
		min-width: 0;
		gap: 4px;
	}

	.price-card__title {
		font-size: 16px;
		line-height: 1.3;
	}

	.price-card__amount {
		font-size: 24px;
	}

	.price__dots {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		margin-top: -24px;
	}

	.price__dot-btn {
		width: 6px;
		height: 6px;
		padding: 0;
		border: 0;
		border-radius: 99px;
		background: rgba(255, 255, 255, 0.22);
		cursor: pointer;
	}

	.price__dot-btn[aria-current="true"] {
		width: 16px;
		background: #fff;
	}
}

/* -------------------------------------------------------------------------
   Integrations — Figma 48:113, 1440 × 917 at (0, 13144).
   Header 1:6356. Diagram 1:6370 Media Library composite. Glow 1:6483 SVG.
   Motion empty.
   ---------------------------------------------------------------------- */
.int {
	/* Same canvas as Closing so the upward wash has no hard section seam. */
	background: #0a0a0b;
	/* Glow from Closing bleeds up — don’t clip the join. */
	overflow: visible;
}

.int__frame {
	position: relative;
	height: calc(917px * var(--orbit-z));
	overflow: visible;
	max-width: 1440px;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
}

.int-glow {
	/* Exact Figma 1:6483: 324×187 at diagram (558, 145). Inside .int-diagram. */
	position: absolute;
	z-index: 0;
	left: 558px;
	top: 145px;
	width: 324px;
	height: 187px;
	pointer-events: none;
}

.int-glow__img {
	position: absolute;
	left: -426px;
	top: -426px;
	display: block;
	width: 1176px;
	height: 1039px;
	max-width: none;
}

.int__stage {
	position: absolute;
	left: 50%;
	top: 0;
	z-index: 2;
	width: 1440px;
	height: 917px;
	margin-left: -720px;
	transform: scale(var(--orbit-z));
	transform-origin: top center;
}

.int__head {
	position: absolute;
	left: 388px;
	top: 120px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	width: 665px;
}

.int__intro {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	width: 100%;
}

.int__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: #76767d;
	font-weight: 500;
	font-size: 11px;
	line-height: 17.05px;
	letter-spacing: 1.76px;
	text-transform: uppercase;
}

.int__dot {
	width: 6px;
	height: 6px;
	border-radius: 3px;
	--orbit-pulse: #3a7dff;
}

.int__headline {
	margin: 0;
	width: 100%;
	color: #fff;
	font-weight: 600;
	font-size: 38px;
	line-height: normal;
	letter-spacing: -0.76px;
	text-align: center;
	white-space: nowrap;
}

.int__body {
	margin: 0;
	width: 100%;
	color: #9ca3af;
	font-weight: 400;
	font-size: 18px;
	line-height: 28px;
	text-align: center;
}

.int-diagram {
	position: absolute;
	left: 0;
	top: 325px;
	width: 1440px;
	height: 472px;
	overflow: visible;
	pointer-events: none;
}

.int-diagram__dots {
	/*
	 * Figma Layer_1 / 1:6371 — outside scaled stage so soft-light blends
	 * against .int black + glow (transform ancestors isolate blend modes).
	 * Above glow, below stage. Diagram top 325 + dots −3 → section y 322.
	 */
	position: absolute;
	left: calc(50% - (238px * var(--orbit-z)));
	top: calc(322px * var(--orbit-z));
	z-index: 1;
	width: calc(477px * var(--orbit-z));
	height: calc(477px * var(--orbit-z));
	opacity: 0.05;
	mix-blend-mode: soft-light;
	pointer-events: none;
}

.int-diagram__dots-img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
}

.int-wire {
	position: absolute;
	z-index: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

.int-wire__rot {
	flex: none;
}

.int-wire__rot--90 {
	transform: rotate(90deg);
}

.int-wire__rot--90-flip {
	transform: rotate(90deg) scaleY(-1);
}

.int-wire__rot--neg90 {
	transform: rotate(-90deg);
}

.int-wire__rot--neg90-flip {
	transform: rotate(-90deg) scaleY(-1);
}

.int-wire__src {
	position: relative;
}

.int-wire__img {
	position: absolute;
}

.int-wire__asset {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
}

.int-tile {
	position: absolute;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border: 0;
	border-radius: 13.797px;
	background: rgba(13, 96, 252, 0.13);
	box-sizing: border-box;
	overflow: hidden;
	-webkit-backdrop-filter: blur(9.143px);
	backdrop-filter: blur(9.143px);
}

/* Figma gradient stroke 0.862 — left tiles #6B8BEF ↔ #007BFF, right reversed. */
.int-tile::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
	padding: 0.862px;
	pointer-events: none;
	background: linear-gradient(
		135deg,
		#6b8bef 0%,
		rgba(255, 255, 255, 0) 50.4808%,
		#007bff 100%
	);
	-webkit-mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
}

.int-tile--right::before {
	background: linear-gradient(
		135deg,
		#007bff 0%,
		rgba(255, 255, 255, 0) 50.4808%,
		#6b8bef 100%
	);
}

.int-tile__logo {
	position: relative;
	z-index: 0;
	display: block;
	flex: none;
}

.int-tile__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: contain;
}

.int-tile-full {
	position: absolute;
	z-index: 2;
	width: 64px;
	height: 64px;
}

.int-tile-full__img {
	display: block;
	width: 64px;
	height: 64px;
	max-width: none;
}

.int-hub {
	position: absolute;
	z-index: 3;
	left: calc(50% - 0.72px);
	top: calc(50% + 6.68px);
	width: 181.432px;
	height: 88px;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Figma hub outer shadows — separate from the pill so the inside stroke stays crisp. */
.int-hub__aura {
	position: absolute;
	inset: 0;
	border-radius: 24px;
	box-shadow:
		0 0 250px 0 rgba(50, 95, 239, 0.7),
		0 0 128px 0 #325fec;
	pointer-events: none;
}

.int-hub__pill {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 181.432px;
	height: 88px;
	/* Figma outer stroke — Inside alignment. */
	border: 0;
	border-radius: 24px;
	background: #0d60fc;
	box-shadow: inset 0 0 0 0.775px #007bff;
	box-sizing: border-box;
}

.int-hub__mark {
	display: block;
	width: 151.012px;
	height: 57.58px;
}

.int-hub__mark-img {
	display: block;
	width: 151.012px;
	height: 57.58px;
	max-width: none;
	object-fit: contain;
}

@media (max-width: 900px) {
	.int__frame {
		height: auto;
		overflow: visible;
	}

	.int-diagram__dots {
		display: none;
	}

	.int__stage {
		position: relative;
		left: auto;
		width: 100%;
		height: auto;
		margin: 0;
		transform: none;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 28px;
		padding: 64px 16px 56px;
		overflow: visible;
	}

	.int__head {
		position: relative;
		left: auto;
		top: auto;
		width: 100%;
		max-width: 665px;
	}

	.int__headline {
		white-space: normal;
		font-size: clamp(26px, 7vw, 38px);
	}

	/*
	 * Parent stage is flex + align-items:center, so a 1440 child is already
	 * centered. Only scale from top center — do not add left:50%/translate.
	 */
	.int-diagram {
		--int-mobile-scale: calc((min(100vw, 440px) - 24px) / 1100px);
		position: relative;
		left: auto;
		top: auto;
		width: 1440px;
		height: 472px;
		margin-left: 0;
		flex-shrink: 0;
		transform: scale(var(--int-mobile-scale));
		transform-origin: top center;
		margin-bottom: calc(472px * (var(--int-mobile-scale) - 1));
	}

	.int-hub__pill {
		border-radius: 20px;
	}
}

/* -------------------------------------------------------------------------
   Motion — shared hovers, pulse dots, once-only entrances
   Figma prototype/Smart Animate on 1:81, 45:5, 1:103, 48:10: empty.
   ---------------------------------------------------------------------- */
.orbit-link {
	color: var(--orbit-white);
	transition:
		color 150ms ease-out,
		background-color 150ms ease-out,
		box-shadow 150ms ease-out;
}

.site-header__nav .orbit-link:hover,
.site-header__nav .orbit-link:focus-visible {
	color: #fff;
	background: rgba(47, 111, 237, 0.22);
	box-shadow: 0 0 18px rgba(47, 111, 237, 0.32);
}

.mobile-menu-panel__nav .orbit-link {
	border-radius: 12px;
}

.mobile-menu-panel__nav .orbit-link:hover,
.mobile-menu-panel__nav .orbit-link:focus-visible {
	color: #fff;
	background: rgba(47, 111, 237, 0.2);
}

.site-header__btn,
.hero__cta {
	transition:
		transform 150ms ease-out,
		background-color 150ms ease-out,
		border-color 150ms ease-out,
		box-shadow 150ms ease-out;
}

.site-header__btn--solid:hover,
.site-header__btn--solid:focus-visible,
.hero__cta--solid:hover,
.hero__cta--solid:focus-visible {
	transform: scale(1.02);
	box-shadow: 0 4px 16px rgba(47, 111, 237, 0.35);
}

.site-header__btn--solid:hover,
.site-header__btn--solid:focus-visible {
	background: #4b73ef;
}

.hero__cta--solid:hover,
.hero__cta--solid:focus-visible {
	background: #4782f0;
}

.site-header__btn--ghost:hover,
.site-header__btn--ghost:focus-visible,
.hero__cta--ghost:hover,
.hero__cta--ghost:focus-visible {
	transform: scale(1.02);
	background: rgba(255, 255, 255, 0.08);
}

a.hero__announce {
	transition: background-color 150ms ease-out, border-color 150ms ease-out;
}

a.hero__announce:hover,
a.hero__announce:focus-visible {
	background: rgba(255, 255, 255, 0.16);
}

.hero__tab {
	transition: color 150ms ease-out, background-color 150ms ease-out;
}

.hero__tab:hover:not(.is-active) {
	background: transparent;
	color: rgba(255, 255, 255, 0.62);
}

.hero__tab:focus-visible {
	background: rgba(255, 255, 255, 0.16);
	outline: 2px solid rgba(255, 255, 255, 0.45);
	outline-offset: 2px;
}

.site-header__btn:active,
.hero__cta:active {
	transform: scale(0.98);
	box-shadow: none;
}

.orbit-pulse-dot {
	position: relative;
	flex-shrink: 0;
	overflow: visible;
	background: var(--orbit-pulse, #2f6fed);
	box-shadow: 0 0 8px 0 var(--orbit-pulse, #2f6fed);
}

.orbit-pulse-dot::before,
.orbit-pulse-dot::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 6px;
	height: 6px;
	margin: -3px 0 0 -3px;
	border-radius: 50%;
	background: var(--orbit-pulse, #2f6fed);
	pointer-events: none;
	animation: orbit-pulse-ring 2s ease-out infinite;
}

.orbit-pulse-dot::after {
	animation-delay: 1s;
}

@keyframes orbit-pulse-ring {
	0% {
		transform: scale(1);
		opacity: 0.55;
	}
	100% {
		transform: scale(3.6);
		opacity: 0;
	}
}

[data-animate="fade"] {
	opacity: 0;
}

[data-animate="fade"].is-in {
	opacity: 1;
	transition: opacity 380ms ease-out;
}

[data-animate="group"] {
	opacity: 0;
	transform: scale(0.98);
}

[data-animate="group"].is-in {
	opacity: 1;
	transform: scale(1);
	transition: opacity 450ms ease-out, transform 450ms ease-out;
}

[data-animate="stagger"] > * {
	opacity: 0;
}

[data-animate="stagger"].is-in > * {
	opacity: 1;
	transition: opacity 280ms ease-out;
}

[data-animate="stagger"].is-in > *:nth-child(1) { transition-delay: 0ms; }
[data-animate="stagger"].is-in > *:nth-child(2) { transition-delay: 20ms; }
[data-animate="stagger"].is-in > *:nth-child(3) { transition-delay: 40ms; }
[data-animate="stagger"].is-in > *:nth-child(4) { transition-delay: 60ms; }
[data-animate="stagger"].is-in > *:nth-child(5) { transition-delay: 80ms; }
[data-animate="stagger"].is-in > *:nth-child(6) { transition-delay: 100ms; }
[data-animate="stagger"].is-in > *:nth-child(7) { transition-delay: 120ms; }
[data-animate="stagger"].is-in > *:nth-child(8) { transition-delay: 140ms; }
[data-animate="stagger"].is-in > *:nth-child(9) { transition-delay: 160ms; }
[data-animate="stagger"].is-in > *:nth-child(10) { transition-delay: 180ms; }
[data-animate="stagger"].is-in > *:nth-child(11) { transition-delay: 200ms; }
[data-animate="stagger"].is-in > *:nth-child(12) { transition-delay: 220ms; }
[data-animate="stagger"].is-in > *:nth-child(13) { transition-delay: 240ms; }
[data-animate="stagger"].is-in > *:nth-child(14) { transition-delay: 260ms; }
[data-animate="stagger"].is-in > *:nth-child(15) { transition-delay: 280ms; }
[data-animate="stagger"].is-in > *:nth-child(16) { transition-delay: 300ms; }

[data-animate="hub-lines"] .hub__curve,
[data-animate="hub-lines"] .hub__line {
	opacity: 0;
}

[data-animate="hub-lines"].is-in .hub__curve,
[data-animate="hub-lines"].is-in .hub__line {
	opacity: 1;
	transition: opacity 420ms ease-out;
}

[data-animate="hub-lines"] .hub__curve path {
	stroke-dasharray: 360;
	stroke-dashoffset: 360;
}

[data-animate="hub-lines"].is-in .hub__curve path {
	stroke-dashoffset: 0;
	transition: stroke-dashoffset 480ms ease-out;
}

[data-animate="chat"] {
	opacity: 0;
}

[data-animate="chat"].is-in {
	opacity: 1;
	transition: opacity 240ms ease-out;
}

[data-animate="chat"] .channels-chat__person,
[data-animate="chat"] .channels-chat__bubble,
[data-animate="chat"] .hub-chat__head,
[data-animate="chat"] .hub-chat__bubble {
	opacity: 0;
	transform: scale(0.96);
	transform-origin: left top;
}

[data-animate="chat"] .channels-chat__bubble--user,
[data-animate="chat"] .hub-chat__bubble--user {
	transform-origin: right top;
}

[data-animate="chat"].is-in .channels-chat__person,
[data-animate="chat"].is-in .channels-chat__bubble,
[data-animate="chat"].is-in .hub-chat__head,
[data-animate="chat"].is-in .hub-chat__bubble {
	opacity: 1;
	transform: scale(1);
	transition: opacity 220ms ease-out, transform 220ms ease-out;
}

[data-animate="chat"].is-in .channels-chat__person,
[data-animate="chat"].is-in .hub-chat__head { transition-delay: 40ms; }
[data-animate="chat"].is-in .channels-chat__bubble:nth-of-type(1),
[data-animate="chat"].is-in .hub-chat__bubble--user { transition-delay: 120ms; }
[data-animate="chat"].is-in .channels-chat__bubble:nth-of-type(2),
[data-animate="chat"].is-in .hub-chat__bubble--reply { transition-delay: 240ms; }
[data-animate="chat"].is-in .channels-chat__bubble:nth-of-type(3),
[data-animate="chat"].is-in .hub-chat__bubble--delivery { transition-delay: 360ms; }

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	[data-animate],
	[data-animate="stagger"] > *,
	[data-animate="chat"] .channels-chat__person,
	[data-animate="chat"] .channels-chat__bubble,
	[data-animate="chat"] .hub-chat__head,
	[data-animate="chat"] .hub-chat__bubble,
	[data-animate="hub-lines"] .hub__curve,
	[data-animate="hub-lines"] .hub__line,
	[data-animate="hub-lines"] .hub__node,
	[data-animate="hub-lines"] .hub__curve path {
		opacity: 1 !important;
		transform: none !important;
		stroke-dashoffset: 0 !important;
	}

	.mobile-menu-backdrop,
	.mobile-menu-panel {
		transition-duration: 160ms !important;
	}

	.mobile-menu-panel {
		transform: none !important;
	}

	.mobile-menu-panel:not(.is-open) {
		opacity: 0;
	}

	.orbit-pulse-dot::before,
	.orbit-pulse-dot::after {
		content: none;
	}

	.voice-wave__bar {
		animation: none !important;
	}
}

/* -------------------------------------------------------------------------
   Closing CTA + footer — Figma 1:5947, 1440 × 1142 (one continuous block).
   Glow 1:5948 (−86, −115) 1612×801. Blue masked under Ellipse 433 curve
   (no solid black oval — that caused the harsh floating shape).
   Copy 48:109 at (417, 387). Footer 1:5957 at (132, 809), legal (132, 1026.75).
   Motion empty — fade copy only.
   ---------------------------------------------------------------------- */
.closing {
	background: #0a0a0b;
	overflow: visible;
	width: 100%;
}

.closing__frame {
	position: relative;
	/* Footer now lives in normal flow below this stage (variable height,
	   no longer part of the fixed Figma 1440-canvas), so the stage only
	   needs to cover the glow + centered copy/CTA block. */
	height: calc(809px * var(--orbit-z));
	overflow: visible;
	max-width: 1440px;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	/*
	 * Uncapped scale factor (unlike --orbit-z, which caps at 1440px) so the
	 * glow/background shape below can bleed full-bleed edge to edge on
	 * viewports wider than 1440px, while headline/CTA text keeps using the
	 * normal capped --orbit-z and stays a readable, fixed size.
	 */
	--close-full-z: calc(100vw / 1440px);
}

.closing__glows {
	position: absolute;
	left: calc(50% - (806px * var(--close-full-z)));
	top: calc(-115px * var(--orbit-z));
	z-index: 0;
	width: calc(1612px * var(--close-full-z));
	/* Figma 1:5948 is 1612×801 — glow dies above the footer (y 809). Height
	   stays on the capped --orbit-z so the shape doesn't reach further down
	   into the footer on wide viewports — only its width bleeds full-width. */
	height: calc(801px * var(--orbit-z));
	pointer-events: none;
	overflow: hidden;
}

.closing-wash {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

/*
 * Ellipse 433 as a mask hole, not a painted oval. Clip above the
 * centerline so blue only fills the crescent under the lid. Page +
 * Integrations glow show through — no section plate.
 */
.closing-wash__glow {
	position: absolute;
	inset: 0;
	z-index: 0;
	clip-path: inset(calc(201px * var(--orbit-z)) 0 0 0);
	-webkit-mask-image: radial-gradient(
		ellipse calc(722.5px * var(--close-full-z)) calc(201px * var(--orbit-z)) at 50% calc(201px * var(--orbit-z)),
		transparent 0%,
		transparent 99.6%,
		#000 100%
	);
	mask-image: radial-gradient(
		ellipse calc(722.5px * var(--close-full-z)) calc(201px * var(--orbit-z)) at 50% calc(201px * var(--orbit-z)),
		transparent 0%,
		transparent 99.6%,
		#000 100%
	);
}

.closing-wash__blue {
	position: absolute;
	inset: 0;
	z-index: 0;
	background:
		radial-gradient(
			ellipse calc(930px * var(--close-full-z)) calc(420px * var(--orbit-z)) at 50% calc(380px * var(--orbit-z)),
			#5b8cff 0%,
			#316bff 10%,
			#1a49c2 22%,
			#0e39a4 36%,
			#032886 50%,
			rgba(7, 35, 107, 0.28) 68%,
			#0a0a0b 92%,
			#0a0a0b 100%
		);
}

.closing-wash__pane {
	position: absolute;
	top: 0;
	z-index: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(792px * var(--orbit-z));
	height: calc(666px * var(--orbit-z));
	pointer-events: none;
	overflow: visible;
	opacity: 0.85;
}

.closing-wash__pane::before {
	content: "";
	flex: none;
	width: calc(666px * var(--orbit-z));
	height: calc(792px * var(--orbit-z));
	background: conic-gradient(
		from 90deg,
		rgba(73, 118, 233, 0.18) 0%,
		rgba(61, 112, 244, 0.59) 0.5%,
		rgb(49, 107, 255) 1%,
		rgb(26, 73, 194) 11%,
		rgb(14, 57, 164) 16%,
		rgb(3, 40, 134) 21%,
		rgba(7, 35, 107, 0.783) 24%,
		rgba(11, 31, 80, 0.566) 27%,
		rgba(15, 26, 53, 0.348) 31%,
		rgba(19, 22, 26, 0.131) 34%,
		rgba(7, 11, 22, 0) 84%,
		rgba(0, 0, 0, 0) 97%,
		rgba(73, 118, 233, 0.18) 100%
	);
}

.closing-wash__pane--left {
	left: calc(14px * var(--orbit-z));
}

.closing-wash__pane--left::before {
	transform: rotate(-90deg);
}

.closing-wash__pane--right {
	left: calc(806px * var(--orbit-z));
}

.closing-wash__pane--right::before {
	transform: rotate(-90deg) scaleY(-1);
}

.closing-wash__soft {
	position: absolute;
	left: 0;
	top: calc(364px * var(--orbit-z));
	width: 100%;
	height: calc(893px * var(--orbit-z));
	/* Figma 1:5955 is rgba(0,0,0,0.04) — not a grey slab over the footer. */
	background: linear-gradient(
		180deg,
		rgba(0, 0, 0, 0) 0%,
		rgba(0, 0, 0, 0.04) 45%,
		rgba(0, 0, 0, 0.1) 100%
	);
	pointer-events: none;
}

.closing-wash__hue3 {
	position: absolute;
	left: calc(-229px * var(--close-full-z));
	top: calc(-134px * var(--orbit-z));
	width: calc(2070px * var(--close-full-z));
	height: calc(1548px * var(--orbit-z));
	mix-blend-mode: screen;
	pointer-events: none;
	/* Screen blend must die before the footer or the columns sit on navy. */
	-webkit-mask-image: linear-gradient(
		180deg,
		#000 0%,
		#000 40%,
		rgba(0, 0, 0, 0.35) 50%,
		transparent 58%
	);
	mask-image: linear-gradient(
		180deg,
		#000 0%,
		#000 40%,
		rgba(0, 0, 0, 0.35) 50%,
		transparent 58%
	);
}

.closing-wash__hue3-img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
}

.closing__stage {
	position: absolute;
	left: 50%;
	top: 0;
	z-index: 1;
	width: 1440px;
	height: 809px;
	margin-left: -720px;
	transform: scale(var(--orbit-z));
	transform-origin: top center;
}

.closing__copy {
	position: absolute;
	left: 417px;
	top: 387px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	width: 607px;
}

.closing__headline {
	margin: 0;
	width: 100%;
	font-weight: 500;
	font-size: 48px;
	line-height: normal;
	letter-spacing: -0.96px;
	text-align: center;
	background: linear-gradient(180deg, #fff 12.5%, rgba(255, 255, 255, 0) 114.17%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

.closing__ctas {
	display: flex;
	align-items: center;
	gap: 8px;
}

/*
 * Footer — normal document flow below the closing__frame stage, mirrors
 * the live product footer at orbit.devotel.io: a 328px brand column plus
 * 4 fixed 164px link columns, each column able to stack more than one
 * heading/link-list group (e.g. Platform, then Products, then Channels).
 */
.site-footer {
	background: #0a0a0b;
}

.closing .site-footer__inner {
	max-width: 1224px;
	margin: 0 auto;
	padding: 0 24px 64px;
}

.site-footer__grid {
	display: grid;
	grid-template-columns: 328px repeat(4, 164px);
	column-gap: 48px;
	row-gap: 40px;
	justify-content: space-between;
}

.site-footer__brand {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.site-footer__logo {
	display: block;
	width: 100px;
	height: 28px;
}

.site-footer__logo-img {
	display: block;
	width: 100px;
	height: 28px;
	max-width: none;
	object-fit: contain;
}

.site-footer__tagline {
	margin: 0;
	max-width: 280px;
	color: #828994;
	font-weight: 400;
	font-size: 13px;
	line-height: 19.5px;
	letter-spacing: -0.07px;
}

.site-footer__social {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 4px 0 0;
	padding: 0;
	list-style: none;
}

.site-footer__social a {
	display: inline-flex;
	color: #828994;
	transition: color 0.15s ease;
}

.site-footer__social a:hover,
.site-footer__social a:focus-visible {
	color: #f3f4f6;
}

.site-footer__social svg {
	width: 18px;
	height: 18px;
}

.site-footer__col {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
}

.site-footer__heading {
	margin: 0;
	color: #f3f4f6;
	font-weight: 500;
	font-size: 11px;
	line-height: 17.05px;
	letter-spacing: 1.32px;
	text-transform: uppercase;
	white-space: nowrap;
}

.site-footer__heading--stacked {
	margin-top: 4px;
}

.site-footer__links {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.site-footer__link {
	display: inline-block;
	color: #828994;
	font-weight: 400;
	font-size: 13px;
	line-height: 20.15px;
	letter-spacing: -0.07px;
	text-decoration: none;
	white-space: nowrap;
}

.site-footer__link:hover,
.site-footer__link:focus-visible {
	color: #f3f4f6;
}

.site-footer__bottom {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-top: 48px;
	padding-top: 25px;
	border-top: 1px solid #4b5563;
}

.site-footer__legal-links {
	display: flex;
	flex-wrap: wrap;
	column-gap: 20px;
	row-gap: 8px;
}

.site-footer__legal-links a {
	color: #828994;
	font-weight: 400;
	font-size: 12px;
	line-height: 18.6px;
	letter-spacing: -0.07px;
	text-decoration: none;
}

.site-footer__legal-links a:hover,
.site-footer__legal-links a:focus-visible {
	color: #f3f4f6;
}

.site-footer__bottom-row {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.site-footer__legal-text {
	display: flex;
	flex-direction: column;
	gap: 4px;
	color: #828994;
	font-weight: 400;
	font-size: 12px;
	line-height: 18.6px;
	letter-spacing: -0.07px;
}

.site-footer__legal-text span {
	display: block;
}

.site-footer__domain {
	color: #828994;
	font-weight: 400;
	font-size: 12px;
	line-height: 18.6px;
	letter-spacing: -0.07px;
	text-decoration: none;
}

.site-footer__domain:hover,
.site-footer__domain:focus-visible {
	color: #f3f4f6;
}

@media (min-width: 640px) {
	.site-footer__bottom-row {
		flex-direction: row;
		align-items: flex-start;
		justify-content: space-between;
	}
}

/* Standalone footer (non-landing pages). */
.site-footer--standalone {
	background: #0a0a0b;
	padding: 64px 20px 40px;
}

.site-footer--standalone .site-footer__inner {
	max-width: 1176px;
	margin: 0 auto;
}

.site-footer__rights,
.site-footer__credit {
	margin: 0;
	color: #6b7280;
	font-weight: 400;
	font-size: 12px;
	line-height: 18.6px;
	letter-spacing: -0.07px;
	white-space: nowrap;
}

.site-footer__credit {
	font-family: var(--orbit-mono);
}

.site-footer__main--flow {
	display: flex;
	flex-wrap: wrap;
	gap: 32px 48px;
}

.site-footer__col--flow {
	width: 164px;
}

.site-footer__legal--flow {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	margin-top: 40px;
	padding-top: 25px;
	border-top: 1px solid #4b5563;
}

@media (max-width: 900px) {
	.closing__frame {
		/* Slightly larger than --orbit-z so the wash still reads on phones. */
		--close-z: calc(min(100vw, 1440px) / 820px);
		height: auto;
		overflow: visible;
	}

	/*
	 * Desktop Figma 1:5948 / Ellipse 433 — same geometry, scaled.
	 * Do not reinvent the lid/well on mobile.
	 */
	.closing__glows {
		left: calc(50% - (806px * var(--close-z)));
		top: calc(-115px * var(--close-z));
		width: calc(1612px * var(--close-z));
		height: calc(801px * var(--close-z));
		margin-left: 0;
		overflow: hidden;
	}

	.closing-wash {
		inset: 0;
		overflow: hidden;
	}

	.closing-wash__glow::before {
		content: none;
		display: none;
	}

	.closing-wash__glow {
		clip-path: inset(calc(201px * var(--close-z)) 0 0 0);
		-webkit-mask-image: radial-gradient(
			ellipse calc(722.5px * var(--close-z)) calc(201px * var(--close-z)) at 50% calc(201px * var(--close-z)),
			transparent 0%,
			transparent 99.6%,
			#000 100%
		);
		mask-image: radial-gradient(
			ellipse calc(722.5px * var(--close-z)) calc(201px * var(--close-z)) at 50% calc(201px * var(--close-z)),
			transparent 0%,
			transparent 99.6%,
			#000 100%
		);
	}

	.closing-wash__blue {
		background:
			radial-gradient(
				ellipse calc(930px * var(--close-z)) calc(420px * var(--close-z)) at 50% calc(380px * var(--close-z)),
				#5b8cff 0%,
				#316bff 10%,
				#1a49c2 22%,
				#0e39a4 36%,
				#032886 50%,
				rgba(7, 35, 107, 0.28) 68%,
				#0a0a0b 92%,
				#0a0a0b 100%
			);
	}

	.closing-wash__pane,
	.closing-wash__soft,
	.closing-wash__hue3 {
		display: none;
	}

	.closing__stage {
		position: relative;
		left: auto;
		width: 100%;
		height: auto;
		margin: 0;
		transform: none;
		display: flex;
		flex-direction: column;
		align-items: center;
		/* Desktop copy top 387 — same seat in the well. */
		padding: calc(387px * var(--close-z)) 20px 40px;
	}

	.closing__copy {
		position: relative;
		left: auto;
		top: auto;
		width: min(607px, 100%);
		gap: 24px;
	}

	.closing__copy::before {
		content: none;
		display: none;
	}

	.closing__headline {
		position: relative;
		z-index: 1;
		font-size: clamp(28px, 8vw, 40px);
		letter-spacing: -0.6px;
		background: linear-gradient(
			180deg,
			#fff 0%,
			#fff 38%,
			rgba(255, 255, 255, 0.78) 62%,
			rgba(255, 255, 255, 0.42) 100%
		);
		-webkit-background-clip: text;
		background-clip: text;
	}

	.closing__ctas {
		flex-direction: column;
		width: 100%;
		max-width: 320px;
		gap: 10px;
	}

	.closing__ctas .hero__cta {
		width: 100%;
		justify-content: center;
	}

	.closing .site-footer__inner {
		padding: 0 20px 48px;
	}

	.site-footer__grid {
		grid-template-columns: repeat(2, 1fr);
		column-gap: 24px;
		row-gap: 32px;
		margin-top: 48px;
	}

	.site-footer__brand {
		grid-column: 1 / -1;
	}

	.site-footer__col {
		min-width: 0;
	}

	/*
	 * Mobile 2-col wrap: left column should carry more content than the
	 * right. Swap the paint order of columns 3 (Trust, 4 links) and 4
	 * (Company/Compare/Help, 11 links) so the left column ends up with
	 * Platform + Company (25 links) and the right with Developers + Trust
	 * (17 links), instead of the default row-major 18/24 split.
	 */
	.site-footer__col--3 {
		order: 4;
	}

	.site-footer__col--4 {
		order: 3;
	}

	.site-footer__heading,
	.site-footer__link {
		white-space: normal;
	}

	.site-footer__legal-links {
		row-gap: 12px;
	}

	.site-footer__rights,
	.site-footer__credit {
		white-space: normal;
	}

	.site-footer__legal-text span {
		white-space: normal;
	}

	.site-footer__tagline {
		color: #9ca3af;
	}

	.site-footer__logo {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
	}

	.closing .site-footer__links li,
	.site-footer__links li {
		height: auto;
		min-height: 44px;
	}

	.closing .site-footer__link,
	.site-footer__link {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		padding-top: 0;
		color: #9ca3af;
	}
}

/* -------------------------------------------------------------------------
   404 — branded empty route. Same tokens / CTAs / blue wash as landing.
   ---------------------------------------------------------------------- */
.orbit-404 {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: calc(100vh - var(--orbit-header-height) - 280px);
	padding: 96px var(--orbit-header-pad-inline) 120px;
	overflow: hidden;
	background: #0a0a0b;
}

.orbit-404__wash {
	position: absolute;
	left: 50%;
	top: -8%;
	z-index: 0;
	width: min(160vw, 1200px);
	height: min(90vw, 720px);
	transform: translateX(-50%);
	pointer-events: none;
	background:
		radial-gradient(
			ellipse 55% 48% at 50% 42%,
			#5b8cff 0%,
			#316bff 16%,
			#1a49c2 34%,
			#0e39a4 50%,
			rgba(3, 40, 134, 0.35) 68%,
			transparent 86%
		);
	opacity: 0.9;
}

.orbit-404__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	width: min(640px, 100%);
	text-align: center;
}

.orbit-404__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: #76767d;
	font-weight: 500;
	font-size: 11px;
	line-height: 17.05px;
	letter-spacing: 1.76px;
	text-transform: uppercase;
}

.orbit-404__dot {
	width: 6px;
	height: 6px;
	border-radius: 3px;
	--orbit-pulse: #3a7dff;
}

.orbit-404__code {
	margin: 8px 0 0;
	color: #fff;
	font-weight: 600;
	font-size: clamp(88px, 22vw, 160px);
	line-height: 0.9;
	letter-spacing: -4px;
	background: linear-gradient(
		180deg,
		#fff 0%,
		#fff 38%,
		rgba(255, 255, 255, 0.72) 62%,
		rgba(255, 255, 255, 0.28) 100%
	);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.orbit-404__headline {
	margin: 8px 0 0;
	color: #fff;
	font-weight: 600;
	font-size: clamp(28px, 5.5vw, 40px);
	line-height: 1.15;
	letter-spacing: -0.76px;
}

.orbit-404__body {
	margin: 0;
	max-width: 460px;
	color: #9ca3af;
	font-weight: 400;
	font-size: 18px;
	line-height: 28px;
}

.orbit-404__ctas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-top: 20px;
}

.orbit-404__ctas .hero__cta {
	width: auto;
	min-width: 140px;
	padding: 0 20px;
}

@media (max-width: 900px) {
	.orbit-404 {
		min-height: calc(100vh - var(--orbit-header-height) - 420px);
		padding: 72px 20px 88px;
	}

	.orbit-404__body {
		font-size: 16px;
		line-height: 26px;
	}

	.orbit-404__ctas {
		flex-direction: column;
		width: 100%;
		max-width: 320px;
	}

	.orbit-404__ctas .hero__cta {
		width: 100%;
	}
}

/* =========================================================================
   Commerce (Conversational commerce)
   Figma: 607:11164, 1440 × 1466 at (0, 9587).
   ======================================================================= */
.commerce {
	padding: 120px 100px;
	background: #0b0a0b;
	color: #f3f4f6;
	width: 100%;
}

.commerce__frame {
	display: flex;
	flex-direction: column;
	gap: 56px;
	max-width: 1440px;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
}

.commerce__header {
	display: flex;
	gap: 80px;
	align-items: center;
	width: 100%;
}

.commerce__text {
	flex: 0 0 560px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.commerce__eyebrow {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-size: 11px;
	font-weight: 500;
	line-height: 17.05px;
	letter-spacing: 1.76px;
	text-transform: uppercase;
	color: #76767d;
}

.commerce__dot {
	display: inline-block;
	flex-shrink: 0;
	width: 6px;
	height: 6px;
	background: currentColor;
	border-radius: 50%;
}

.commerce__headline {
	margin: 0;
	font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-size: 34px;
	font-weight: 500;
	line-height: 46px;
	letter-spacing: -0.5px;
	color: #f3f4f6;
}

.commerce__body {
	margin: 0;
	font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-size: 18px;
	font-weight: 400;
	line-height: 28px;
	color: #9ca3af;
}

.commerce__visual {
	flex: 0 1 600px;
	position: relative;
	width: 600px;
	overflow: visible;
}

.commerce__visual-scene {
	width: 100%;
	max-width: 640px;
	margin: 0 auto;
}

.commerce__visual-img {
	display: block;
	width: 100%;
	height: auto;
}

.commerce__phone-wrapper {
	position: absolute;
	left: 181.61px;
	top: 48px;
	width: 325.964px;
	height: 482px;
}

.commerce__glow {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translateX(-50%) translateY(-50%) rotate(88.96deg);
	width: 325.964px;
	height: 227.972px;
	pointer-events: none;
}

.commerce__glow img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.commerce__phone {
	position: relative;
	width: 264.959px;
	height: 482px;
	margin-left: 36px;
	border: 1.127px solid #496ca0;
	border-radius: 33.825px;
	background: #0a0c10;
	box-shadow: 0px 16.912px 28.7px rgba(0, 0, 0, 0.7),
	            0px 0px 30.5px rgba(37, 99, 235, 0.3);
	overflow: hidden;
}

.commerce__phone::before,
.commerce__phone::after {
	content: '';
	position: absolute;
	background: rgba(73, 108, 160, 0.5);
	left: -2.82px;
	border-radius: 1.127px;
}

.commerce__phone::before {
	top: 117.26px;
	width: 1.691px;
	height: 16.912px;
}

.commerce__phone::after {
	content: '';
	position: absolute;
	top: 149.96px;
	left: -2.82px;
	width: 1.691px;
	height: 32.697px;
	background: rgba(73, 108, 160, 0.5);
}

.commerce__screen {
	position: relative;
	width: 243.537px;
	height: 460.578px;
	margin: 9.58px;
	background: #08090c;
	border-radius: 24.805px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.commerce__island {
	position: relative;
	width: 74.414px;
	height: 16.912px;
	margin: 10.15px auto 0;
}

.commerce__island img {
	display: block;
	width: 100%;
	height: 100%;
}

.commerce__thread {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 10.147px;
	padding: 10.147px;
	overflow: hidden;
	font-size: 13px;
}

.commerce__header-row {
	display: flex;
	gap: 7.892px;
	align-items: center;
	padding-bottom: 5px;
}

.commerce__avatar {
	flex-shrink: 0;
	width: 25.932px;
	height: 25.932px;
	border-radius: 55.811px;
	background: linear-gradient(135deg, rgb(56, 122, 255) 0%, rgb(33, 77, 204) 71.429%);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 8.986px;
	font-weight: 900;
	color: white;
	font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.commerce__who {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 1.127px;
}

.commerce__shop-name {
	margin: 0;
	font-size: 10px;
	font-weight: 500;
	line-height: 13px;
	color: white;
	font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.commerce__platform {
	margin: 0;
	font-size: 8px;
	font-weight: 400;
	line-height: 10px;
	color: #8e9aad;
	font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.commerce__online {
	display: flex;
	gap: 4.51px;
	align-items: center;
	font-size: 8px;
	color: #8e9aad;
	font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.commerce__dot-inline {
	display: inline-block;
	width: 5.074px;
	height: 5.074px;
	background: #4ade80;
	border-radius: 50%;
	flex-shrink: 0;
}

.commerce__message {
	display: flex;
	gap: 5.637px;
	align-items: flex-end;
}

.commerce__bubble {
	background: #141821;
	border-radius: 10.147px 10.147px 3.382px 10.147px;
	padding: 7.892px 9.02px;
	font-size: 9.584px;
	line-height: 14.094px;
	color: white;
	font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	flex: 1;
}

.commerce__time {
	font-size: 7.329px;
	color: #6c7788;
	font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	white-space: nowrap;
}

.commerce__carousel {
	display: flex;
	gap: 9.02px;
}

.commerce__product {
	flex: 1;
	background: #12161e;
	border-radius: 7.892px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.commerce__product-image {
	position: relative;
	width: 100%;
	height: 78.924px;
	background: white;
	overflow: hidden;
}

.commerce__product-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.commerce__product-meta {
	padding: 6.765px 7.892px 7.892px;
	display: flex;
	flex-direction: column;
	gap: 2.819px;
}

.commerce__product-name {
	margin: 0;
	font-size: 8.174px;
	font-weight: 400;
	line-height: 11.275px;
	color: #8e9aad;
	font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.commerce__product-price {
	margin: 0;
	font-size: 10.147px;
	font-weight: 500;
	line-height: 14.094px;
	color: white;
	font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.commerce__actions {
	display: flex;
	gap: 7.892px;
	margin-top: 7.892px;
}

.commerce__btn {
	flex: 1;
	padding: 7.892px 9.02px;
	border: none;
	border-radius: 6.201px;
	font-size: 9.302px;
	font-weight: 500;
	line-height: 12.684px;
	font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	cursor: pointer;
	transition: all 150ms ease-out;
}

.commerce__btn--primary {
	background: #2563eb;
	color: white;
}

.commerce__btn--primary:hover {
	background: #1d4ed8;
	transform: scale(1.02);
}

.commerce__btn--secondary {
	background: transparent;
	border: 0.789px solid rgba(37, 99, 235, 0.85);
	color: white;
}

.commerce__btn--secondary:hover {
	border-color: rgba(37, 99, 235, 1);
	background: rgba(37, 99, 235, 0.1);
}

.commerce__btn--pay {
	background: #2563eb;
	color: white;
	padding: 10.147px 9.02px;
	font-size: 10.147px;
	line-height: 13.53px;
	height: 31.57px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 7.892px;
}

.commerce__cart {
	display: flex;
	flex-direction: column;
	gap: 7.892px;
	padding-top: 10.147px;
	margin-top: 7.892px;
}

.commerce__cart-divider {
	height: 0.564px;
	background: #1f2530;
}

.commerce__cart-label {
	margin: 0;
	font-size: 7.047px;
	font-weight: 500;
	line-height: 10.147px;
	letter-spacing: 0.902px;
	color: #727d8e;
	text-transform: uppercase;
	font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.commerce__cart-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 6.765px;
	font-size: 8.738px;
	font-weight: 400;
	line-height: 12.402px;
	color: white;
	font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.commerce__cart-item span:last-child {
	font-weight: 500;
	font-size: 9.302px;
	line-height: 12.966px;
	white-space: nowrap;
}

.commerce__paid-pill {
	display: flex;
	align-items: center;
	gap: 5.637px;
	justify-content: center;
	padding: 5.637px 10.147px 5.637px 9.02px;
	background: #0e1117;
	border: 0.564px solid #1f2530;
	border-radius: 55.811px;
	width: fit-content;
	margin: 0 auto;
	font-size: 8.174px;
	color: #8e9aad;
	font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Flow strip */
.commerce__flow {
	display: flex;
	align-items: center;
	gap: 0;
	padding: 20px 24px;
	background: #111113;
	border: 1px solid #27272a;
	border-radius: 20px;
	width: 100%;
}

.commerce-step {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 1;
}

.commerce-step--gap-after {
	position: relative;
}

.commerce-step__badge {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 10px;
	background: #1b2542;
	border: 1px solid rgba(58, 125, 255, 0.35);
	font-size: 13px;
	font-weight: 500;
	line-height: 18px;
	color: #9cb8ff;
	font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	flex-shrink: 0;
}

.commerce-step__content {
	display: flex;
	flex-direction: column;
	gap: 2px;
	white-space: nowrap;
}

.commerce-step__label {
	margin: 0;
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	color: #f8fafc;
	font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.commerce-step__caption {
	margin: 0;
	font-size: 12px;
	font-weight: 400;
	line-height: 16px;
	color: #7a8293;
	font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.commerce-step__connector {
	width: 40px;
	height: 16px;
	flex-shrink: 0;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.commerce-step__connector::after {
	content: '→';
	font-size: 16px;
	color: #7a8293;
	opacity: 0.5;
}

/* Cards grid */
.commerce-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	width: 100%;
}

.commerce-cards > .commerce-card:nth-child(-n+3) {
	height: 258px;
}

.commerce-cards > .commerce-card:nth-child(n+4) {
	height: 280px;
}

.commerce-card {
	background: #18181b;
	border: 1px solid #27272a;
	border-radius: 24px;
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.commerce-card--tall {
	height: 100%;
}

.commerce-card__icon {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: #1b2542;
	border: 1px solid #293962;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.commerce-card__icon img,
.commerce-card__icon-img {
	display: block;
	width: 20px;
	height: 20px;
	object-fit: contain;
}

.commerce-card__content {
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1;
}

.commerce-card__title {
	margin: 0;
	font-size: 18px;
	font-weight: 500;
	line-height: 26px;
	letter-spacing: -0.2px;
	color: #f8fafc;
	font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.commerce-card__body {
	margin: 0;
	font-size: 14px;
	font-weight: 400;
	line-height: 22px;
	color: #9ca3af;
	font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Responsive */
@media (max-width: 1280px) {
	.commerce {
		padding: 80px 60px;
	}

	.commerce__header {
		gap: 60px;
	}

	.commerce__text {
		flex: 0 1 480px;
	}

	.commerce__headline {
		font-size: 28px;
		line-height: 36px;
	}

	.commerce__visual {
		flex: 0 1 500px;
	}
}

@media (max-width: 1024px) {
	.commerce {
		padding: 60px 40px;
	}

	.commerce__header {
		flex-direction: column;
		gap: 40px;
		align-items: stretch;
	}

	.commerce__text {
		flex: 1;
		width: 100%;
	}

	.commerce__visual {
		flex: 0 0 100%;
		width: 100%;
	}

	.commerce__phone-wrapper {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translateX(-50%) translateY(-50%);
		width: auto;
		height: auto;
	}

	.commerce__headline {
		font-size: 24px;
		line-height: 32px;
	}

	.commerce__body {
		font-size: 16px;
		line-height: 24px;
	}

	.commerce-cards > div {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

/* Mobile-only layout — Figma 681:567, dedicated single-column adaptation
   with a realistic phone mockup. Hidden on desktop; the desktop diagram
   hides in exchange below 768px, this section's own established tier. */

.commerce-mobile {
	display: none;
}

@media (max-width: 768px) {
	.commerce {
		padding: 0;
	}

	.commerce__header,
	.commerce__flow,
	.commerce-cards {
		display: none;
	}
.commerce__visual-scene--m {
	width: 100%;
	max-width: 460px;
	margin: 0 auto;
}

	.commerce-mobile {
		display: flex;
		flex-direction: column;
		background: #060911;
		padding: 24px 16px 48px;
		gap: 40px;
	}
}

/* Hero + phone mockup */

.commerce-m__hero {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	text-align: center;
}

.commerce-m__eyebrow {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	font-weight: 600;
	font-size: 11px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: #76767d;
}

.commerce-m__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #3d8bff;
	flex-shrink: 0;
}

.commerce-m__title-block {
	display: flex;
	flex-direction: column;
	gap: 14px;
	text-align: left;
	width: 100%;
}

.commerce-m__headline {
	margin: 0;
	font-weight: 500;
	font-size: 28px;
	line-height: 38px;
	letter-spacing: -0.5px;
	color: #f3f4f6;
}

.commerce-m__body {
	margin: 0;
	font-weight: 400;
	font-size: 15px;
	line-height: 22px;
	color: #9ca3af;
}

.commerce__phone--m {
	position: relative;
	margin: 0 auto;
	box-shadow: 0 17px 39px rgba(0, 0, 0, 0.7), 0 0 39px rgba(37, 99, 235, 0.3);
}

/* Customer journey flow strip */

.commerce-m__flow-strip {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 20px;
	background: #111113;
	border: 1px solid #27272a;
	border-radius: 20px;
}

.commerce-m__strip-label {
	margin: 0;
	font-weight: 600;
	font-size: 11px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #6b7280;
}

.commerce-m-step {
	display: flex;
	align-items: center;
	gap: 12px;
}

.commerce-m-step__badge {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	border-radius: 10px;
	background: #1b2542;
	border: 1px solid rgba(58, 125, 255, 0.35);
	font-weight: 600;
	font-size: 13px;
	color: #9cb8ff;
}

.commerce-m-step__copy {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1 0 0;
	min-width: 0;
}

.commerce-m-step__title {
	margin: 0;
	font-weight: 600;
	font-size: 14px;
	color: #f8fafc;
}

.commerce-m-step__caption {
	margin: 0;
	font-weight: 400;
	font-size: 12px;
	color: #7a8293;
}

/* Enterprise capabilities */

.commerce-m__feats {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.commerce-m__feats-title {
	margin: 0;
	font-weight: 600;
	font-size: 18px;
	color: #f3f4f6;
}

.commerce-m-feat {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 20px;
	background: #18181b;
	border: 1px solid #1f2937;
	border-radius: 20px;
}

.commerce-m-feat__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: #1b2542;
	border: 1px solid #293962;
}

.commerce-m-feat__icon img {
	display: block;
	width: 20px;
	height: 20px;
}

.commerce-m-feat__icon--boxed {
	/* This icon file already bakes in its own tile background/border. */
	background: none;
	border: none;
	border-radius: 0;
	width: 40px;
	height: 40px;
}

.commerce-m-feat__content {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.commerce-m-feat__title {
	margin: 0;
	font-weight: 600;
	font-size: 16px;
	color: #f8fafc;
}

.commerce-m-feat__body {
	margin: 0;
	font-weight: 400;
	font-size: 13px;
	line-height: 20px;
	color: #9ca3af;
}


/* ============================================
   VOICE — AI VOICE AGENTS
   ============================================ */

.voice {
	width: 100%;
	padding: 120px 100px;
	background: #0b0a0b;
	color: #f3f4f6;
}

.voice__frame {
	max-width: 1440px;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 56px;
}

.voice__header {
	display: flex;
	gap: 80px;
	align-items: flex-start;
	width: 100%;
}

.voice__text {
	flex: 0 0 560px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.voice__eyebrow {
	display: flex;
	gap: 8px;
	align-items: center;
	font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-weight: 500;
	font-size: 11px;
	line-height: 17.05px;
	color: #76767d;
	text-transform: uppercase;
	letter-spacing: 1.76px;
	margin: 0;
}

.voice__dot {
	width: 6px;
	height: 6px;
	flex-shrink: 0;
}

.voice__headline {
	font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-weight: 500;
	font-size: 34px;
	line-height: 46px;
	letter-spacing: -0.5px;
	color: #f3f4f6;
	margin: 0;
}

.voice__body {
	font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-weight: 400;
	font-size: 18px;
	line-height: 28px;
	color: #9ca3af;
	margin: 0;
}

.voice__visual {
	flex: 0 0 600px;
	position: relative;
	left: 0;
	top: 0;
	width: 600px;
	height: 451px;
	overflow: visible;
}

.voice__glow {
	/* glow.svg's native canvas is 764.2×573.2 (the blur filter needs that
	   extra bleed room around the 437×246 "visible" ellipse) — sizing this
	   box to 437×246 with overflow:hidden was hard-clipping the soft
	   falloff, which is why the ambient glow read as weak/cropped. Render
	   at native size instead, centered on the same point as before
	   (including the earlier +50px rightward shift). */
	position: absolute;
	left: -83.6px;
	top: -66.6px;
	width: 764.2px;
	height: 573.2px;
	pointer-events: none;
}

.voice__glow img {
	display: block;
	width: 100%;
	height: 100%;
}

.voice__call-panel {
	position: absolute;
	left: 50px;
	top: 20px;
	width: 400px;
	background: #111827;
	border-radius: 16px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	border: 1px solid transparent;
}

.voice__call-panel::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
	padding: 1px;
	background: linear-gradient(135deg, #0a6cff 0%, rgba(10, 108, 255, 0) 65%);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
}

.voice__call-header {
	background: #1b1b1e;
	padding: 14px 16px;
	display: flex;
	gap: 12px;
	align-items: center;
	border-bottom: 1px solid #27272a;
}

.voice__live-badge {
	display: flex;
	gap: 6px;
	align-items: center;
	background: rgba(248, 113, 113, 0.14);
	padding: 4px 8px 4px 9px;
	border-radius: 99px;
	flex-shrink: 0;
}

.voice__live-dot img {
	width: 6px;
	height: 6px;
	display: block;
}

.voice__live-text {
	font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-weight: 500;
	font-size: 10px;
	line-height: 14px;
	color: #f87171;
	letter-spacing: 0.9px;
	text-transform: uppercase;
	white-space: nowrap;
	margin: 0;
}

.voice__call-info {
	flex: 1;
	font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-weight: 400;
	font-size: 12px;
	line-height: 16px;
	color: #7a8293;
	margin: 0;
	min-width: 0;
}

.voice__call-duration {
	font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-weight: 500;
	font-size: 13px;
	line-height: 18px;
	color: #f8fafc;
	white-space: nowrap;
	margin: 0;
}

.voice__call-body {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 18px;
	overflow: hidden;
}

.voice__waveform {
	display: flex;
	gap: 3px;
	align-items: center;
	height: 48px;
	width: 100%;
	overflow-x: auto;
}

.voice__waveform-bar {
	flex-shrink: 0;
	width: 3px;
	background: rgba(58, 125, 255, 0.5);
	border-radius: 2px;
	opacity: 0.7;
	transform-origin: center center;
	animation: voice-wave-pulse 1.6s ease-in-out infinite;
}

.voice__waveform-bar:nth-child(4n) {
	opacity: 1;
	background: #3a7dff;
}

.voice__turn-latency {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.voice__latency-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.voice__latency-label {
	font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-weight: 500;
	font-size: 10px;
	line-height: 14px;
	color: #7a8293;
	letter-spacing: 1.1px;
	text-transform: uppercase;
	margin: 0;
	flex: 1;
}

.voice__latency-total {
	background: rgba(74, 222, 128, 0.14);
	padding: 3px 9px;
	border-radius: 99px;
	font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-weight: 500;
	font-size: 11px;
	line-height: 15px;
	color: #4ade80;
	white-space: nowrap;
}

.voice__latency-bar {
	display: flex;
	gap: 3px;
	height: 8px;
	width: 100%;
}

.voice__latency-seg {
	border-radius: 4px;
	flex-shrink: 0;
}

.voice__latency-stt {
	background: #264580;
}

.voice__latency-model {
	background: #3a7dff;
}

.voice__latency-tts {
	background: #85a8ff;
}

.voice__latency-legend {
	display: flex;
	gap: 16px;
	margin-top: 6px;
}

.voice__latency-item {
	display: flex;
	gap: 6px;
	align-items: center;
	font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 11px;
	line-height: 15px;
}

.voice__latency-dot img {
	width: 6px;
	height: 6px;
	display: block;
	flex-shrink: 0;
}

.voice__latency-name {
	color: #7a8293;
	font-weight: 400;
	white-space: nowrap;
}

.voice__latency-value {
	color: #c7cbd4;
	font-weight: 500;
	white-space: nowrap;
}

.voice__divider {
	height: 1px;
	background: #27272a;
	width: 100%;
}

.voice__transcript {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.voice__transcript-label {
	font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-weight: 500;
	font-size: 10px;
	line-height: 14px;
	color: #7a8293;
	letter-spacing: 1.1px;
	text-transform: uppercase;
	margin: 0;
	width: 100%;
}

.voice__transcript-line {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	line-height: 18px;
	width: 100%;
}

.voice__transcript-speaker {
	font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-weight: 500;
	font-size: 9px;
	line-height: 18px;
	color: #7a8293;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	white-space: nowrap;
	margin: 0;
	width: 52px;
	flex-shrink: 0;
}

.voice__transcript-text {
	flex: 1;
	font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-weight: 400;
	font-size: 12.5px;
	line-height: 18px;
	color: #c7cbd4;
	margin: 0;
	min-width: 0;
}

.voice__quality-card {
	position: absolute;
	left: 411px;
	top: 244px;
	width: 210px;
	background: #131315;
	border: 1px solid transparent;
	border-radius: 16px;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	box-shadow: 0px 14px 34px 0px rgba(0, 0, 0, 0.6);
}

.voice__quality-card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
	padding: 1px;
	background: linear-gradient(135deg, #0a6cff 0%, rgba(10, 108, 255, 0) 65%);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
}

.voice__quality-label {
	font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-weight: 500;
	font-size: 9px;
	line-height: 13px;
	color: #7a8293;
	letter-spacing: 1px;
	text-transform: uppercase;
	margin: 0;
	width: 100%;
}

.voice__quality-score {
	display: flex;
	gap: 6px;
	align-items: baseline;
	width: 100%;
}

.voice__quality-number {
	font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-weight: 500;
	font-size: 34px;
	line-height: 38px;
	color: #f8fafc;
	letter-spacing: -0.8px;
	white-space: nowrap;
}

.voice__quality-max {
	font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-weight: 400;
	font-size: 13px;
	line-height: 18px;
	color: #7a8293;
	white-space: nowrap;
}

.voice__quality-status {
	display: inline-block;
	background: rgba(74, 222, 128, 0.14);
	padding: 3px 8px;
	border-radius: 99px;
	font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-weight: 500;
	font-size: 10px;
	line-height: 14px;
	color: #4ade80;
	white-space: nowrap;
	margin-left: auto;
}

.voice__quality-metrics {
	display: flex;
	flex-direction: column;
	gap: 7px;
	font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 11px;
	line-height: 16px;
}

.voice__quality-metric {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
}

.voice__quality-metric-label {
	color: #7a8293;
	font-weight: 400;
	margin: 0;
	white-space: nowrap;
}

.voice__quality-metric-value {
	color: #c7cbd4;
	font-weight: 500;
	margin: 0;
	white-space: nowrap;
}

/* Voice feature cards */

.voice-cards {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	width: 100%;
}

.voice-card {
	background: #18181b;
	border: 1px solid #27272a;
	border-radius: 24px;
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 20px;
	overflow: hidden;
}

.voice-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background: #1b2542;
	border: 1px solid #293962;
	border-radius: 12px;
	flex-shrink: 0;
}

.voice-card__icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	max-width: 24px;
	max-height: 24px;
}

.voice-card__content {
	display: flex;
	flex-direction: column;
	gap: 10px;
	overflow: hidden;
	flex: 1;
}

.voice-card__title {
	font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-weight: 500;
	font-size: 18px;
	line-height: 26px;
	letter-spacing: -0.2px;
	color: #f8fafc;
	margin: 0;
	height: 52px;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.voice-card__body {
	font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 22px;
	color: #9ca3af;
	margin: 0;
}

/* Responsive: Desktop */

@media (max-width: 1439px) {
	.voice {
		padding: 80px 60px;
	}

	.voice__text {
		flex: 0 0 480px;
	}

	.voice__headline {
		font-size: 28px;
		line-height: 38px;
	}

	.voice__body {
		font-size: 16px;
		line-height: 24px;
	}

	.voice__visual {
		flex: 0 0 500px;
		width: 500px;
		height: 380px;
	}

	.voice-cards {
		height: auto;
		gap: 16px;
	}
}

@media (max-width: 1024px) {
	.voice {
		padding: 60px 40px;
	}

	.voice__header {
		gap: 40px;
		flex-direction: column;
	}

	.voice__text {
		flex: 1;
		width: 100%;
	}

	.voice__headline {
		font-size: 24px;
		line-height: 32px;
	}

	.voice__body {
		font-size: 14px;
		line-height: 20px;
	}

	.voice__visual {
		flex: 0 0 100%;
		width: 100%;
		height: auto;
	}

	.voice-cards {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 768px) {
	.voice {
		padding: 40px 20px;
	}

	.voice__headline {
		font-size: 20px;
		line-height: 28px;
	}

	.voice__body {
		font-size: 14px;
		line-height: 20px;
	}

	.voice__visual {
		position: relative;
		width: 100%;
		min-height: 400px;
	}

	.voice__call-panel {
		position: relative;
		left: 0;
		top: 0;
		width: 100%;
		margin-bottom: 20px;
	}

	.voice__quality-card {
		position: relative;
		left: 0;
		top: 0;
		width: 100%;
		margin-bottom: 20px;
	}

	.voice-cards {
		grid-template-columns: 1fr;
		height: auto;
	}

	.voice-card {
		padding: 16px;
	}

	.voice-card__title {
		font-size: 16px;
		line-height: 24px;
		height: auto;
		-webkit-line-clamp: unset;
	}

	.voice-card__body {
		font-size: 13px;
		line-height: 20px;
		-webkit-line-clamp: unset;
	}
}

/* Voice Mobile — Figma 681:726, <768px single-column adaptation */

.voice-mobile {
	display: none;
}

@media (max-width: 768px) {
	.voice__header,
	.voice__visual,
	.voice-cards {
		display: none;
	}

	.voice-mobile {
		display: flex;
		flex-direction: column;
		gap: 40px;
	}

	.voice-m__header {
		display: flex;
		flex-direction: column;
		gap: 20px;
	}

	.voice-m__eyebrow {
		display: flex;
		gap: 8px;
		align-items: center;
		font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
		font-weight: 500;
		font-size: 11px;
		line-height: 17.05px;
		color: #76767d;
		text-transform: uppercase;
		letter-spacing: 1.76px;
		margin: 0;
	}

	.voice-m__dot {
		width: 6px;
		height: 6px;
		flex-shrink: 0;
		background: #3d8bff;
		border-radius: 50%;
	}

	.voice-m__headline {
		font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
		font-weight: 500;
		font-size: 28px;
		line-height: 38px;
		letter-spacing: -0.5px;
		color: #f3f4f6;
		margin: 0;
	}

	.voice-m__body {
		font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
		font-weight: 400;
		font-size: 15px;
		line-height: 22px;
		color: #9ca3af;
		margin: 0;
	}

	.voice-m__call-wrap {
		position: relative;
	}

	.voice-m__glow {
		position: absolute;
		left: 50%;
		top: 50%;
		width: 240px;
		height: 480px;
		transform: translate(-50%, -50%);
		background: radial-gradient(ellipse at center, rgba(27, 80, 255, 0.55) 0%, rgba(27, 80, 255, 0.3) 42%, rgba(27, 80, 255, 0) 72%);
		filter: blur(30px);
		pointer-events: none;
		z-index: 0;
	}

	.voice-m__call-mockup {
		position: relative;
		z-index: 1;
		background: #111827;
		border: 0.875px solid #0a6cff;
		border-radius: 14px;
		padding: 15.75px;
		display: flex;
		flex-direction: column;
		gap: 14px;
		overflow: hidden;
		box-shadow: 0 0 18px rgba(10, 108, 255, 0.45), 0 0 40px rgba(10, 108, 255, 0.2), inset 0 0 1px rgba(10, 108, 255, 0.5);
	}

	.voice-m__call-header {
		display: flex;
		gap: 10.5px;
		align-items: center;
		justify-content: space-between;
		margin: -15.75px -15.75px 0;
		padding: 12.25px 14px;
		background: #1b1b1e;
	}

	.voice-m__live-badge {
		display: flex;
		gap: 5.25px;
		align-items: center;
		background: rgba(248, 113, 113, 0.14);
		padding: 3.5px 7.875px 3.5px 7px;
		border-radius: 86.625px;
		flex-shrink: 0;
		font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
		font-weight: 500;
		font-size: 8.75px;
		line-height: 12.25px;
		color: #f87171;
		letter-spacing: 0.7875px;
		text-transform: uppercase;
		white-space: nowrap;
	}

	.voice-m__live-dot {
		color: #ef4444;
		font-size: 7px;
	}

	.voice-m__call-info {
		flex: 1;
		font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
		font-weight: 400;
		font-size: 10.5px;
		line-height: 14px;
		color: #7a8293;
		margin: 0;
		min-width: 0;
	}

	.voice-m__call-duration {
		font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
		font-weight: 500;
		font-size: 11.375px;
		line-height: 15.75px;
		color: #f8fafc;
		white-space: nowrap;
		margin: 0;
	}

	.voice-m__waveform {
		display: flex;
		gap: 2.625px;
		align-items: center;
		justify-content: center;
		height: 42px;
		width: 100%;
	}

	.voice-m__waveform-bar {
		flex: 0 0 2.625px;
		border-radius: 1.75px;
	}

	.voice-m__latency {
		display: flex;
		flex-direction: column;
		gap: 8.75px;
	}

	.voice-m__latency-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.voice-m__latency-label {
		font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
		font-weight: 500;
		font-size: 8.75px;
		line-height: 12.25px;
		color: #7a8293;
		letter-spacing: 0.9625px;
		text-transform: uppercase;
		margin: 0;
	}

	.voice-m__latency-value {
		font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
		font-weight: 500;
		font-size: 9.625px;
		line-height: 13.125px;
		color: #4ade80;
		background: rgba(74, 222, 128, 0.14);
		padding: 2.625px 7.875px;
		border-radius: 86.625px;
	}

	.voice-m__latency-bar {
		display: flex;
		gap: 2.625px;
		height: 7px;
		width: 100%;
	}

	.voice-m__latency-seg {
		border-radius: 3.5px;
		flex: 0 0 auto;
		height: 7px;
	}

	.voice-m__latency-stt {
		background: #264580;
		width: 34.08%;
	}

	.voice-m__latency-model {
		background: #3a7dff;
		width: 41.9%;
	}

	.voice-m__latency-tts {
		background: #85a8ff;
		width: 24.02%;
	}

	.voice-m__latency-legend {
		display: flex;
		gap: 14px;
		flex-wrap: wrap;
	}

	.voice-m__latency-item {
		display: flex;
		gap: 5.25px;
		align-items: center;
		font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
		font-size: 9.625px;
		line-height: 13.125px;
		color: #7a8293;
	}

	.voice-m__latency-dot {
		color: #3d8bff;
		font-size: 5.25px;
	}

	.voice-m__latency-item > span:last-child {
		color: #c7cbd4;
		font-weight: 500;
	}

	.voice-m__divider {
		height: 0.875px;
		background: #27272a;
		width: 100%;
	}

	.voice-m__transcript {
		display: flex;
		flex-direction: column;
		gap: 10.5px;
	}

	.voice-m__transcript-label {
		font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
		font-weight: 500;
		font-size: 8.75px;
		line-height: 12.25px;
		color: #7a8293;
		letter-spacing: 0.9625px;
		text-transform: uppercase;
		margin: 0;
	}

	.voice-m__transcript-line {
		display: flex;
		gap: 8.75px;
		align-items: flex-start;
	}

	.voice-m__transcript-speaker {
		font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
		font-weight: 500;
		font-size: 7.875px;
		line-height: 15.75px;
		color: #7a8293;
		letter-spacing: 0.7px;
		text-transform: uppercase;
		white-space: nowrap;
		margin: 0;
		width: 45.5px;
		flex-shrink: 0;
	}

	.voice-m__transcript-text {
		flex: 1;
		font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
		font-weight: 400;
		font-size: 10.938px;
		line-height: 15.75px;
		color: #c7cbd4;
		margin: 0;
		min-width: 0;
	}

	.voice-m__quality {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10.5px;
		background: #0c0e13;
		border: 0.875px solid #292c33;
		border-radius: 10.5px;
		padding: 10.5px;
		margin-top: 3.5px;
	}

	.voice-m__quality-copy {
		display: flex;
		flex-direction: column;
		gap: 1.75px;
	}

	.voice-m__quality-label {
		font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
		font-weight: 400;
		font-size: 7.875px;
		line-height: normal;
		color: #686c77;
		margin: 0;
		white-space: nowrap;
	}

	.voice-m__quality-number {
		font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
		font-weight: 500;
		font-size: 22.75px;
		line-height: normal;
		color: #f5f7fa;
		margin: 0;
		white-space: nowrap;
	}

	.voice-m__quality-status {
		display: inline-block;
		background: #143a2c;
		padding: 3.5px 7px;
		border-radius: 874.125px;
		font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
		font-weight: 600;
		font-size: 7.875px;
		line-height: normal;
		color: #50d890;
		white-space: nowrap;
		flex-shrink: 0;
	}

	.voice-m__feats {
		display: flex;
		flex-direction: column;
		gap: 16px;
	}

	.voice-m-feat {
		background: #18181b;
		border: 1px solid #27272a;
		border-radius: 16px;
		padding: 16px;
		display: flex;
		gap: 16px;
	}

	.voice-m-feat__icon {
		flex-shrink: 0;
		width: 40px;
		height: 40px;
		background: #1b2542;
		border: 1px solid #293962;
		border-radius: 8px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.voice-m-feat__icon img {
		width: 20px;
		height: 20px;
		display: block;
	}

	.voice-m-feat__content {
		flex: 1;
	}

	.voice-m-feat__title {
		font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
		font-weight: 500;
		font-size: 15px;
		line-height: 22px;
		color: #f8fafc;
		margin: 0 0 8px 0;
	}

	.voice-m-feat__body {
		font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
		font-weight: 400;
		font-size: 13px;
		line-height: 20px;
		color: #9ca3af;
		margin: 0;
	}
}

/* Verify — Figma 607:11496 ("Verify & identity"), 1440×1092
   Trust gate panel (login attempt checks + risk verdict) + capability rows */

.verify {
	background: #0b0a0b;
	padding: 120px 100px;
	overflow: visible;
	font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.verify__frame {
	max-width: 1240px;
	margin: 0 auto;
	width: 100%;
}

.verify__header {
	display: flex;
	align-items: flex-start;
	gap: 80px;
	margin-bottom: 56px;
}

.verify__text {
	flex: 0 0 560px;
	max-width: 560px;
	padding-top: 63px;
}

.verify__eyebrow {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 500;
	font-size: 11px;
	line-height: 17px;
	letter-spacing: 1.1px;
	text-transform: uppercase;
	color: #76767d;
	margin: 0 0 20px;
}

.verify__dot {
	width: 6px;
	height: 6px;
	background: #3a7dff;
	border-radius: 50%;
	flex-shrink: 0;
}

.verify__headline {
	font-weight: 500;
	font-size: 34px;
	line-height: 46px;
	letter-spacing: -0.2px;
	color: #f3f4f6;
	margin: 0 0 16px;
}

.verify__subcopy {
	font-weight: 400;
	font-size: 18px;
	line-height: 28px;
	color: #9ca3af;
	margin: 0;
}

.verify__visual {
	position: relative;
	flex: 0 0 600px;
	width: 600px;
	height: 383px;
	overflow: visible;
}

/* Decorative blurred blobs + dot texture behind the panel */

.verify__deco {
	position: absolute;
	left: 42px;
	top: 5px;
	width: 495px;
	height: 306px;
	z-index: 1;
}

.verify__blob {
	position: absolute;
	background: #325fec;
	border-radius: 163px;
	filter: blur(88px);
	opacity: 0.9;
}

.verify__blob--a {
	left: 96px;
	top: 92px;
	width: 276px;
	height: 207px;
}

.verify__blob--b {
	left: 219px;
	top: 90px;
	width: 276px;
	height: 207px;
}

.verify__dots {
	position: absolute;
	background-image: radial-gradient(circle, rgba(91, 140, 255, 0.45) 1.2px, transparent 1.4px);
	background-size: 13px 13px;
	-webkit-mask-image: radial-gradient(circle at 50% 50%, #000 30%, transparent 72%);
	mask-image: radial-gradient(circle at 50% 50%, #000 30%, transparent 72%);
}

.verify__dots--a {
	left: 250px;
	top: 0;
	width: 214px;
	height: 214px;
}

.verify__dots--b {
	left: 0;
	top: 87px;
	width: 219px;
	height: 219px;
}

.verify__glow {
	position: absolute;
	left: 130px;
	top: 80px;
	width: 400px;
	height: 280px;
	background: rgba(58, 125, 255, 0.13);
	border-radius: 50%;
	filter: blur(65px);
	z-index: 1;
}

/* Trust gate panel */

.verify__panel {
	position: absolute;
	left: 138px;
	top: 30px;
	width: 404px;
	z-index: 2;
	border: 1.5px solid transparent;
	border-radius: 24px;
	overflow: hidden;
	/* Bright at the top-left and bottom-right corners, dissolving to
	   transparent in between — same fade amount as the Voice section's
	   card borders (opaque to fully transparent over ~32.5% of the run,
	   mirrored from each corner instead of running one direction only). */
	background:
		linear-gradient(#111827, #111827) padding-box,
		linear-gradient(
			135deg,
			rgba(50, 95, 236, 1) 0%,
			rgba(50, 95, 236, 0) 32.5%,
			rgba(50, 95, 236, 0) 67.5%,
			rgba(50, 95, 236, 1) 100%
		) border-box;
	box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45);
}

.verify__panel-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: #1b1b1e;
	padding: 14px 18px;
}

.verify__attempt {
	display: flex;
	flex-direction: column;
	text-align: left;
}

.verify__attempt-title {
	font-weight: 500;
	font-size: 13px;
	line-height: 18px;
	color: #f8fafc;
	margin: 0;
}

.verify__attempt-meta {
	font-weight: 400;
	font-size: 11px;
	line-height: 15px;
	color: #7a8293;
	margin: 1px 0 0;
}

.verify__attempt-count {
	font-weight: 400;
	font-size: 11px;
	line-height: 15px;
	color: #7a8293;
	margin: 0;
	white-space: nowrap;
}

.verify__checks {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 18px;
}

.verify-check {
	display: flex;
	align-items: center;
	height: 22px;
	margin: 0;
}

.verify-check__status {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 99px;
	background: rgba(74, 222, 128, 0.16);
	flex-shrink: 0;
	margin-right: 12px;
}

.verify-check__status img {
	width: 11px;
	height: 11px;
	display: block;
}

.verify-check--warn .verify-check__status {
	background: rgba(251, 191, 36, 0.16);
}

.verify-check__name {
	font-weight: 400;
	font-size: 13px;
	line-height: 18px;
	color: #c7cbd4;
	white-space: nowrap;
}

.verify-check__detail {
	margin-left: auto;
	padding: 3px 9px;
	border-radius: 99px;
	background: rgba(74, 222, 128, 0.12);
	font-weight: 500;
	font-size: 11px;
	line-height: 15px;
	color: #4ade80;
	white-space: nowrap;
}

.verify-check--warn .verify-check__detail {
	background: rgba(251, 191, 36, 0.12);
	color: #fbbf24;
}

.verify__verdict {
	margin-top: 13px;
	border: 1px solid rgba(251, 191, 36, 0.35);
	border-radius: 12px;
	background: rgba(251, 191, 36, 0.05);
	padding: 12px 14px;
}

.verify__verdict-label {
	font-weight: 500;
	font-size: 9px;
	line-height: 13px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #7a8293;
	margin: 0 0 2px;
}

.verify__verdict-value {
	font-weight: 500;
	font-size: 14px;
	line-height: 20px;
	color: #fbbf24;
	margin: 0 0 2px;
}

.verify__verdict-note {
	font-weight: 400;
	font-size: 11px;
	line-height: 15px;
	color: #7a8293;
	margin: 0;
}



/* Capability rows */

.verify__rows {
	width: 100%;
}

.verify__row {
	display: grid;
	grid-template-columns: 340px minmax(0, 560px) 140px;
	column-gap: 100px;
	align-items: start;
	border-top: 1px solid #222225;
	padding: 28px 0;
}

.verify__row:last-child {
	border-bottom: 1px solid #222225;
}

.verify__row-title {
	display: flex;
	align-items: flex-start;
	gap: 16px;
}

.verify__row-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: #1b2542;
	border: 1px solid #293962;
	border-radius: 11px;
	flex-shrink: 0;
}

.verify__row-icon img {
	width: 19px;
	height: 19px;
	display: block;
	object-fit: contain;
}

.verify__row-heading {
	font-weight: 500;
	font-size: 18px;
	line-height: 26px;
	letter-spacing: -0.2px;
	color: #f8fafc;
	margin: 0;
}

.verify__row-body {
	font-weight: 400;
	font-size: 15px;
	line-height: 24px;
	color: #9ca3af;
	margin: 0;
	max-width: 560px;
}

.verify__row-badge {
	justify-self: end;
	padding: 5px 12px;
	border: 1px solid #2a2a2d;
	border-radius: 99px;
	background: #141416;
	font-weight: 500;
	font-size: 11px;
	line-height: 15px;
	color: #7a8293;
	white-space: nowrap;
	margin-top: 2px;
}
/* Responsive: Desktop */

@media (max-width: 1440px) {
	.verify {
		padding: 80px 60px;
	}

	.verify__text {
		flex: 0 0 480px;
		padding-top: 40px;
	}

	.verify__headline {
		font-size: 28px;
		line-height: 38px;
	}

	.verify__subcopy {
		font-size: 16px;
		line-height: 24px;
	}

	.verify__visual {
		flex: 0 0 500px;
		width: 500px;
	}

	.verify__panel {
		left: 90px;
	}

	.verify__glow {
		left: 95px;
	}

	.verify__deco {
		left: 6px;
	}

	.verify__row {
		grid-template-columns: 300px minmax(0, 1fr) 140px;
		column-gap: 60px;
	}
}

/* Responsive: Tablet */

@media (max-width: 1024px) {
	.verify {
		padding: 60px 40px;
	}

	.verify__header {
		flex-direction: column;
		gap: 40px;
		margin-bottom: 40px;
	}

	.verify__text {
		flex: none;
		max-width: 100%;
		padding-top: 0;
	}

	.verify__headline {
		font-size: 24px;
		line-height: 32px;
	}

	.verify__subcopy {
		font-size: 14px;
		line-height: 20px;
	}

	.verify__visual {
		flex: none;
		width: 100%;
		max-width: 600px;
		height: auto;
		margin: 0 auto;
	}

	.verify__deco {
		display: none;
	}

	.verify__glow {
		left: 50%;
		margin-left: -200px;
	}

	.verify__panel {
		position: relative;
		left: 0;
		top: 0;
		margin: 0 auto;
	}

	.verify__row {
		grid-template-columns: minmax(0, 1fr) auto;
		column-gap: 24px;
	}

	.verify__row-title {
		grid-column: 1;
		grid-row: 1;
	}

	.verify__row-body {
		grid-column: 1 / -1;
		grid-row: 2;
		max-width: 100%;
	}

	.verify__row-badge {
		grid-column: 2;
		grid-row: 1;
		margin-top: 6px;
	}
}

/* Responsive: Mobile */

@media (max-width: 768px) {
	.verify {
		padding: 40px 20px;
	}

	.verify__headline {
		font-size: 20px;
		line-height: 28px;
	}

	.verify__panel {
		width: 100%;
	}

	.verify__attempt-meta {
		font-size: 10px;
	}

	.verify__row {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 14px;
	}

	.verify__row-badge {
		grid-column: 1;
		grid-row: 3;
		justify-self: start;
		margin-top: 0;
	}

	.verify__row-title {
		grid-column: 1;
		grid-row: 1;
		align-items: center;
	}

	.verify__row-body {
		grid-column: 1;
		grid-row: 2;
		font-size: 14px;
		line-height: 20px;
	}

	.verify__row-heading {
		font-size: 16px;
		line-height: 24px;
	}
}


/* Journeys — Figma 607:11611 ("Journeys — Slide (Light · color system)"), 1440×769
   Light section: journey-flow canvas (6 nodes, Yes/No fork) + 3 feature callouts */

.journeys {
	position: relative;
	background: #f8f9fb;
	padding: 110px 100px 120px;
	overflow: hidden;
	font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.journeys__frame {
	position: relative;
	z-index: 1;
	max-width: 1240px;
	margin: 0 auto;
	width: 100%;
}

.journeys__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}

.journeys__text {
	flex: 0 0 486px;
	max-width: 486px;
	padding-top: 100px;
}

.journeys__eyebrow {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 500;
	font-size: 14.5px;
	line-height: 20px;
	letter-spacing: 2.9px;
	text-transform: uppercase;
	color: #5f6b7a;
	margin: 0 0 22px;
}

.journeys__section-dot {
	width: 6px;
	height: 6px;
	background: #2563eb;
	border-radius: 50%;
	flex-shrink: 0;
}

.journeys__headline {
	font-weight: 500;
	font-size: 34px;
	line-height: 46px;
	letter-spacing: -0.5px;
	color: #111318;
	margin: 0 0 16px;
}

.journeys__subcopy {
	font-weight: 400;
	font-size: 19px;
	line-height: 28.5px;
	letter-spacing: -0.07px;
	color: #3f4652;
	margin: 0;
}


/* Visual — fixed 754×639 canvas with absolute-positioned flow */

.journeys__visual {
	position: relative;
	flex: 0 0 754px;
	width: 754px;
	height: 639px;
}

.journeys-node {
	position: absolute;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 16px;
	height: 66px;
	padding: 0 22px;
	background: #ffffff;
	border: 1.6px solid #64748b;
	border-radius: 16px;
	box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
	font-weight: 500;
	font-size: 19px;
	line-height: 26px;
	letter-spacing: -0.2px;
	color: #111827;
}

.journeys-node--blue {
	border-color: #2563eb;
}

.journeys-node--green {
	border-color: #16a34a;
}

.journeys-node--slate {
	border-color: #64748b;
}

.journeys-node--amber {
	border-color: #d97706;
}

.journeys-node--purple {
	border-color: #9333ea;
}

.journeys-node--n1 {
	left: 124px;
	top: 132px;
	width: 258px;
}

.journeys-node--n2 {
	left: 124px;
	top: 219px;
	width: 258px;
}

.journeys-node--n3 {
	left: 124px;
	top: 306px;
	width: 258px;
}

.journeys-node--n4 {
	left: 124px;
	top: 393px;
	width: 258px;
}

.journeys-node--n5 {
	left: 0;
	top: 573px;
	min-width: 248px;
}

.journeys-node--n6 {
	left: 256px;
	top: 573px;
	min-width: 248px;
}

.journeys-node__icon img {
	width: 24px;
	height: 24px;
	display: block;
}

.journeys-node__label {
	white-space: nowrap;
}

/* Gradient connectors between the top four nodes */

.journeys__link {
	position: absolute;
	z-index: 1;
	left: 252px;
	width: 2px;
	height: 21px;
	background: linear-gradient(180deg, var(--link-from), var(--link-to));
}

.journeys__link::before,
.journeys__link::after {
	content: "";
	position: absolute;
	left: -2px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--link-from);
}

.journeys__link::before {
	top: -3px;
}

.journeys__link::after {
	bottom: -3px;
	background: var(--link-to);
}

.journeys__link--blue-green {
	top: 198px;
	--link-from: #2563eb;
	--link-to: #16a34a;
}

.journeys__link--green-slate {
	top: 285px;
	--link-from: #16a34a;
	--link-to: #64748b;
}

.journeys__link--slate-amber {
	top: 372px;
	--link-from: #64748b;
	--link-to: #d97706;
}


/* Yes/No branch fork + labels */

.journeys__fork {
	position: absolute;
	z-index: 1;
	left: 137px;
	top: 459px;
}

.journeys__pill {
	position: absolute;
	z-index: 2;
	padding: 7px 14px;
	background: #f1f4f8;
	border: 1px solid #d8dee8;
	border-radius: 9px;
	font-weight: 500;
	font-size: 15px;
	line-height: 19.5px;
	color: #5f6b7a;
}

.journeys__pill--yes {
	left: 112px;
	top: 508px;
}

.journeys__pill--no {
	left: 341px;
	top: 508px;
}

/* Callout leader curves (line extends to the callout dot) */

.journeys__leader {
	position: absolute;
	z-index: 1;
}

.journeys__leader--blue {
	left: 381px;
	top: 110px;
}

.journeys__leader--green {
	left: 382px;
	top: 252px;
	width: 72px;
	height: 0;
	border-top: 1.4px solid #16a34a;
}

.journeys__leader--purple {
	left: 503px;
	top: 496.5px;
}

/* Feature callouts */

.journeys-callout {
	position: absolute;
	z-index: 2;
	padding-left: 23px;
}

.journeys-callout--c1 {
	left: 447px;
	top: 92px;
	width: 270px;
}

.journeys-callout--c2 {
	left: 447px;
	top: 234px;
	width: 270px;
}

.journeys-callout--c3 {
	left: 563px;
	top: 478px;
	width: 191px;
}

.journeys-callout__dot {
	position: absolute;
	left: 0;
	top: 12px;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	background: #f7f9fc;
	border: 3.5px solid #2563eb;
}

.journeys-callout--blue .journeys-callout__dot {
	border-color: #2563eb;
}

.journeys-callout--green .journeys-callout__dot {
	border-color: #16a34a;
}

.journeys-callout--purple .journeys-callout__dot {
	border-color: #9333ea;
}

.journeys-callout__title {
	font-weight: 500;
	font-size: 18px;
	line-height: 26px;
	color: #111827;
	/* Align title row with the callout dot (dot center sits 18.5px below callout top). */
	margin: 5.5px 0 0;
}

.journeys-callout__desc {
	font-weight: 400;
	font-size: 14.5px;
	line-height: 23px;
	color: #5f6b7a;
	margin: 6px 0 0;
}

/* Responsive: Desktop */

@media (max-width: 1439px) {
	.journeys {
		padding: 80px 60px;
	}

	.journeys__text {
		flex: 0 0 420px;
		padding-top: 40px;
	}

	.journeys__headline {
		font-size: 28px;
		line-height: 38px;
	}

	.journeys__subcopy {
		font-size: 16px;
		line-height: 24px;
	}
}

/* Responsive: Tablet */

@media (max-width: 1024px) {
	.journeys {
		padding: 60px 40px;
	}

	.journeys__header {
		flex-direction: column;
		gap: 40px;
	}

	.journeys__text {
		flex: none;
		max-width: 100%;
		padding-top: 0;
	}

	.journeys__headline {
		font-size: 24px;
		line-height: 32px;
	}

	.journeys__subcopy {
		font-size: 14px;
		line-height: 20px;
	}

	.journeys__visual {
		flex: none;
		max-width: 754px;
		margin: 0 auto;
	}
}

/* Responsive: Mobile — dedicated layout, Figma 620:90 */

.journeys-mobile {
	display: none;
}

@media (max-width: 768px) {
	.journeys {
		padding: 40px 20px;
	}

	.journeys__header,
	.journeys__visual {
		display: none;
	}

	.journeys-mobile {
		display: block;
	}

	.journeys-m__header {
		display: flex;
		flex-direction: column;
		gap: 18px;
		margin-bottom: 32px;
	}

	.journeys-m__eyebrow {
		display: flex;
		gap: 9px;
		align-items: center;
		font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
		font-weight: 500;
		font-size: 12px;
		line-height: 17px;
		color: #6c7789;
		letter-spacing: 2.2px;
		text-transform: uppercase;
		margin: 0;
	}

	.journeys-m__dot {
		width: 8px;
		height: 8px;
		flex-shrink: 0;
		background: #2563eb;
		border-radius: 50%;
	}

	.journeys-m__headline {
		font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
		font-weight: 600;
		font-size: 29px;
		line-height: 39px;
		letter-spacing: -0.5px;
		color: #0d1422;
		margin: 0;
	}

	.journeys-m__body {
		font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
		font-weight: 400;
		font-size: 16px;
		line-height: 27px;
		color: #5a6577;
		margin: 0;
	}

	.journeys-m__tree {
		display: flex;
		flex-direction: column;
	}

	.journeys-m-node {
		position: relative;
		z-index: 1;
		display: flex;
		align-items: center;
		gap: 14px;
		height: 62px;
		padding: 0 20px 0 18px;
		background: #ffffff;
		border: 1.8px solid #64748b;
		border-radius: 14px;
		box-shadow: 0 2px 8px rgba(13, 31, 71, 0.06);
	}

	.journeys-m-node--blue {
		border-color: #2563eb;
	}

	.journeys-m-node--green {
		border-color: #16a34a;
	}

	.journeys-m-node--gray {
		border-color: #94a3b8;
	}

	.journeys-m-node--amber {
		border-color: #d97706;
	}

	.journeys-m-node--purple {
		border-color: #9333ea;
	}

	.journeys-m-node__icon {
		flex-shrink: 0;
		display: flex;
	}

	.journeys-m-node__icon img {
		width: 22px;
		height: 22px;
		display: block;
	}

	.journeys-m-node__label {
		font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
		font-weight: 500;
		font-size: 17px;
		line-height: 24px;
		letter-spacing: -0.2px;
		color: #0d1422;
	}

	.journeys-m-node__label--stack {
		line-height: 21px;
	}

	/* Rail groups: node + inline callout, joined by a curved bracket line (exact
	   Figma path, Vector 1707/1708) that runs from this node's vertical center
	   down past the callout to the NEXT node's center — 31px = half the 62px
	   node height, so top:31px / bottom:-31px lands the line exactly on both
	   node centers regardless of callout text length. */

	.journeys-m__rail {
		position: relative;
		padding-left: 28px;
		padding-bottom: 24px;
	}

	.journeys-m__rail-line {
		position: absolute;
		left: 14px;
		top: 31px;
		bottom: -31px;
		width: 14px;
	}

	.journeys-m__rail-line svg {
		display: block;
		width: 100%;
		height: 100%;
	}

	.journeys-m__rail-dot {
		content: "";
		position: absolute;
		left: 22.5px;
		top: 26px;
		width: 11px;
		height: 11px;
		border-radius: 50%;
	}

	.journeys-m__rail-dot--blue {
		background: #2563eb;
	}

	.journeys-m__rail-dot--green {
		background: #16a34a;
	}

	.journeys-m__rail-dot--gray {
		background: #94a3b8;
	}

	.journeys-m-callout {
		padding-top: 14px;
	}

	.journeys-m-callout__title {
		font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
		font-weight: 500;
		font-size: 16px;
		line-height: 22px;
		letter-spacing: -0.2px;
		color: #0d1422;
		margin: 0 0 4px;
	}

	.journeys-m-callout__desc {
		font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
		font-weight: 400;
		font-size: 14px;
		line-height: 20px;
		color: #5a6577;
		margin: 0;
	}

	.journeys-m-callout--center {
		padding: 14px 0 0;
		text-align: center;
	}

	/* Wait 24 hours: no incoming line of its own — the green rail's bracket
	   already bleeds 31px past its own wrapper to land right on this node's
	   center (see .journeys-m__rail-line above). Just needs its dot + the
	   same 28px left indent as the rail nodes, so all cards line up. */

	.journeys-m__connector--wait {
		position: relative;
		padding-left: 28px;
	}

	.journeys-m__connector--wait .journeys-m__rail-dot {
		top: 26px;
	}

	/* Wait 24 hours -> Opened?: a plain straight connector, centered on the
	   full tree width (matches Figma's Vector 2, left:50%) rather than the
	   rail's left-gutter alignment. */

	.journeys-m__connector--amber {
		position: relative;
		padding-top: 26px;
	}

	.journeys-m__connector-line {
		position: absolute;
		left: 50%;
		top: 0;
		width: 2px;
		height: 26px;
		transform: translateX(-50%);
	}

	/* Fork: two exact bezier curves (Figma Vector/Vector1) meeting at the
	   tree's horizontal center, each spanning 24.57% of the tree width. */

	.journeys-m__fork {
		position: relative;
		height: 62px;
		margin-top: -1px;
	}

	.journeys-m__fork-curve {
		position: absolute;
		top: 0;
		width: 24.57%;
		height: 100%;
	}

	.journeys-m__fork-curve--yes {
		left: 25.43%;
	}

	.journeys-m__fork-curve--no {
		left: 50%;
	}

	.journeys-m__pills {
		position: absolute;
		top: 22px;
		left: 0;
		right: 0;
		display: flex;
		justify-content: center;
		gap: 34%;
	}

	.journeys-m__pill {
		background: #f2f4f7;
		border: 1px solid #e0e3e9;
		border-radius: 8px;
		padding: 5px 12px;
		font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
		font-weight: 500;
		font-size: 13px;
		line-height: 18px;
		color: #5a6577;
	}

	.journeys-m__branches {
		display: flex;
		gap: 16px;
		align-items: flex-start;
	}

	.journeys-m__branch-col {
		flex: 1;
		min-width: 0;
	}

	.journeys-m__branch-col .journeys-m-node--sm .journeys-m-node__label {
		font-size: 17px;
	}
}


/* Phone system — Cloud phone system & IVR (Figma 607:11675) */

.phone-system {
	position: relative;
	background: #f8f9fb;
	padding: 73px 100px 120px;
	font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.phone-system__frame {
	position: relative;
	max-width: 1240px;
	margin: 0 auto;
	width: 100%;
}

.phone-system__header {
	max-width: 700px;
	margin: 0 0 36px;
}

.phone-system__eyebrow {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 500;
	font-size: 11px;
	line-height: 17px;
	letter-spacing: 1.76px;
	text-transform: uppercase;
	color: #6c7789;
	margin: 0 0 20px;
}

.phone-system__section-dot {
	width: 6px;
	height: 6px;
	background: #2563eb;
	border-radius: 50%;
	flex-shrink: 0;
}

.phone-system__headline {
	font-weight: 500;
	font-size: 34px;
	line-height: 46px;
	letter-spacing: -0.5px;
	color: #0b1220;
	margin: 0 0 16px;
}

.phone-system__subcopy {
	font-weight: 400;
	font-size: 18px;
	line-height: 28px;
	color: #5a6577;
	margin: 0;
}

/* Flow card */

.phone-system__flow {
	border: 1px solid #e6e8ec;
	border-radius: 24px;
	background: #ffffff;
	box-shadow: 0 1px 3px rgba(13, 31, 71, 0.04), 0 8px 24px rgba(13, 31, 71, 0.06);
	overflow: hidden;
	margin: 0 0 36px;
}

.phone-system__flow-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 24px;
	background: #fafbfd;
	border-bottom: 1px solid #e6e8ec;
}

.phone-system__live {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
}

.phone-system__live-pill {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 4px 10px 4px 9px;
	border-radius: 99px;
	background: #e4f7ec;
	color: #16a34a;
	font-weight: 500;
	font-size: 10px;
	line-height: 14px;
	letter-spacing: 0.9px;
}

.phone-system__live-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #16a34a;
}

.phone-system__live strong {
	font-weight: 500;
	font-size: 14px;
	color: #0b1220;
}

.phone-system__flow-meta {
	font-weight: 400;
	font-size: 13px;
	line-height: 19px;
	color: #8a94a6;
	margin: 0;
}

/* Flow canvas — grid layout: 5 nodes + connectors + 2 branch nodes */

.phone-system__flow-canvas {
	display: grid;
	grid-template-columns: 110px 144px 110px 144px 110px 144px 110px 144px 110px;
	grid-template-rows: auto 40px auto;
	align-items: start;
	padding: 64px 56px 36px;
	background-color: #ffffff;
	background-image: radial-gradient(circle, rgba(226, 232, 240, 0.55) 0.85px, transparent 0.85px);
	background-size: 22px 22px;
}

.phone-node {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.phone-node--n1 { grid-column: 1; grid-row: 1; }
.phone-node--n2 { grid-column: 3; grid-row: 1; }
.phone-node--n3 { grid-column: 5; grid-row: 1; }
.phone-node--n4 { grid-column: 7; grid-row: 1; }
.phone-node--n5 { grid-column: 9; grid-row: 1; }

.phone-node--wa { grid-column: 3; grid-row: 3; }
.phone-node--tc { grid-column: 7; grid-row: 3; }

.phone-node__tile {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	margin-bottom: 13px;
}

.phone-node__tile svg {
	display: block;
	max-width: 42px;
	max-height: 42px;
}

.phone-node--color-blue .phone-node__tile {
	background: #e8f0ff;
	color: #2563eb;
}

.phone-node--color-purple .phone-node__tile {
	background: #efe9fe;
	color: #7c3aed;
}

.phone-node--color-amber .phone-node__tile {
	background: #fdf0dc;
	color: #d97706;
}

.phone-node--color-green .phone-node__tile {
	background: #e4f7ec;
	color: #16a34a;
}

.phone-node--color-slate .phone-node__tile {
	background: #edeff3;
	color: #6b7280;
}

.phone-node__label {
	font-weight: 500;
	font-size: 16px;
	line-height: 23px;
	color: #0b1220;
	/* Node columns are narrower than some labels; let text overflow the column rather than
	   wrap — it sits below the tile, a band the connector lines never occupy, so it's safe. */
	white-space: nowrap;
}

.phone-node__sub {
	font-weight: 400;
	font-size: 13px;
	line-height: 20px;
	color: #6c7789;
	margin-top: 2px;
	white-space: nowrap;
}

/* Connectors — a full-width line plus a fixed-size chevron pinned to its end */

.phone-link {
	position: relative;
	/* Match the icon tile's own height so both are top-anchored to the same row start —
	   the line/arrow center at 50% of this box then lands exactly on the tile's center. */
	height: 54px;
	align-self: start;
}

.phone-link__line {
	display: block;
	position: absolute;
	top: 50%;
	left: 0;
	width: 144px;
	height: 2px;
	transform: translateY(-50%);
}

.phone-link__arrow {
	display: block;
	position: absolute;
	top: 50%;
	right: 0;
	width: 8px;
	height: 12px;
	transform: translateY(-50%);
	flex-shrink: 0;
}

.phone-link--l1 { grid-column: 2; grid-row: 1; }
.phone-link--l2 { grid-column: 4; grid-row: 1; }
.phone-link--l3 { grid-column: 6; grid-row: 1; }
.phone-link--l4 { grid-column: 8; grid-row: 1; }

.phone-link__tag {
	position: absolute;
	top: 32px;
	left: 50%;
	transform: translateX(-50%);
	font-weight: 400;
	font-size: 12px;
	line-height: 18px;
	color: #8a94a6;
	white-space: nowrap;
}

/* Branch lines (IVR → WhatsApp, Agent → Team chat) */

.phone-branch {
	width: 0;
	height: 100%;
	border-left: 1.6px dashed #c7cfda;
	justify-self: center;
}

.phone-branch--ivr { grid-column: 3; grid-row: 2; }
.phone-branch--agent { grid-column: 7; grid-row: 2; }

/* "What Orbit replaces" — label stacked above the consolidation row */

.phone-system__replaces {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
	margin: 0 0 36px;
}

.phone-system__replaces-label {
	font-weight: 500;
	font-size: 10px;
	line-height: 14px;
	letter-spacing: 1.1px;
	text-transform: uppercase;
	color: #808b9c;
	margin: 0;
	white-space: nowrap;
}

.phone-system__chips {
	display: flex;
	align-items: center;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
}

/* Small chip — used inside each feature card ("Replaces X") */

.phone-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 12px 6px 11px;
	border: 1px solid #e2e5ea;
	border-radius: 8px;
	background: #f4f5f7;
	font-weight: 500;
	font-size: 12px;
	line-height: 17px;
	color: #8a94a6;
	white-space: nowrap;
}

.phone-chip__x {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.phone-chip__x svg {
	display: block;
}

.phone-chip__check {
	color: #325fec;
}

.phone-chip--new {
	background: #edf3ff;
	border-color: #c9daff;
	color: #2563eb;
}

.phone-chip--new .phone-chip__check {
	color: #2563eb;
}

/* Wide chip — the consolidation row above the feature cards */

.phone-chip--wide {
	flex: 1 0 0;
	min-width: 0;
	padding: 12px 16px 12px 14px;
	border-radius: 12px;
	font-weight: 400;
	font-size: 13.5px;
	line-height: 20px;
	color: #8a94a6;
	text-decoration: line-through;
	white-space: normal;
}

.phone-system__arrow {
	color: #98a2b2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 54px;
	list-style: none;
}

.phone-system__arrow svg {
	width: 40px;
	height: 12px;
}

.phone-chip--wide.phone-chip--active {
	flex: 0 0 216px;
	background: #edf3ff;
	border: 1.2px solid #c9daff;
	box-shadow: 0 4px 14px rgba(37, 99, 235, 0.14);
	color: #2563eb;
	font-weight: 500;
	text-decoration: none;
}

.phone-chip--wide.phone-chip--active .phone-chip__check {
	color: #2563eb;
}

/* Feature cards */

.phone-system__cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px 29px;
}

.phone-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	border: 1px solid #e6e8ec;
	border-radius: 20px;
	background: #ffffff;
	padding: 28px 28px 26px;
	box-shadow: 0 4px 14px rgba(13, 31, 71, 0.05);
}

.phone-card__tile {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 14px;
	margin-bottom: 22px;
}

.phone-card__tile svg {
	width: 24px;
	height: 24px;
}

.phone-node__tile img,
.phone-card__tile img {
	object-fit: contain;
}

.phone-card--blue .phone-card__tile {
	background: #e8f0ff;
	color: #2563eb;
}

.phone-card--purple .phone-card__tile {
	background: #efe9fe;
	color: #7c3aed;
}

.phone-card--amber .phone-card__tile {
	background: #fdf0dc;
	color: #d97706;
}

.phone-card--green .phone-card__tile {
	background: #e4f7ec;
	color: #16a34a;
}

.phone-card--slate .phone-card__tile {
	background: #edeff3;
	color: #6b7280;
}

.phone-card__title {
	font-weight: 500;
	font-size: 18px;
	line-height: 26px;
	letter-spacing: -0.2px;
	color: #0b1220;
	margin: 0 0 12px;
}

.phone-card__body {
	font-weight: 400;
	font-size: 14px;
	line-height: 22px;
	color: #5a6577;
	margin: 0 0 22px;
	flex-grow: 1;
}

/* Responsive: below-1440 desktop */

@media (max-width: 1440px) {
	.phone-system {
		padding: 64px 60px 100px;
	}

	.phone-system__headline {
		font-size: 30px;
		line-height: 40px;
	}

	.phone-system__subcopy {
		font-size: 17px;
		line-height: 26px;
	}
}

/* Responsive: Tablet */

@media (max-width: 1024px) {
	.phone-system {
		padding: 56px 40px 84px;
	}

	.phone-system__header {
		max-width: 100%;
	}

	.phone-system__headline {
		font-size: 26px;
		line-height: 34px;
	}

	.phone-system__subcopy {
		font-size: 15.5px;
		line-height: 24px;
		max-width: 560px;
	}

	.phone-system__flow-canvas {
		grid-template-columns: 108px 1fr 108px 1fr 108px 1fr 108px 1fr 108px;
		padding: 32px 24px 28px;
	}

	.phone-node__tile {
		width: 46px;
		height: 46px;
		margin-bottom: 10px;
	}

	.phone-node__tile svg {
		max-width: 34px;
		max-height: 34px;
	}

	.phone-link {
		/* Match the smaller tablet tile so it stays top-anchored to the same row start */
		height: 46px;
	}

	/* Fixed 144px lines don't fit the narrower tablet columns — scale to the column instead */
	.phone-link__line {
		width: 100%;
	}

	.phone-node__label {
		font-size: 14px;
		line-height: 20px;
	}

	.phone-node__sub {
		font-size: 12px;
		line-height: 17px;
	}

	.phone-system__replaces-label {
		white-space: normal;
	}

	.phone-system__chips {
		flex-wrap: wrap;
	}

	.phone-chip--wide {
		flex: 1 1 180px;
	}

	.phone-chip--wide.phone-chip--active {
		flex: 1 1 100%;
		justify-content: center;
	}

	.phone-system__cards {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Responsive: Mobile — collapse the flow canvas into a vertical node list */

.phone-system-mobile {
	display: none;
}

@media (max-width: 768px) {
	.phone-system {
		padding: 44px 20px 48px;
	}

	.phone-system__header,
	.phone-system__flow,
	.phone-system__replaces,
	.phone-system__cards {
		display: none;
	}

	.phone-system-mobile {
		display: block;
	}

	.phone-m__header {
		display: flex;
		flex-direction: column;
		gap: 16px;
		margin-bottom: 28px;
	}

	.phone-m__eyebrow {
		display: flex;
		align-items: center;
		gap: 8px;
		font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
		font-weight: 600;
		font-size: 10px;
		letter-spacing: 0.5px;
		text-transform: uppercase;
		color: #657080;
		margin: 0;
	}

	.phone-m__dot {
		width: 5px;
		height: 5px;
		flex-shrink: 0;
		background: #2563eb;
		border-radius: 50%;
	}

	.phone-m__headline {
		font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
		font-weight: 600;
		font-size: 28px;
		line-height: 1.14;
		color: #151923;
		margin: 0;
	}

	.phone-m__body {
		font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
		font-weight: 400;
		font-size: 14px;
		line-height: 1.55;
		color: #657080;
		margin: 0;
	}

	/* Inbound call flow panel */

	.phone-m__flow {
		background: #ffffff;
		border: 1px solid #e3e7ed;
		border-radius: 14px;
		box-shadow: 0 4px 14px rgba(24, 33, 48, 0.06);
		padding: 16px;
		margin-bottom: 24px;
		display: flex;
		flex-direction: column;
		gap: 12px;
	}

	.phone-m__flow-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 8px;
	}

	.phone-m__flow-live {
		display: flex;
		align-items: center;
		gap: 6px;
		font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
		font-weight: 500;
		font-size: 10px;
		color: #657080;
		margin: 0;
		white-space: nowrap;
	}

	.phone-m__flow-live-dot {
		width: 6px;
		height: 6px;
		flex-shrink: 0;
		border-radius: 50%;
		background: #22c55e;
	}

	.phone-m__flow-meta {
		font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
		font-weight: 400;
		font-size: 10px;
		color: #97a1af;
		margin: 0;
		white-space: nowrap;
	}

	.phone-m__flow-divider {
		height: 1px;
		background: #e3e7ed;
		flex-shrink: 0;
	}

	.phone-m-step {
		display: flex;
		gap: 12px;
		align-items: flex-start;
		flex-shrink: 0;
	}

	.phone-m-step__rail {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 4px;
		width: 34px;
		flex-shrink: 0;
	}

	.phone-m-step__tile {
		width: 34px;
		height: 34px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
	}

	.phone-m-step__tile svg {
		width: 19px;
		height: 19px;
	}

	.phone-m-step__connector {
		width: 1px;
		height: 30px;
		background: #e3e7ed;
	}

	.phone-m-step__copy {
		flex: 1;
		min-width: 0;
	}

	.phone-m-step__title {
		font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
		font-weight: 600;
		font-size: 14px;
		color: #151923;
		margin: 0 0 3px;
	}

	.phone-m-step__sub {
		font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
		font-weight: 400;
		font-size: 11px;
		line-height: 1.35;
		color: #657080;
		margin: 0;
	}

	.phone-m__channels {
		display: flex;
		gap: 8px;
		flex-shrink: 0;
	}

	.phone-m__channel {
		flex: 1;
		min-width: 0;
		display: flex;
		align-items: center;
		gap: 6px;
		padding: 8px;
		border-radius: 6px;
	}

	.phone-m__channel img,
	.phone-m__channel svg {
		width: 18px;
		height: 18px;
		flex-shrink: 0;
	}

	.phone-m__channel span {
		font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
		font-weight: 500;
		font-size: 10px;
		color: #151923;
		line-height: 1.3;
	}

	.phone-m__channel--wa {
		background: #e5f8ef;
	}

	.phone-m__channel--chat {
		background: #f1eaff;
		color: #7c3aed;
	}

	/* Filter chips */

	.phone-m__filters {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		margin-bottom: 16px;
	}

	.phone-m__filter {
		background: #ffffff;
		border: 1px solid #e3e7ed;
		border-radius: 6px;
		padding: 7px 10px;
		font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
		font-weight: 400;
		font-size: 10px;
		color: #657080;
	}

	.phone-m__filter--active {
		background: #eaf1ff;
		border-color: #2563eb;
		color: #2563eb;
		font-weight: 500;
	}

	/* Capability cards */

	.phone-m__cards {
		display: flex;
		flex-direction: column;
		gap: 12px;
	}

	.phone-m-card {
		background: #ffffff;
		border: 1px solid #e3e7ed;
		border-radius: 12px;
		box-shadow: 0 4px 14px rgba(24, 33, 48, 0.06);
		padding: 20px;
		display: flex;
		flex-direction: column;
		gap: 12px;
	}

	.phone-m-card__tile {
		width: 36px;
		height: 36px;
		border-radius: 6px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.phone-m-card__tile svg,
	.phone-m-card__tile img {
		width: 22px;
		height: 22px;
	}

	.phone-m-card__tile.phone-card--blue {
		background: #e8f0ff;
		color: #2563eb;
	}

	.phone-m-card__tile.phone-card--purple {
		background: #efe9fe;
		color: #7c3aed;
	}

	.phone-m-card__tile.phone-card--amber {
		background: #fdf0dc;
		color: #d97706;
	}

	.phone-m-card__tile.phone-card--green {
		background: #e4f7ec;
		color: #16a34a;
	}

	.phone-m-card__tile.phone-card--slate {
		background: #edeff3;
		color: #6b7280;
	}

	.phone-m-step__tile.phone-node--color-blue {
		background: #e8f0ff;
		color: #2563eb;
	}

	.phone-m-step__tile.phone-node--color-purple {
		background: #efe9fe;
		color: #7c3aed;
	}

	.phone-m-step__tile.phone-node--color-amber {
		background: #fdf0dc;
		color: #d97706;
	}

	.phone-m-step__tile.phone-node--color-green {
		background: #e4f7ec;
		color: #16a34a;
	}

	.phone-m-step__tile.phone-node--color-slate {
		background: #edeff3;
		color: #6b7280;
	}

	.phone-m-card__title {
		font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
		font-weight: 600;
		font-size: 16px;
		color: #151923;
		margin: 0;
	}

	.phone-m-card__body {
		font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
		font-weight: 400;
		font-size: 14px;
		line-height: 1.5;
		color: #657080;
		margin: 0;
	}

	.phone-m-card__tag {
		display: inline-block;
		align-self: flex-start;
		padding: 5px 8px;
		border-radius: 6px;
		font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
		font-weight: 500;
		font-size: 10px;
	}

	.phone-m-card__tag.phone-card--blue {
		background: #eaf1ff;
		color: #2563eb;
	}

	.phone-m-card__tag.phone-card--purple {
		background: #f1eaff;
		color: #8b5cf6;
	}

	.phone-m-card__tag.phone-card--amber {
		background: #fff1df;
		color: #f59e42;
	}

	.phone-m-card__tag.phone-card--green {
		background: #e5f8ef;
		color: #31b978;
	}

	.phone-m-card__tag.phone-card--slate {
		background: #f7f8fa;
		color: #657080;
	}
}

/* CX — Orbit ("Every conversation") — Figma 607:11877, desktop only for now */

.cx-orbit {
	position: relative;
	background: #0b0a0b;
	padding: 64px 100px 120px;
	font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	overflow: hidden;
}

.cx-orbit__frame {
	position: relative;
	max-width: 1240px;
	margin: 0 auto;
	width: 100%;
}

.cx-orbit__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	max-width: 1188px;
	margin: 0 auto 64px;
	text-align: center;
}

.cx-orbit__eyebrow {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 500;
	font-size: 11px;
	line-height: 17px;
	letter-spacing: 1.76px;
	text-transform: uppercase;
	color: #76767d;
	margin: 0;
}

.cx-orbit__dot {
	width: 6px;
	height: 6px;
	background: #3a7dff;
	border-radius: 50%;
	flex-shrink: 0;
}

.cx-orbit__headline {
	font-weight: 500;
	font-size: 34px;
	line-height: 46px;
	letter-spacing: -0.5px;
	color: #f3f4f6;
	max-width: 600px;
	margin: 0;
}

.cx-orbit__subcopy {
	font-weight: 400;
	font-size: 18px;
	line-height: 28px;
	color: #9ca3af;
	max-width: 1188px;
	margin: 0;
}

/* Diagram */

.cx-orbit__diagram {
	position: relative;
	height: 620px;
	width: 100%;
}

.cx-orbit__glow {
	position: absolute;
	/* Exact Figma geometry: glow box is 620×520 at (310,114) in the 1240×620 diagram,
	   expanded by its blur filter's own bleed to a 1020×920 source image. */
	left: 110px;
	top: -86px;
	width: 1020px;
	height: 920px;
	pointer-events: none;
}

.cx-orbit__lines {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.cx-orbit__ring {
	fill: none;
	stroke-width: 1;
}

.cx-orbit__line {
	opacity: 0.85;
	filter: drop-shadow(0 0 4px currentColor);
}

/* Hub */

.cx-orbit__hub {
	position: absolute;
	left: 536px;
	top: 290px;
	width: 168px;
	height: 168px;
	border-radius: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: rgba(7, 9, 14, 0.9);
	border: 2px solid #5ba0ff;
	box-shadow: inset 0 0 22px 0 rgba(91, 160, 255, 0.32);
	filter: drop-shadow(0 0 26px rgba(91, 160, 255, 0.55)) drop-shadow(0 0 70px rgba(58, 125, 255, 0.28));
}

.cx-orbit__hub-icon {
	display: flex;
	color: #7fb4ff;
}

.cx-orbit__hub-icon svg {
	width: 30px;
	height: 31px;
}

.cx-orbit__hub-label {
	font-weight: 500;
	font-size: 15px;
	line-height: 19px;
	color: #ffffff;
	text-align: center;
	margin: 0;
}

.cx-orbit__waveform {
	width: 72px;
	height: 17px;
	color: #5aa0ff;
}

/* Orbital nodes */

.cx-node {
	position: absolute;
	width: 68px;
	height: 68px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(11, 10, 11, 0.85);
	border: 1.5px solid var(--cx-color);
	box-shadow: 0 0 18px color-mix(in srgb, var(--cx-color) 55%, transparent), inset 0 0 12px color-mix(in srgb, var(--cx-color) 18%, transparent);
	color: var(--cx-color);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cx-node:hover {
	transform: scale(1.06);
	box-shadow: 0 0 26px color-mix(in srgb, var(--cx-color) 70%, transparent), inset 0 0 14px color-mix(in srgb, var(--cx-color) 24%, transparent);
}

.cx-node__icon {
	display: flex;
}

.cx-node__icon svg {
	width: 25px;
	height: 25px;
}

.cx-node--reward .cx-node__icon svg {
	width: 24px;
	height: 24px;
}

/* Stage text blocks */

.cx-text {
	position: absolute;
}

.cx-text--center {
	text-align: center;
}

.cx-text--left {
	text-align: left;
}

.cx-text__tag {
	font-weight: 500;
	font-size: 10px;
	line-height: 14px;
	letter-spacing: 1.1px;
	text-transform: uppercase;
	margin: 0 0 8px;
}

.cx-text__title {
	font-weight: 500;
	font-size: 16px;
	line-height: 23px;
	letter-spacing: -0.2px;
	color: #f3f4f6;
	margin: 0 0 8px;
}

.cx-text__body {
	font-weight: 400;
	font-size: 13px;
	line-height: 20px;
	color: #8d94a1;
	margin: 0;
}

/* CX — Orbit Mobile — Figma 691:1311, <768px single-column adaptation */

.cx-orbit-mobile {
	display: none;
}

@media (max-width: 900px) {
	.cx-orbit {
		padding: 48px 20px 64px;
	}

	.cx-orbit__header,
	.cx-orbit__diagram {
		display: none;
	}

	.cx-orbit-mobile {
		display: block;
	}

	.cx-m__header {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 16px;
		text-align: center;
		margin-bottom: 48px;
	}

	.cx-m__eyebrow {
		display: flex;
		align-items: center;
		gap: 8px;
		font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
		font-weight: 500;
		font-size: 11px;
		letter-spacing: 1.76px;
		text-transform: uppercase;
		color: #76767d;
		margin: 0;
	}

	.cx-m__dot {
		width: 6px;
		height: 6px;
		flex-shrink: 0;
		background: #3a7dff;
		border-radius: 50%;
	}

	.cx-m__headline {
		font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
		font-weight: 500;
		font-size: 30px;
		line-height: 1.18;
		color: #f3f4f6;
		margin: 0;
	}

	.cx-m__body {
		font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
		font-weight: 400;
		font-size: 14px;
		line-height: 1.55;
		color: #9ca3af;
		margin: 0;
		max-width: 326px;
	}

	/* Diagram: hub-only, no orbiting nodes on mobile */

	.cx-m__diagram {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		max-width: 340px;
		aspect-ratio: 341 / 297;
		margin: 0 auto 48px;
	}

	.cx-m__ring {
		position: absolute;
		top: 50%;
		left: 50%;
		border-radius: 50%;
		border: 1px solid #1e3a6b;
		transform: translate(-50%, -50%);
	}

	.cx-m__ring--1 {
		width: 79.2%;
		height: 91%;
		border-color: rgba(30, 58, 107, 0.8);
	}

	.cx-m__ring--dashed {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 91.8%;
		height: 100%;
		transform: translate(-50%, -50%);
	}

	.cx-m__hub {
		position: relative;
		z-index: 1;
		width: 65.9%;
		height: 75.7%;
		border-radius: 50%;
		background: rgba(7, 9, 14, 0.9);
		border: 2.675px solid #5ba0ff;
		box-shadow: 0 0 29.42px 0 rgba(91, 160, 255, 0.32) inset;
		filter: drop-shadow(0 0 34.769px rgba(91, 160, 255, 0.55)) drop-shadow(0 0 93.608px rgba(58, 125, 255, 0.28));
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 8px;
		color: #3a7dff;
	}

	.cx-m__hub-icon {
		display: flex;
		width: 15%;
		aspect-ratio: 1;
	}

	.cx-m__hub-icon svg {
		width: 100%;
		height: 100%;
	}

	.cx-m__hub-label {
		font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
		font-weight: 500;
		font-size: 17px;
		line-height: 1.3;
		color: #ffffff;
		text-align: center;
		margin: 0;
	}

	.cx-m__waveform {
		width: 36%;
		height: auto;
		margin-top: 4px;
	}

	.cx-m__bubble {
		position: absolute;
		background: #121418;
		backdrop-filter: blur(10px);
		border-radius: 10px;
		padding: 10px 12px;
		font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
		font-weight: 400;
		font-size: 11px;
		line-height: 1.45;
		color: #8d94a1;
		z-index: 2;
		white-space: nowrap;
	}

	.cx-m__bubble--left {
		left: 2%;
		top: 60%;
		transform: translateY(-50%);
		border-radius: 9.827px;
		border: 0.983px solid #3c4762;
		background: rgba(18, 20, 24, 0.07);
		backdrop-filter: blur(10.121601104736328px);
	}

	.cx-m__bubble--right {
		right: 4%;
		top: 24%;
		display: flex;
		width: 82.91px;
		height: 53.49px;
		padding: 0 16.047px;
		justify-content: flex-start;
		align-items: center;
		border-radius: 13.373px;
		border: 1.337px solid #5ba0ff;
		background: rgba(18, 20, 24, 0.07);
		backdrop-filter: blur(13.773725509643555px);
	}

	/* Vertical connected timeline */

	.cx-m__timeline {
		display: flex;
		flex-direction: column;
	}

	.cx-m-stage {
		display: flex;
		gap: 16px;
		align-items: stretch;
	}

	.cx-m-stage__marker {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 48px;
		flex-shrink: 0;
	}

	.cx-m-stage__ring {
		width: 48px;
		height: 48px;
		border-radius: 50%;
		flex-shrink: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		background: rgba(8, 9, 11, 0.94);
		border: 1.5px solid var(--cx-color);
		box-shadow: 0 0 16px 0 color-mix(in srgb, var(--cx-color) 33%, transparent);
		color: var(--cx-color);
	}

	.cx-m-stage__ring svg {
		width: 25px;
		height: 25px;
	}

	/* flex:1 so the line always stretches to the exact height of this row —
	   the row height is set by the copy text (variable, wraps differently
	   per description length), so a fixed line height would fall short or
	   overshoot and leave a visible gap before the next stage's icon. */
	.cx-m-stage__connector {
		width: 1px;
		flex: 1;
		min-height: 16px;
		margin-top: 8px;
		background: #20334b;
	}

	.cx-m-stage__copy {
		flex: 1;
		min-width: 0;
		padding: 2px 0 24px;
	}

	.cx-m-stage--last .cx-m-stage__copy {
		padding-bottom: 0;
	}

	.cx-m-stage__tag {
		font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
		font-weight: 600;
		font-size: 11px;
		line-height: 1.3;
		margin: 0 0 8px;
	}

	.cx-m-stage__title {
		font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
		font-weight: 500;
		font-size: 18px;
		line-height: 1.3;
		color: #f3f4f6;
		margin: 0 0 8px;
	}

	.cx-m-stage__body {
		font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
		font-weight: 400;
		font-size: 14px;
		line-height: 1.5;
		color: #9ca3af;
		margin: 0;
	}
}

/* CCaaS — "Run your contact center in one agent workspace" — Figma 607:11970, desktop only */

.ccaas {
	position: relative;
	background: #f7f8fb;
	padding: 120px 100px;
	font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.ccaas__frame {
	position: relative;
	max-width: 1240px;
	margin: 0 auto;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 56px;
}

/* Header row */

.ccaas__header-row {
	display: flex;
	gap: 60px;
	align-items: flex-start;
	width: 100%;
}

.ccaas__header {
	display: flex;
	flex-direction: column;
	gap: 20px;
	width: 600px;
	flex-shrink: 0;
}

.ccaas__eyebrow {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 500;
	font-size: 11px;
	line-height: 17px;
	letter-spacing: 1.76px;
	text-transform: uppercase;
	color: #6c7789;
	margin: 0;
}

.ccaas__dot {
	width: 6px;
	height: 6px;
	background: #2563eb;
	border-radius: 50%;
	flex-shrink: 0;
}

.ccaas__headline {
	font-weight: 500;
	font-size: 34px;
	line-height: 46px;
	letter-spacing: -0.5px;
	color: #0b1220;
	margin: 0;
}

.ccaas__subcopy {
	font-weight: 400;
	font-size: 18px;
	line-height: 28px;
	color: #5a6577;
	margin: 0;
}

/* Hero illustration */

.ccaas__hero {
	position: relative;
	flex: 1 0 0;
	height: 360px;
	min-width: 0;
}

.ccaas__hero-wires {
	position: absolute;
	left: 0;
	top: 0;
	width: 580px;
	height: 340px;
}

.ccaas-chip {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background: #ffffff;
	border: 1px solid #e6e8ec;
	border-radius: 13px;
	box-shadow: 0 3px 10px rgba(13, 31, 71, 0.08);
}

.ccaas-chip svg,
.ccaas-chip img {
	display: block;
	width: 22px;
	height: 22px;
}

.ccaas-chip--social {
	background: none;
	border: none;
	box-shadow: none;
	width: 64px;
	height: 64px;
}

.ccaas-chip--social img {
	width: 64px;
	height: 64px;
}

.ccaas-mark {
	position: absolute;
	width: 88px;
	height: 88px;
}

.ccaas-mark img {
	display: block;
	width: 88px;
	height: 88px;
}

.ccaas-photo {
	position: absolute;
	left: 391px;
	top: 4px;
	width: 185px;
	height: 200px;
	border-radius: 18px;
	margin: 0;
	background: #eef1f5;
	overflow: hidden;
}

.ccaas-photo__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ccaas-card {
	position: absolute;
	left: 248px;
	top: 44px;
	width: 162px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 18px 18px 20px;
	background: #ffffff;
	border: 1px solid #e6e8ec;
	border-radius: 16px;
	box-shadow: 0 6px 18px rgba(13, 31, 71, 0.08);
}

.ccaas-card__title {
	font-weight: 500;
	font-size: 13.5px;
	line-height: 19px;
	color: #0b1220;
	margin: 0;
}

.ccaas-card__rows {
	display: flex;
	flex-direction: column;
	gap: 13px;
}

.ccaas-card__row {
	display: flex;
	align-items: center;
	gap: 10px;
}

.ccaas-card__dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	flex-shrink: 0;
}

.ccaas-card__dot--blue { background: #2563eb; }
.ccaas-card__dot--green { background: #16a34a; }
.ccaas-card__dot--amber { background: #d97706; }

.ccaas-card__skeleton {
	display: flex;
	flex-direction: column;
	gap: 5px;
	flex: 1 0 0;
	min-width: 0;
}

.ccaas-card__line {
	display: block;
	height: 6px;
	border-radius: 3px;
	background: #e3e7ed;
}

/* Flow board */

.ccaas-board {
	position: relative;
	width: 100%;
	height: 469px;
	background: #ffffff;
	border: 1px solid #e6e8ec;
	border-radius: 20px;
	overflow: hidden;
}

.ccaas-board__band {
	position: absolute;
	left: 9px;
	width: 1220px;
	border-radius: 14px;
}

.ccaas-board__band--agent {
	top: 153px;
	height: 149px;
	background: #eef3fd;
}

.ccaas-board__band--supervisor {
	top: 309px;
	height: 151px;
	background: #f5f1fd;
}

.ccaas-board__wires {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.ccaas-role {
	position: absolute;
	width: 44px;
	height: 44px;
	border-radius: 13px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ccaas-role__well svg {
	display: block;
	width: 22px;
	height: 22px;
}

.ccaas-role--customer { background: #eff1f5; color: #5b6676; }
.ccaas-role--agent { background: #e2edfe; color: #5b6676; }
.ccaas-role--supervisor { background: #efeafe; color: #5b6676; }

.ccaas-role__avatar {
	position: absolute;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: #d9dee6;
	overflow: hidden;
}

.ccaas-role__avatar-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ccaas-role__label {
	position: absolute;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.ccaas-role__name {
	font-weight: 500;
	font-size: 16px;
	line-height: 18px;
	color: #000000;
	margin: 0;
}

.ccaas-role__sub {
	font-weight: 400;
	font-size: 13px;
	line-height: 19px;
	color: #6c7789;
	margin: 0;
}

.ccaas-node {
	position: absolute;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ccaas-node__icon svg {
	display: block;
	width: 23px;
	height: 23px;
}

.ccaas-node--blue {
	background: #2563eb;
	box-shadow: 0 0 0 8px rgba(37, 99, 235, 0.12);
}

.ccaas-node--green {
	background: #16a34a;
	box-shadow: 0 0 0 8px rgba(22, 163, 74, 0.14);
}

.ccaas-node--amber {
	background: #d97706;
	box-shadow: 0 0 0 8px rgba(217, 119, 6, 0.14);
}

.ccaas-node--purple {
	background: #7c3aed;
	box-shadow: 0 0 0 8px rgba(124, 58, 237, 0.14);
}

.ccaas-event {
	position: absolute;
}

.ccaas-event__title {
	font-weight: 500;
	font-size: 15px;
	line-height: 22px;
	letter-spacing: -0.2px;
	color: #0b1220;
	margin: 0 0 4px;
}

.ccaas-event__body {
	font-weight: 400;
	font-size: 12.5px;
	line-height: 19px;
	color: #6c7789;
	margin: 0;
}

/* Feature columns */

.ccaas-columns {
	display: flex;
	align-items: stretch;
	width: 100%;
}

.ccaas-column {
	flex: 1 0 0;
	min-width: 0;
	padding: 0 30px;
}

.ccaas-column:first-child {
	padding-left: 0;
}

.ccaas-column:last-child {
	padding-right: 0;
}

.ccaas-column + .ccaas-column {
	border-left: 1px solid #e3e6eb;
}

.ccaas-column__tag {
	font-weight: 500;
	font-size: 10px;
	line-height: 14px;
	letter-spacing: 1.1px;
	text-transform: uppercase;
	color: #2563eb;
	margin: 0 0 5px;
}

.ccaas-column__title {
	font-weight: 500;
	font-size: 17px;
	line-height: 24px;
	letter-spacing: -0.2px;
	color: #0b1220;
	margin: 0 0 18px;
}

.ccaas-column__body {
	font-weight: 400;
	font-size: 14px;
	line-height: 23px;
	color: #5a6577;
	margin: 0;
}

/* CCaaS Mobile — Figma 692:1430, <900px single-column adaptation */

.ccaas-mobile {
	display: none;
}

@media (max-width: 900px) {
	.ccaas {
		padding: 48px 20px 56px;
	}

	.ccaas__header-row,
	.ccaas-board,
	.ccaas-columns {
		display: none;
	}

	.ccaas-mobile {
		display: block;
	}

	.ccaas-m__header {
		display: flex;
		flex-direction: column;
		gap: 16px;
		margin-bottom: 40px;
	}

	.ccaas-m__eyebrow {
		display: flex;
		align-items: center;
		gap: 8px;
		font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
		font-weight: 500;
		font-size: 11px;
		text-transform: uppercase;
		color: #6c7789;
		margin: 0;
	}

	.ccaas-m__dot {
		width: 6px;
		height: 6px;
		flex-shrink: 0;
		background: #2563eb;
		border-radius: 50%;
	}

	.ccaas-m__headline {
		font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
		font-weight: 500;
		font-size: 32px;
		line-height: 39px;
		color: #0b1220;
		margin: 0;
	}

	.ccaas-m__body {
		font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
		font-weight: 400;
		font-size: 15px;
		line-height: 24px;
		color: #5a6577;
		margin: 0;
	}

	/* Hero illustration: channels -> hub -> photo, sized for Figma's own
	   350x288 mobile canvas (fits exactly at 390px viewport - 20px*2 padding). */

	.ccaas-m__hero {
		position: relative;
		width: 100%;
		max-width: 350px;
		height: 288px;
		margin: 0 auto 40px;
	}

	.ccaas-m__channels {
		position: absolute;
		left: 0;
		top: 38px;
		display: flex;
		flex-direction: column;
		gap: 12px;
		z-index: 2;
	}

	.ccaas-m-channel {
		width: 38px;
		height: 38px;
		border-radius: 12px;
		background: #ffffff;
		border: 1px solid #e6e8ec;
		box-shadow: 0 6px 18px rgba(13, 31, 71, 0.08);
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.ccaas-m-channel__badge {
		width: 20px;
		height: 20px;
		border-radius: 6px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.ccaas-m__wire {
		position: absolute;
		left: 32px;
	}

	.ccaas-m__wire--1 {
		top: 57px;
	}

	.ccaas-m__wire--2 {
		top: 108px;
	}

	.ccaas-m__wire--3 {
		top: 133px;
		transform: rotate(180deg) scaleX(-1);
	}

	.ccaas-m__wire--4 {
		top: 133px;
		transform: rotate(180deg) scaleX(-1);
	}

	.ccaas-m__hub {
		position: absolute;
		left: 119px;
		top: 105px;
		width: 56px;
		height: 56px;
		z-index: 2;
	}

	.ccaas-m__hub img {
		position: absolute;
		left: -18px;
		top: -12px;
		width: 92px;
		height: 92px;
		max-width: none;
	}

	.ccaas-m__arrow-line {
		position: absolute;
		left: 179px;
		top: 132px;
	}

	.ccaas-m__arrow-head {
		position: absolute;
		left: 199px;
		top: 128px;
	}

	.ccaas-m__photo {
		position: absolute;
		left: 207px;
		top: 11px;
		width: 143px;
		height: 164px;
		margin: 0;
		border-radius: 16px;
		overflow: hidden;
	}

	.ccaas-m__photo-img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
	}

	.ccaas-m__card {
		position: absolute;
		left: 165px;
		top: 148px;
		width: 145px;
		background: #ffffff;
		border: 1px solid #e6e8ec;
		border-radius: 14px;
		box-shadow: 0 6px 18px rgba(13, 31, 71, 0.08);
		padding: 14px;
		display: flex;
		flex-direction: column;
		gap: 12px;
		z-index: 3;
	}

	.ccaas-m__card-title {
		font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
		font-weight: 500;
		font-size: 12px;
		line-height: 17px;
		color: #0b1220;
		margin: 0;
	}

	.ccaas-m__card-row {
		display: flex;
		align-items: center;
		gap: 8px;
		width: 100%;
	}

	.ccaas-m__card-dot {
		width: 7px;
		height: 7px;
		border-radius: 50%;
		flex-shrink: 0;
	}

	.ccaas-m__card-lines {
		display: flex;
		flex-direction: column;
		gap: 4px;
	}

	.ccaas-m__card-lines span {
		display: block;
		height: 5px;
		border-radius: 3px;
		background: #dde3ec;
	}

	/* Conversation journey board */

	.ccaas-m__board {
		background: #ffffff;
		border: 1px solid #e6e8ec;
		border-radius: 20px;
		padding: 10px;
		display: flex;
		flex-direction: column;
		gap: 8px;
	}

	.ccaas-m-lane {
		padding: 16px;
		display: flex;
		flex-direction: column;
		gap: 20px;
	}

	.ccaas-m-lane--agent,
	.ccaas-m-lane--supervisor {
		border-radius: 14px;
	}

	.ccaas-m-lane--agent {
		background: #eef3fd;
	}

	.ccaas-m-lane--supervisor {
		background: #f5f1fd;
	}

	.ccaas-m-lane__role {
		display: flex;
		align-items: center;
		gap: 10px;
	}

	.ccaas-m-lane__avatar {
		width: 30px;
		height: 30px;
		border-radius: 50%;
		overflow: hidden;
		flex-shrink: 0;
	}

	.ccaas-m-lane__avatar-img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
	}

	.ccaas-m-lane__name {
		font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
		font-weight: 500;
		font-size: 14px;
		color: #0b1220;
		margin: 0;
	}

	.ccaas-m-lane__sub {
		font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
		font-weight: 400;
		font-size: 12px;
		color: #6c7789;
		margin: 0;
	}

	.ccaas-m-event {
		display: flex;
		gap: 12px;
		align-items: flex-start;
	}

	.ccaas-m-event__node {
		width: 40px;
		height: 40px;
		border-radius: 999px;
		flex-shrink: 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.ccaas-m-event__node svg {
		width: 20px;
		height: 20px;
	}

	.ccaas-m-event__copy {
		flex: 1;
		min-width: 0;
		display: flex;
		flex-direction: column;
		gap: 4px;
	}

	.ccaas-m-event__title {
		font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
		font-weight: 500;
		font-size: 14px;
		line-height: 20px;
		color: #0b1220;
		margin: 0;
	}

	.ccaas-m-event__body {
		font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
		font-weight: 400;
		font-size: 12px;
		line-height: 18px;
		color: #6c7789;
		margin: 0;
	}

	/* Capability blocks */

	.ccaas-m__capabilities {
		display: flex;
		flex-direction: column;
		gap: 40px;
		margin-top: 40px;
	}

	.ccaas-m-capability {
		display: flex;
		flex-direction: column;
		gap: 16px;
	}

	.ccaas-m-capability__divider {
		height: 1px;
		background: #e6e8ec;
	}

	.ccaas-m-capability__heading {
		display: flex;
		flex-direction: column;
		gap: 6px;
	}

	.ccaas-m-capability__tag {
		font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
		font-weight: 500;
		font-size: 10px;
		color: #2563eb;
		margin: 0;
	}

	.ccaas-m-capability__title {
		font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
		font-weight: 500;
		font-size: 18px;
		line-height: 25px;
		color: #0b1220;
		margin: 0;
	}

	.ccaas-m-capability__body {
		font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
		font-weight: 400;
		font-size: 14px;
		line-height: 23px;
		color: #5a6577;
		margin: 0;
	}
}

/* NaaS — "Connect your devices with eSIM and IoT data plans" — Figma 607:12137, desktop only */

.naas {
	position: relative;
	background: #0b0a0b;
	padding: 120px 100px;
	font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.naas__frame {
	position: relative;
	max-width: 1240px;
	margin: 0 auto;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 56px;
}

.naas__header {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.naas__eyebrow {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 500;
	font-size: 11px;
	line-height: 17px;
	letter-spacing: 1.76px;
	text-transform: uppercase;
	color: #76767d;
	margin: 0;
}

.naas__dot {
	width: 6px;
	height: 6px;
	background: #3a7dff;
	border-radius: 50%;
	flex-shrink: 0;
}

.naas__title-block {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.naas__headline {
	font-weight: 500;
	font-size: 34px;
	line-height: 46px;
	letter-spacing: -0.5px;
	color: #f3f4f6;
	white-space: nowrap;
	margin: 0;
}

.naas__subcopy {
	font-weight: 400;
	font-size: 18px;
	line-height: 28px;
	color: #9ca3af;
	max-width: 690px;
	margin: 0;
}

.naas__ctas {
	display: flex;
	align-items: center;
	gap: 8px;
}

.naas-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 38px;
	min-width: 133px;
	padding: 0 15px;
	border-radius: 99px;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: -0.07px;
	color: #ffffff;
	text-decoration: none;
	transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.naas-btn--outline {
	background: transparent;
	border: 1px solid #d1d5db;
}

.naas-btn--outline:hover {
	border-color: #7fb4ff;
	background: rgba(100, 181, 246, 0.1);
}

.naas-btn--solid {
	background: #2f6fed;
	border: 1px solid transparent;
}

.naas-btn--solid:hover {
	background: #2559c7;
}

/* Diagram */

.naas-diagram {
	position: relative;
	width: 100%;
	height: 521px;
	background: #0a0a0b;
}

.naas-diagram__glow {
	position: absolute;
	pointer-events: none;
}

.naas-diagram__wires {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.naas-diagram__wires circle {
	filter: drop-shadow(0 0 2px rgba(61, 139, 255, 0.9)) drop-shadow(0 0 5px rgba(61, 139, 255, 0.55));
}

.naas-chip {
	position: absolute;
	left: 72px;
	width: 63.892px;
	height: 63.892px;
	border-radius: 15.973px;
	background: #0e0e0f;
	border: 0.871px solid #404145;
	display: flex;
	align-items: center;
	justify-content: center;
}

.naas-well {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 12px;
}

.naas-well svg,
.naas-well img {
	display: block;
}

.naas-well--sms {
	background: rgba(67, 228, 94, 0.1);
}

.naas-well--email {
	background: rgba(50, 95, 236, 0.1);
}

.naas-well--email svg {
	width: 38.95px;
	height: 38.95px;
}

.naas-well--whatsapp {
	background: rgba(37, 211, 102, 0.1);
}

.naas-well--slack {
	background: rgba(37, 211, 102, 0.1);
}

.naas-well--slack img {
	display: block;
	width: 38.95px;
	height: 38.95px;
	padding: 6.5px;
	background: #ffffff;
	border-radius: 8px;
}

.naas-mock {
	position: absolute;
	display: block;
}

.naas-node {
	position: absolute;
	left: 1101px;
	width: 63.892px;
	height: 63.892px;
	border-radius: 15.973px;
	background: #0e0e0f;
	border: 0.871px solid #45464a;
	display: flex;
	align-items: center;
	justify-content: center;
}

.naas-node__icon svg {
	display: block;
	width: 24.685px;
	height: 24.685px;
}

/* Feature columns */

.naas-columns {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, 380px);
	column-gap: 50px;
	row-gap: 104px;
	padding-top: 37px;
}

.naas-columns::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 1px;
	background: #1f1f22;
}

.naas-column__num {
	font-weight: 500;
	font-size: 12px;
	line-height: 15px;
	letter-spacing: 0.6px;
	color: #3a7dff;
	margin: 0 0 8px;
}

.naas-column__tick {
	display: block;
	width: 18px;
	height: 1px;
	background: rgba(58, 125, 255, 0.5);
	margin-bottom: 8px;
}

.naas-column__title {
	font-weight: 500;
	font-size: 16px;
	line-height: 23px;
	letter-spacing: -0.2px;
	color: #f3f4f6;
	margin: 0 0 8px;
}

.naas-column__body {
	font-weight: 400;
	font-size: 13px;
	line-height: 20px;
	color: #8d94a1;
	margin: 0;
}

/* NaaS Mobile — Figma 698:1898, <768px single-column adaptation */

.naas-mobile {
	display: none;
}

@media (max-width: 768px) {
	.naas {
		padding: 56px 24px 64px;
	}

	.naas__header,
	.naas__ctas,
	.naas-diagram,
	.naas-columns {
		display: none;
	}

	.naas-mobile {
		display: block;
	}

	.naas-m__intro {
		display: flex;
		flex-direction: column;
		gap: 24px;
		margin-bottom: 48px;
	}

	.naas-m__header {
		display: flex;
		flex-direction: column;
		gap: 16px;
	}

	.naas-m__eyebrow {
		display: flex;
		align-items: center;
		gap: 8px;
		font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
		font-weight: 500;
		font-size: 10px;
		text-transform: uppercase;
		color: #76767d;
		margin: 0;
	}

	.naas-m__dot {
		width: 6px;
		height: 6px;
		flex-shrink: 0;
		background: #3a7dff;
		border-radius: 50%;
	}

	.naas-m__headline {
		font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
		font-weight: 500;
		font-size: 34px;
		line-height: 40px;
		color: #f3f4f6;
		margin: 0;
	}

	.naas-m__body {
		font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
		font-weight: 400;
		font-size: 16px;
		line-height: 25px;
		color: #9ca3af;
		margin: 0;
	}

	.naas-m__ctas {
		display: flex;
		gap: 8px;
	}

	.naas-m__ctas .naas-btn {
		height: 44px;
		padding: 0 18px;
		min-width: 0;
	}

	/* Diagram: input chips -> dashboard mock -> output chips, vertical flow */

	.naas-m__diagram {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 48px;
	}

	.naas-m__glow {
		position: absolute;
		left: 50%;
		top: 50%;
		width: 480px;
		height: auto;
		max-width: none;
		transform: translate(-50%, -50%);
		pointer-events: none;
		z-index: 0;
	}

	.naas-m__row {
		position: relative;
		z-index: 1;
		display: flex;
		justify-content: center;
		gap: 7px;
		width: 100%;
	}

	.naas-m-chip {
		flex: 1;
		max-width: 38px;
		aspect-ratio: 1;
		border-radius: 10px;
		background: #0e0e0f;
		border: 0.9px solid #404145;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.naas-m-chip .naas-well {
		width: 28px;
		height: 28px;
		border-radius: 7px;
	}

	.naas-m-chip .naas-well img,
	.naas-m-chip .naas-well svg {
		width: 100%;
		height: 100%;
	}

	.naas-m__wires {
		position: relative;
		z-index: 1;
		display: block;
		width: 100%;
		max-width: 210px;
		height: auto;
		aspect-ratio: 175.846 / 120.755;
		margin-top: -1px;
		margin-bottom: -3px;
	}

	.naas-m__wires--out {
		max-width: 185px;
		aspect-ratio: 155.559 / 120.755;
		margin-top: -3px;
		margin-bottom: -1px;
	}

	.naas-m__mock {
		position: relative;
		width: 100%;
		max-width: 340px;
	}

	.naas-m__mock-img {
		position: relative;
		z-index: 1;
		display: block;
		width: 100%;
		height: auto;
	}

	.naas-m-node {
		flex: 1;
		max-width: 50px;
		height: 44px;
		border-radius: 11px;
		background: #0e0e0f;
		border: 0.9px solid #45464a;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.naas-m-node__icon {
		display: flex;
		width: 17px;
		height: 17px;
	}

	.naas-m-node__icon svg {
		width: 100%;
		height: 100%;
	}

	/* Feature list */

	.naas-m__features {
		display: flex;
		flex-direction: column;
		gap: 32px;
	}

	.naas-m-feature {
		display: flex;
		flex-direction: column;
		gap: 8px;
	}

	.naas-m-feature__rule {
		height: 1px;
		background: #1f1f22;
		flex-shrink: 0;
	}

	.naas-m-feature__num-row {
		display: flex;
		align-items: center;
		gap: 10px;
	}

	.naas-m-feature__num {
		font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
		font-weight: 500;
		font-size: 12px;
		color: #3a7dff;
		margin: 0;
	}

	.naas-m-feature__tick {
		display: block;
		width: 18px;
		height: 1px;
		background: rgba(58, 125, 255, 0.5);
	}

	.naas-m-feature__title {
		font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
		font-weight: 500;
		font-size: 17px;
		line-height: 24px;
		color: #f3f4f6;
		margin: 0;
	}

	.naas-m-feature__body {
		font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
		font-weight: 400;
		font-size: 13px;
		line-height: 20px;
		color: #9ca3af;
		margin: 0;
	}
}

/* CSPaaS — "Run Orbit as your own communications platform" — Figma 607:12347, desktop only */

.cspaas {
	position: relative;
	background: #0b0a0b;
	padding: 120px 100px;
	font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.cspaas__frame {
	position: relative;
	max-width: 1240px;
	margin: 0 auto;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 56px;
}

.cspaas__header {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.cspaas__eyebrow {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 500;
	font-size: 11px;
	line-height: 17px;
	letter-spacing: 1.76px;
	text-transform: uppercase;
	color: #76767d;
	margin: 0;
}

.cspaas__dot {
	width: 6px;
	height: 6px;
	background: #3a7dff;
	border-radius: 50%;
	flex-shrink: 0;
}

.cspaas__title-block {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.cspaas__headline {
	font-weight: 500;
	font-size: 34px;
	line-height: 46px;
	letter-spacing: -0.5px;
	color: #f3f4f6;
	white-space: nowrap;
	margin: 0;
}

.cspaas__subcopy {
	font-weight: 400;
	font-size: 18px;
	line-height: 28px;
	color: #9ca3af;
	max-width: 700px;
	margin: 0;
}

/* Tenant cascade */

.cspaas-cascade {
	position: relative;
	width: 100%;
	height: 450px;
}

.cspaas-cascade__glow {
	position: absolute;
	pointer-events: none;
}

.cspaas-cascade__core {
	position: absolute;
	left: 0;
	top: 0;
	width: 1240px;
	height: 430px;
}

.cspaas-cascade__bar-label {
	position: absolute;
	top: 375px;
	margin: 0;
	white-space: nowrap;
}

.cspaas-cascade__bar-label--left {
	left: 84px;
	font-weight: 500;
	font-size: 14px;
	line-height: 19px;
	color: #e6e9ed;
}

.cspaas-cascade__bar-label--right {
	right: 84px;
	font-weight: 400;
	font-size: 12px;
	line-height: 17px;
	color: #7a8293;
}

.cspaas-card {
	position: absolute;
	width: 378px;
	display: flex;
	flex-direction: column;
	background: #0c0c0e;
	border: 1.1px solid;
	border-radius: 16px;
	box-shadow: 0 18px 44px rgba(0, 0, 0, 0.6);
	overflow: hidden;
}

.cspaas-card--acme {
	z-index: 1;
}

.cspaas-card--vega {
	z-index: 1;
}

.cspaas-card--northwind {
	z-index: 2;
}

.cspaas-card__chrome {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 10px 13px;
	background: #131316;
}

.cspaas-card__dots {
	display: block;
	width: 28px;
	height: 5.6px;
	flex-shrink: 0;
}

.cspaas-card__url {
	flex: 1 0 0;
	min-width: 0;
	background: #1b1b1e;
	border-radius: 7px;
	padding: 3px 10px;
	font-weight: 400;
	font-size: 12px;
	color: #5c626e;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cspaas-card__body {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 18px;
}

.cspaas-card__brand {
	display: flex;
	align-items: center;
	gap: 11px;
}

.cspaas-card__logo {
	display: flex;
	flex-shrink: 0;
}

.cspaas-card__logo svg {
	display: block;
	width: 22px;
	height: 22px;
}

.cspaas-card__name {
	font-weight: 500;
	font-size: 14px;
	line-height: normal;
}

.cspaas-card__skeleton {
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.cspaas-card__line {
	display: block;
	height: 6.7px;
	border-radius: 3.3px;
	background: #1e1e22;
}

.cspaas-card__stats {
	display: flex;
	gap: 31px;
}

.cspaas-card__stat {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.cspaas-card__stat-label {
	font-weight: 500;
	font-size: 12px;
	line-height: 13px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #7a8293;
}

.cspaas-card__stat-value {
	font-weight: 500;
	font-size: 16px;
	line-height: 22px;
	color: #f2f4f6;
}

/* Feature columns */

.cspaas-columns {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	column-gap: 40px;
}

.cspaas-column__num {
	font-weight: 500;
	font-size: 12px;
	line-height: 15px;
	letter-spacing: 0.6px;
	color: #3a7dff;
	margin: 0 0 8px;
}

.cspaas-column__tick {
	display: block;
	width: 18px;
	height: 1px;
	background: rgba(58, 125, 255, 0.5);
	margin-bottom: 8px;
}

.cspaas-column__title {
	font-weight: 500;
	font-size: 16px;
	line-height: 23px;
	letter-spacing: -0.2px;
	color: #f3f4f6;
	margin: 0 0 8px;
}

.cspaas-column__body {
	font-weight: 400;
	font-size: 13px;
	line-height: 20px;
	color: #8d94a1;
	margin: 0;
}

/* CSPaaS Mobile — Figma 704:228, <900px single-column adaptation */

.cspaas-mobile {
	display: none;
}

@media (max-width: 900px) {
	.cspaas {
		padding: 56px 20px 64px;
	}

	.cspaas__header,
	.cspaas-cascade,
	.cspaas-columns {
		display: none;
	}

	.cspaas-mobile {
		display: block;
	}

	.cspaas-m__header {
		display: flex;
		flex-direction: column;
		gap: 20px;
		margin-bottom: 48px;
	}

	.cspaas-m__eyebrow {
		display: flex;
		align-items: center;
		gap: 8px;
		font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
		font-weight: 500;
		font-size: 11px;
		text-transform: uppercase;
		color: #7a8293;
		margin: 0;
	}

	.cspaas-m__dot {
		width: 6px;
		height: 6px;
		flex-shrink: 0;
		background: #3a7dff;
		border-radius: 50%;
	}

	.cspaas-m__headline {
		font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
		font-weight: 500;
		font-size: 30px;
		line-height: 38px;
		color: #f3f4f6;
		margin: 0;
	}

	.cspaas-m__body {
		font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
		font-weight: 400;
		font-size: 15px;
		line-height: 24px;
		color: #9ca3af;
		margin: 0;
	}

	/* Tenant cascade: simple vertical stack, no overlap/stagger, no connector lines */

	.cspaas-m__cascade {
		display: flex;
		flex-direction: column;
		gap: 16px;
		margin-bottom: 48px;
	}

	.cspaas-m-card {
		background: #0c0c0e;
		border: 1px solid;
		border-radius: 14px;
		box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
		overflow: hidden;
	}

	.cspaas-m-card__chrome {
		background: #131316;
		border-bottom: 1px solid #232327;
		padding: 9px 12px;
		display: flex;
		align-items: center;
		gap: 10px;
	}

	.cspaas-m-card__dots {
		width: 25px;
		height: 5px;
		flex-shrink: 0;
	}

	.cspaas-m-card__url {
		flex: 1;
		min-width: 0;
		background: #1b1b1e;
		border-radius: 7px;
		padding: 4px 9px;
		font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
		font-weight: 400;
		font-size: 10px;
		color: #7a8293;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.cspaas-m-card__body {
		padding: 16px;
		display: flex;
		flex-direction: column;
		gap: 14px;
	}

	.cspaas-m-card__brand {
		display: flex;
		align-items: center;
		gap: 10px;
	}

	.cspaas-m-card__logo {
		display: flex;
		width: 21px;
		height: 21px;
		flex-shrink: 0;
	}

	.cspaas-m-card__logo svg {
		width: 100%;
		height: 100%;
	}

	.cspaas-m-card__name {
		font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
		font-weight: 500;
		font-size: 14px;
	}

	.cspaas-m-card__skeleton {
		display: flex;
		flex-direction: column;
		gap: 7px;
	}

	.cspaas-m-card__line {
		display: block;
		height: 6px;
		border-radius: 99px;
		background: #232327;
	}

	.cspaas-m-card__stats {
		display: flex;
		gap: 32px;
	}

	.cspaas-m-card__stat {
		display: flex;
		flex-direction: column;
		gap: 3px;
	}

	.cspaas-m-card__stat-label {
		font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
		font-weight: 500;
		font-size: 10px;
		color: #7a8293;
		white-space: nowrap;
	}

	.cspaas-m-card__stat-value {
		font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
		font-weight: 500;
		font-size: 16px;
		color: #f3f4f6;
		white-space: nowrap;
	}

	.cspaas-m__infra {
		border: 1px solid #3a7dff;
		border-radius: 7px;
		padding: 14px 16px;
		display: flex;
		flex-direction: column;
		gap: 6px;
	}

	.cspaas-m__infra-title {
		font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
		font-weight: 500;
		font-size: 13px;
		color: #f3f4f6;
		margin: 0;
	}

	.cspaas-m__infra-sub {
		font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
		font-weight: 400;
		font-size: 11px;
		line-height: 16px;
		color: #7a8293;
		margin: 0;
	}

	/* Feature list — no divider, unlike NaaS mobile */

	.cspaas-m__features {
		display: flex;
		flex-direction: column;
		gap: 32px;
	}

	.cspaas-m-feature {
		display: flex;
		flex-direction: column;
		gap: 8px;
	}

	.cspaas-m-feature__num-row {
		display: flex;
		align-items: center;
		gap: 10px;
	}

	.cspaas-m-feature__num {
		font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
		font-weight: 500;
		font-size: 12px;
		color: #3a7dff;
		margin: 0;
	}

	.cspaas-m-feature__tick {
		display: block;
		width: 18px;
		height: 1px;
		background: rgba(58, 125, 255, 0.5);
	}

	.cspaas-m-feature__title {
		font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
		font-weight: 500;
		font-size: 16px;
		line-height: 23px;
		color: #f3f4f6;
		margin: 0;
	}

	.cspaas-m-feature__body {
		font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
		font-weight: 400;
		font-size: 13px;
		line-height: 20px;
		color: #9ca3af;
		margin: 0;
	}
}

/* Why switch — "Built so you're never blindsided" — Figma 607:12483, desktop only */

.whyswitch {
	position: relative;
	background: #0b0a0b;
	padding: 120px 100px;
	font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.whyswitch__frame {
	position: relative;
	max-width: 1240px;
	margin: 0 auto;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 64px;
}

.whyswitch__header {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.whyswitch__eyebrow {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 500;
	font-size: 11px;
	line-height: 17px;
	letter-spacing: 1.76px;
	text-transform: uppercase;
	color: #76767d;
	margin: 0;
}

.whyswitch__dot {
	width: 6px;
	height: 6px;
	background: #3a7dff;
	border-radius: 50%;
	flex-shrink: 0;
}

.whyswitch__title-block {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.whyswitch__headline {
	font-weight: 500;
	font-size: 34px;
	line-height: 46px;
	letter-spacing: -0.5px;
	color: #f3f4f6;
	max-width: 620px;
	margin: 0;
}

.whyswitch__subcopy {
	font-weight: 400;
	font-size: 18px;
	line-height: 28px;
	color: #9ca3af;
	max-width: 700px;
	margin: 0;
}

.whyswitch__row {
	display: flex;
	align-items: center;
	gap: 40px;
}

.whyswitch-shot {
	flex: 0 0 610px;
	width: 610px;
	height: 343px;
	margin: 0;
	border-radius: 16px;
	overflow: hidden;
}

.whyswitch-shot__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.whyswitch-panels {
	flex: 1 0 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.whyswitch-panel {
	display: flex;
	align-items: flex-start;
	gap: 24px;
	padding: 32px 34px 32px 32px;
	border: 1px solid #27272a;
	border-radius: 24px;
	background: linear-gradient(164deg, #1b1b1d 0%, #121214 71.4%);
}

.whyswitch-panel__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 52px;
	height: 52px;
	border-radius: 14px;
	background: #1b2542;
	border: 1px solid #293962;
}

.whyswitch-panel__icon svg {
	display: block;
	width: 23px;
	height: 23px;
}

.whyswitch-panel__copy {
	flex: 1 0 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.whyswitch-panel__title {
	font-weight: 500;
	font-size: 19px;
	line-height: 27px;
	letter-spacing: -0.3px;
	color: #f8fafc;
	margin: 0;
}

.whyswitch-panel__body {
	font-weight: 400;
	font-size: 14.5px;
	line-height: 24px;
	color: #9ca3af;
	margin: 0;
}

/* Why switch Mobile — Figma 708:4, <900px single-column adaptation */

.whyswitch-mobile {
	display: none;
}

@media (max-width: 900px) {
	.whyswitch__header,
	.whyswitch__row {
		display: none;
	}

	.whyswitch {
		padding: 56px 20px 64px;
	}

	.whyswitch-mobile {
		display: block;
	}

	.whyswitch-m__header {
		display: flex;
		flex-direction: column;
		gap: 18px;
		margin-bottom: 40px;
	}

	.whyswitch-m__eyebrow {
		display: flex;
		align-items: center;
		gap: 8px;
		font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
		font-weight: 500;
		font-size: 11px;
		text-transform: uppercase;
		color: #76767d;
		margin: 0;
	}

	.whyswitch-m__dot {
		width: 6px;
		height: 6px;
		flex-shrink: 0;
		background: #3a7dff;
		border-radius: 50%;
	}

	.whyswitch-m__headline {
		font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
		font-weight: 500;
		font-size: 32px;
		line-height: 40px;
		color: #f3f4f6;
		margin: 0;
	}

	.whyswitch-m__body {
		font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
		font-weight: 400;
		font-size: 16px;
		line-height: 25px;
		color: #9ca3af;
		margin: 0;
	}

	.whyswitch-m__shot {
		width: 100%;
		aspect-ratio: 610 / 343;
		border-radius: 16px;
		overflow: hidden;
		margin: 0 0 40px;
	}

	.whyswitch-m__shot-img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.whyswitch-m__cards {
		display: flex;
		flex-direction: column;
		gap: 16px;
	}

	.whyswitch-m-card {
		display: flex;
		flex-direction: column;
		gap: 20px;
		padding: 24px;
		border: 1px solid #27272a;
		border-radius: 20px;
		background: linear-gradient(143deg, #1b1b1d 0%, #121214 71.43%);
	}

	.whyswitch-m-card__icon {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 52px;
		height: 52px;
		flex-shrink: 0;
		background: #1b2542;
		border: 1px solid #293962;
		border-radius: 14px;
	}

	.whyswitch-m-card__icon svg {
		width: 23px;
		height: 23px;
	}

	.whyswitch-m-card__copy {
		display: flex;
		flex-direction: column;
		gap: 10px;
	}

	.whyswitch-m-card__title {
		font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
		font-weight: 500;
		font-size: 19px;
		line-height: 27px;
		color: #f8fafc;
		margin: 0;
	}

	.whyswitch-m-card__body {
		font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
		font-weight: 400;
		font-size: 14.5px;
		line-height: 24px;
		color: #9ca3af;
		margin: 0;
	}
}