/* Flowpot home page · custom styles on top of Bootstrap 5.3.3
The HTML uses Bootstrap's components and utilities. This file sets the Flowpot theme
on Bootstrap's own variables, then styles the few elements Bootstrap has no class for. */
/* ---------- Theme: Flowpot colours and fonts ---------- */
:root {
	--fp-display: 'Sora', sans-serif;
	--fp-mono: 'Geist Mono', monospace;
	--bs-body-font-family: 'Geist', system-ui, sans-serif;
	--bs-body-color: #0B1220;
	--bs-body-color-rgb: 11, 18, 32;
	--bs-emphasis-color: #0B1220;
	--bs-emphasis-color-rgb: 11, 18, 32;
	--bs-heading-color: #0B1220;
	--bs-secondary-color: #4A5367;
	--bs-secondary-color-rgb: 74, 83, 103;
	--bs-tertiary-bg: #F4F7FB;
	--bs-tertiary-bg-rgb: 244, 247, 251;
	--bs-border-color: #E4E7EC;
	--bs-primary: #004598;
	--bs-primary-rgb: 0, 69, 152;
	--bs-link-color: #204796;
	--bs-link-color-rgb: 32, 71, 150;
	--bs-link-hover-color: #163470;
	--bs-link-hover-color-rgb: 22, 52, 112;
	--bs-focus-ring-color: rgba(0, 69, 152, 0.25);
	--bs-primary-bg-subtle: #EAF1FA;
	--bs-primary-border-subtle: #D6E4F5;
	--bs-primary-text-emphasis: #00377A;
}

/* ---------- Product themes ----------
Brand colours are variables. Pages use Project Board blue by default;
<body class="theme-cb"> switches a page to ConnectBoard green (the darker greens keep text and buttons readable) */
:root {
	--brand: #004598;
	--brand-rgb: 0, 69, 152;
	--brand-dark: #00377A;
	--brand-dark-rgb: 0, 55, 122;
	--brand-light: #0B5BB8;
	--brand-light-rgb: 11, 91, 184;
	--brand-light-2: #0A57B8;
	--brand-bright: #3B8BEA;
	--brand-bright-rgb: 59, 139, 234;
	--brand-deep: #062B5E;
	--brand-darker: #003A82;
	--brand-night: #0A1C3A;
	--brand-ink-rgb: 0, 31, 72;
	--brand-text: #204796;
	--brand-subtle: #EAF1FA;
	--brand-subtle-rgb: 234, 241, 250;
	--brand-border: #D6E4F5;
	--brand-border-hover: #BBD2EE;
	--brand-dots: #C9D9EE;
	--brand-soft: #A9C9F5;
	--brand-mid: #7EA8DD;
	--brand-mid-2: #8DB4E8;
	--brand-mark: #CFE0F5;
	--brand-wash: #F4F7FB;
	--brand-wash-2: #EEF3FB;
	--brand-wash-3: #F2F6FB;
	--brand-wash-4: #F6F9FD;
	--brand-field: #F7F9FC;
	--brand-line: #DCE6F3;
	--brand-hairline: #E3EAF4;
}

.theme-cb {
	--brand: #007A3A;
	--brand-rgb: 0, 122, 58;
	--brand-dark: #00602D;
	--brand-dark-rgb: 0, 96, 45;
	--brand-light: #12A65A;
	--brand-light-rgb: 18, 166, 90;
	--brand-light-2: #0E9C53;
	--brand-bright: #25D366;
	--brand-bright-rgb: 37, 211, 102;
	--brand-deep: #043F27;
	--brand-darker: #005A2D;
	--brand-night: #0A2A22;
	--brand-ink-rgb: 0, 44, 26;
	--brand-text: #006B33;
	--brand-subtle: #E7F6EE;
	--brand-subtle-rgb: 231, 246, 238;
	--brand-border: #CDEBDA;
	--brand-border-hover: #ADDCC0;
	--brand-dots: #BEE2CC;
	--brand-soft: #9ED8B6;
	--brand-mid: #6CC596;
	--brand-mid-2: #82CFA5;
	--brand-mark: #C6EED7;
	--brand-wash: #F1F8F4;
	--brand-wash-2: #EAF6EF;
	--brand-wash-3: #EEF8F2;
	--brand-wash-4: #F4FBF7;
	--brand-field: #F5FAF7;
	--brand-line: #D3EBDC;
	--brand-hairline: #DFEEE5;
	--bs-primary: #007A3A;
	--bs-primary-rgb: 0, 122, 58;
	--bs-link-color: #006B33;
	--bs-link-color-rgb: 0, 107, 51;
	--bs-link-hover-color: #005A2D;
	--bs-link-hover-color-rgb: 0, 90, 45;
	--bs-focus-ring-color: rgba(0, 122, 58, 0.25);
	--bs-primary-bg-subtle: #E7F6EE;
	--bs-primary-border-subtle: #CDEBDA;
	--bs-primary-text-emphasis: #005A2D;
	--bs-tertiary-bg: #F1F8F4;
	--bs-tertiary-bg-rgb: 241, 248, 244;
}

.theme-dp {
	--brand: #D84232;
	--brand-rgb: 216, 66, 50;
	--brand-dark: #B3321F;
	--brand-dark-rgb: 179, 50, 31;
	--brand-light: #E8563F;
	--brand-light-rgb: 232, 86, 63;
	--brand-light-2: #E04E38;
	--brand-bright: #F0523A;
	--brand-bright-rgb: 240, 82, 58;
	--brand-deep: #6B1E12;
	--brand-darker: #982B1A;
	--brand-night: #3A150E;
	--brand-ink-rgb: 72, 20, 10;
	--brand-text: #C43A28;
	--brand-subtle: #FDF0EE;
	--brand-subtle-rgb: 253, 240, 238;
	--brand-border: #F5D5CF;
	--brand-border-hover: #EDB9AF;
	--brand-dots: #F0C4BA;
	--brand-soft: #F5A89D;
	--brand-mid: #E88575;
	--brand-mid-2: #F09585;
	--brand-mark: #FAD5CE;
	--brand-wash: #FEF5F3;
	--brand-wash-2: #FCF0ED;
	--brand-wash-3: #FDF2EF;
	--brand-wash-4: #FEF7F5;
	--brand-field: #FEF6F4;
	--brand-line: #F4D8D2;
	--brand-hairline: #F6E0DA;
	--bs-primary: #D84232;
	--bs-primary-rgb: 216, 66, 50;
	--bs-link-color: #C43A28;
	--bs-link-color-rgb: 196, 58, 40;
	--bs-link-hover-color: #B3321F;
	--bs-link-hover-color-rgb: 179, 50, 31;
	--bs-focus-ring-color: rgba(216, 66, 50, 0.25);
	--bs-primary-bg-subtle: #FDF0EE;
	--bs-primary-border-subtle: #F5D5CF;
	--bs-primary-text-emphasis: #982B1A;
	--bs-tertiary-bg: #FEF5F3;
	--bs-tertiary-bg-rgb: 254, 245, 243;
}

/* ---------- ConnectBoard layout ----------
ConnectBoard follows the finalized ProjectBoard page system: the same quiet
hero canvas, generous section rhythm, bordered product cards and restrained
motion.  Product-specific UI demonstrations remain green and WhatsApp-led. */
.cb-pb-layout .cb-hero {
	background: linear-gradient(180deg, #FFFFFF 0%, var(--brand-wash) 100%);
}

.cb-pb-layout .cb-hero::before {
	background-image: radial-gradient(var(--brand-dots) 1.3px, transparent 1.3px);
	background-size: 24px 24px;
	-webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 50%);
	mask-image: linear-gradient(180deg, #000 0%, transparent 50%);
}

.cb-pb-layout .cb-hero-center::before {
	-webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 58%);
	mask-image: linear-gradient(180deg, #000 0%, transparent 58%);
}

.cb-pb-layout .cb-head {
	max-width: 720px;
}

.cb-pb-layout .cb-shot {
	padding: clamp(12px, 2.4vw, 28px);
	border-radius: 28px;
	background: #FFFFFF;
	border-color: var(--brand-border);
	box-shadow: 0 30px 60px -48px rgba(var(--brand-rgb), 0.38);
}

.cb-pb-layout .cb-shot::before {
	opacity: 0.55;
}

.cb-pb-layout .cb-feature {
	padding-block: clamp(4rem, 7vw, 6.5rem) !important;
}

.cb-pb-layout .cb-feature+.cb-feature {
	border-top-color: var(--brand-border);
}

.cb-pb-layout .cb-feature .row {
	max-width: 1180px;
	margin-inline: auto;
}

.cb-pb-layout .cb-feature-icon {
	width: 60px;
	height: 60px;
	border-radius: 18px;
	box-shadow: 0 16px 30px -20px rgba(var(--brand-rgb), 0.55);
}

.cb-pb-layout .ov-benefit {
	border: 1px solid var(--brand-border) !important;
	border-radius: 28px;
	box-shadow: 0 20px 44px -34px rgba(var(--brand-rgb), 0.38);
}

.cb-pb-layout .ov-benefit-feature {
	background: radial-gradient(120% 120% at 100% 0%, var(--brand-light) 0%, var(--brand) 55%, var(--brand-dark) 100%);
	border-color: transparent !important;
}

.cb-pb-layout .ov-fit-grid .ov-fit-card {
	min-height: 300px;
	justify-content: flex-end;
	overflow: hidden;
	color: #FFFFFF;
	background-position: center;
	background-size: cover;
	border: 0;
	box-shadow: inset 0 -150px 90px -80px rgba(4, 63, 39, 0.98);
}

.cb-pb-layout .ov-fit-grid .ov-fit-card::before {
	opacity: 1;
	background: linear-gradient(180deg, transparent 28%, rgba(4, 63, 39, 0.88) 100%);
}

.cb-pb-layout .ov-fit-grid .ov-fit-card .ov-fit-icon {
	display: none !important;
}

.cb-pb-layout .ov-fit-grid .ov-fit-card h3 {
	color: #FFFFFF;
	font-size: 1.25rem;
}

.cb-pb-layout .ov-fit-grid>li:nth-child(1) .ov-fit-card {
	background-image: url("../images/industry-marketing.jpg");
}

.cb-pb-layout .ov-fit-grid>li:nth-child(2) .ov-fit-card {
	background-image: url("../images/industry-it.jpg");
}

.cb-pb-layout .ov-fit-grid>li:nth-child(3) .ov-fit-card {
	background-image: url("../images/industry-retail.jpg");
}

.cb-pb-layout .ov-fit-grid>li:nth-child(4) .ov-fit-card {
	background-image: url("../images/industry-healthcare.jpg");
}

.cb-pb-layout .ov-fit-grid>li:nth-child(5) .ov-fit-card {
	background-image: url("../images/industry-education.jpg");
}

.cb-pb-layout .ov-fit-grid>li:nth-child(6) .ov-fit-card {
	background-image: url("../images/industry-real-estate.jpg");
}

.cb-pb-layout .ov-fit-grid>li:nth-child(7) .ov-fit-card {
	background-image: url("../images/industry-events.jpg");
}

.cb-pb-layout .ov-fit-grid>li:nth-child(8) .ov-fit-card {
	background-image: url("../images/industry-hospitality.jpg");
}

.cb-pb-layout .cb-chain-item,
.cb-pb-layout .cb-store-card,
.cb-pb-layout .cb-pricing-note,
.cb-pb-layout .cb-faq .accordion-item {
	border-color: var(--brand-border);
}

.cb-pb-layout .cb-results {
	border-radius: 28px;
}

.cb-overview-project .cb-steps-wrap {
	max-width: 1180px;
	margin-inline: auto;
}

.cb-overview-project .cb-step {
	min-height: 224px;
	padding: 1.75rem;
	background: #FFFFFF;
	border: 1px solid var(--brand-hairline);
	border-radius: 22px;
	box-shadow: 0 18px 36px -32px rgba(var(--brand-dark-rgb), 0.5);
}

.cb-overview-project .cb-step-num {
	width: 52px;
	height: 52px;
	margin-bottom: 0.5rem;
	box-shadow: none;
	color: var(--brand);
	background: var(--brand-subtle);
	border: 0;
}

.cb-overview-project .cb-step:hover .cb-step-num {
	color: #FFFFFF;
	background: var(--brand);
}

.cb-overview-project .cb-steps-line {
	display: none !important;
}

.cb-overview-project .cb-chain {
	max-width: 960px;
	margin-inline: auto;
	padding: clamp(1.5rem, 4vw, 3rem);
	border-radius: 28px;
	background: var(--brand-wash-3);
	border: 1px solid var(--brand-line);
}

.cb-overview-project .cb-chain-item {
	padding: 14px 18px 14px 12px;
	font-size: 0.9375rem;
}

.cb-overview-project .cb-orbit {
	width: min(560px, 100%);
	aspect-ratio: 16 / 11;
	margin-block: 0;
	background: url("../images/banner-connectboard.png") center / cover no-repeat, #FFFFFF;
	border: 0;
	border-radius: 32px;
	box-shadow: 28px 28px 0 var(--brand-border), 0 28px 55px -38px rgba(var(--brand-dark-rgb), 0.55);
}

.cb-overview-project .cb-orbit-ring,
.cb-overview-project .cb-orbit-glow,
.cb-overview-project .cb-orbit-pulse,
.cb-overview-project .cb-orbit-spin {
	display: none;
}

.cb-overview-project .cb-orbit-core {
	width: 68px;
	padding: 16px;
	border-radius: 20px;
	background: var(--brand);
	box-shadow: 0 18px 34px -18px rgba(var(--brand-dark-rgb), 0.75);
}

.cb-features-project .fx-hero .cb-head {
	max-width: 640px;
	align-items: flex-start !important;
	text-align: left !important;
	padding-bottom: 1.5rem !important;
	margin-inline: 0 !important;
}

.cb-features-project .fx-hero .breadcrumb {
	justify-content: flex-start !important;
}

.cb-features-project .fx-hero nav ul {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cb-features-project .cb-feature {
	position: sticky;
	margin-bottom: 40px;
	padding-block: 0 !important;
	background: transparent !important;
}

.cb-features-project .cb-feature:nth-of-type(2) {
	top: 108px;
}

.cb-features-project .cb-feature:nth-of-type(3) {
	top: 124px;
}

.cb-features-project .cb-feature:nth-of-type(4) {
	top: 140px;
}

.cb-features-project .cb-feature:nth-of-type(5) {
	top: 156px;
}

.cb-features-project .cb-feature:nth-of-type(6) {
	top: 172px;
}

.cb-features-project .cb-feature:nth-of-type(7) {
	top: 188px;
}

.cb-features-project .cb-feature:nth-of-type(n+8) {
	top: 204px;
}

.cb-features-project .cb-feature .fx-light {
	max-width: min(1300px, calc(100% - 4rem));
}

.cb-features-project .cb-feature:nth-of-type(even) .fx-light {
	color: #FFFFFF;
	background: radial-gradient(110% 120% at 0% 0%, var(--brand-light) 0%, var(--brand) 50%, var(--brand-dark) 100%);
	border-color: transparent;
}

.cb-features-project .cb-feature:nth-of-type(even) .fx-light h2,
.cb-features-project .cb-feature:nth-of-type(even) .fx-light .cb-lede,
.cb-features-project .cb-feature:nth-of-type(even) .fx-light .text-body-secondary,
.cb-features-project .cb-feature:nth-of-type(even) .fx-light .cb-feature-num {
	color: #FFFFFF !important;
}

.cb-features-project .cb-feature:nth-of-type(even) .fx-light .cb-feature-icon {
	color: var(--brand);
	background: #FFFFFF;
}

.cb-features-project .cb-feature:nth-of-type(even) .fx-light .cb-shot {
	background: rgba(255, 255, 255, 0.96);
}

.cb-features-project .fx-dark h2,
.cb-features-project .fx-dark .cb-lede,
.cb-features-project .fx-dark .text-body-secondary,
.cb-features-project .fx-dark .cb-feature-num {
	color: #FFFFFF !important;
}

.cb-features-project .fx-dark .cb-feature-icon {
	color: var(--brand);
	background: #FFFFFF;
}

.cb-features-project .fx-dark .cb-shot {
	background: rgba(255, 255, 255, 0.96);
}

@media (max-width: 991.98px) {
	.cb-features-project .cb-feature {
		position: static;
	}

	.cb-features-project .cb-feature .fx-light {
		max-width: none;
	}
}

@media (min-width: 992px) {
	.cb-pb-layout .cb-feature:nth-of-type(odd) .row> :first-child {
		order: 2;
	}
}

/* in-page links (#features, #f-1 …) stop below the sticky header */
html {
	scroll-padding-top: 100px;
}

/* ---------- Layout: container 1300px wide on desktop ---------- */
/* full 1300px from a 1364px-wide screen; below that it keeps 32px clear of each edge
(about Bootstrap's 1140px at 1200px), so laptop screens never feel edge-to-edge */
@media (min-width: 1200px) {
	.container {
		max-width: min(1300px, 100% - 4rem);
	}
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
	font-family: var(--fp-display);
	font-weight: 600;
	letter-spacing: -0.03em;
}

h1,
h2 {
	text-wrap: balance;
}

.lead {
	font-size: 1.125rem;
	font-weight: 400;
	line-height: 1.6;
}

.btn-primary {
	--bs-btn-bg: var(--brand);
	--bs-btn-border-color: var(--brand);
	--bs-btn-hover-bg: var(--brand-dark);
	--bs-btn-hover-border-color: var(--brand-dark);
	--bs-btn-active-bg: var(--brand-dark);
	--bs-btn-active-border-color: var(--brand-dark);
	--bs-btn-disabled-bg: var(--brand);
	--bs-btn-disabled-border-color: var(--brand);
	--bs-btn-focus-shadow-rgb: var(--brand-rgb);
}

.btn-outline-primary {
	--bs-btn-color: var(--brand);
	--bs-btn-border-color: var(--brand);
	--bs-btn-hover-bg: var(--brand);
	--bs-btn-hover-border-color: var(--brand);
	--bs-btn-active-bg: var(--brand);
	--bs-btn-active-border-color: var(--brand);
	--bs-btn-disabled-color: var(--brand);
	--bs-btn-disabled-border-color: var(--brand);
	--bs-btn-focus-shadow-rgb: var(--brand-rgb);
}

.link-primary:hover,
.link-primary:focus {
	color: RGBA(var(--brand-dark-rgb), var(--bs-link-opacity, 1)) !important;
	text-decoration-color: RGBA(var(--brand-dark-rgb), var(--bs-link-underline-opacity, 1)) !important;
}

/* small mono label above headings */
.eyebrow {
	font-family: var(--fp-mono);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	color: var(--eyebrow-color, var(--brand-text));
}
.display-3
{
	font-size: 60px;
}
.skip-link {
	z-index: 1100;
}

/* ---------- Header: logo, Project Board, Try it Free (same sizes as the live flowpot.com header) ---------- */
.site-header {
	transition: box-shadow 0.2s ease-in-out;
}

.site-header.is-stuck {
	box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
}

.site-header .navbar {
	--bs-navbar-padding-y: 0.75rem;
	--bs-navbar-brand-padding-y: 0.5rem;
	--bs-navbar-color: #434A57;
	--bs-navbar-hover-color: var(--brand);
	--bs-navbar-active-color: var(--brand);
	--bs-nav-link-font-weight: 500;
}

.site-header .navbar-brand svg {
	display: block;
	width: 155px;
	height: 44px;
}

.btn-try {
	--bs-btn-padding-x: 1.25rem;
	--bs-btn-padding-y: 0.75rem;
	--bs-btn-font-size: 0.875rem;
	--bs-btn-font-weight: 600;
	--bs-btn-border-radius: 12px;
	white-space: nowrap;
}

@media (max-width: 575.98px) {
	.site-header .navbar-brand svg {
		width: 132px;
		height: 37px;
	}

	.btn-try {
		--bs-btn-padding-x: 0.875rem;
		--bs-btn-padding-y: 0.625rem;
	}

	.site-header .navbar-nav {
		margin-top: 0.75rem;
		padding-top: 0.5rem;
		border-top: 1px solid var(--bs-border-color);
	}
}

@media (max-width: 359.98px) {
	.site-header .navbar-brand svg {
		width: 112px;
		height: 32px;
	}

	.btn-try svg {
		display: none;
	}
}

/* product header (ProjectBoard, ConnectBoard, DePost pages): product logo and name, then the product's pages */
.product-brand {
	font-size: 1.375rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: #434A57;
}

.product-brand:hover,
.product-brand:focus {
	color: #434A57;
}

.site-header .product-brand svg {
	width: 52px;
	height: 52px;
}

@media (max-width: 991.98px) {
	.site-header .navbar-expand-lg .navbar-nav {
		margin-top: 0.75rem;
		padding: 0.5rem 0;
		border-top: 1px solid var(--bs-border-color);
	}
}

@media (max-width: 575.98px) {
	.product-brand {
		font-size: 1.125rem;
	}

	.site-header .product-brand svg {
		width: 40px;
		height: 40px;
	}
}

/* ---------- Hero slider ---------- */
/* colours for each product's slide */
.hero-pb {
	--hero-tile: var(--brand);
	--hero-btn: var(--brand);
	--hero-btn-hover: var(--brand-dark);
	--hero-chip-bg: var(--brand-subtle);
	--hero-chip-color: var(--brand);
	--eyebrow-color: var(--brand);
}

.hero-cb {
	--hero-tile: #00A551;
	--hero-btn: #00703A;
	--hero-btn-hover: #005A2E;
	--hero-chip-bg: #E2F5EA;
	--hero-chip-color: #00703A;
	--eyebrow-color: #00703A;
}

.hero-dp {
	--hero-tile: #8F3F97;
	--hero-btn: #8F3F97;
	--hero-btn-hover: #74307B;
	--hero-chip-bg: #F3E8F4;
	--hero-chip-color: #74307B;
	--eyebrow-color: #8F3F97;
}

.hero-tile {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: var(--hero-tile);
}

.hero-chip {
	padding: 0.5625rem 0.8125rem;
	font-size: 0.8125rem;
	font-weight: 600;
	background: var(--hero-chip-bg);
	color: var(--hero-chip-color);
}

.hero-btn {
	--bs-btn-padding-x: 1.625rem;
	--bs-btn-padding-y: 0.875rem;
	--bs-btn-font-weight: 600;
	--bs-btn-color: #FFFFFF;
	--bs-btn-bg: var(--hero-btn);
	--bs-btn-border-color: var(--hero-btn);
	--bs-btn-hover-color: #FFFFFF;
	--bs-btn-hover-bg: var(--hero-btn-hover);
	--bs-btn-hover-border-color: var(--hero-btn-hover);
	--bs-btn-active-color: #FFFFFF;
	--bs-btn-active-bg: var(--hero-btn-hover);
	--bs-btn-active-border-color: var(--hero-btn-hover);
}

.hero-link {
	color: var(--hero-btn);
	text-decoration: none;
	text-underline-offset: 3px;
}

.hero-link:hover {
	color: var(--hero-btn-hover);
	text-decoration: underline;
}

/* all slides share one grid cell, so the slider keeps the height of the tallest slide */
.hero-slider .carousel-inner {
	display: grid;
}

.hero-slider .carousel-item {
	display: block;
	grid-area: 1 / 1;
	float: none;
	margin-right: 0;
	visibility: hidden;
}

.hero-slider .carousel-item.active,
.hero-slider .carousel-item-next,
.hero-slider .carousel-item-prev {
	visibility: visible;
}

/* slide change in two steps so text never overlaps: the current slide fades out and drifts away (0.3s),
then the next one fades and slides in (0.5s) */
.hero-slider .carousel-fade .carousel-item {
	opacity: 0;
	transform: translateX(32px);
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.hero-slider .carousel-fade .carousel-item.active {
	opacity: 1;
	transform: none;
}

.hero-slider .carousel-fade .carousel-item-prev:not(.carousel-item-end) {
	transform: translateX(-32px);
}

.hero-slider .carousel-fade .carousel-item-next.carousel-item-start,
.hero-slider .carousel-fade .carousel-item-prev.carousel-item-end {
	opacity: 1;
	transform: none;
	transition: opacity 0.45s ease 0.3s, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) 0.3s;
}

.hero-slider .carousel-fade .active.carousel-item-start {
	opacity: 0;
	transform: translateX(-32px);
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.hero-slider .carousel-fade .active.carousel-item-end {
	opacity: 0;
	transform: translateX(32px);
	transition: opacity 0.3s ease, transform 0.3s ease;
}

/* product tabs: the active tab's bar fills over 7 seconds, then the next slide shows (main.js) */
.hero-tab:nth-child(1) {
	--tab-color: #1E4597;
}

.hero-tab:nth-child(2) {
	--tab-color: #00A551;
}

.hero-tab:nth-child(3) {
	--tab-color: #F0523A;
}

.hero-progress {
	--bs-progress-height: 3px;
	--bs-progress-bg: var(--bs-border-color);
	--bs-progress-border-radius: 0 0 3px 3px;
	--bs-progress-bar-bg: var(--tab-color);
	--bs-progress-bar-transition: none;
}

.hero-progress .progress-bar {
	width: 0;
}

.hero-tab[aria-current="true"] .progress-bar {
	width: 100%;
}

.hero-tab-logo {
	width: 42px;
	height: 42px;
	filter: grayscale(1);
	opacity: 0.55;
	transition: filter 0.3s ease, opacity 0.3s ease;
}

.hero-tab[aria-current="true"] .hero-tab-logo,
.hero-tab:hover .hero-tab-logo {
	filter: none;
	opacity: 1;
}

.hero-tab-name {
	color: var(--bs-secondary-color);
}

.hero-tab[aria-current="true"] .hero-tab-name {
	color: var(--bs-body-color);
}

.hero-ctl {
	width: 44px !important;
	height: 44px;
}

.btn-outline-primary.hero-ctl {
	--bs-btn-border-color: var(--brand-dots);
}

@keyframes hero-fill {
	from {
		width: 0;
	}

	to {
		width: 100%;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.hero-tab[aria-current="true"] .progress-bar {
		animation: hero-fill 7s linear both;
	}

	.hero-slider[data-hold="true"] .progress-bar {
		animation-play-state: paused;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hero-slider .carousel-item {
		transition: none !important;
		transform: none !important;
	}
}

/* ---------- Our products ---------- */
.product-pb {
	--bs-card-bg: var(--brand-wash-2);
	--product-color: #1E4597;
	--product-ink: #1E4597;
}

.product-cb {
	--bs-card-bg: #E9F7EF;
	--product-color: #00A551;
	--product-ink: #00703A;
}

.product-dp {
	--bs-card-bg: #FEF0EC;
	--product-color: #F0523A;
	--product-ink: #C2341D;
}

.product-pb,
.product-cb,
.product-dp {
	--bs-card-spacer-y: 2rem;
	--bs-card-spacer-x: 2rem;
	--bs-card-border-radius: 28px;
	min-height: 360px;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.product-pb:hover,
.product-cb:hover,
.product-dp:hover {
	transform: translateY(-4px);
	box-shadow: 0 28px 56px -32px rgba(11, 18, 32, 0.45);
}

.product-pb:focus-visible,
.product-cb:focus-visible,
.product-dp:focus-visible {
	outline: 3px solid var(--brand);
	outline-offset: 3px;
}

.product-logo {
	width: 76px;
	height: 76px;
	padding: 15px;
	border-radius: 22px;
}

.product-cat {
	font-family: var(--fp-mono);
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	line-height: 1.4;
	color: var(--product-ink);
}

.product-go {
	color: var(--product-ink);
}

.product-arrow {
	width: 42px;
	height: 42px;
	background: var(--product-color);
	transition: transform 0.2s ease;
}

.product-pb:hover .product-arrow,
.product-cb:hover .product-arrow,
.product-dp:hover .product-arrow {
	transform: translateX(4px);
}

.product-mark {
	right: -48px;
	bottom: -48px;
	width: 210px;
	height: 210px;
	opacity: 0.08;
	pointer-events: none;
}

/* ---------- About Flowpot ---------- */
.about-photo::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 72%;
	height: 76%;
	border-radius: 28px;
	background: var(--brand-border);
}

.about-photo img {
	border-radius: 24px;
}

.about-card,
.about-card-dark {
	--bs-card-spacer-y: 2rem;
	--bs-card-spacer-x: 1.75rem;
	--bs-card-border-radius: 28px;
	min-height: 250px;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.about-card:hover,
.about-card-dark:hover {
	transform: translateY(-4px);
}

.about-card:hover {
	box-shadow: 0 28px 56px -34px rgba(11, 18, 32, 0.4);
}

.about-card-dark {
	background: radial-gradient(120% 120% at 100% 0%, var(--brand-light) 0%, var(--brand) 55%, var(--brand-dark) 100%);
}

.about-card-dark:hover {
	box-shadow: 0 28px 56px -30px rgba(var(--brand-rgb), 0.75);
}

/* ---------- Footer ---------- */
.site-footer {
	background: radial-gradient(circle at 85% 0%, var(--brand-light) 0%, var(--brand) 45%, var(--brand-darker) 100%);
}

.site-footer a:focus-visible {
	outline: 3px solid #FFFFFF;
	outline-offset: 3px;
}

.footer-logo {
	width: 30px;
	height: 30px;
}

.footer-social {
	width: 44px;
	height: 44px;
	--bs-btn-border-color: rgba(255, 255, 255, 0.32);
	--bs-btn-hover-color: var(--brand);
	--bs-btn-active-color: var(--brand);
}

.footer-wordmark {
	height: clamp(110px, 22vw, 300px);
	overflow: hidden;
}

/* ---------- Shared: primary button with a round arrow ---------- */
.btn-arrow {
	--bs-btn-padding-x: 1.75rem;
	--bs-btn-padding-y: 0.5625rem;
	--bs-btn-font-size: 1.0625rem;
	--bs-btn-font-weight: 600;
	padding-right: 0.5625rem;
	box-shadow: 0 18px 36px -18px rgba(var(--brand-rgb), 0.7);
}

.btn-arrow>span {
	width: 40px;
	height: 40px;
	transition: transform 0.25s ease;
}

.btn-arrow:hover>span {
	transform: translateX(4px);
}

/* ---------- ProjectBoard home · hero ---------- */
.pb-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(var(--brand-dots) 1.3px, transparent 1.3px);
	background-size: 24px 24px;
	-webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 50%);
	mask-image: linear-gradient(180deg, #000 0%, transparent 50%);
	pointer-events: none;
}

.pb-title {
	line-height: 1.05;
}

.pb-mark {
	padding: 0 0.06em;
	color: inherit;
	background: linear-gradient(180deg, transparent 56%, var(--brand-mark) 56%, var(--brand-mark) 92%, transparent 92%);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

.pb-photo {
	max-width: 620px;
	margin-left: auto;
}

.pb-photo::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 80%;
	height: 80%;
	border-radius: 32px;
	background: var(--brand-border);
}

.pb-photo img {
	border-radius: 28px;
}

.pb-photo-badge {
	left: 4px;
	top: 22px;
	width: 64px;
	height: 64px;
	border-radius: 20px;
}

.pb-photo-badge svg {
	width: 34px;
	height: 34px;
}

.pb-screens-ratio {
	--bs-aspect-ratio: 46.389%;
}

.pb-note-start,
.pb-note-end {
	position: absolute;
	z-index: 1;
	max-width: 232px;
	font-size: 0.9375rem;
	line-height: 1.45;
}

.pb-note-start {
	left: 0;
	top: 20%;
}

.pb-note-end {
	right: 0;
	bottom: 4%;
}

.pb-note-icon {
	width: 40px;
	height: 40px;
}

@media (max-width: 767.98px) {

	.pb-note-start,
	.pb-note-end {
		position: static;
		max-width: none;
		margin-top: 1rem;
	}
}

/* ---------- ProjectBoard home · features around the hub ---------- */
.hub-icon {
	width: 60px;
	height: 60px;
	border-radius: 18px;
	background: #FFFFFF;
	border: 1px solid var(--brand-border);
	color: var(--brand);
	box-shadow: 0 16px 30px -20px rgba(var(--brand-rgb), 0.55);
	transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.hub-icon svg {
	width: 30px;
	height: 30px;
}

.hub-icon .acc {
	fill: var(--brand-border);
	transition: fill 0.25s ease;
}

.hub-item:hover .hub-icon {
	background: var(--brand);
	border-color: var(--brand);
	color: #FFFFFF;
	transform: translateY(-3px);
}

.hub-item:hover .hub-icon .acc {
	fill: rgba(255, 255, 255, 0.22);
}

.hub-title {
	transition: color 0.25s ease;
}

.hub-core {
	width: min(300px, 100%);
	aspect-ratio: 1 / 1;
}

@media (min-width: 1200px) {
	.hub-core {
		width: 340px;
	}
}

.hub-track {
	inset: 0;
	border: 1.5px dashed var(--brand-dots);
}

.hub-glow {
	inset: 13%;
	border: 1px solid var(--brand-border);
	background: radial-gradient(circle, var(--brand-subtle) 0%, var(--brand-wash-4) 55%, #FFFFFF 100%);
}

.hub-plate {
	inset: 27%;
	border: 1px solid var(--brand-border);
	box-shadow: 0 30px 60px -36px rgba(var(--brand-rgb), 0.5);
}

.hub-ripple {
	inset: 30%;
	border: 1.5px solid var(--brand-mid-2);
	opacity: 0;
}

.hub-tile {
	left: 33%;
	top: 33%;
	width: 34%;
	height: 34%;
	border-radius: 50%;
	background: linear-gradient(145deg, var(--brand-light) 0%, var(--brand) 55%, var(--brand-dark) 100%);
	box-shadow: 0 26px 50px -20px rgba(var(--brand-rgb), 0.7);
}

.hub-tile svg {
	width: 58%;
	height: 58%;
}

.hub-orbit {
	inset: 13%;
}

.hub-orbit+.hub-orbit {
	inset: 0;
}

.hub-orbit span {
	left: 50%;
	top: 0;
	width: 12px;
	height: 12px;
	background: #F2A93B;
	box-shadow: 0 0 0 4px rgba(242, 169, 59, 0.18);
	transform: translate(-50%, -50%);
}

.hub-orbit+.hub-orbit span {
	width: 9px;
	height: 9px;
	background: var(--brand-soft);
	box-shadow: none;
}

.hub-dots span {
	position: absolute;
	width: 14px;
	height: 14px;
	margin: -7px 0 0 -7px;
	border-radius: 50%;
	background: var(--brand);
	border: 3px solid #FFFFFF;
	box-shadow: 0 0 0 1px var(--brand-soft);
}

/* --i: clockwise spotlight order (left 1, right 1–3, left 3, left 2); --r: entrance order in each column */
.hub-dots span:nth-child(1) {
	--i: 0;
	left: 6.7%;
	top: 25%;
}

.hub-dots span:nth-child(2) {
	--i: 1;
	left: 93.3%;
	top: 25%;
}

.hub-dots span:nth-child(3) {
	--i: 2;
	left: 100%;
	top: 50%;
}

.hub-dots span:nth-child(4) {
	--i: 3;
	left: 93.3%;
	top: 75%;
}

.hub-dots span:nth-child(5) {
	--i: 4;
	left: 6.7%;
	top: 75%;
}

.hub-dots span:nth-child(6) {
	--i: 5;
	left: 0;
	top: 50%;
}

.hub-start .hub-item:nth-child(1) {
	--i: 0;
	--r: 0;
}

.hub-start .hub-item:nth-child(2) {
	--i: 5;
	--r: 1;
}

.hub-start .hub-item:nth-child(3) {
	--i: 4;
	--r: 2;
}

.hub-end .hub-item:nth-child(1) {
	--i: 1;
	--r: 0;
}

.hub-end .hub-item:nth-child(2) {
	--i: 2;
	--r: 1;
}

.hub-end .hub-item:nth-child(3) {
	--i: 3;
	--r: 2;
}

@keyframes hub-up {
	from {
		opacity: 0;
		transform: translateY(18px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes hub-in-left {
	from {
		opacity: 0;
		transform: translateX(-32px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes hub-in-right {
	from {
		opacity: 0;
		transform: translateX(32px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes hub-pop {
	from {
		opacity: 0;
		transform: scale(0.86);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes hub-spin {
	to {
		transform: rotate(360deg);
	}
}

@keyframes hub-spin-back {
	to {
		transform: rotate(-360deg);
	}
}

@keyframes hub-float {

	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-8px);
	}
}

@keyframes hub-ripple {
	0% {
		opacity: 0.7;
		transform: scale(1);
	}

	100% {
		opacity: 0;
		transform: scale(2.4);
	}
}

@keyframes hub-spot {
	0% {
		background: #FFFFFF;
		border-color: var(--brand-border);
		color: var(--brand);
		transform: none;
	}

	3%,
	14% {
		background: var(--brand);
		border-color: var(--brand);
		color: #FFFFFF;
		transform: translateY(-3px);
	}

	19%,
	100% {
		background: #FFFFFF;
		border-color: var(--brand-border);
		color: var(--brand);
		transform: none;
	}
}

@keyframes hub-spot-acc {
	0% {
		fill: var(--brand-border);
	}

	3%,
	14% {
		fill: rgba(255, 255, 255, 0.22);
	}

	19%,
	100% {
		fill: var(--brand-border);
	}
}

@keyframes hub-spot-title {
	0% {
		color: #0B1220;
	}

	3%,
	14% {
		color: var(--brand);
	}

	19%,
	100% {
		color: #0B1220;
	}
}

@keyframes hub-ping {
	0% {
		background: var(--brand);
		box-shadow: 0 0 0 1px var(--brand-soft), 0 0 0 0 rgba(var(--brand-rgb), 0.45);
	}

	3% {
		background: #F2A93B;
	}

	14% {
		background: #F2A93B;
		box-shadow: 0 0 0 1px var(--brand-soft), 0 0 0 16px rgba(var(--brand-rgb), 0);
	}

	19%,
	100% {
		background: var(--brand);
		box-shadow: 0 0 0 1px var(--brand-soft), 0 0 0 0 rgba(var(--brand-rgb), 0);
	}
}

@media (prefers-reduced-motion: no-preference) {
	.hub-head>* {
		animation: hub-up 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
	}

	.hub-head> :nth-child(2) {
		animation-delay: 0.08s;
	}

	.hub-head> :nth-child(3) {
		animation-delay: 0.16s;
	}

	.hub-core {
		animation: hub-pop 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s both;
	}

	.hub-item {
		animation: hub-in-right 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
		animation-delay: calc(0.4s + var(--r) * 0.14s);
	}

	.hub-start .hub-item {
		animation-name: hub-in-left;
	}

	.hub-track {
		animation: hub-spin 80s linear infinite;
	}

	.hub-orbit {
		animation: hub-spin 16s linear -1.8s infinite;
	}

	.hub-orbit+.hub-orbit {
		animation: hub-spin-back 28s linear -9s infinite;
	}

	.hub-tile {
		animation: hub-float 6s ease-in-out infinite;
	}

	.hub-ripple {
		animation: hub-ripple 4s cubic-bezier(0.2, 0.6, 0.3, 1) infinite;
	}

	.hub-ripple+.hub-ripple {
		animation-delay: 2s;
	}

	.hub-icon {
		animation: hub-spot 9s ease-in-out infinite;
		animation-delay: calc(1.4s + var(--i) * 1.5s);
	}

	.hub-icon .acc {
		animation: hub-spot-acc 9s ease-in-out infinite;
		animation-delay: calc(1.4s + var(--i) * 1.5s);
	}

	.hub-title {
		animation: hub-spot-title 9s ease-in-out infinite;
		animation-delay: calc(1.4s + var(--i) * 1.5s);
	}

	.hub-dots span {
		animation: hub-ping 9s ease-out infinite;
		animation-delay: calc(1.4s + var(--i) * 1.5s);
	}

	.hub-item:hover .hub-icon,
	.hub-item:hover .hub-icon .acc,
	.hub-item:hover .hub-title {
		animation: none;
	}

	.hub-item:hover .hub-title {
		color: var(--brand);
	}
}

/* ---------- ProjectBoard features page · hero ---------- */
.fx-hero {
	background: linear-gradient(180deg, #FFFFFF 0%, var(--brand-wash) 100%);
}

.fx-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(var(--brand-dots) 1.3px, transparent 1.3px);
	background-size: 24px 24px;
	-webkit-mask-image: radial-gradient(55% 70% at 85% 40%, #000 0%, transparent 100%);
	mask-image: radial-gradient(55% 70% at 85% 40%, #000 0%, transparent 100%);
	pointer-events: none;
}

.fx-pill {
	padding: 0.5625rem 0.875rem;
}

.fx-pill::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 2px;
	background: #F2A93B;
}

.fx-jump {
	color: var(--bs-body-color);
}

.fx-jump:hover {
	color: var(--brand);
}

.fx-jump span {
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: var(--brand-subtle);
	color: var(--brand);
	transition: background 0.2s ease, color 0.2s ease;
}

.fx-jump svg {
	width: 20px;
	height: 20px;
}

.fx-jump .acc {
	fill: #FFFFFF;
}

.fx-jump:hover span {
	background: var(--brand);
	color: #FFFFFF;
}

.fx-jump:hover .acc {
	fill: rgba(255, 255, 255, 0.22);
}

.fx-art {
	aspect-ratio: 1 / 0.86;
}

.fx-art-bg {
	right: 0;
	top: 12%;
	width: 80%;
	height: 88%;
	border-radius: 36px;
	background: radial-gradient(120% 90% at 100% 0%, var(--brand-light) 0%, var(--brand) 55%, var(--brand-dark) 100%);
}

.fx-window {
	left: 2%;
	top: 0;
	width: 84%;
	border-radius: 18px;
	box-shadow: 0 40px 80px -40px rgba(11, 18, 32, 0.55);
}

.fx-window>div {
	height: 34px;
}

.fx-window>div i {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--brand-dots);
}

.fx-window>div b {
	flex: 1;
	max-width: 220px;
	height: 16px;
	margin-left: 6px;
	border-radius: 999px;
	background: #FFFFFF;
	border: 1px solid #E4E7EC;
}

.fx-window img {
	aspect-ratio: 16 / 11;
	object-position: center top;
}

.fx-float-list,
.fx-float-chat,
.fx-shot-float {
	border-radius: 14px;
	box-shadow: 0 26px 52px -24px rgba(11, 18, 32, 0.5);
}

.fx-float-list {
	left: -2%;
	bottom: 2%;
	width: 31%;
}

.fx-float-chat {
	right: 5%;
	bottom: 6%;
	width: 54%;
}

.fx-chip {
	right: -10px;
	top: 14%;
	width: 58px;
	height: 58px;
	border-radius: 18px;
	background: #F2A93B;
	color: #0B1220;
	box-shadow: 0 18px 36px -16px rgba(11, 18, 32, 0.45);
}

.fx-chip svg {
	width: 30px;
	height: 30px;
}

.fx-chip .acc {
	fill: rgba(255, 255, 255, 0.5);
}

@keyframes fx-up {
	from {
		opacity: 0;
		transform: translateY(18px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes fx-bob {

	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-8px);
	}
}

@media (prefers-reduced-motion: no-preference) {
	.fx-rise>* {
		animation: fx-up 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
	}

	.fx-rise> :nth-child(2) {
		animation-delay: 0.06s;
	}

	.fx-rise> :nth-child(3) {
		animation-delay: 0.12s;
	}

	.fx-rise> :nth-child(4) {
		animation-delay: 0.18s;
	}

	.fx-rise> :nth-child(5) {
		animation-delay: 0.24s;
	}

	.fx-rise> :nth-child(6) {
		animation-delay: 0.3s;
	}

	.fx-art {
		animation: fx-up 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) 0.18s both;
	}

	.fx-float-list {
		animation: fx-bob 6s ease-in-out infinite;
	}

	.fx-float-chat {
		animation: fx-bob 7s ease-in-out -2s infinite;
	}

	.fx-chip {
		animation: fx-bob 5.5s ease-in-out -4s infinite;
	}
}

/* ---------- ProjectBoard features page · stacking feature cards ---------- */
.fx-card {
	position: sticky;
	margin-bottom: 40px;
}

.fx-card:last-child {
	margin-bottom: 0;
}

/* each card sticks a little lower than the one before, below the 84px header */
.fx-card:nth-child(1) {
	top: 108px;
}

.fx-card:nth-child(2) {
	top: 124px;
}

.fx-card:nth-child(3) {
	top: 140px;
}

.fx-card:nth-child(4) {
	top: 156px;
}

.fx-card:nth-child(5) {
	top: 172px;
}

.fx-card:nth-child(6) {
	top: 188px;
}

.fx-light,
.fx-dark {
	position: relative;
	padding: clamp(24px, 3.4vw, 48px);
	border-radius: 32px;
	transform-origin: 50% 0%;
}

.fx-light::after,
.fx-dark::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: #0B1220;
	opacity: 0;
	pointer-events: none;
}

.fx-light {
	background: var(--brand-wash-3);
	border: 1px solid var(--brand-line);
	box-shadow: 0 30px 60px -48px rgba(11, 18, 32, 0.5);
}

.fx-dark {
	background: radial-gradient(110% 120% at 0% 0%, var(--brand-light) 0%, var(--brand) 50%, var(--brand-dark) 100%);
	color: #FFFFFF;
	box-shadow: 0 30px 60px -40px rgba(var(--brand-dark-rgb), 0.7);
}

.fx-icon {
	width: 52px;
	height: 52px;
	border-radius: 16px;
}

.fx-icon svg {
	width: 28px;
	height: 28px;
}

.fx-light .fx-icon {
	background: #FFFFFF;
	border: 1px solid var(--brand-border);
	color: var(--brand);
}

.fx-light .fx-icon .acc {
	fill: var(--brand-border);
}

.fx-dark .fx-icon {
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.25);
	color: #FFFFFF;
}

.fx-dark .fx-icon .acc {
	fill: rgba(242, 169, 59, 0.85);
}

.fx-num {
	font-family: var(--fp-mono);
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.08em;
}

.fx-num small {
	font-size: inherit;
	opacity: 0.55;
}

.fx-light .fx-num {
	color: var(--brand);
}

.fx-dark .fx-num {
	color: var(--brand-soft);
}

.fx-light .lead {
	color: var(--bs-secondary-color);
}

.fx-dark .lead {
	color: rgba(255, 255, 255, 0.8);
}

.fx-points li {
	position: relative;
	padding-left: 30px;
	font-size: 0.96875rem;
	line-height: 1.55;
}

.fx-points li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 3px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.3l2.6 2.5L13 6.5' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
}

.fx-points strong {
	font-weight: 600;
}

.fx-light .fx-points li {
	color: var(--bs-secondary-color);
}

.fx-light .fx-points strong {
	color: var(--bs-body-color);
}

.fx-dark .fx-points li {
	color: rgba(255, 255, 255, 0.78);
}

.fx-dark .fx-points li::before {
	background-color: #F2A93B;
}

.fx-dark .fx-points strong {
	color: #FFFFFF;
}

.fx-pager a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
}

.fx-pager a span {
	font-weight: 400;
	opacity: 0.7;
}

.fx-pager a:hover {
	text-decoration: underline;
}

.fx-light .fx-pager a {
	color: var(--brand);
}

.fx-dark .fx-pager a {
	color: #FFFFFF;
}

.fx-dark a:focus-visible {
	outline-color: #FFFFFF;
}

.fx-shot {
	box-shadow: 0 30px 60px -36px rgba(11, 18, 32, 0.45);
}

.fx-shot-float {
	left: -22px;
	bottom: -26px;
	width: 58%;
}

.fx-shot-crop {
	width: 100%;
	aspect-ratio: 1170 / 658;
	object-position: center 88%;
}

@media (max-width: 991.98px) {
	.fx-card {
		position: static;
	}

	.fx-shot-float {
		left: 8px;
		bottom: -18px;
	}
}

/* stacking: each card shrinks and darkens while the next one slides over it (browsers with scroll-driven animations) */
@keyframes fx-shrink {
	to {
		transform: scale(0.93);
	}
}

@keyframes fx-dim {
	to {
		opacity: 0.22;
	}
}

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) and (min-width: 992px) {
		.fx-stack {
			view-timeline-name: --fxstack;
		}

		.fx-card>div,
		.fx-card>div::after {
			animation-timing-function: linear;
			animation-fill-mode: both;
			animation-timeline: --fxstack;
		}

		.fx-card>div {
			animation-name: fx-shrink;
		}

		.fx-card>div::after {
			animation-name: fx-dim;
		}

		.fx-card:nth-child(1)>div,
		.fx-card:nth-child(1)>div::after {
			animation-range: exit-crossing 2% exit-crossing 16.6%;
		}

		.fx-card:nth-child(2)>div,
		.fx-card:nth-child(2)>div::after {
			animation-range: exit-crossing 18.6% exit-crossing 33.3%;
		}

		.fx-card:nth-child(3)>div,
		.fx-card:nth-child(3)>div::after {
			animation-range: exit-crossing 35.3% exit-crossing 50%;
		}

		.fx-card:nth-child(4)>div,
		.fx-card:nth-child(4)>div::after {
			animation-range: exit-crossing 52% exit-crossing 66.6%;
		}

		.fx-card:nth-child(5)>div,
		.fx-card:nth-child(5)>div::after {
			animation-range: exit-crossing 68.6% exit-crossing 83.3%;
		}

		.fx-card:nth-child(6)>div,
		.fx-card:nth-child(6)>div::after {
			animation: none;
		}
	}
}

/* ---------- Reveal on scroll (main.js adds .reveal-ready to <html>, then .is-visible as each element comes into view) ---------- */
.reveal-ready .reveal {
	opacity: 0;
	transform: translateY(32px);
	transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
	transition-delay: var(--reveal-delay, 0s);
}

.reveal-ready .reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* ---------- ProjectBoard home · industries ---------- */
/* cards in the same row come in one after another */
@media (min-width: 992px) {
	.industry-grid>.reveal:nth-child(3n+2) {
		--reveal-delay: 0.12s;
	}

	.industry-grid>.reveal:nth-child(3n+3) {
		--reveal-delay: 0.24s;
	}
}

@media (min-width: 768px) and (max-width: 991.98px) {
	.industry-grid>.reveal:nth-child(2n) {
		--reveal-delay: 0.12s;
	}
}

.industry-card {
	height: 300px;
	--bs-card-border-radius: 24px;
	--bs-card-inner-border-radius: 24px;
	box-shadow: 0 24px 48px -32px rgba(11, 18, 32, 0.45);
	transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.35s ease;
}

.industry-card .card-img {
	transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.4s ease;
}

.industry-card .card-img-overlay {
	background: linear-gradient(180deg, rgba(var(--brand-ink-rgb), 0.1) 0%, rgba(var(--brand-ink-rgb), 0.2) 38%, rgba(var(--brand-ink-rgb), 0.9) 100%);
}

/* blue tint that fades in on hover; the overlay's content sits above it */
.industry-card .card-img-overlay::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(180deg, rgba(var(--brand-rgb), 0) 25%, rgba(var(--brand-rgb), 0.6) 100%);
	opacity: 0;
	transition: opacity 0.4s ease;
	pointer-events: none;
}

.industry-card .card-img-overlay>* {
	position: relative;
}

.industry-num {
	padding: 0.45rem 0.75rem;
	font-family: var(--fp-mono);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	background: rgba(11, 18, 32, 0.45);
	border: 1px solid rgba(255, 255, 255, 0.35);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.industry-card h3::after {
	content: "";
	display: block;
	width: 0;
	height: 3px;
	margin-top: 0.6rem;
	border-radius: 3px;
	background: #F2A93B;
	transition: width 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.industry-text {
	font-size: 0.9375rem;
	line-height: 1.5;
	transition: color 0.3s ease;
}

.industry-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 36px 64px -32px rgba(var(--brand-rgb), 0.6);
}

.industry-card:hover .card-img {
	transform: scale(1.08);
	filter: saturate(1.1);
}

.industry-card:hover .card-img-overlay::before {
	opacity: 1;
}

.industry-card:hover .industry-num {
	background: #F2A93B;
	border-color: #F2A93B;
	color: #0B1220;
}

.industry-card:hover h3::after {
	width: 48px;
}

.industry-card:hover .industry-text {
	--bs-text-opacity: 1;
}

@media (prefers-reduced-motion: reduce) {

	.industry-card,
	.industry-card .card-img {
		transition: none;
	}

	.industry-card:hover,
	.industry-card:hover .card-img {
		transform: none;
	}
}

/* ---------- ProjectBoard home · testimonials ---------- */
/* soft blue and amber glows, with a dot grid that fades out below the heading */
.testimonials {
	background: radial-gradient(640px circle at 6% 10%, rgba(var(--brand-rgb), 0.08), transparent 70%), radial-gradient(560px circle at 94% 92%, rgba(242, 169, 59, 0.12), transparent 70%);
}

.testimonials::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(var(--brand-dots) 1.3px, transparent 1.3px);
	background-size: 24px 24px;
	-webkit-mask-image: radial-gradient(ellipse 60% 40% at 50% 0%, #000 0%, transparent 100%);
	mask-image: radial-gradient(ellipse 60% 40% at 50% 0%, #000 0%, transparent 100%);
	pointer-events: none;
}

.testimonials-head {
	max-width: 760px;
}

/* stacked faces under the heading: they pop in one by one and spread apart on hover */
.testimonials-faces img {
	box-shadow: 0 0 0 3px #FFFFFF;
	transition: margin 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), scale 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) var(--face-delay, 0.3s), opacity 0.3s ease var(--face-delay, 0.3s);
}

.testimonials-faces img+img {
	margin-left: -12px;
}

.testimonials-faces:hover img+img {
	margin-left: -4px;
}

.testimonials-faces img:nth-child(2) {
	--face-delay: 0.36s;
}

.testimonials-faces img:nth-child(3) {
	--face-delay: 0.42s;
}

.testimonials-faces img:nth-child(4) {
	--face-delay: 0.48s;
}

.testimonials-faces img:nth-child(5) {
	--face-delay: 0.54s;
}

.testimonials-faces img:nth-child(6) {
	--face-delay: 0.6s;
}

.reveal-ready .testimonials-head .testimonials-faces img {
	scale: 0.3;
	opacity: 0;
}

.reveal-ready .testimonials-head.is-visible .testimonials-faces img {
	scale: 1;
	opacity: 1;
}

/* cards in the same row come in one after another */
@media (min-width: 1200px) {
	.testimonial-grid>.reveal:nth-child(3n+2) {
		--reveal-delay: 0.12s;
	}

	.testimonial-grid>.reveal:nth-child(3n+3) {
		--reveal-delay: 0.24s;
	}
}

@media (min-width: 768px) and (max-width: 1199.98px) {
	.testimonial-grid>.reveal:nth-child(2n) {
		--reveal-delay: 0.12s;
	}
}

/* phones: one swipeable row (the next card peeks in) instead of six stacked cards */
@media (max-width: 767.98px) {
	.testimonial-grid {
		flex-wrap: nowrap;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		padding-bottom: 2rem;
		scrollbar-width: none;
	}

	.testimonial-grid::-webkit-scrollbar {
		display: none;
	}

	.testimonial-grid>li {
		width: 86%;
		scroll-snap-align: start;
	}
}

.testimonial-card {
	--bs-card-border-color: var(--brand-hairline);
	--bs-card-border-radius: 28px;
	--mx: 50%;
	--my: 0%;
	box-shadow: 0 1px 2px rgba(11, 18, 32, 0.04), 0 24px 48px -36px rgba(11, 18, 32, 0.35);
	transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.45s ease, border-color 0.45s ease;
}

/* deep-blue layer that fades in on hover, lit by a soft light that follows the pointer (--mx/--my are set in main.js) */
.testimonial-card::before {
	content: "";
	position: absolute;
	inset: -1px;
	border-radius: inherit;
	background: radial-gradient(360px circle at var(--mx) var(--my), rgba(255, 255, 255, 0.16), transparent 60%), linear-gradient(150deg, var(--brand-light-2) 0%, var(--brand) 45%, var(--brand-deep) 100%);
	opacity: 0;
	transition: opacity 0.45s ease;
	pointer-events: none;
}

.testimonial-card>* {
	position: relative;
}

/* the quote mark springs in after its card */
.testimonial-quote {
	color: var(--bs-primary-border-subtle);
	transition: color 0.45s ease, transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), scale 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--reveal-delay, 0s) + 0.35s), opacity 0.4s ease calc(var(--reveal-delay, 0s) + 0.35s);
}

.reveal-ready .testimonial-grid>.reveal .testimonial-quote {
	scale: 0.4;
	opacity: 0;
}

.reveal-ready .testimonial-grid>.reveal.is-visible .testimonial-quote {
	scale: 1;
	opacity: 1;
}

.testimonial-tag {
	padding: 0.45rem 0.7rem;
	font-family: var(--fp-mono);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	color: var(--bs-primary);
	background: var(--bs-primary-bg-subtle);
	border: 1px solid transparent;
	transition: color 0.45s ease, background-color 0.45s ease, border-color 0.45s ease;
}

.testimonial-text {
	font-size: 1.0625rem;
	line-height: 1.65;
	color: #3B4558;
	transition: color 0.45s ease;
}

.testimonial-author {
	--bs-border-color: var(--brand-hairline);
	transition: border-color 0.45s ease;
}

.testimonial-avatar {
	box-shadow: 0 0 0 3px #FFFFFF, 0 10px 22px -10px rgba(11, 18, 32, 0.5);
	transition: box-shadow 0.45s ease, transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.testimonial-name {
	color: var(--bs-body-color);
	transition: color 0.45s ease;
}

.testimonial-role {
	color: var(--bs-secondary-color);
	transition: color 0.45s ease;
}

.testimonial-company {
	color: var(--bs-primary);
	transition: color 0.45s ease;
}

/* hover (mouse and trackpad only): the card lifts and turns deep blue, the quote mark tilts amber */
@media (hover: hover) {
	.testimonial-card:hover {
		--bs-card-border-color: transparent;
		transform: translateY(-8px);
		box-shadow: 0 40px 70px -34px rgba(var(--brand-dark-rgb), 0.7);
	}

	.testimonial-card:hover::before {
		opacity: 1;
	}

	.testimonial-card:hover .testimonial-quote {
		color: #F2A93B;
		transform: translateY(-4px) rotate(-8deg);
	}

	.testimonial-card:hover .testimonial-tag {
		color: #FFFFFF;
		background: rgba(255, 255, 255, 0.12);
		border-color: rgba(255, 255, 255, 0.24);
	}

	.testimonial-card:hover .testimonial-text {
		color: rgba(255, 255, 255, 0.9);
	}

	.testimonial-card:hover .testimonial-author {
		--bs-border-color: rgba(255, 255, 255, 0.18);
	}

	.testimonial-card:hover .testimonial-avatar {
		box-shadow: 0 0 0 3px #F2A93B, 0 10px 22px -10px rgba(0, 0, 0, 0.6);
		transform: scale(1.06);
	}

	.testimonial-card:hover .testimonial-name {
		color: #FFFFFF;
	}

	.testimonial-card:hover .testimonial-role {
		color: rgba(255, 255, 255, 0.7);
	}

	.testimonial-card:hover .testimonial-company {
		color: #F6B955;
	}
}

@media (prefers-reduced-motion: reduce) {

	.testimonial-card,
	.testimonial-quote,
	.testimonial-avatar,
	.testimonials-faces img {
		transition: none;
	}

	.testimonial-card:hover,
	.testimonial-card:hover .testimonial-quote,
	.testimonial-card:hover .testimonial-avatar {
		transform: none;
	}
}

/* ---------- ProjectBoard overview page · hero ---------- */
/* copy on the left; team photo with floating project updates on the right */
.ov-hero {
	background: linear-gradient(180deg, #FFFFFF 0%, var(--brand-wash) 100%);
}

.ov-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(var(--brand-dots) 1.3px, transparent 1.3px);
	background-size: 24px 24px;
	-webkit-mask-image: radial-gradient(55% 70% at 85% 40%, #000 0%, transparent 100%);
	mask-image: radial-gradient(55% 70% at 85% 40%, #000 0%, transparent 100%);
	pointer-events: none;
}

.ov-checks li>span {
	width: 20px;
	height: 20px;
	color: var(--brand);
	background: var(--brand-border);
}

.ov-art {
	max-width: 640px;
	margin-left: auto;
	padding: 32px 0 44px 28px;
}

.ov-art-bg {
	right: -3%;
	top: 0;
	width: 84%;
	height: 86%;
	border-radius: 36px;
	background: radial-gradient(120% 90% at 100% 0%, var(--brand-light) 0%, var(--brand) 55%, var(--brand-dark) 100%);
}

.ov-art-photo {
	border-radius: 28px;
	box-shadow: 0 40px 80px -40px rgba(11, 18, 32, 0.55);
}

.ov-float {
	z-index: 1;
	box-shadow: 0 26px 52px -24px rgba(11, 18, 32, 0.5);
}

.ov-toast {
	left: 0;
	top: 13%;
	max-width: 290px;
	padding: 12px 18px 12px 12px;
	border-radius: 18px;
	font-size: 0.9375rem;
}

.ov-toast-icon {
	width: 44px;
	height: 44px;
	padding: 9px;
	border-radius: 14px;
	background: var(--brand);
}

.ov-progress {
	right: 5%;
	bottom: 0;
	width: 220px;
	padding: 16px 18px 14px;
	border-radius: 18px;
}

.ov-bars {
	height: 58px;
}

.ov-bars span {
	flex: 1;
	border-radius: 6px 6px 3px 3px;
	background: var(--brand-border);
	transform-origin: bottom;
}

.ov-bars span:nth-child(1) {
	--i: 0;
	height: 38%;
}

.ov-bars span:nth-child(2) {
	--i: 1;
	height: 55%;
}

.ov-bars span:nth-child(3) {
	--i: 2;
	height: 47%;
}

.ov-bars span:nth-child(4) {
	--i: 3;
	height: 72%;
	background: var(--brand-mid);
}

.ov-bars span:nth-child(5) {
	--i: 4;
	height: 64%;
	background: var(--brand-mid);
}

.ov-bars span:nth-child(6) {
	--i: 5;
	height: 88%;
	background: var(--brand);
}

.ov-bars span:nth-child(7) {
	--i: 6;
	height: 100%;
	background: #F2A93B;
}

.ov-days span {
	flex: 1;
	font-size: 0.6875rem;
	text-align: center;
}

.ov-online {
	right: 4%;
	top: 6px;
	padding: 8px 14px;
	border-radius: 999px;
	color: #FFFFFF;
	background: #0B1220;
	font-size: 0.8125rem;
	font-weight: 600;
}

.ov-dot {
	width: 8px;
	height: 8px;
	background: #3DDC84;
}

/* phones: smaller cards so the photo stays visible */
@media (max-width: 575.98px) {
	.ov-art {
		padding: 24px 0 32px 10px;
	}

	.ov-toast {
		top: 9%;
		max-width: 210px;
		padding: 8px 12px 8px 8px;
		border-radius: 14px;
		font-size: 0.8125rem;
	}

	.ov-toast-icon {
		width: 34px;
		height: 34px;
		padding: 7px;
		border-radius: 11px;
	}

	.ov-progress {
		width: 150px;
		padding: 10px 12px;
		border-radius: 14px;
	}

	.ov-progress>div:first-child {
		margin-bottom: 0.5rem !important;
	}

	.ov-bars {
		height: 34px;
	}

	.ov-online {
		top: 0;
		padding: 6px 10px;
		font-size: 0.75rem;
	}
}

/* photos that tilt slightly towards the pointer (--rx/--ry are set in main.js) */
.ov-tilt {
	transform: perspective(1400px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
	transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.ov-hero .pb-mark {
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

@keyframes ov-rise {
	from {
		opacity: 0;
		translate: 0 24px;
	}

	to {
		opacity: 1;
		translate: none;
	}
}

@keyframes ov-mark {
	from {
		background-size: 0% 100%;
	}

	to {
		background-size: 100% 100%;
	}
}

@keyframes ov-pop {
	from {
		opacity: 0;
		transform: translateY(16px) scale(0.94);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes ov-grow {
	from {
		transform: scaleY(0);
	}

	to {
		transform: none;
	}
}

@keyframes ov-ping {
	0% {
		box-shadow: 0 0 0 0 rgba(61, 220, 132, 0.6);
	}

	70%,
	100% {
		box-shadow: 0 0 0 8px rgba(61, 220, 132, 0);
	}
}

/* the marker sweeps under the headline, the photo rises in, then the cards pop in,
the bars grow and the cards keep floating */
@media (prefers-reduced-motion: no-preference) {
	.ov-hero .pb-mark {
		animation: ov-mark 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.6s both;
	}

	.ov-art {
		animation: ov-rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) 0.15s both;
	}

	.ov-toast {
		animation: ov-pop 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) 0.6s both, fx-bob 6s ease-in-out 1.2s infinite;
	}

	.ov-progress {
		animation: ov-pop 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) 0.8s both, fx-bob 7s ease-in-out 1.4s infinite;
	}

	.ov-online {
		animation: ov-pop 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) 1s both;
	}

	.ov-bars span {
		animation: ov-grow 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) calc(0.9s + var(--i) * 0.06s) both;
	}

	.ov-dot {
		animation: ov-ping 2s ease-out infinite;
	}
}

/* ---------- ProjectBoard overview page · benefits ---------- */
/* each ring draws to its value and its number counts up (main.js) as the card scrolls into view */
@media (min-width: 768px) {
	.ov-benefit-grid>.reveal:nth-child(2) {
		--reveal-delay: 0.12s;
	}

	.ov-benefit-grid>.reveal:nth-child(3) {
		--reveal-delay: 0.24s;
	}
}

.ov-benefit {
	--bs-card-bg: var(--brand-wash);
	--bs-card-border-radius: 28px;
	transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.45s ease;
}

.ov-benefit-feature {
	--bs-card-bg: var(--brand);
	background-image: radial-gradienateX(-100%);
	pointer-events: none;
}

.ov-benefit-feature::after {
	background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.16) 50%, transparent 65%);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.ov-benefit:hover::after {
		transform: translateX(100%);
		transition: transform 0.9s ease;
	}
}

.ov-ring {
	--p: 1;
	width: 132px;
	height: 132px;
}

.ov-ring-35 {
	--p: 0.35;
}

.ov-ring-40 {
	--p: 0.4;
}

.ov-ring>svg {
	width: 100%;
	height: 100%;
	transform: rotate(-90deg);
}

.ov-ring>svg circle {
	fill: none;
	stroke-width: 10;
}

.ov-ring-track {
	stroke: var(--brand-line);
}

.ov-ring-bar {
	stroke: var(--brand);
	stroke-linecap: round;
	stroke-dasharray: 327px;
	stroke-dashoffset: calc(327px * (1 - var(--p)));
	transition: stroke-dashoffset 1.4s cubic-bezier(0.2, 0.7, 0.2, 1) calc(var(--reveal-delay, 0s) + 0.3s), filter 0.45s ease;
}

.reveal-ready .reveal:not(.is-visible) .ov-ring-bar {
	stroke-dashoffset: 327px;
}

.ov-benefit-feature .ov-ring-track {
	stroke: rgba(255, 255, 255, 0.18);
}

.ov-benefit-feature .ov-ring-bar {
	stroke: #F2A93B;
}

.ov-benefit:hover .ov-ring-bar {
	filter: drop-shadow(0 0 6px rgba(var(--brand-rgb), 0.45));
}

.ov-benefit-feature:hover .ov-ring-bar {
	filter: drop-shadow(0 0 8px rgba(242, 169, 59, 0.7));
}

.ov-ring-num {
	font-family: var(--fp-display);
	font-size: 2rem;
	letter-spacing: -0.04em;
}

.ov-ring-icon {
	color: var(--brand);
}

.ov-ring-icon svg {
	width: 46px;
	height: 46px;
}

/* ---------- ProjectBoard overview page · who it's for ---------- */
/* tiles lift on hover: a soft glow follows the pointer (--mx/--my from main.js),
the icon fills blue and tilts, and an arrow slides in */
.ov-fit::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(var(--brand-dots) 1.3px, transparent 1.3px);
	background-size: 24px 24px;
	-webkit-mask-image: radial-gradient(ellipse 60% 40% at 50% 0%, #000 0%, transparent 100%);
	mask-image: radial-gradient(ellipse 60% 40% at 50% 0%, #000 0%, transparent 100%);
	pointer-events: none;
}

.ov-head {
	max-width: 760px;
}

@media (min-width: 992px) {
	.ov-fit-grid>.reveal:nth-child(4n+2) {
		--reveal-delay: 0.08s;
	}

	.ov-fit-grid>.reveal:nth-child(4n+3) {
		--reveal-delay: 0.16s;
	}

	.ov-fit-grid>.reveal:nth-child(4n+4) {
		--reveal-delay: 0.24s;
	}
}

@media (min-width: 768px) and (max-width: 991.98px) {
	.ov-fit-grid>.reveal:nth-child(3n+2) {
		--reveal-delay: 0.08s;
	}

	.ov-fit-grid>.reveal:nth-child(3n+3) {
		--reveal-delay: 0.16s;
	}
}

@media (max-width: 767.98px) {
	.ov-fit-grid>.reveal:nth-child(2n) {
		--reveal-delay: 0.08s;
	}
}

.ov-fit-card {
	--bs-card-border-color: var(--brand-hairline);
	--bs-card-border-radius: 22px;
	transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}

.ov-fit-card::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%), rgba(var(--brand-rgb), 0.1), transparent 70%), linear-gradient(140deg, var(--brand-subtle) 0%, rgba(var(--brand-subtle-rgb), 0) 65%);
	opacity: 0;
	transition: opacity 0.35s ease;
	pointer-events: none;
}

.ov-fit-card>* {
	position: relative;
}

.ov-fit-card h3 {
	font-size: 1rem;
	line-height: 1.4;
	letter-spacing: -0.01em;
}

.ov-fit-icon {
	width: 52px;
	height: 52px;
	border-radius: 16px;
	color: var(--brand);
	background: var(--brand-subtle);
	transition: background-color 0.35s ease, color 0.35s ease, transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.ov-fit-icon svg {
	width: 26px;
	height: 26px;
}

.ov-fit-arrow {
	top: 1.25rem;
	right: 1.25rem;
	color: var(--brand);
	opacity: 0;
	transform: translate(-6px, 6px);
	transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.ov-fit-card:hover {
	--bs-card-border-color: var(--brand-border-hover);
	transform: translateY(-6px);
	box-shadow: 0 28px 50px -32px rgba(var(--brand-dark-rgb), 0.5);
}

.ov-fit-card:hover::before {
	opacity: 1;
}

.ov-fit-card:hover .ov-fit-icon {
	color: #FFFFFF;
	background: var(--brand);
	transform: rotate(-6deg) scale(1.06);
}

.ov-fit-card:hover .ov-fit-arrow {
	opacity: 1;
	transform: none;
}

/* ---------- ProjectBoard overview page · on the go ---------- */
/* app notifications pop in after the photo and keep floating; list icons fill on hover */
.ov-go {
	max-width: 500px;
	padding: 0 36px 36px 0;
}

.ov-go-bg {
	right: 0;
	bottom: 0;
	width: 86%;
	height: 86%;
	border-radius: 36px;
	background: var(--brand-subtle);
}

.ov-go-photo {
	border-radius: 28px;
	box-shadow: 0 40px 80px -40px rgba(11, 18, 32, 0.5);
}

.ov-go-card {
	z-index: 1;
	padding: 10px 16px 10px 10px;
	border-radius: 16px;
	font-size: 0.875rem;
	box-shadow: 0 26px 52px -24px rgba(11, 18, 32, 0.5);
	transition: opacity 0.6s ease, translate 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.ov-go-card-icon {
	width: 38px;
	height: 38px;
	border-radius: 12px;
	color: var(--brand);
	background: var(--brand-subtle);
}

.ov-go-call-icon {
	color: #FFFFFF;
	background: #1F9D55;
}

.ov-go-chat {
	left: -9%;
	top: 12%;
	transition-delay: 0.35s;
}

.ov-go-call {
	right: 0;
	top: 50%;
	transition-delay: 0.5s;
}

.ov-go-alert {
	left: -6%;
	bottom: 16%;
	padding: 10px 16px;
	color: #0B1220;
	background: #F2A93B;
	transition-delay: 0.65s;
}

.reveal-ready .reveal:not(.is-visible) .ov-go-card {
	opacity: 0;
	translate: 0 18px;
}

@media (max-width: 575.98px) {

	.ov-go-chat,
	.ov-go-alert {
		left: 0;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.ov-go-chat {
		animation: fx-bob 6s ease-in-out infinite;
	}

	.ov-go-call {
		animation: fx-bob 7s ease-in-out -2s infinite;
	}

	.ov-go-alert {
		animation: fx-bob 5.5s ease-in-out -4s infinite;
	}
}

@media (min-width: 576px) {
	.ov-go-list>.reveal:nth-child(2n) {
		--reveal-delay: 0.1s;
	}
}

.ov-go-icon {
	width: 46px;
	height: 46px;
	border-radius: 14px;
	color: var(--brand);
	background: var(--brand-subtle);
	transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.ov-go-icon svg {
	width: 22px;
	height: 22px;
}

.ov-go-item:hover .ov-go-icon {
	color: #FFFFFF;
	background: var(--brand);
	transform: translateY(-3px);
}

/* app store buttons */
.ov-store {
	--bs-btn-color: #FFFFFF;
	--bs-btn-bg: #0B1220;
	--bs-btn-border-color: #0B1220;
	--bs-btn-hover-color: #FFFFFF;
	--bs-btn-hover-bg: #1C2740;
	--bs-btn-hover-border-color: #1C2740;
	--bs-btn-active-color: #FFFFFF;
	--bs-btn-active-bg: #1C2740;
	--bs-btn-active-border-color: #1C2740;
	--bs-btn-padding-x: 1.1rem;
	--bs-btn-padding-y: 0.6rem;
	--bs-btn-border-radius: 14px;
	transition: transform 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
}

.ov-store:hover {
	transform: translateY(-3px);
	box-shadow: 0 16px 30px -16px rgba(11, 18, 32, 0.6);
}

.ov-store svg {
	flex-shrink: 0;
}

.ov-store-small {
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	opacity: 0.75;
}

.ov-store-name {
	margin-top: 3px;
	font-size: 1.0625rem;
}

/* ---------- ProjectBoard overview page · security ---------- */
/* dark band; the shield's check draws in, rings pulse and the security icons orbit */
.ov-secure {
	background: radial-gradient(70% 80% at 80% 40%, rgba(var(--brand-light-rgb), 0.55) 0%, rgba(var(--brand-light-rgb), 0) 60%), linear-gradient(160deg, #0B1220 0%, var(--brand-night) 55%, var(--brand-deep) 100%);
}

.ov-secure::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(255, 255, 255, 0.14) 1.2px, transparent 1.2px);
	background-size: 24px 24px;
	-webkit-mask-image: radial-gradient(50% 70% at 80% 45%, #000 0%, transparent 100%);
	mask-image: radial-gradient(50% 70% at 80% 45%, #000 0%, transparent 100%);
	pointer-events: none;
}

.ov-eyebrow-dark {
	--eyebrow-color: #F6B955;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.16);
}

.ov-secure-item {
	padding: 14px 16px;
	border-radius: 16px;
	font-weight: 500;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.1);
	transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.ov-secure-item:hover {
	background: rgba(255, 255, 255, 0.09);
	border-color: rgba(246, 185, 85, 0.5);
	transform: translateX(4px);
}

.ov-secure-icon {
	width: 38px;
	height: 38px;
	border-radius: 12px;
	color: #F6B955;
	background: rgba(246, 185, 85, 0.14);
}

@media (min-width: 576px) {
	.ov-secure-list>.reveal:nth-child(2n) {
		--reveal-delay: 0.1s;
	}
}

.ov-btn-light {
	--bs-btn-color: var(--brand);
	--bs-btn-hover-color: var(--brand-dark);
	box-shadow: 0 18px 36px -18px rgba(0, 0, 0, 0.6);
}

.ov-shield-stage {
	width: min(440px, 100%);
	aspect-ratio: 1;
}

.ov-shield-ring {
	inset: 0;
	border: 1px solid rgba(255, 255, 255, 0.12);
}

.ov-shield-ring+.ov-shield-ring {
	inset: 17%;
	border-color: rgba(255, 255, 255, 0.16);
	background: rgba(255, 255, 255, 0.02);
}

.ov-shield-glow {
	inset: 26%;
	background: radial-gradient(circle, rgba(var(--brand-bright-rgb), 0.55) 0%, rgba(var(--brand-bright-rgb), 0) 70%);
}

.ov-shield-pulse {
	inset: 30%;
	border: 2px solid rgba(246, 185, 85, 0.5);
	opacity: 0;
}

.ov-shield-orbit {
	inset: 8%;
	border: 1px dashed rgba(255, 255, 255, 0.22);
}

.ov-orbit-chip {
	width: 54px;
	height: 54px;
	margin: -27px 0 0 -27px;
	border-radius: 16px;
	color: #F6B955;
	background: rgba(11, 18, 32, 0.75);
	border: 1px solid rgba(255, 255, 255, 0.18);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	box-shadow: 0 18px 36px -18px rgba(0, 0, 0, 0.7);
}

.ov-orbit-chip:nth-child(1) {
	left: 50%;
	top: 0;
}

.ov-orbit-chip:nth-child(2) {
	left: 93.3%;
	top: 75%;
}

.ov-orbit-chip:nth-child(3) {
	left: 6.7%;
	top: 75%;
}

.ov-shield {
	left: 50%;
	top: 50%;
	width: 40%;
	transform: translate(-50%, -50%);
	filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.45));
}

.ov-shield-check {
	stroke-dasharray: 70px;
	stroke-dashoffset: 0;
	transition: stroke-dashoffset 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.5s;
}

.reveal-ready .reveal:not(.is-visible) .ov-shield-check {
	stroke-dashoffset: 70px;
}

@keyframes ov-shield-float {

	0%,
	100% {
		transform: translate(-50%, -50%);
	}

	50% {
		transform: translate(-50%, calc(-50% - 10px));
	}
}

@media (prefers-reduced-motion: no-preference) {
	.ov-shield-orbit {
		animation: hub-spin 40s linear infinite;
	}

	.ov-orbit-chip {
		animation: hub-spin-back 40s linear infinite;
	}

	.ov-shield-pulse {
		animation: hub-ripple 3.6s ease-out infinite;
	}

	.ov-shield-pulse+.ov-shield-pulse {
		animation-delay: 1.8s;
	}

	.ov-shield {
		animation: ov-shield-float 6s ease-in-out infinite;
	}
}

/* ---------- ProjectBoard overview page · get the app ---------- */
/* light card between the dark security band and the blue footer */
.ov-cta {
	border-radius: 32px;
	background: linear-gradient(120deg, var(--brand-subtle) 0%, var(--brand-wash) 55%, #FFF3DD 100%);
	border: 1px solid var(--brand-line);
}

.ov-cta::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(var(--brand-dots) 1.3px, transparent 1.3px);
	background-size: 24px 24px;
	-webkit-mask-image: linear-gradient(90deg, transparent 35%, #000 100%);
	mask-image: linear-gradient(90deg, transparent 35%, #000 100%);
	pointer-events: none;
}

.ov-cta-mark {
	right: -40px;
	bottom: -60px;
	width: 280px;
	height: 280px;
	opacity: 0.07;
}

@keyframes ov-drift {

	0%,
	100% {
		transform: none;
	}

	50% {
		transform: translate(-10px, -12px) rotate(-6deg);
	}
}

@media (prefers-reduced-motion: no-preference) {
	.ov-cta-mark {
		animation: ov-drift 12s ease-in-out infinite;
	}
}

/* ---------- ProjectBoard download page · heading ---------- */
/* soft glows drift behind a dot grid; the app icon floats and sends out ripples */
.dl-hero {
	background: linear-gradient(180deg, #FFFFFF 0%, var(--brand-wash) 100%);
}

.dl-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(var(--brand-dots) 1.3px, transparent 1.3px);
	background-size: 24px 24px;
	-webkit-mask-image: radial-gradient(ellipse 55% 45% at 50% 18%, #000 0%, transparent 100%);
	mask-image: radial-gradient(ellipse 55% 45% at 50% 18%, #000 0%, transparent 100%);
	pointer-events: none;
}

.dl-blob {
	left: -180px;
	top: -140px;
	width: 560px;
	height: 560px;
	background: radial-gradient(circle, rgba(var(--brand-rgb), 0.12) 0%, rgba(var(--brand-rgb), 0) 70%);
	pointer-events: none;
}

.dl-blob-amber {
	left: auto;
	top: auto;
	right: -200px;
	bottom: -80px;
	background: radial-gradient(circle, rgba(242, 169, 59, 0.16) 0%, rgba(242, 169, 59, 0) 70%);
}

.dl-head {
	max-width: 780px;
}

.dl-hero .pb-mark {
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.dl-app,
.dl-app-tile {
	width: 88px;
	height: 88px;
}

.dl-app-tile {
	padding: 17px;
	border-radius: 26px;
	box-shadow: 0 0 0 1px var(--brand-hairline), 0 24px 48px -20px rgba(var(--brand-dark-rgb), 0.45);
}

.dl-app-ring {
	inset: 0;
	border: 2px solid rgba(var(--brand-rgb), 0.3);
	opacity: 0;
}

@keyframes dl-drift {

	0%,
	100% {
		translate: 0 0;
	}

	50% {
		translate: 60px 40px;
	}
}

@keyframes dl-bob {

	0%,
	100% {
		translate: 0 0;
	}

	50% {
		translate: 0 -6px;
	}
}

@keyframes dl-ripple {
	0% {
		opacity: 0.6;
		transform: scale(1);
	}

	100% {
		opacity: 0;
		transform: scale(1.9);
	}
}

@media (prefers-reduced-motion: no-preference) {
	.dl-hero .pb-mark {
		animation: ov-mark 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.6s both;
	}

	.dl-blob {
		animation: dl-drift 16s ease-in-out infinite;
	}

	.dl-blob-amber {
		animation-duration: 19s;
		animation-direction: reverse;
	}

	.dl-app-tile {
		animation: dl-bob 5s ease-in-out 0.8s infinite;
	}

	.dl-app-ring {
		animation: dl-ripple 3.2s ease-out 0.6s infinite;
	}

	.dl-app-ring+.dl-app-ring {
		animation-delay: 2.2s;
	}
}

/* ---------- ProjectBoard download page · store cards ---------- */
/* cards come in one after another, then their icons spring in and keep floating */
@media (min-width: 1200px) {
	.dl-grid>.reveal:nth-child(2) {
		--reveal-delay: 0.08s;
	}

	.dl-grid>.reveal:nth-child(3) {
		--reveal-delay: 0.16s;
	}

	.dl-grid>.reveal:nth-child(4) {
		--reveal-delay: 0.24s;
	}
}

@media (min-width: 576px) and (max-width: 1199.98px) {
	.dl-grid>.reveal:nth-child(2n) {
		--reveal-delay: 0.08s;
	}
}

.dl-card {
	--bs-card-border-color: var(--brand-hairline);
	--bs-card-border-radius: 28px;
	--mx: 50%;
	--my: 30%;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(11, 18, 32, 0.04), 0 24px 48px -36px rgba(11, 18, 32, 0.35);
	transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.45s ease, border-color 0.45s ease;
}

/* deep-blue fill that grows out from the icon, lit by a light that follows the pointer (--mx/--my are set in main.js) */
.dl-card::before {
	content: "";
	position: absolute;
	inset: -1px;
	background: radial-gradient(320px circle at var(--mx) var(--my), rgba(255, 255, 255, 0.18), transparent 60%), linear-gradient(150deg, var(--brand-light-2) 0%, var(--brand) 45%, var(--brand-deep) 100%);
	clip-path: circle(0% at 50% 30%);
	transition: clip-path 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
	pointer-events: none;
}

.dl-card:focus-visible {
	outline: 3px solid #F2A93B;
	outline-offset: 4px;
}

.dl-card-body {
	position: relative;
	padding: 2.5rem 1.5rem 2rem;
}

.dl-icon {
	width: 96px;
	height: 96px;
	border-radius: 28px;
	color: #0B1220;
	box-shadow: 0 0 0 1px var(--brand-hairline), 0 18px 36px -20px rgba(11, 18, 32, 0.45);
	transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.45s ease, scale 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--reveal-delay, 0s) + 0.3s), opacity 0.4s ease calc(var(--reveal-delay, 0s) + 0.3s);
}

.dl-icon svg {
	width: 46px;
	height: 46px;
}

.reveal-ready .dl-grid>.reveal .dl-icon {
	scale: 0.5;
	opacity: 0;
}

.reveal-ready .dl-grid>.reveal.is-visible .dl-icon {
	scale: 1;
	opacity: 1;
}

.dl-name {
	color: var(--bs-body-color);
	transition: color 0.45s ease;
}

.dl-device {
	color: var(--bs-secondary-color);
	transition: color 0.45s ease;
}

@media (prefers-reduced-motion: no-preference) {
	.dl-icon {
		animation: dl-bob 6s ease-in-out infinite;
	}

	.dl-grid>li:nth-child(2) .dl-icon {
		animation-delay: -1.5s;
	}

	.dl-grid>li:nth-child(3) .dl-icon {
		animation-delay: -3s;
	}

	.dl-grid>li:nth-child(4) .dl-icon {
		animation-delay: -4.5s;
	}
}

/* hover or keyboard focus (mouse and trackpad devices): the card lifts and fills blue,
the icon tilts inside a halo and the text turns white */
@media (hover: hover) {

	.dl-card:hover,
	.dl-card:focus-visible {
		--bs-card-border-color: transparent;
		transform: translateY(-8px);
		box-shadow: 0 40px 70px -34px rgba(var(--brand-dark-rgb), 0.7);
	}

	.dl-card:hover::before,
	.dl-card:focus-visible::before {
		clip-path: circle(150% at 50% 30%);
	}

	.dl-card:hover .dl-icon,
	.dl-card:focus-visible .dl-icon {
		transform: rotate(-8deg) scale(1.06);
		box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.12), 0 0 0 22px rgba(255, 255, 255, 0.06), 0 24px 40px -18px rgba(0, 0, 0, 0.5);
	}

	.dl-card:hover .dl-name,
	.dl-card:focus-visible .dl-name {
		color: #FFFFFF;
	}

	.dl-card:hover .dl-device,
	.dl-card:focus-visible .dl-device {
		color: rgba(255, 255, 255, 0.75);
	}

	.dl-card:hover .dl-badge,
	.dl-card:focus-visible .dl-badge {
		box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22), 0 18px 34px -16px rgba(0, 0, 0, 0.6);
	}
}

/* until a card is hovered its store badge is hidden and the rest sits centred;
on hover everything slides up to make room and the badge rises in */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.dl-card-top {
		translate: 0 2.125rem;
		transition: translate 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
	}

	.dl-badge {
		opacity: 0;
		translate: 0 1.5rem;
		transition: opacity 0.35s ease, translate 0.5s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
	}

	.dl-card:hover .dl-card-top,
	.dl-card:focus-visible .dl-card-top {
		translate: none;
	}

	.dl-card:hover .dl-badge,
	.dl-card:focus-visible .dl-badge {
		opacity: 1;
		translate: none;
		transition-delay: 0.08s;
	}
}

/* narrow cards (two columns on small tablets, four on smaller laptops): store names stay on one line */
@media (min-width: 576px) and (max-width: 767.98px),
(min-width: 1200px) and (max-width: 1399.98px) {
	.dl-card-body {
		padding-left: 1rem;
		padding-right: 1rem;
	}

	.dl-name {
		font-size: 1.375rem;
	}

	.dl-device {
		font-size: 0.9375rem;
	}
}

@media (max-width: 575.98px) {
	.dl-card-body {
		padding: 2rem 1.25rem 1.75rem;
	}

	.dl-icon {
		width: 80px;
		height: 80px;
		border-radius: 24px;
	}

	.dl-icon svg {
		width: 38px;
		height: 38px;
	}
}

@media (prefers-reduced-motion: reduce) {

	.dl-card,
	.dl-card::before,
	.dl-icon {
		transition: none;
	}

	.dl-card:hover,
	.dl-card:focus-visible,
	.dl-card:hover .dl-icon,
	.dl-card:focus-visible .dl-icon {
		transform: none;
	}
}

/* ---------- ProjectBoard pricing page · heading ---------- */
/* soft blue and amber glows, with a dot grid behind the heading */
.pr-hero {
	background: radial-gradient(640px circle at 6% 10%, rgba(var(--brand-rgb), 0.08), transparent 70%), radial-gradient(560px circle at 96% 70%, rgba(242, 169, 59, 0.12), transparent 70%), linear-gradient(180deg, #FFFFFF 0%, var(--brand-wash) 100%);
}

.pr-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(var(--brand-dots) 1.3px, transparent 1.3px);
	background-size: 24px 24px;
	-webkit-mask-image: radial-gradient(ellipse 55% 40% at 50% 12%, #000 0%, transparent 100%);
	mask-image: radial-gradient(ellipse 55% 40% at 50% 12%, #000 0%, transparent 100%);
	pointer-events: none;
}

.pr-head {
	max-width: 760px;
}

.pr-hero .pb-mark {
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

@media (prefers-reduced-motion: no-preference) {
	.pr-hero .pb-mark {
		animation: ov-mark 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.6s both;
	}
}

/* ---------- ProjectBoard pricing page · plan cards ---------- */
/* cards come in one after another; then each price springs in and the feature list ticks in line by line */
@media (min-width: 992px) {
	.pr-grid>.reveal:nth-child(2) {
		--reveal-delay: 0.1s;
	}

	.pr-grid>.reveal:nth-child(3) {
		--reveal-delay: 0.2s;
	}
}

.pr-card {
	--bs-card-border-color: var(--brand-hairline);
	--bs-card-border-radius: 28px;
	--mx: 50%;
	--my: 0%;
	height: 100%;
	box-shadow: 0 1px 2px rgba(11, 18, 32, 0.04), 0 24px 48px -36px rgba(11, 18, 32, 0.35);
	transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.45s ease;
}

/* soft light that follows the pointer (--mx/--my are set in main.js) */
.pr-card::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: radial-gradient(320px circle at var(--mx) var(--my), rgba(var(--brand-rgb), 0.08), transparent 70%);
	opacity: 0;
	transition: opacity 0.35s ease;
	pointer-events: none;
}

.pr-card>.card-body {
	position: relative;
	z-index: 1;
}

.pr-icon {
	width: 56px;
	height: 56px;
	border-radius: 18px;
	color: var(--brand);
	background: var(--brand-subtle);
	transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.pr-icon svg {
	width: 28px;
	height: 28px;
}

.pr-icon-gold {
	color: #A25F00;
	background: #FFF1D6;
}

.pr-price {
	height: 3.5rem;
}

.pr-amount {
	font-family: var(--fp-display);
	font-size: 3.5rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.05em;
	transform-origin: left bottom;
	transition: scale 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--reveal-delay, 0s) + 0.25s), opacity 0.4s ease calc(var(--reveal-delay, 0s) + 0.25s);
}

.pr-amount-text {
	font-size: 2.5rem;
}

@media (min-width: 992px) and (max-width: 1399.98px) {
	.pr-amount-text {
		font-size: 2.25rem;
	}
}

.pr-cur {
	display: inline-block;
	margin-right: 2px;
	font-size: 1.75rem;
	vertical-align: top;
	translate: 0 0.3rem;
}

.pr-per {
	padding-bottom: 0.35rem;
	font-size: 0.9375rem;
	color: var(--bs-secondary-color);
}

.reveal-ready .pr-grid>.reveal:not(.is-visible) .pr-amount {
	scale: 0.6;
	opacity: 0;
}

.pr-cta svg {
	transition: transform 0.25s ease;
}

.pr-cta:hover svg {
	transform: translateX(4px);
}

.pr-rule {
	color: var(--brand-line);
	opacity: 1;
}

.pr-list {
	font-size: 0.9375rem;
	line-height: 1.45;
}

.pr-list li {
	transition: opacity 0.45s ease calc(var(--reveal-delay, 0s) + 0.35s + var(--i, 0) * 0.045s), translate 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) calc(var(--reveal-delay, 0s) + 0.35s + var(--i, 0) * 0.045s);
}

.pr-list li:nth-child(2) {
	--i: 1;
}

.pr-list li:nth-child(3) {
	--i: 2;
}

.pr-list li:nth-child(4) {
	--i: 3;
}

.pr-list li:nth-child(5) {
	--i: 4;
}

.pr-list li:nth-child(6) {
	--i: 5;
}

.pr-list li:nth-child(7) {
	--i: 6;
}

.pr-list li:nth-child(8) {
	--i: 7;
}

.pr-list li:nth-child(9) {
	--i: 8;
}

.pr-list li:nth-child(10) {
	--i: 9;
}

.pr-list li:nth-child(11) {
	--i: 10;
}

.reveal-ready .pr-grid>.reveal:not(.is-visible) .pr-list li {
	opacity: 0;
	translate: -10px 0;
}

.pr-tick {
	width: 22px;
	height: 22px;
	margin-top: 1px;
	color: var(--brand);
	background: var(--brand-border);
}

.pr-off {
	color: #8A93A5;
}

.pr-off .pr-tick {
	color: #8A93A5;
	background: #EEF1F5;
}

.pr-note {
	line-height: 1.6;
}

/* Pro: deep-blue card, a little taller on desktop, with a light running round its border and a shimmering flag */
@property --pr-angle {
	syntax: "<angle>";
	inherits: false;
	initial-value: 0deg;
}

.pr-card-pro {
	--bs-card-bg: var(--brand);
	--eyebrow-color: #F6B955;
	background-image: radial-gradient(120% 90% at 100% 0%, var(--brand-light) 0%, var(--brand) 55%, var(--brand-dark) 100%);
	box-shadow: 0 40px 80px -40px rgba(var(--brand-dark-rgb), 0.8);
}

.pr-card-pro::before {
	content: "";
	position: absolute;
	inset: -2px;
	padding: 2px;
	border-radius: 30px;
	background: conic-gradient(from var(--pr-angle), rgba(242, 169, 59, 0) 0deg, #F2A93B 70deg, #FFFFFF 100deg, rgba(242, 169, 59, 0) 160deg, rgba(242, 169, 59, 0) 360deg);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
}

.pr-card-pro::after {
	background: radial-gradient(320px circle at var(--mx) var(--my), rgba(255, 255, 255, 0.14), transparent 70%);
}

.pr-card-pro .pr-icon {
	color: #0B1220;
	background: #F2A93B;
}

.pr-card-pro .pr-per {
	color: rgba(255, 255, 255, 0.7);
}

.pr-card-pro .pr-rule {
	color: rgba(255, 255, 255, 0.2);
}

.pr-card-pro .pr-list {
	color: rgba(255, 255, 255, 0.88);
}

.pr-card-pro .pr-tick {
	color: #0B1220;
	background: #F2A93B;
}

.pr-cta-pro {
	--bs-btn-color: var(--brand);
	--bs-btn-hover-color: var(--brand-dark);
	box-shadow: 0 18px 36px -18px rgba(0, 0, 0, 0.6);
}

.pr-flag {
	z-index: 2;
	top: 0;
	left: 50%;
	padding: 0.5rem 0.9rem;
	font-family: var(--fp-mono);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #0B1220;
	background: linear-gradient(110deg, #F2A93B 0%, #F2A93B 40%, #FFE3B3 50%, #F2A93B 60%, #F2A93B 100%);
	background-size: 250% 100%;
	background-position: 100% 0;
	box-shadow: 0 10px 24px -10px rgba(242, 169, 59, 0.85);
	transform: translate(-50%, -50%);
}

@media (min-width: 992px) {
	.pr-grid {
		padding-top: 1rem;
	}

	.pr-card-pro {
		height: calc(100% + 2rem);
		margin-top: -1rem;
	}
}

@keyframes pr-spin {
	to {
		--pr-angle: 360deg;
	}
}

@keyframes pr-shimmer {

	0%,
	30% {
		background-position: 100% 0;
	}

	70%,
	100% {
		background-position: 0% 0;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.pr-card-pro::before {
		animation: pr-spin 5s linear infinite;
	}

	.pr-flag {
		animation: pr-shimmer 3.2s ease-in-out infinite;
	}
}

/* hover (mouse and trackpad only): the card lifts, the light follows the pointer and the plan icon tilts */
@media (hover: hover) {
	.pr-card:hover {
		transform: translateY(-8px);
		box-shadow: 0 40px 70px -36px rgba(var(--brand-dark-rgb), 0.55);
	}

	.pr-card-pro:hover {
		box-shadow: 0 48px 90px -40px rgba(var(--brand-dark-rgb), 0.9);
	}

	.pr-card:hover::after {
		opacity: 1;
	}

	.pr-card:hover .pr-icon {
		transform: translateY(-4px) rotate(-8deg) scale(1.05);
	}
}

@media (max-width: 575.98px) {
	.pr-amount {
		font-size: 3rem;
	}

	.pr-amount-text {
		font-size: 2.25rem;
	}
}

@media (prefers-reduced-motion: reduce) {

	.pr-card,
	.pr-icon {
		transition: none;
	}

	.pr-card:hover,
	.pr-card:hover .pr-icon {
		transform: none;
	}
}

/* ---------- ProjectBoard support page · heading and help links ---------- */
/* light band with soft glows; a dot grid sits behind the form */
.sp-hero {
	background: radial-gradient(640px circle at 4% 8%, rgba(var(--brand-rgb), 0.08), transparent 70%), radial-gradient(600px circle at 98% 90%, rgba(242, 169, 59, 0.12), transparent 70%), linear-gradient(180deg, #FFFFFF 0%, var(--brand-wash) 100%);
}

.sp-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(var(--brand-dots) 1.3px, transparent 1.3px);
	background-size: 24px 24px;
	-webkit-mask-image: radial-gradient(50% 60% at 75% 40%, #000 0%, transparent 100%);
	mask-image: radial-gradient(50% 60% at 75% 40%, #000 0%, transparent 100%);
	pointer-events: none;
}

.sp-hero .pb-mark {
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

@media (prefers-reduced-motion: no-preference) {
	.sp-hero .pb-mark {
		animation: ov-mark 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.6s both;
	}
}

.sp-links>.reveal:nth-child(2) {
	--reveal-delay: 0.08s;
}

.sp-links>.reveal:nth-child(3) {
	--reveal-delay: 0.16s;
}

.sp-link {
	padding: 14px 18px 14px 14px;
	border-radius: 18px;
	color: var(--bs-body-color);
	background: rgba(255, 255, 255, 0.75);
	border: 1px solid var(--brand-hairline);
	transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}

.sp-link-icon {
	width: 46px;
	height: 46px;
	border-radius: 14px;
	color: var(--brand);
	background: var(--brand-subtle);
	transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.sp-link-icon svg {
	width: 22px;
	height: 22px;
}

.sp-link-arrow {
	color: var(--brand);
	opacity: 0.35;
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.sp-link:hover {
	color: var(--bs-body-color);
	background: #FFFFFF;
	border-color: var(--brand-border-hover);
	box-shadow: 0 24px 44px -30px rgba(var(--brand-dark-rgb), 0.5);
	transform: translateX(6px);
}

.sp-link:hover .sp-link-icon {
	color: #FFFFFF;
	background: var(--brand);
	transform: rotate(-6deg);
}

.sp-link:hover .sp-link-arrow {
	opacity: 1;
	transform: translateX(4px);
}

.sp-link:focus-visible {
	outline: 3px solid #F2A93B;
	outline-offset: 3px;
}

/* ---------- ProjectBoard support page · form ---------- */
/* white card with a band of colour flowing along its top; the fields come in one after another */
.sp-card {
	--bs-card-border-radius: 28px;
	box-shadow: 0 1px 2px rgba(11, 18, 32, 0.04), 0 40px 80px -48px rgba(var(--brand-dark-rgb), 0.5);
}

.sp-card::before {
	content: "";
	position: absolute;
	left: 28px;
	right: 28px;
	top: 0;
	height: 4px;
	border-radius: 0 0 4px 4px;
	background: linear-gradient(90deg, var(--brand), var(--brand-bright), #F2A93B, var(--brand)) repeat-x;
	background-size: 200% 100%;
}

@keyframes sp-flow {
	to {
		background-position: 200% 0;
	}
}

.sp-form>div {
	transition: opacity 0.5s ease calc(0.25s + var(--i, 0) * 0.06s), translate 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) calc(0.25s + var(--i, 0) * 0.06s);
}

.sp-form>div:nth-child(2) {
	--i: 1;
}

.sp-form>div:nth-child(3) {
	--i: 2;
}

.sp-form>div:nth-child(4) {
	--i: 3;
}

.sp-form>div:nth-child(5) {
	--i: 4;
}

.sp-form>div:nth-child(6) {
	--i: 5;
}

.sp-form>div:nth-child(7) {
	--i: 6;
}

.sp-form>div:nth-child(8) {
	--i: 7;
}

.sp-form>div:nth-child(9) {
	--i: 8;
}

.reveal-ready .sp-card:not(.is-visible) .sp-form>div {
	opacity: 0;
	translate: 0 14px;
}

/* fields: soft grey until focused, then white with a blue ring */
.sp-form .form-control,
.sp-form .form-select {
	--bs-border-color: var(--brand-line);
	border-radius: 14px;
	background-color: var(--brand-field);
	transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.sp-form .form-control:focus,
.sp-form .form-select:focus {
	background-color: #FFFFFF;
	border-color: var(--brand-mid);
	box-shadow: 0 0 0 4px rgba(var(--brand-rgb), 0.12);
}

.sp-form .form-floating>label {
	color: #5B6478;
}

.sp-form .form-floating>.form-control:focus~label,
.sp-form .form-floating>.form-select:focus~label {
	color: var(--brand);
}

.sp-form .form-floating>textarea:not(:focus)~label::after {
	background-color: var(--brand-field);
}

.sp-form textarea.form-control {
	height: 168px;
	min-height: 120px;
	resize: vertical;
}

/* a missing or wrong field gives a small shake when the form is sent */
@keyframes sp-shake {

	0%,
	100% {
		translate: 0 0;
	}

	20%,
	60% {
		translate: -6px 0;
	}

	40%,
	80% {
		translate: 6px 0;
	}
}

/* sending: the paper plane flies off the button */
@keyframes sp-fly {
	0% {
		transform: none;
		opacity: 1;
	}

	100% {
		transform: translate(26px, -26px) rotate(8deg);
		opacity: 0;
	}
}

/* sent: the circle and check draw in */
.sp-done-check {
	width: 84px;
	height: 84px;
}

.sp-done-check circle {
	fill: var(--brand-subtle);
	stroke: var(--brand);
	stroke-width: 3;
	stroke-dasharray: 227;
	stroke-dashoffset: 227;
}

.sp-done-check path {
	fill: none;
	stroke: var(--brand);
	stroke-width: 5;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 50;
	stroke-dashoffset: 50;
}

@keyframes sp-draw {
	to {
		stroke-dashoffset: 0;
	}
}

.sp-done p {
	max-width: 460px;
}

@media (prefers-reduced-motion: no-preference) {
	.sp-card::before {
		animation: sp-flow 6s linear infinite;
	}

	.sp-form.was-validated .form-floating:has(:invalid) {
		animation: sp-shake 0.4s ease;
	}

	.sp-form.is-sent .sp-submit svg {
		animation: sp-fly 0.6s ease-in forwards;
	}

	.sp-done-check circle {
		animation: sp-draw 0.8s ease forwards;
	}

	.sp-done-check path {
		animation: sp-draw 0.5s ease 0.6s forwards;
	}
}

@media (prefers-reduced-motion: reduce) {

	.sp-link,
	.sp-link-icon {
		transition: none;
	}

	.sp-link:hover,
	.sp-link:hover .sp-link-icon {
		transform: none;
	}

	.sp-done-check circle,
	.sp-done-check path {
		stroke-dashoffset: 0;
	}
}

/* ---------- ConnectBoard · closing call to action (every page) ---------- */
/* deep navy card with a green glow, so it stands apart from the green footer below */
.cb-cta {
	border-radius: 32px;
	background: radial-gradient(70% 120% at 100% 0%, rgba(var(--brand-bright-rgb), 0.35) 0%, rgba(var(--brand-bright-rgb), 0) 60%), linear-gradient(140deg, #0B1220 0%, var(--brand-night) 60%, var(--brand-deep) 100%);
	box-shadow: 0 40px 80px -48px rgba(11, 18, 32, 0.8);
}

.cb-cta::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(255, 255, 255, 0.12) 1.2px, transparent 1.2px);
	background-size: 24px 24px;
	-webkit-mask-image: linear-gradient(90deg, transparent 30%, #000 100%);
	mask-image: linear-gradient(90deg, transparent 30%, #000 100%);
	pointer-events: none;
}

.cb-cta-mark {
	right: -50px;
	bottom: -70px;
	width: 300px;
	height: 300px;
	opacity: 0.08;
}

.cb-cta-btn {
	--bs-btn-color: var(--brand);
	--bs-btn-hover-color: var(--brand-dark);
	box-shadow: 0 18px 36px -18px rgba(0, 0, 0, 0.6);
}

@media (prefers-reduced-motion: no-preference) {
	.cb-cta-mark {
		animation: ov-drift 12s ease-in-out infinite;
	}
}

/* ---------- ConnectBoard · page heroes ---------- */
/* soft mint light with a dot grid; the heading rises in and the highlighter sweeps in */
.cb-hero {
	background: radial-gradient(720px circle at 0% 0%, rgba(var(--brand-bright-rgb), 0.1), transparent 70%), radial-gradient(640px circle at 100% 100%, rgba(var(--brand-bright-rgb), 0.12), transparent 70%), linear-gradient(180deg, #FFFFFF 0%, var(--brand-wash) 100%);
}

.cb-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(var(--brand-dots) 1.3px, transparent 1.3px);
	background-size: 24px 24px;
	-webkit-mask-image: radial-gradient(55% 70% at 85% 40%, #000 0%, transparent 100%);
	mask-image: radial-gradient(55% 70% at 85% 40%, #000 0%, transparent 100%);
	pointer-events: none;
}

.cb-hero-center::before {
	-webkit-mask-image: radial-gradient(ellipse 55% 45% at 50% 15%, #000 0%, transparent 100%);
	mask-image: radial-gradient(ellipse 55% 45% at 50% 15%, #000 0%, transparent 100%);
}

.cb-head {
	max-width: 780px;
}

.cb-hero .pb-mark {
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

/* home: the inbox banner with a campaign card floating over it */
.cb-hero-art {
	max-width: 720px;
	margin-left: auto;
}

.cb-float {
	z-index: 1;
	left: 2%;
	bottom: 4%;
	max-width: 260px;
	padding: 12px 16px 12px 12px;
	border-radius: 18px;
	font-size: 0.875rem;
	box-shadow: 0 26px 52px -24px rgba(11, 18, 32, 0.5);
}

.cb-float-icon {
	width: 42px;
	height: 42px;
	padding: 10px;
	border-radius: 14px;
	color: #FFFFFF;
	background: var(--brand);
}

.cb-float-bar {
	height: 6px;
	border-radius: 6px;
	background: var(--brand-subtle);
}

.cb-float-bar span {
	display: block;
	width: 86%;
	height: 100%;
	border-radius: inherit;
	background: var(--brand-bright);
	transform-origin: left;
}

@media (max-width: 575.98px) {
	.cb-float {
		max-width: 200px;
		padding: 8px 12px 8px 8px;
		font-size: 0.75rem;
	}

	.cb-float-icon {
		width: 32px;
		height: 32px;
		padding: 7px;
		border-radius: 10px;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.cb-hero .pb-mark {
		animation: ov-mark 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.6s both;
	}

	.cb-hero-art {
		animation: ov-rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) 0.15s both;
	}

	.cb-float {
		animation: ov-pop 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) 0.8s both, fx-bob 6s ease-in-out 1.4s infinite;
	}

	.cb-float-bar span {
		animation: cb-grow-x 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) 1.1s both;
	}
}

@keyframes cb-grow-x {
	from {
		transform: scaleX(0);
	}

	to {
		transform: none;
	}
}

/* ---------- ConnectBoard · product screens (decorative, built in HTML) ---------- */
/* each screen sits on a mint panel; inside, chat bubbles, cards and bars come in one after another as the panel scrolls into view */
.cb-shot {
	position: relative;
	padding: clamp(14px, 3.5vw, 36px);
	border-radius: 32px;
	background: radial-gradient(120% 100% at 100% 0%, rgba(var(--brand-bright-rgb), 0.16), transparent 60%), var(--brand-wash);
	border: 1px solid var(--brand-hairline);
}

.cb-shot::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background-image: radial-gradient(var(--brand-dots) 1.2px, transparent 1.2px);
	background-size: 22px 22px;
	-webkit-mask-image: linear-gradient(160deg, #000 0%, transparent 55%);
	mask-image: linear-gradient(160deg, #000 0%, transparent 55%);
	pointer-events: none;
}

.bg-body-tertiary .cb-shot {
	background-color: #FFFFFF;
}

.cb-float-icon svg,
.cb-node-icon svg,
.cb-orbit-chip>span svg,
.cb-chain-item>span svg {
	width: 100%;
	height: 100%;
}

.cb-min0 {
	min-width: 0;
}

.cb-chat-sm {
	min-height: 0;
}

.cb-app {
	position: relative;
	overflow: hidden;
	font-size: 0.8125rem;
	line-height: 1.4;
	color: #0B1220;
	background: #FFFFFF;
	border: 1px solid var(--brand-hairline);
	border-radius: 20px;
	box-shadow: 0 30px 60px -36px rgba(11, 18, 32, 0.45);
}

.cb-app-bar {
	padding: 12px 16px;
	font-weight: 600;
	border-bottom: 1px solid var(--brand-hairline);
}

.cb-app-body {
	padding: 16px;
}

.cb-dots i {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--brand-line);
}

.cb-muted {
	color: #5B6478;
}

.cb-tiny {
	font-size: 0.6875rem;
}

.cb-avatar {
	width: 32px;
	height: 32px;
	font-size: 0.6875rem;
	font-weight: 700;
	color: #FFFFFF;
	background: #1E3A8A;
}

.cb-avatar-lg {
	width: 52px;
	height: 52px;
	font-size: 1rem;
}

.cb-t1 {
	background: #B42318;
}

.cb-t2 {
	background: #1E3A8A;
}

.cb-t3 {
	background: #8F3F97;
}

.cb-t4 {
	background: var(--brand);
}

.cb-chip {
	padding: 2px 9px;
	font-size: 0.6875rem;
	font-weight: 600;
	line-height: 1.6;
	white-space: nowrap;
	border-radius: 999px;
}

.cb-chip-new {
	color: #1E3A8A;
	background: #E5EDFB;
}

.cb-chip-follow {
	color: #8A4B00;
	background: #FFF1D6;
}

.cb-chip-done {
	color: var(--brand-dark);
	background: var(--brand-subtle);
}

.cb-chip-high {
	color: #B42318;
	background: #FDECEA;
}

.cb-chip-wait {
	color: #4A5367;
	background: #EEF1F5;
}

.cb-msg {
	max-width: 82%;
	padding: 8px 12px;
	border-radius: 14px;
	box-shadow: 0 1px 1px rgba(11, 18, 32, 0.06);
}

.cb-in {
	align-self: flex-start;
	background: #FFFFFF;
	border: 1px solid var(--brand-hairline);
	border-top-left-radius: 4px;
}

.cb-out {
	align-self: flex-end;
	background: #DFF5E7;
	border-top-right-radius: 4px;
}

.cb-ai {
	align-self: flex-end;
	background: #FFFFFF;
	border: 1px dashed var(--brand-mid);
	border-top-right-radius: 4px;
}

.cb-typing {
	align-self: flex-start;
	padding: 10px 12px;
	border-radius: 14px;
	background: #FFFFFF;
	border: 1px solid var(--brand-hairline);
}

.cb-typing i {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #8A93A5;
}

@keyframes cb-blink {

	0%,
	60%,
	100% {
		opacity: 0.3;
		translate: 0 0;
	}

	30% {
		opacity: 1;
		translate: 0 -3px;
	}
}

.cb-pop {
	transition: opacity 0.5s ease calc(var(--reveal-delay, 0s) + 0.3s + var(--i, 0) * 0.12s), translate 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) calc(var(--reveal-delay, 0s) + 0.3s + var(--i, 0) * 0.12s);
}

.reveal-ready .reveal:not(.is-visible) .cb-pop {
	opacity: 0;
	translate: 0 12px;
}

.cb-i1 {
	--i: 1;
}

.cb-i2 {
	--i: 2;
}

.cb-i3 {
	--i: 3;
}

.cb-i4 {
	--i: 4;
}

.cb-i5 {
	--i: 5;
}

.cb-i6 {
	--i: 6;
}

@media (prefers-reduced-motion: no-preference) {
	.cb-typing i {
		animation: cb-blink 1.2s ease-in-out infinite;
	}

	.cb-typing i:nth-child(2) {
		animation-delay: 0.15s;
	}

	.cb-typing i:nth-child(3) {
		animation-delay: 0.3s;
	}
}

/* shared inbox: conversation list, chat and customer details */
.cb-inbox {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

.cb-list {
	border-right: 1px solid var(--brand-hairline);
}

.cb-conv {
	padding: 10px 14px;
	border-bottom: 1px solid var(--brand-hairline);
}

.cb-conv.is-on {
	background: var(--brand-subtle);
}

.cb-chat {
	min-height: 260px;
	padding: 14px;
	background: #F6F8F7;
}

.cb-compose {
	padding: 8px 8px 8px 14px;
	border-radius: 999px;
	background: #FFFFFF;
	border: 1px solid var(--brand-hairline);
}

.cb-send {
	width: 30px;
	height: 30px;
	color: #FFFFFF;
	background: var(--brand);
}

.cb-send svg {
	width: 14px;
	height: 14px;
}

.cb-side {
	padding: 14px;
	border-left: 1px solid var(--brand-hairline);
}

@media (min-width: 576px) {
	.cb-inbox {
		grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr);
	}
}

@media (min-width: 1400px) {
	.cb-inbox-3 {
		grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr) minmax(0, 0.8fr);
	}
}

@media (max-width: 575.98px) {
	.cb-list {
		display: none;
	}
}

/* status board */
.cb-board {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

.cb-col {
	padding: 10px;
	border-radius: 14px;
	background: #F6F8F7;
}

.cb-col-head {
	margin-bottom: 8px;
	font-weight: 600;
}

.cb-col-head::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--dot, var(--brand));
}

.cb-col-new {
	--dot: #3B6FD8;
}

.cb-col-prog {
	--dot: #F2A93B;
}

.cb-col-wait {
	--dot: #8A93A5;
}

.cb-col-done {
	--dot: var(--brand-bright);
}

.cb-card {
	padding: 9px 10px;
	border-radius: 10px;
	background: #FFFFFF;
	border: 1px solid var(--brand-hairline);
	box-shadow: 0 6px 14px -12px rgba(11, 18, 32, 0.5);
}

.cb-card+.cb-card {
	margin-top: 8px;
}

@media (min-width: 768px) {
	.cb-board {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* contact profile with tags, a note and an activity timeline */
.cb-tag {
	padding: 3px 10px;
	font-size: 0.6875rem;
	font-weight: 600;
	color: var(--brand-dark);
	background: var(--brand-subtle);
	border-radius: 999px;
}

.cb-note {
	padding: 10px 12px;
	color: #6B4A00;
	background: #FFF6E3;
	border: 1px dashed #F2A93B;
	border-radius: 12px;
}

.cb-timeline {
	padding-left: 16px;
	border-left: 2px solid var(--brand-line);
}

.cb-timeline li {
	position: relative;
}

.cb-timeline li::before {
	content: "";
	position: absolute;
	left: -22px;
	top: 4px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #FFFFFF;
	border: 2px solid var(--brand);
}

.cb-field {
	padding: 8px 12px;
	border-radius: 10px;
	background: #F6F8F7;
}

/* campaigns: builder fields, a template preview and result tiles */
.cb-stat {
	padding: 10px 12px;
	border-radius: 12px;
	background: #F6F8F7;
}

.cb-stat b {
	display: block;
	font-family: var(--fp-display);
	font-size: 1.25rem;
	letter-spacing: -0.03em;
}

.cb-template {
	padding: 12px;
	border-radius: 14px;
	background: #DFF5E7;
}

.cb-template-label {
	font-family: var(--fp-mono);
	font-size: 0.625rem;
	letter-spacing: 0.08em;
	color: var(--brand-dark);
}

.cb-progress {
	height: 6px;
	border-radius: 6px;
	background: var(--brand-subtle);
}

.cb-progress span {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: var(--brand-bright);
	transform-origin: left;
	transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) calc(var(--reveal-delay, 0s) + 0.6s);
}

.cb-w97 {
	width: 97%;
}

.cb-w72 {
	width: 72%;
}

.cb-w54 {
	width: 54%;
}

.cb-w26 {
	width: 26%;
}

.reveal-ready .reveal:not(.is-visible) .cb-progress span {
	transform: scaleX(0);
}

/* automations: a trigger, a step and an AI-suggested reply joined by a moving line */
.cb-node {
	padding: 10px 12px;
	border-radius: 14px;
	background: #FFFFFF;
	border: 1px solid var(--brand-hairline);
	box-shadow: 0 10px 20px -18px rgba(11, 18, 32, 0.6);
}

.cb-node-icon {
	width: 30px;
	height: 30px;
	padding: 6px;
	border-radius: 9px;
	color: var(--brand);
	background: var(--brand-subtle);
}

.cb-node-icon-amber {
	color: #8A4B00;
	background: #FFF1D6;
}

.cb-link {
	width: 2px;
	height: 22px;
	margin-left: 26px;
	background: repeating-linear-gradient(180deg, var(--brand-mid) 0 5px, transparent 5px 9px);
	background-size: 2px 18px;
}

@keyframes cb-flow-y {
	to {
		background-position: 0 18px;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.cb-link {
		animation: cb-flow-y 0.9s linear infinite;
	}
}

/* reminders and priorities */
.cb-remind {
	padding: 10px 12px;
	border-radius: 12px;
	border: 1px solid var(--brand-hairline);
}

.cb-time {
	width: 46px;
	padding: 4px 0;
	font-weight: 700;
	text-align: center;
	color: var(--brand-dark);
	background: var(--brand-subtle);
	border-radius: 10px;
}

.cb-flag {
	width: 8px;
	align-self: stretch;
	border-radius: 4px;
	background: var(--flag, #8A93A5);
}

.cb-flag-high {
	--flag: #D92D20;
}

.cb-flag-mid {
	--flag: #F2A93B;
}

.cb-flag-low {
	--flag: var(--brand-bright);
}

/* team roles and permission switches */
.cb-member {
	padding: 10px 0;
	border-bottom: 1px solid var(--brand-hairline);
}

.cb-role {
	padding: 3px 10px;
	font-size: 0.6875rem;
	font-weight: 600;
	border: 1px solid var(--brand-line);
	border-radius: 999px;
}

.cb-toggle {
	width: 34px;
	height: 20px;
	border-radius: 999px;
	background: #D5D9E0;
	position: relative;
	flex-shrink: 0;
}

.cb-toggle::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: #FFFFFF;
	transition: transform 0.3s ease;
}

.cb-toggle-on {
	background: var(--brand-bright);
}

.cb-toggle-on::after {
	transform: translateX(14px);
}

/* commerce: catalogue items and an invoice */
.cb-product {
	padding: 8px;
	border-radius: 14px;
	border: 1px solid var(--brand-hairline);
}

.cb-product-img {
	aspect-ratio: 4 / 3;
	border-radius: 10px;
	background: linear-gradient(135deg, var(--brand-subtle), var(--brand-border));
	color: var(--brand);
}

.cb-product-img svg {
	width: 34%;
	height: auto;
}

.cb-product-img-2 {
	background: linear-gradient(135deg, #FFF1D6, #FDE3B0);
	color: #A25F00;
}

.cb-invoice {
	padding: 14px;
	border-radius: 14px;
	background: #F6F8F7;
}

.cb-invoice-total {
	border-top: 1px dashed #C5CBD5;
}

/* reporting: headline numbers and a bar chart that grows in */
.cb-kpi {
	padding: 10px 12px;
	border-radius: 12px;
	background: #F6F8F7;
}

.cb-kpi b {
	display: block;
	font-family: var(--fp-display);
	font-size: 1.25rem;
	letter-spacing: -0.03em;
}

.cb-up {
	color: var(--brand);
	font-weight: 600;
}

.cb-bars {
	height: 120px;
	gap: 8px;
}

.cb-bars span {
	flex: 1;
	border-radius: 6px 6px 3px 3px;
	background: var(--brand-border);
	transform-origin: bottom;
	transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) calc(var(--reveal-delay, 0s) + 0.4s + var(--i, 0) * 0.06s);
}

.cb-bars span:nth-child(1) {
	--i: 0;
	height: 42%;
}

.cb-bars span:nth-child(2) {
	--i: 1;
	height: 58%;
}

.cb-bars span:nth-child(3) {
	--i: 2;
	height: 50%;
}

.cb-bars span:nth-child(4) {
	--i: 3;
	height: 74%;
	background: var(--brand-mid);
}

.cb-bars span:nth-child(5) {
	--i: 4;
	height: 66%;
	background: var(--brand-mid);
}

.cb-bars span:nth-child(6) {
	--i: 5;
	height: 88%;
	background: var(--brand);
}

.cb-bars span:nth-child(7) {
	--i: 6;
	height: 100%;
	background: #F2A93B;
}

.reveal-ready .reveal:not(.is-visible) .cb-bars span {
	transform: scaleY(0);
}

/* ---------- ConnectBoard features page ---------- */
/* one row per feature: copy on one side, its screen on the other, alternating */
.cb-feature+.cb-feature {
	border-top: 1px solid var(--brand-hairline);
}

.cb-feature-icon {
	width: 52px;
	height: 52px;
	border-radius: 16px;
	color: #FFFFFF;
	background: var(--brand);
	box-shadow: 0 14px 28px -16px rgba(var(--brand-rgb), 0.9);
}

.cb-feature-icon svg {
	width: 26px;
	height: 26px;
}

.cb-feature-num {
	font-family: var(--fp-mono);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	color: var(--brand-text);
}

.cb-feature-num small {
	color: #8A93A5;
	font-size: inherit;
}

.cb-lede {
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--brand-dark);
}

.cb-points li>span {
	width: 22px;
	height: 22px;
	margin-top: 1px;
	color: var(--brand);
	background: var(--brand-border);
}

.cb-jump {
	color: var(--bs-body-color);
}

.cb-jump:hover {
	color: var(--brand);
}

.cb-jump span {
	width: 34px;
	height: 34px;
	border-radius: 10px;
	color: var(--brand);
	background: var(--brand-subtle);
	transition: background-color 0.2s ease, color 0.2s ease;
}

.cb-jump svg {
	width: 18px;
	height: 18px;
}

.cb-jump:hover span {
	color: #FFFFFF;
	background: var(--brand);
}

/* ---------- ConnectBoard overview page ---------- */
/* hero: everything orbits one ConnectBoard hub */
/* the labels sit on the ring and turn with it, so the ring leaves room for half a label on each side */
.cb-orbit {
	width: min(460px, 100% - 8rem);
	aspect-ratio: 1;
	margin-block: 1.25rem;
}

.cb-orbit-ring {
	inset: 0;
	border: 1px dashed var(--brand-mid);
}

.cb-orbit-ring-2 {
	inset: 18%;
	border: 1px solid var(--brand-line);
	background: rgba(255, 255, 255, 0.6);
}

.cb-orbit-glow {
	inset: 30%;
	background: radial-gradient(circle, rgba(var(--brand-bright-rgb), 0.35) 0%, rgba(var(--brand-bright-rgb), 0) 70%);
}

.cb-orbit-pulse {
	inset: 36%;
	border: 2px solid rgba(var(--brand-bright-rgb), 0.45);
	opacity: 0;
}

.cb-orbit-core {
	left: 50%;
	top: 50%;
	width: 26%;
	aspect-ratio: 1;
	padding: 6%;
	border-radius: 28%;
	transform: translate(-50%, -50%);
	background: radial-gradient(120% 90% at 100% 0%, var(--brand-light) 0%, var(--brand) 55%, var(--brand-darker) 100%);
	box-shadow: 0 30px 50px -24px rgba(var(--brand-rgb), 0.8);
}

.cb-orbit-spin {
	inset: 0;
}

.cb-orbit-chip {
	padding: 8px 12px 8px 8px;
	font-size: 0.8125rem;
	font-weight: 600;
	white-space: nowrap;
	background: #FFFFFF;
	border: 1px solid var(--brand-hairline);
	border-radius: 999px;
	box-shadow: 0 16px 30px -18px rgba(11, 18, 32, 0.5);
	translate: -50% -50%;
}

.cb-orbit-chip>span {
	width: 28px;
	height: 28px;
	padding: 6px;
	color: #FFFFFF;
	background: var(--brand);
}

.cb-orbit-chip:nth-child(1) {
	left: 50%;
	top: 0;
}

.cb-orbit-chip:nth-child(2) {
	left: 97.5%;
	top: 34.5%;
}

.cb-orbit-chip:nth-child(3) {
	left: 79.4%;
	top: 90.5%;
}

.cb-orbit-chip:nth-child(4) {
	left: 20.6%;
	top: 90.5%;
}

.cb-orbit-chip:nth-child(5) {
	left: 2.5%;
	top: 34.5%;
}

@media (max-width: 575.98px) {
	.cb-orbit-chip {
		padding: 5px 9px 5px 5px;
		font-size: 0.6875rem;
	}

	.cb-orbit-chip>span {
		width: 22px;
		height: 22px;
		padding: 4px;
	}
}

@keyframes cb-spin {
	to {
		rotate: 360deg;
	}
}

@keyframes cb-spin-back {
	to {
		rotate: -360deg;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.cb-orbit-spin {
		animation: cb-spin 60s linear infinite;
	}

	.cb-orbit-chip {
		animation: cb-spin-back 60s linear infinite;
	}

	.cb-orbit-pulse {
		animation: hub-ripple 3.6s ease-out infinite;
	}

	.cb-orbit-pulse+.cb-orbit-pulse {
		animation-delay: 1.8s;
	}
}

/* how it works: four numbered steps joined by a line that draws in */
/* flow-root keeps the grid's gutter margin inside, so the line lines up with the step circles */
.cb-steps-wrap {
	display: flow-root;
}

.cb-step-num {
	width: 56px;
	height: 56px;
	font-family: var(--fp-display);
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--brand);
	background: #FFFFFF;
	border: 2px solid var(--brand-border);
	box-shadow: 0 0 0 8px var(--brand-wash);
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.cb-step:hover .cb-step-num {
	color: #FFFFFF;
	background: var(--brand);
	border-color: var(--brand);
}

.cb-steps-line {
	top: 28px;
	left: 12.5%;
	right: 12.5%;
	height: 2px;
	background: var(--brand-line);
}

.cb-steps-line span {
	display: block;
	height: 100%;
	background: linear-gradient(90deg, var(--brand), var(--brand-bright));
	transform-origin: left;
	transition: transform 1.4s cubic-bezier(0.2, 0.7, 0.2, 1) 0.3s;
}

.reveal-ready .reveal:not(.is-visible) .cb-steps-line span {
	transform: scaleX(0);
}

@media (min-width: 992px) {
	.cb-steps>.reveal:nth-child(2) {
		--reveal-delay: 0.1s;
	}

	.cb-steps>.reveal:nth-child(3) {
		--reveal-delay: 0.2s;
	}

	.cb-steps>.reveal:nth-child(4) {
		--reveal-delay: 0.3s;
	}
}

/* everything stays connected: a row of linked items with a moving line */
.cb-chain {
	gap: 12px;
}

.cb-chain-item {
	padding: 10px 16px 10px 10px;
	font-weight: 600;
	background: #FFFFFF;
	border: 1px solid var(--brand-hairline);
	border-radius: 999px;
	box-shadow: 0 14px 28px -22px rgba(11, 18, 32, 0.6);
	transition: transform 0.3s ease, border-color 0.3s ease;
}

.cb-chain-item:hover {
	transform: translateY(-3px);
	border-color: var(--brand-border-hover);
}

.cb-chain-item>span {
	width: 32px;
	height: 32px;
	padding: 7px;
	color: var(--brand);
	background: var(--brand-subtle);
}

.cb-chain-link {
	width: 28px;
	height: 2px;
	background: repeating-linear-gradient(90deg, var(--brand-mid) 0 5px, transparent 5px 9px);
	background-size: 18px 2px;
}

@keyframes cb-flow-x {
	to {
		background-position: 18px 0;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.cb-chain-link {
		animation: cb-flow-x 0.9s linear infinite;
	}
}

/* ---------- ConnectBoard testimonials page ---------- */
/* customer stories wait for real names: a neutral avatar marks each one */
.cb-person {
	width: 56px;
	height: 56px;
	color: var(--brand);
	background: var(--brand-subtle);
	box-shadow: 0 0 0 3px #FFFFFF;
}

.cb-person svg {
	width: 26px;
	height: 26px;
}

.testimonial-card:hover .cb-person {
	color: #FFFFFF;
	background: rgba(255, 255, 255, 0.16);
}

/* results band: dark, with numbers to fill in once they're confirmed */
.cb-results {
	border-radius: 32px;
	background: radial-gradient(60% 120% at 0% 0%, rgba(var(--brand-bright-rgb), 0.3), transparent 60%), linear-gradient(140deg, #0B1220 0%, var(--brand-night) 60%, var(--brand-deep) 100%);
}

.cb-result {
	padding: 24px;
	border-radius: 22px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.1);
	transition: background-color 0.3s ease, transform 0.3s ease;
}

.cb-result:hover {
	background: rgba(255, 255, 255, 0.09);
	transform: translateY(-4px);
}

.cb-result-num {
	font-family: var(--fp-display);
	font-size: clamp(2rem, 4vw, 2.75rem);
	font-weight: 600;
	letter-spacing: -0.04em;
	color: #F6B955;
}

@media (min-width: 768px) {
	.cb-result-grid>.reveal:nth-child(2) {
		--reveal-delay: 0.08s;
	}

	.cb-result-grid>.reveal:nth-child(3) {
		--reveal-delay: 0.16s;
	}

	.cb-result-grid>.reveal:nth-child(4) {
		--reveal-delay: 0.24s;
	}
}

/* ---------- ConnectBoard access page ---------- */
/* browser first: a browser window and a phone show the same inbox */
.cb-access {
	border-radius: 32px;
	background: #FFFFFF;
	border: 1px solid var(--brand-hairline);
	box-shadow: 0 40px 80px -56px rgba(11, 18, 32, 0.6);
}

.cb-browser-bar {
	padding: 10px 14px;
	background: #F6F8F7;
	border-bottom: 1px solid var(--brand-hairline);
}

.cb-url {
	padding: 4px 12px;
	font-size: 0.75rem;
	background: #FFFFFF;
	border: 1px solid var(--brand-hairline);
	border-radius: 999px;
}

.cb-url svg {
	width: 12px;
	height: 12px;
	color: var(--brand);
}

.cb-phone {
	right: -6px;
	bottom: -18px;
	width: 38%;
	max-width: 190px;
	padding: 8px;
	border-radius: 28px;
	background: #0B1220;
	box-shadow: 0 30px 50px -24px rgba(11, 18, 32, 0.7);
}

.cb-phone-screen {
	padding: 10px 8px;
	border-radius: 21px;
	background: #F6F8F7;
	font-size: 0.6875rem;
}

.cb-phone-screen .cb-msg {
	max-width: 92%;
	padding: 6px 9px;
	border-radius: 11px;
}

@media (prefers-reduced-motion: no-preference) {
	.cb-phone {
		animation: fx-bob 6s ease-in-out infinite;
	}
}

/* native apps aren't out yet: the cards say so instead of linking to a store */
.cb-store-card {
	--bs-card-border-color: var(--brand-hairline);
	--bs-card-border-radius: 24px;
	transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.35s ease;
}

.cb-store-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 28px 50px -32px rgba(var(--brand-dark-rgb), 0.5);
}

.cb-store-icon {
	width: 64px;
	height: 64px;
	border-radius: 20px;
	color: #0B1220;
	background: #FFFFFF;
	box-shadow: 0 0 0 1px var(--brand-hairline), 0 14px 28px -18px rgba(11, 18, 32, 0.45);
}

.cb-store-icon svg {
	width: 30px;
	height: 30px;
}

.cb-soon {
	padding: 4px 10px;
	font-family: var(--fp-mono);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	color: #8A4B00;
	background: #FFF1D6;
	border-radius: 999px;
}

@media (min-width: 768px) {
	.cb-store-grid>.reveal:nth-child(2) {
		--reveal-delay: 0.08s;
	}

	.cb-store-grid>.reveal:nth-child(3) {
		--reveal-delay: 0.16s;
	}

	.cb-store-grid>.reveal:nth-child(4) {
		--reveal-delay: 0.24s;
	}
}

/* ---------- ConnectBoard pricing and support ---------- */
.pr-best {
	line-height: 1.55;
}

/* side by side, the "best for" lines take the same room so the plan buttons line up */
@media (min-width: 992px) {
	.pr-best {
		min-height: 6.2em;
	}
}

@media (min-width: 1400px) {
	.pr-best {
		min-height: 4.65em;
	}
}

.cb-pricing-note {
	max-width: 760px;
	padding: 14px 18px;
	border-radius: 16px;
	background: #FFFFFF;
	border: 1px solid var(--brand-hairline);
}

.cb-pricing-note svg {
	width: 22px;
	height: 22px;
	color: var(--brand);
}

.cb-topic {
	padding: 7px 14px;
	font-size: 0.875rem;
	font-weight: 500;
	background: #FFFFFF;
	border: 1px solid var(--brand-hairline);
	border-radius: 999px;
	transition: border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.cb-topic:hover {
	color: var(--brand);
	border-color: var(--brand-border-hover);
	transform: translateY(-2px);
}

.sp-form .sp-file {
	padding: 0.75rem;
}

/* FAQ: separate rounded questions; the open one turns mint */
.cb-faq {
	--bs-accordion-border-color: var(--brand-hairline);
	--bs-accordion-border-radius: 18px;
	--bs-accordion-inner-border-radius: 17px;
	--bs-accordion-btn-padding-x: 1.5rem;
	--bs-accordion-btn-padding-y: 1.15rem;
	--bs-accordion-body-padding-x: 1.5rem;
	--bs-accordion-active-color: var(--brand-dark);
	--bs-accordion-active-bg: var(--brand-subtle);
	--bs-accordion-btn-focus-box-shadow: 0 0 0 4px rgba(var(--brand-rgb), 0.15);
}

.cb-faq .accordion-item {
	border-radius: 18px;
	overflow: hidden;
}

.cb-faq .accordion-item+.accordion-item {
	margin-top: 12px;
	border-top: var(--bs-accordion-border-width) solid var(--bs-accordion-border-color);
}

.cb-faq .accordion-button {
	font-family: var(--fp-display);
	font-size: 1.0625rem;
	font-weight: 600;
	letter-spacing: -0.02em;
}

.cb-faq-head {
	max-width: 760px;
}

.cb-faq .accordion-item {
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.cb-faq .accordion-item:has(.accordion-collapse.show) {
	border-color: var(--brand-border-hover);
	box-shadow: 0 20px 40px -30px rgba(var(--brand-dark-rgb), 0.55);
}

.cb-faq .accordion-button:hover {
	color: var(--brand);
}

/* ---------- ConnectBoard · extra motion ---------- */
/* reading progress: a green line under the header fills as the page scrolls (browsers with scroll-linked animations) */
@keyframes cb-read {
	from {
		transform: scaleX(0);
	}

	to {
		transform: none;
	}
}

@supports (animation-timeline: scroll()) {
	@media (prefers-reduced-motion: no-preference) {
		.theme-cb .site-header::after {
			content: "";
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			height: 3px;
			background: linear-gradient(90deg, var(--brand), var(--brand-bright));
			transform-origin: left;
			animation: cb-read linear both;
			animation-timeline: scroll(root);
		}
	}
}

/* home hero: a "new message" chip pops in below the inbox and keeps floating */
.cb-float-chip {
	z-index: 1;
	right: 4%;
	bottom: -1%;
	padding: 8px 14px;
	font-size: 0.8125rem;
	font-weight: 600;
	color: #FFFFFF;
	background: #0B1220;
	border-radius: 999px;
	box-shadow: 0 18px 36px -18px rgba(11, 18, 32, 0.7);
}

@media (max-width: 575.98px) {
	.cb-float-chip {
		right: 2%;
		bottom: -3%;
		padding: 6px 10px;
		font-size: 0.6875rem;
	}
}

/* feature and benefit icons spring in after their block, and tilt on hover */
.cb-feature-icon {
	transition: scale 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--reveal-delay, 0s) + 0.2s), opacity 0.4s ease calc(var(--reveal-delay, 0s) + 0.2s), rotate 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.reveal-ready .reveal:not(.is-visible) .cb-feature-icon {
	scale: 0.4;
	opacity: 0;
}

.cb-feature:hover .cb-feature-icon,
.ov-benefit:hover .cb-feature-icon {
	rotate: -8deg;
}

/* how it works: the numbers pop in one after another as the line draws */
.cb-step-num {
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, scale 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) calc(0.3s + var(--i, 0) * 0.3s), opacity 0.4s ease calc(0.3s + var(--i, 0) * 0.3s);
}

.cb-steps>li:nth-child(2) {
	--i: 1;
}

.cb-steps>li:nth-child(3) {
	--i: 2;
}

.cb-steps>li:nth-child(4) {
	--i: 3;
}

.reveal-ready .reveal:not(.is-visible) .cb-step-num {
	scale: 0.5;
	opacity: 0;
}

/* access page: "Coming soon" carries a pulsing dot; app icons float on hover */
.cb-soon {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.cb-soon::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #F2A93B;
}

@keyframes cb-soon-pulse {

	0%,
	100% {
		opacity: 1;
		scale: 1;
	}

	50% {
		opacity: 0.35;
		scale: 0.7;
	}
}

/* closing call to action: a soft green glow drifts behind the copy */
.cb-cta::after {
	content: "";
	position: absolute;
	right: -140px;
	top: -220px;
	width: 460px;
	height: 460px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(var(--brand-bright-rgb), 0.3) 0%, rgba(var(--brand-bright-rgb), 0) 70%);
	pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
	.cb-float-chip {
		animation: ov-pop 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) 1.1s both, fx-bob 7s ease-in-out 1.8s infinite;
	}

	.cb-soon::before {
		animation: cb-soon-pulse 1.6s ease-in-out infinite;
	}

	.cb-store-card:hover .cb-store-icon {
		animation: fx-bob 1.6s ease-in-out infinite;
	}

	.cb-cta::after {
		animation: dl-drift 14s ease-in-out infinite reverse;
	}
}

footer {
	position: relative;
	padding-bottom: 26px;
}

footer .footer-wordmark
{
	display: none;
	position: absolute;
	bottom: 0;
	width: 100%;
	margin: 0 auto;
	left: 0;
	right: 0;
	opacity: 0.2;
}

.btn-outline-primary {
	display: flex;
	align-items: center;
	font-size: 17px;
}

.cb-url svg {
	width: 12px;
	height: 12px;
	color: var(--brand);
}

.cb-phone {
	right: -6px;
	bottom: -18px;
	width: 38%;
	max-width: 190px;
	padding: 8px;
	border-radius: 28px;
	background: #0B1220;
	box-shadow: 0 30px 50px -24px rgba(11, 18, 32, 0.7);
}
.btn-outline-primary {
    display: flex;
    align-items: center;
    font-size: 17px;
    margin: 0 auto;
    text-align: center;
    justify-content: center;
    width: fit-content;
}
.btn-main-nav
{
	margin: 0;
}