/*
 * Features Page
 *
 * Geometry follows the authoritative desktop (1440 px) and mobile Figma
 * frames. Visible copy and uploaded card icons remain owned by ACF; the SVG
 * layers below are presentation-only parts of the three platform diagrams.
 */

.octops-features-section {
	--octops-features-card: var(--octops-panel);
	--octops-features-diagram: var(--octops-panel-emphasized);
	--octops-features-diagram-copy: #fafafa;
	--octops-features-diagram-stroke: var(--octops-primary);
	--octops-features-helper-check: #16a34a;
	--octops-features-overview-icon: var(--octops-primary);
	--octops-features-problem-card-fill: #ffffff;
	--octops-features-rule: var(--octops-border);
	--octops-features-small-copy: var(--octops-text-muted);

	color: var(--octops-text);
	font-family: var(--octops-font-body);
	padding-top: 80px;
}

html[data-theme="dark"] .octops-features-section {
	--octops-features-helper-check: #86efac;
	--octops-features-problem-card-fill: #181f2b;
}

.octops-features-container {
	margin-inline: auto;
	max-width: 1328px;
	padding-inline: 24px;
}

.octops-features-section ul {
	list-style: none;
	margin-block: 0;
	padding-left: 0;
}

.octops-features-intro {
	margin-inline: auto;
	max-width: 1280px;
}

.octops-features-intro__title {
	font-weight: 600;
	letter-spacing: -0.15px;
	margin: 12px 0 0;
	width: 100%;
}

.octops-features-intro__description {
	margin: 12px auto 0;
	max-width: 986px;
	width: 100%;
}

/* Hero */
.octops-features-hero {
	isolation: isolate;
	padding-bottom: 80px;
	padding-top: 48px;
	position: relative;
}

.octops-features-hero__inner {
	align-items: start;
	display: grid;
	gap: clamp(40px, 5.5556vw, 80px);
	grid-template-columns: repeat(2, minmax(0, 1fr));
	position: relative;
	z-index: 1;
}

.octops-features-hero__copy {
	display: flex;
	flex-direction: column;
	min-height: 440px;
	min-width: 0;
}

.octops-features-hero__eyebrow {
	align-self: flex-start;
}

.octops-features-hero__title {
	color: var(--octops-text);
	font-family: var(--octops-font-heading);
	font-size: 48px;
	font-weight: 500;
	letter-spacing: 0;
	line-height: 60px;
	margin: 12px 0 0;
	max-width: 600px;
}

.octops-features-hero__description {
	color: var(--octops-text);
	font-size: 20px;
	font-weight: 400;
	line-height: 30px;
	margin: 12px 0 0;
	max-width: 600px;
}

.octops-features-hero__actions {
	align-items: center;
	align-self: flex-start;
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	margin-top: auto;
	max-width: 100%;
	min-width: 0;
	width: max-content;
}

.octops-features-hero__actions .octops-button {
	box-sizing: border-box;
	flex: 0 1 auto;
	font-family: var(--octops-font-body);
	font-weight: 500;
	height: auto;
	justify-content: center;
	max-width: 100%;
	min-width: 0;
	padding-block: 10px;
	white-space: normal;
	width: max-content;
}

.octops-features-hero__action-label {
	min-width: 0;
	overflow-wrap: anywhere;
}

.octops-features-hero__actions .octops-button--secondary {
	-webkit-backdrop-filter: blur(45.15px);
	backdrop-filter: blur(45.15px);
	background: linear-gradient(90deg, rgba(175, 206, 255, 0.005), rgba(255, 212, 150, 0.005)) padding-box;
}

@media (prefers-reduced-motion: no-preference) {
	.octops-features-hero__actions
		.octops-button--gradient:is(:hover, :focus-visible)
		.octops-button__icon--asterisk {
		animation: octops-button-asterisk-spin 520ms cubic-bezier(0.22, 1, 0.36, 1);
	}

	.octops-features-hero__actions
		.octops-button--secondary:is(:hover, :focus-visible)
		.octops-button__icon--arrow-down {
		animation: octops-button-arrow-nudge 620ms ease-in-out;
	}
}

.octops-features-hero__diagram {
	border: 1px solid transparent;
	border-radius: 16px;
	overflow: hidden;
	width: 100%;
}

.octops-features-pipeline {
	background: var(--octops-features-diagram);
	border-radius: 16px;
	container-type: inline-size;
	height: auto;
	position: relative;
	width: 100%;
	aspect-ratio: 598 / 355.3904;
}

.octops-features-pipeline img {
	display: block;
	max-width: none;
	position: absolute;
}

.octops-features-pipeline__boundary {
	bottom: 42.01%;
	left: 6%;
	position: absolute;
	right: 39%;
	top: 11.39%;
}

.octops-features-pipeline__boundary img {
	height: 101.0715%;
	left: -0.2698%;
	top: -0.5357%;
	width: 100.5396%;
}

.octops-features-pipeline__zone-label,
.octops-features-pipeline__insights-label,
.octops-features-pipeline__node > span:last-child {
	font-family: "Inter", sans-serif;
	font-weight: 400;
	position: absolute;
	white-space: nowrap;
}

.octops-features-pipeline__zone-label {
	color: rgba(115, 191, 255, 0.6);
	font-size: 1.7804cqw;
	left: 8.5%;
	line-height: 1.2;
	top: 14.38%;
}

.octops-features-pipeline__flow-line {
	opacity: 0.4;
}

.octops-features-pipeline__flow-line--camera {
	height: 32.08%;
	left: 20.07%;
	top: 20.54%;
	transform: translateX(-50%);
	width: 0.3956%;
}

.octops-features-pipeline__flow-line--dashboard {
	height: 18.85%;
	left: 60.03%;
	top: 68.94%;
	transform: translateX(-50%);
	width: 0.3956%;
}

.octops-features-pipeline__flow-line--insights {
	height: 12.9818%;
	left: 29.8022%;
	top: 52.66%;
	width: 25.1978%;
}

.octops-features-pipeline__node {
	height: 13.32%;
	position: absolute;
	width: 30%;
}

.octops-features-pipeline__node--cameras {
	left: 15%;
	top: 20.04%;
}

.octops-features-pipeline__node--edge {
	left: 15%;
	top: 39.35%;
}

.octops-features-pipeline__node--cloud {
	left: 55%;
	top: 58.65%;
}

.octops-features-pipeline__node--dashboard {
	left: 55%;
	top: 77.96%;
}

.octops-features-pipeline__node-frame {
	display: block;
	inset: -1.8743% -0.4946%;
	position: absolute;
}

.octops-features-pipeline__node-frame img {
	height: 100%;
	inset: 0;
	width: 100%;
}

.octops-features-pipeline .octops-features-pipeline__theme-asset--dark,
html[data-theme="dark"] .octops-features-pipeline .octops-features-pipeline__theme-asset--light {
	display: none;
}

html[data-theme="dark"] .octops-features-pipeline .octops-features-pipeline__theme-asset--dark {
	display: block;
}

.octops-features-pipeline__node-icon {
	height: 38.04%;
	left: 11.87%;
	top: 33.33%;
	width: 10.03%;
}

.octops-features-pipeline__edge-icon {
	height: 50.72%;
	left: 10.2%;
	position: absolute;
	top: 29.9%;
	width: 13.38%;
}

.octops-features-pipeline__edge-icon img:first-child {
	height: 107.3936%;
	left: -3.6968%;
	top: -3.6968%;
	width: 107.3936%;
}

.octops-features-pipeline__edge-icon img:last-child {
	height: 41.0165%;
	left: 22.544%;
	top: 30.8049%;
	width: 55.1529%;
}

.octops-features-pipeline__node > span:last-child {
	color: #fafafa;
	font-size: 2.1761cqw;
	left: 30%;
	line-height: 1.2;
	top: 32.5%;
}

.octops-features-pipeline__insights-label {
	color: rgba(255, 191, 127, 0.7);
	font-size: 1.5826cqw;
	left: 32.11%;
	line-height: 1.2;
	top: 59.93%;
}

.octops-features-pipeline__dot {
	background: #73bfff;
	border-radius: 50%;
	box-shadow: 0 0 8px 2px rgba(115, 191, 255, 0.6);
	height: 1.1706cqw;
	opacity: 0;
	position: absolute;
	width: 1.1706cqw;
}

.octops-features-pipeline__dot--camera-a,
.octops-features-pipeline__dot--camera-b {
	left: 19.48%;
	top: 19.56%;
}

.octops-features-pipeline__dot--insights-a,
.octops-features-pipeline__dot--insights-b {
	background: #ffbf80;
	box-shadow: 0 0 8px 2px rgba(255, 191, 128, 0.6);
	left: 29.41%;
	top: 51.69%;
}

.octops-features-pipeline__dot--dashboard-a,
.octops-features-pipeline__dot--dashboard-b {
	left: 59.45%;
	top: 67.95%;
}

.octops-features-hero__benefits-scroll {
	margin-top: 24px;
	max-width: 100%;
	overflow: visible;
}

.octops-features-hero__benefits {
	display: grid;
	gap: 8px 0;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin-top: 0 !important;
}

.octops-features-hero__benefit {
	align-items: center;
	background: var(--octops-features-card);
	border: 1px solid var(--octops-features-rule);
	border-radius: 9999px;
	color: #116932;
	display: inline-flex;
	font-family: "Inter", sans-serif;
	font-size: 12px;
	font-weight: 600;
	gap: 8px;
	height: 28px;
	justify-content: center;
	justify-self: start;
	line-height: 16px;
	padding: 6px 24px;
	white-space: nowrap;
}

.octops-features-hero__benefit-icon {
	background: url("../images/features/hero/check.svg") center / contain no-repeat;
	flex: 0 0 16px;
	height: 16px;
	width: 16px;
}

/* Platform problem */
.octops-features-problem__layout {
	display: grid;
	gap: 40px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin-top: 40px;
}

.octops-features-problem__sticky {
	position: sticky;
	top: 116px;
}

.admin-bar .octops-features-problem__sticky {
	top: 148px;
}

.octops-features-problem-visual {
	background: var(--octops-features-diagram);
	border-radius: 16px;
	container-type: inline-size;
	overflow: hidden;
	position: relative;
	width: 100%;
	aspect-ratio: 620 / 355.3904;
}

.octops-features-problem-visual img {
	display: block;
	max-width: none;
	position: absolute;
}

.octops-features-problem-visual__camera {
	height: 11.98%;
	left: 43.04%;
	position: absolute;
	top: 12.69%;
	width: 15.37%;
}

.octops-features-problem-visual__camera-body {
	height: 61.1%;
	left: 0;
	top: 0;
	width: 74.8%;
}

.octops-features-problem-visual__camera-lens {
	height: 56.35%;
	right: 0;
	top: 4.3%;
	width: 25.26%;
}

.octops-features-problem-visual__camera-eye {
	height: 33.33%;
	left: 9.76%;
	top: 13.86%;
	width: 19.52%;
}

.octops-features-problem-visual__camera-eye-core {
	height: 13.89%;
	left: 15.22%;
	top: 23.6%;
	width: 8.13%;
}

.octops-features-problem-visual__camera-stand {
	height: 38.88%;
	left: 29.26%;
	top: 61.12%;
	width: 6.5%;
}

.octops-features-problem-visual__connector {
	top: 24.7%;
}

.octops-features-problem-visual__connector--left {
	height: 14.65%;
	left: 19%;
	width: 28%;
}

.octops-features-problem-visual__connector--center {
	height: 14.65%;
	left: 48%;
	width: 2%;
}

.octops-features-problem-visual__connector--right {
	height: 14.65%;
	left: 49%;
	width: 32%;
}

.octops-features-problem-visual__feeds {
	height: 25.9637%;
	left: 0;
	position: absolute;
	top: 39.93%;
	width: 100%;
}

.octops-features-problem-visual__feed {
	height: 100%;
	position: relative;
	width: 26%;
}

.octops-features-problem-visual__feed:nth-child(1) {
	left: 6%;
}

.octops-features-problem-visual__feed:nth-child(2) {
	left: 37.055%;
	position: absolute;
	top: 0;
}

.octops-features-problem-visual__feed:nth-child(3) {
	left: 67.9612%;
	position: absolute;
	top: 0;
}

.octops-features-problem-visual__feed-frame {
	height: 100%;
	inset: 0;
	width: 100%;
}

.octops-features-problem-visual__feed-lines {
	height: 100%;
	left: 9.62%;
	position: absolute;
	top: 0;
	width: 80.77%;
}

.octops-features-problem-visual__feed-line {
	height: clamp(2px, 0.5724cqw, 3.55px);
	left: 0;
	max-width: 100%;
	position: absolute !important;
}

.octops-features-problem-visual__feed-line:nth-child(1) { top: 15.7%; }
.octops-features-problem-visual__feed-line:nth-child(2) { top: 38.65%; }
.octops-features-problem-visual__feed-line:nth-child(3) { top: 61.65%; }
.octops-features-problem-visual__feed-line:nth-child(4) { top: 79.54%; }

.octops-features-problem-visual__feed:nth-child(1) .octops-features-problem-visual__feed-line:nth-child(1) { width: 100%; }
.octops-features-problem-visual__feed:nth-child(1) .octops-features-problem-visual__feed-line:nth-child(2) { width: 71.4286%; }
.octops-features-problem-visual__feed:nth-child(1) .octops-features-problem-visual__feed-line:nth-child(3) { width: 88.0952%; }
.octops-features-problem-visual__feed:nth-child(1) .octops-features-problem-visual__feed-line:nth-child(4) { width: 52.381%; }
.octops-features-problem-visual__feed:nth-child(2) .octops-features-problem-visual__feed-line:nth-child(1) { width: 83.3333%; }
.octops-features-problem-visual__feed:nth-child(2) .octops-features-problem-visual__feed-line:nth-child(2) { width: 100%; }
.octops-features-problem-visual__feed:nth-child(2) .octops-features-problem-visual__feed-line:nth-child(3) { width: 61.9048%; }
.octops-features-problem-visual__feed:nth-child(2) .octops-features-problem-visual__feed-line:nth-child(4) { width: 95.2381%; }
.octops-features-problem-visual__feed:nth-child(3) .octops-features-problem-visual__feed-line:nth-child(1) { width: 95.2381%; }
.octops-features-problem-visual__feed:nth-child(3) .octops-features-problem-visual__feed-line:nth-child(2) { width: 57.1429%; }
.octops-features-problem-visual__feed:nth-child(3) .octops-features-problem-visual__feed-line:nth-child(3) { width: 100%; }
.octops-features-problem-visual__feed:nth-child(3) .octops-features-problem-visual__feed-line:nth-child(4) { width: 76.1905%; }

.octops-features-problem-visual__question {
	color: #dc2626;
	font-family: "Inter", sans-serif;
	font-size: 35.489px;
	font-weight: 700;
	left: 50%;
	line-height: 1.2;
	position: absolute;
	top: 27%;
	transform: translateX(-50%);
}

.octops-features-problem-visual__feed:first-child .octops-features-problem-visual__question {
	top: 32%;
}

.octops-features-problem-visual__footer {
	color: #fafafa;
	font-family: var(--octops-font-body);
	font-size: 2.2581cqw;
	font-weight: 400;
	left: 6%;
	line-height: 20px;
	position: absolute;
	top: 72.3%;
	white-space: nowrap;
}

.octops-features-problem-visual__dot {
	background: #e3e3e8;
	border-radius: 50%;
	box-shadow: 0 0 6px 1px rgba(227, 227, 232, 0.5);
	height: 1.129cqw;
	opacity: 0;
	position: absolute;
	top: 23.72%;
	width: 1.129cqw;
	z-index: 5;
}

.octops-features-problem-visual__dot[data-problem-dot="1"],
.octops-features-problem-visual__dot[data-problem-dot="2"] {
	left: 46.44%;
}

.octops-features-problem-visual__dot[data-problem-dot="3"],
.octops-features-problem-visual__dot[data-problem-dot="4"] {
	left: 47.44%;
}

.octops-features-problem-visual__dot[data-problem-dot="5"],
.octops-features-problem-visual__dot[data-problem-dot="6"] {
	left: 48.44%;
}

.octops-features-problem__helper {
	align-items: flex-start;
	background: var(--octops-features-diagram);
	border-radius: 16px;
	color: #fafafa;
	display: flex;
	font-family: var(--octops-font-body);
	font-size: 16px;
	font-weight: 400;
	gap: 14px;
	line-height: 24px;
	margin-top: 40px;
	min-height: 104px;
	padding: 16px 24px;
}

.octops-features-problem__helper::before {
	background: var(--octops-features-helper-check);
	content: "";
	flex: 0 0 20px;
	height: 20px;
	margin-top: 2px;
	-webkit-mask: url("../images/features/problem/helper-check.svg") center / 20px 20px no-repeat;
	mask: url("../images/features/problem/helper-check.svg") center / 20px 20px no-repeat;
	width: 20px;
}

.octops-features-problem__cards {
	background: var(--octops-features-card);
	border: 1px solid var(--octops-features-rule);
	border-radius: 16px;
	isolation: isolate;
	overflow: hidden;
	position: relative;
	z-index: 1;
}

.octops-features-problem__card {
	background: var(--octops-features-problem-card-fill);
	min-height: 261px;
	padding: 28px;
}

.octops-features-problem__card + .octops-features-problem__card {
	border-top: 1px solid var(--octops-features-rule);
}

.octops-features-problem__card-icon,
.octops-features-overview__item-icon {
	align-items: center;
	background: #dc2626;
	border-radius: 12px;
	display: flex;
	height: 40px;
	justify-content: center;
	width: 40px;
}

.octops-features-problem__card-icon img,
.octops-features-overview__item-icon img {
	height: 20px;
	object-fit: contain;
	width: 20px;
}

.octops-features-problem__card-title,
.octops-features-overview__item-title,
.octops-features-support__item-title {
	color: var(--octops-text);
	font-family: var(--octops-font-body);
	font-size: 16px;
	font-weight: 700;
	line-height: 28px;
	margin: 8px 0 0;
}

.octops-features-problem__card-description,
.octops-features-overview__item-description,
.octops-features-support__item-description {
	color: var(--octops-features-small-copy);
	font-size: 14px;
	font-weight: 400;
	line-height: 21px;
	margin: 8px 0 0;
}

.octops-features-problem__card-description {
	max-width: 340px;
}

/* Platform overview */
.octops-features-overview {
	scroll-margin-top: 132px;
}

.octops-features-overview__grid {
	background: var(--octops-features-card);
	border: 1px solid var(--octops-features-rule);
	border-radius: 16px;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin-top: 40px !important;
	min-height: 407px;
	overflow: hidden;
}

.octops-features-overview__item {
	min-height: 190px;
	padding: 28px;
}

.octops-features-overview__item:nth-child(even) {
	border-left: 1px solid var(--octops-features-rule);
}

.octops-features-overview__item:nth-child(n + 3) {
	border-top: 1px solid var(--octops-features-rule);
}

.octops-features-overview__item-icon {
	background: var(--octops-features-overview-icon);
}

/* Platform architecture */
.octops-features-architecture__layers {
	margin-top: 44px;
}

.octops-features-architecture__layer {
	align-items: center;
	background: var(--octops-features-card);
	border: 1px solid var(--octops-features-rule);
	border-radius: 16px;
	display: grid;
	gap: 41px;
	grid-template-columns: 40% 1fr;
	min-height: 137px;
	padding: 25px;
}

.octops-features-architecture__layer-heading,
.octops-features-architecture__layer-body {
	min-width: 0;
}

.octops-features-architecture__layer-label,
.octops-features-capabilities__item-label,
.octops-features-capabilities__details-label {
	color: var(--octops-text-soft);
	font-size: 12px;
	font-weight: 400;
	line-height: 16px;
	margin: 0;
	text-transform: uppercase;
}

.octops-features-architecture__layer-title {
	color: var(--octops-text);
	font-family: var(--octops-font-body);
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	margin: 8px 0 0;
}

.octops-features-architecture__layer-status,
.octops-features-architecture__tags li {
	border: 1px solid color-mix(in srgb, #3371f4 24%, transparent);
	border-radius: 9999px;
	color: #3371f4;
	display: inline-flex;
	font-size: 14px;
	font-weight: 400;
	height: 24px;
	line-height: 20px;
	padding: 1px 8px;
	white-space: nowrap;
}

.octops-features-architecture__layer-status {
	justify-content: center;
	margin-top: 8px;
	min-width: 96px;
}

html[data-theme="dark"] .octops-features-architecture__layer-status,
html[data-theme="dark"] .octops-features-architecture__tags li {
	color: #76a0f8;
}

.octops-features-architecture__layer-description {
	color: var(--octops-features-small-copy);
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	margin: 0;
}

.octops-features-architecture__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px !important;
}

.octops-features-architecture__layer-arrow {
	align-items: center;
	display: flex;
	height: 52px;
	justify-content: center;
}

.octops-features-architecture__layer-arrow span {
	background: #3371f4;
	height: 20px;
	-webkit-mask: url("../images/features/architecture/arrow-down.svg") center / contain no-repeat;
	mask: url("../images/features/architecture/arrow-down.svg") center / contain no-repeat;
	width: 20px;
}

.octops-features-architecture__callout {
	background: var(--octops-features-card);
	border-left: 3px solid #3371f4;
	border-radius: 16px;
	color: var(--octops-features-small-copy);
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	margin-top: 12px;
	min-height: 119px;
	padding: 25px 24px;
}

/* Platform capabilities */
.octops-features-capabilities__overview {
	display: grid;
	gap: 40px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.octops-features-capabilities__intro {
	align-self: start;
	margin-inline: 0;
	max-width: 620px;
	text-align: left;
	width: 100%;
}

.octops-features-capabilities__visual {
	min-width: 0;
}

.octops-features-models {
	background: var(--octops-features-diagram);
	border: 1px solid transparent;
	border-radius: 16px;
	container-type: inline-size;
	overflow: hidden;
	position: relative;
	width: 100%;
	aspect-ratio: 620 / 342.938;
}

.octops-features-models img {
	display: block;
	height: 100%;
	position: absolute;
	width: 100%;
}

.octops-features-models::before {
	background: url("../images/features/capabilities/background.svg") center / 100% 100% no-repeat;
	content: "";
	inset: 0;
	position: absolute;
}

.octops-features-models__base {
	height: 49.95% !important;
	left: 12.16%;
	top: 23.36%;
	width: 69.35% !important;
}

.octops-features-models__plane {
	height: 42.62%;
	position: absolute;
	width: 57.98%;
}

.octops-features-models__plane img {
	inset: 0;
}

.octops-features-models__plane[data-model-plane="1"] {
	left: 24.17%;
	top: 19.37%;
}

.octops-features-models__plane[data-model-plane="2"] {
	left: 17.92%;
	top: 28.69%;
}

.octops-features-models__plane[data-model-plane="3"] {
	left: 11.68%;
	top: 38.01%;
}

.octops-features-models__label {
	height: 4.99%;
	position: absolute;
}

.octops-features-models__label > img {
	inset: 0;
}

.octops-features-models__label > span {
	align-items: center;
	color: #021b42;
	display: flex;
	font-size: 1.65cqw;
	height: 100%;
	left: 8.33%;
	line-height: 1;
	position: absolute;
	top: 0;
	white-space: nowrap;
}

.octops-features-models__label[data-model-label="1"] {
	left: 42.34%;
	top: 32.02%;
	width: 18%;
}

.octops-features-models__label[data-model-label="1"] > span {
	color: #ffffff;
}

.octops-features-models__label[data-model-label="2"] {
	left: 37.84%;
	top: 41.34%;
	width: 21.5%;
}

.octops-features-models__label[data-model-label="3"] {
	left: 33.34%;
	top: 50.66%;
	width: 20%;
}

.octops-features-models__more,
.octops-features-models__summary {
	color: #73bfff;
	font-weight: 400;
	position: absolute;
	white-space: nowrap;
}

.octops-features-models__more {
	font-size: 1.65cqw;
	left: 74.74%;
	line-height: 1.2;
	top: 10.38%;
}

.octops-features-models__summary {
	font-size: 1.8348cqw;
	left: 24.77%;
	line-height: 1.2;
	top: 86.62%;
}

.octops-features-capabilities__layout {
	display: grid;
	gap: 40px;
	grid-template-columns: 235px minmax(0, 1fr);
	margin-top: 40px;
}

.octops-features-capabilities__layout.has-no-toc {
	grid-template-columns: minmax(0, 1fr);
}

.octops-features-capabilities__toc {
	background: var(--octops-features-card);
	box-shadow: 0 8px 16px rgba(39, 39, 42, 0.18);
	padding: 4px;
	position: sticky;
	top: 116px;
}

.admin-bar .octops-features-capabilities__toc {
	top: 148px;
}

.octops-features-capabilities__toc-link {
	border-radius: 4px;
	color: var(--octops-text);
	display: block;
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	padding: 9px 8px;
	transition: background-color 160ms ease, color 160ms ease;
}

.octops-features-capabilities__toc-link.is-active,
.octops-features-capabilities__toc-link[aria-current="location"] {
	background: #3371f4;
	color: #ffffff;
}

.octops-features-capabilities__items {
	display: grid;
	gap: 40px;
}

.octops-features-capabilities__item {
	background: var(--octops-features-card);
	border: 1px solid var(--octops-features-rule);
	border-radius: 16px;
	scroll-margin-top: 152px;
	padding: 40px;
}

.octops-features-capabilities__item:nth-child(1) {
	min-height: 330.695px;
}

.octops-features-capabilities__item:nth-child(2),
.octops-features-capabilities__item:nth-child(3) {
	min-height: 310.695px;
}

.octops-features-capabilities__item:nth-child(n + 4) {
	min-height: 302.695px;
}

.octops-features-capabilities__item-title {
	color: var(--octops-text);
	font-family: var(--octops-font-heading);
	font-size: 24px;
	font-weight: 400;
	line-height: 32px;
	margin: 8px 0 0;
}

.octops-features-capabilities__item-description {
	color: var(--octops-features-small-copy);
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	margin: 8px 0 0;
}

.octops-features-capabilities__details {
	margin-top: 8px;
}

.octops-features-capabilities__details-grid {
	display: grid;
	gap: var(--octops-grid-gap);
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-top: 8px;
}

.octops-features-capabilities__detail {
	border-top: 2px solid #3371f4;
	padding-top: 14px;
}

.octops-features-capabilities__detail-title {
	color: var(--octops-text);
	font-size: 15px;
	font-weight: 700;
	line-height: 24px;
	margin: 0;
}

.octops-features-capabilities__detail-description {
	color: var(--octops-features-small-copy);
	font-size: 12px;
	font-weight: 400;
	line-height: 16px;
	margin: 4.695px 0 0;
}

.octops-features-capabilities__item:nth-child(n + 4) .octops-features-capabilities__item-title,
.octops-features-capabilities__item:nth-child(n + 4) .octops-features-capabilities__item-description,
.octops-features-capabilities__item:nth-child(n + 4) .octops-features-capabilities__details,
.octops-features-capabilities__item:nth-child(n + 4) .octops-features-capabilities__details-grid {
	margin-top: 6px;
}

/* Ongoing support */
.octops-features-support {
	border-bottom: 1px solid var(--octops-features-rule);
	padding-bottom: 80px;
}

.octops-features-support__grid {
	background: var(--octops-features-card);
	border: 1px solid var(--octops-features-rule);
	border-radius: 16px;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin-top: 40px !important;
	min-height: 177px;
	overflow: hidden;
}

.octops-features-support__item {
	padding: 28px;
}

.octops-features-support__item + .octops-features-support__item {
	border-left: 1px solid var(--octops-features-rule);
}

.octops-features-support__item-title {
	margin-top: 0;
}

/*
 * The Hero keeps one continuous three-second cohort in both themes and every
 * viewport. Return dots meet their initial positions at 100%; outbound resets
 * happen only while invisible. No exported end-frame dwell is replayed.
 * Viewport/document/reduced-motion state remains owned by features.js.
 */
.octops-features-pipeline.is-features-motion-active .octops-features-pipeline__flow-line--camera {
	animation: octops-features-hero-line-camera-3 3s linear infinite;
}

.octops-features-pipeline.is-features-motion-active .octops-features-pipeline__flow-line--insights {
	animation: octops-features-hero-line-insights-3 3s linear infinite;
}

.octops-features-pipeline.is-features-motion-active .octops-features-pipeline__flow-line--dashboard {
	animation: octops-features-hero-line-dashboard-3 3s linear infinite;
}

.octops-features-pipeline.is-features-motion-active .octops-features-pipeline__dot--camera-a {
	animation:
		octops-features-flow-return-opacity-3 3s linear infinite,
		octops-features-hero-camera-return-3 3s linear infinite;
}

.octops-features-pipeline.is-features-motion-active .octops-features-pipeline__dot--camera-b {
	animation:
		octops-features-flow-out-opacity-3 3s linear infinite,
		octops-features-hero-camera-out-3 3s linear infinite;
}

.octops-features-pipeline.is-features-motion-active .octops-features-pipeline__dot--insights-a {
	animation:
		octops-features-flow-out-opacity-3 3s linear infinite,
		octops-features-hero-insights-out-3 3s linear infinite;
}

.octops-features-pipeline.is-features-motion-active .octops-features-pipeline__dot--insights-b {
	animation:
		octops-features-flow-return-opacity-3 3s linear infinite,
		octops-features-hero-insights-return-3 3s linear infinite;
}

.octops-features-pipeline.is-features-motion-active .octops-features-pipeline__dot--dashboard-a {
	animation:
		octops-features-flow-out-opacity-3 3s linear infinite,
		octops-features-hero-dashboard-out-3 3s linear infinite;
}

.octops-features-pipeline.is-features-motion-active .octops-features-pipeline__dot--dashboard-b {
	animation:
		octops-features-flow-return-opacity-3 3s linear infinite,
		octops-features-hero-dashboard-return-3 3s linear infinite;
}

@keyframes octops-features-hero-line-camera-3 {
	0% { animation-timing-function: ease-in-out; opacity: 0.4; }
	26.667% { opacity: 1; }
	73.333% { animation-timing-function: ease-in-out; opacity: 1; }
	100% { opacity: 0.4; }
}

@keyframes octops-features-hero-line-insights-3 {
	0%, 10% { opacity: 0.4; }
	10% { animation-timing-function: ease-in-out; }
	36.667% { opacity: 1; }
	83.333% { animation-timing-function: ease-in-out; opacity: 1; }
	100% { opacity: 0.4; }
}

@keyframes octops-features-hero-line-dashboard-3 {
	0%, 20% { opacity: 0.4; }
	20% { animation-timing-function: ease-in-out; }
	46.667% { opacity: 1; }
	93.333% { animation-timing-function: ease-in-out; opacity: 1; }
	100% { opacity: 0.4; }
}

@keyframes octops-features-flow-out-opacity-3 {
	0% { opacity: 0; }
	4%, 77.333% { opacity: 1; }
	81.333%, 100% { opacity: 0; }
}

@keyframes octops-features-flow-return-opacity-3 {
	0%, 27.333% { opacity: 1; }
	31.333%, 50% { opacity: 0; }
	54%, 100% { opacity: 1; }
}

@keyframes octops-features-hero-camera-out-3 {
	0%, 4% { translate: 0 0; }
	77.333% { animation-timing-function: step-end; translate: 0 19.0635cqw; }
	81.333%, 100% { translate: 0 0; }
}

@keyframes octops-features-hero-camera-return-3 {
	0% { translate: 0 11.958cqw; }
	27.333% { animation-timing-function: step-end; translate: 0 19.0635cqw; }
	31.333%, 54% { translate: 0 0; }
	100% { translate: 0 11.958cqw; }
}

@keyframes octops-features-hero-insights-out-3 {
	0%, 4% { translate: 0 0; }
	20.952% { translate: 0 7.5167cqw; }
	77.333% { animation-timing-function: step-end; translate: 25cqw 7.5167cqw; }
	81.333%, 100% { translate: 0 0; }
}

@keyframes octops-features-hero-insights-return-3 {
	0% { translate: 12.88cqw 7.5167cqw; }
	27.333% { animation-timing-function: step-end; translate: 25cqw 7.5167cqw; }
	31.333%, 54% { translate: 0 0; }
	70.952% { translate: 0 7.5167cqw; }
	100% { translate: 12.88cqw 7.5167cqw; }
}

@keyframes octops-features-hero-dashboard-out-3 {
	0%, 4% { translate: 0 0; }
	77.333% { animation-timing-function: step-end; translate: 0 11.204cqw; }
	81.333%, 100% { translate: 0 0; }
}

@keyframes octops-features-hero-dashboard-return-3 {
	0% { translate: 0 7.0279cqw; }
	27.333% { animation-timing-function: step-end; translate: 0 11.204cqw; }
	31.333%, 54% { translate: 0 0; }
	100% { translate: 0 7.0279cqw; }
}

.octops-features-problem-visual.is-features-motion-active .octops-features-problem-visual__connector--left {
	animation: octops-features-problem-connector-left-3 3s linear infinite;
}

.octops-features-problem-visual.is-features-motion-active .octops-features-problem-visual__connector--center {
	animation: octops-features-problem-connector-center-3 3s linear infinite;
}

.octops-features-problem-visual.is-features-motion-active .octops-features-problem-visual__connector--right {
	animation: octops-features-problem-connector-right-3 3s linear infinite;
}

.octops-features-problem-visual.is-features-motion-active .octops-features-problem-visual__feed-line {
	animation-duration: 3s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

.octops-features-problem-visual.is-features-motion-active .octops-features-problem-visual__feed-line[data-problem-line="1"] { animation-name: octops-features-problem-bar-1-3; }
.octops-features-problem-visual.is-features-motion-active .octops-features-problem-visual__feed-line[data-problem-line="2"] { animation-name: octops-features-problem-bar-2-3; }
.octops-features-problem-visual.is-features-motion-active .octops-features-problem-visual__feed-line[data-problem-line="3"] { animation-name: octops-features-problem-bar-3-3; }
.octops-features-problem-visual.is-features-motion-active .octops-features-problem-visual__feed-line[data-problem-line="4"] { animation-name: octops-features-problem-bar-4-3; }
.octops-features-problem-visual.is-features-motion-active .octops-features-problem-visual__feed-line[data-problem-line="5"] { animation-name: octops-features-problem-bar-5-3; }
.octops-features-problem-visual.is-features-motion-active .octops-features-problem-visual__feed-line[data-problem-line="6"] { animation-name: octops-features-problem-bar-6-3; }
.octops-features-problem-visual.is-features-motion-active .octops-features-problem-visual__feed-line[data-problem-line="7"] { animation-name: octops-features-problem-bar-7-3; }
.octops-features-problem-visual.is-features-motion-active .octops-features-problem-visual__feed-line[data-problem-line="8"] { animation-name: octops-features-problem-bar-8-3; }
.octops-features-problem-visual.is-features-motion-active .octops-features-problem-visual__feed-line[data-problem-line="9"] { animation-name: octops-features-problem-bar-9-3; }
.octops-features-problem-visual.is-features-motion-active .octops-features-problem-visual__feed-line[data-problem-line="10"] { animation-name: octops-features-problem-bar-10-3; }
.octops-features-problem-visual.is-features-motion-active .octops-features-problem-visual__feed-line[data-problem-line="11"] { animation-name: octops-features-problem-bar-11-3; }
.octops-features-problem-visual.is-features-motion-active .octops-features-problem-visual__feed-line[data-problem-line="12"] { animation-name: octops-features-problem-bar-12-3; }

.octops-features-problem-visual.is-features-motion-active .octops-features-problem-visual__question {
	animation-duration: 3s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

.octops-features-problem-visual.is-features-motion-active .octops-features-problem-visual__question[data-problem-question="1"] { animation-name: octops-features-problem-question-1-3; }
.octops-features-problem-visual.is-features-motion-active .octops-features-problem-visual__question[data-problem-question="2"] { animation-name: octops-features-problem-question-2-3; }
.octops-features-problem-visual.is-features-motion-active .octops-features-problem-visual__question[data-problem-question="3"] { animation-name: octops-features-problem-question-3-3; }

.octops-features-problem-visual.is-features-motion-active .octops-features-problem-visual__dot[data-problem-dot="1"] {
	animation:
		octops-features-flow-out-opacity-3 3s linear infinite,
		octops-features-problem-left-out-3 3s linear infinite;
}

.octops-features-problem-visual.is-features-motion-active .octops-features-problem-visual__dot[data-problem-dot="2"] {
	animation:
		octops-features-flow-return-opacity-3 3s linear infinite,
		octops-features-problem-left-return-3 3s linear infinite;
}

.octops-features-problem-visual.is-features-motion-active .octops-features-problem-visual__dot[data-problem-dot="3"] {
	animation:
		octops-features-flow-out-opacity-3 3s linear infinite,
		octops-features-problem-center-out-3 3s linear infinite;
}

.octops-features-problem-visual.is-features-motion-active .octops-features-problem-visual__dot[data-problem-dot="4"] {
	animation:
		octops-features-flow-return-opacity-3 3s linear infinite,
		octops-features-problem-center-return-3 3s linear infinite;
}

.octops-features-problem-visual.is-features-motion-active .octops-features-problem-visual__dot[data-problem-dot="5"] {
	animation:
		octops-features-flow-out-opacity-3 3s linear infinite,
		octops-features-problem-right-out-3 3s linear infinite;
}

.octops-features-problem-visual.is-features-motion-active .octops-features-problem-visual__dot[data-problem-dot="6"] {
	animation:
		octops-features-flow-return-opacity-3 3s linear infinite,
		octops-features-problem-right-return-3 3s linear infinite;
}

@keyframes octops-features-problem-connector-left-3 {
	0% { animation-timing-function: ease-in-out; opacity: 0.4; }
	26.667% { opacity: 1; }
	66.667% { animation-timing-function: ease-in-out; opacity: 1; }
	100% { opacity: 0.4; }
}

@keyframes octops-features-problem-connector-center-3 {
	0%, 6.667% { opacity: 0.4; }
	6.667% { animation-timing-function: ease-in-out; }
	33.333% { opacity: 1; }
	73.333% { animation-timing-function: ease-in-out; opacity: 1; }
	100% { opacity: 0.4; }
}

@keyframes octops-features-problem-connector-right-3 {
	0%, 13.333% { opacity: 0.4; }
	13.333% { animation-timing-function: ease-in-out; }
	40% { opacity: 1; }
	80% { animation-timing-function: ease-in-out; opacity: 1; }
	100% { opacity: 0.4; }
}

@keyframes octops-features-problem-bar-1-3 { 0% { animation-timing-function: ease-in-out; opacity: 0.25; } 13.333% { animation-timing-function: ease-in-out; opacity: 0.9; } 26.667%, 100% { opacity: 0.25; } }
@keyframes octops-features-problem-bar-2-3 { 0% { opacity: 0.25; } 6% { animation-timing-function: ease-in-out; opacity: 0.25; } 19.333% { animation-timing-function: ease-in-out; opacity: 0.9; } 32.667%, 100% { opacity: 0.25; } }
@keyframes octops-features-problem-bar-3-3 { 0% { opacity: 0.25; } 12% { animation-timing-function: ease-in-out; opacity: 0.25; } 25.333% { animation-timing-function: ease-in-out; opacity: 0.9; } 38.667%, 100% { opacity: 0.25; } }
@keyframes octops-features-problem-bar-4-3 { 0% { opacity: 0.25; } 18% { animation-timing-function: ease-in-out; opacity: 0.25; } 31.333% { animation-timing-function: ease-in-out; opacity: 0.9; } 44.667%, 100% { opacity: 0.25; } }
@keyframes octops-features-problem-bar-5-3 { 0% { opacity: 0.25; } 11.667% { animation-timing-function: ease-in-out; opacity: 0.25; } 25% { animation-timing-function: ease-in-out; opacity: 0.9; } 38.333%, 100% { opacity: 0.25; } }
@keyframes octops-features-problem-bar-6-3 { 0% { opacity: 0.25; } 17.667% { animation-timing-function: ease-in-out; opacity: 0.25; } 31% { animation-timing-function: ease-in-out; opacity: 0.9; } 44.333%, 100% { opacity: 0.25; } }
@keyframes octops-features-problem-bar-7-3 { 0% { opacity: 0.25; } 23.667% { animation-timing-function: ease-in-out; opacity: 0.25; } 37% { animation-timing-function: ease-in-out; opacity: 0.9; } 50.333%, 100% { opacity: 0.25; } }
@keyframes octops-features-problem-bar-8-3 { 0% { opacity: 0.25; } 29.667% { animation-timing-function: ease-in-out; opacity: 0.25; } 43% { animation-timing-function: ease-in-out; opacity: 0.9; } 56.333%, 100% { opacity: 0.25; } }
@keyframes octops-features-problem-bar-9-3 { 0% { opacity: 0.25; } 23.333% { animation-timing-function: ease-in-out; opacity: 0.25; } 36.667% { animation-timing-function: ease-in-out; opacity: 0.9; } 50%, 100% { opacity: 0.25; } }
@keyframes octops-features-problem-bar-10-3 { 0% { opacity: 0.25; } 29.333% { animation-timing-function: ease-in-out; opacity: 0.25; } 42.667% { animation-timing-function: ease-in-out; opacity: 0.9; } 56%, 100% { opacity: 0.25; } }
@keyframes octops-features-problem-bar-11-3 { 0% { opacity: 0.25; } 35.333% { animation-timing-function: ease-in-out; opacity: 0.25; } 48.667% { animation-timing-function: ease-in-out; opacity: 0.9; } 62%, 100% { opacity: 0.25; } }
@keyframes octops-features-problem-bar-12-3 { 0% { opacity: 0.25; } 41.333% { animation-timing-function: ease-in-out; opacity: 0.25; } 54.667% { animation-timing-function: ease-in-out; opacity: 0.9; } 68%, 100% { opacity: 0.25; } }

@keyframes octops-features-problem-question-1-3 {
	0% { animation-timing-function: ease-in-out; opacity: 0.6; transform: translateX(-50%) scale(1); }
	16.667% { animation-timing-function: ease-in-out; opacity: 1; transform: translateX(-50%) scale(1.18); }
	33.333% { animation-timing-function: ease-in-out; opacity: 0.6; transform: translateX(-50%) scale(1); }
	50% { animation-timing-function: ease-in-out; opacity: 1; transform: translateX(-50%) scale(1.18); }
	66.667%, 100% { opacity: 0.6; transform: translateX(-50%) scale(1); }
}

@keyframes octops-features-problem-question-2-3 {
	0%, 8.333% { opacity: 0.6; transform: translateX(-50%) scale(1); }
	8.333% { animation-timing-function: ease-in-out; }
	25% { animation-timing-function: ease-in-out; opacity: 1; transform: translateX(-50%) scale(1.18); }
	41.667% { animation-timing-function: ease-in-out; opacity: 0.6; transform: translateX(-50%) scale(1); }
	58.333% { animation-timing-function: ease-in-out; opacity: 1; transform: translateX(-50%) scale(1.18); }
	75%, 100% { opacity: 0.6; transform: translateX(-50%) scale(1); }
}

@keyframes octops-features-problem-question-3-3 {
	0%, 16.667% { opacity: 0.6; transform: translateX(-50%) scale(1); }
	16.667% { animation-timing-function: ease-in-out; }
	33.333% { animation-timing-function: ease-in-out; opacity: 1; transform: translateX(-50%) scale(1.18); }
	50% { animation-timing-function: ease-in-out; opacity: 0.6; transform: translateX(-50%) scale(1); }
	66.667% { animation-timing-function: ease-in-out; opacity: 1; transform: translateX(-50%) scale(1.18); }
	83.333%, 100% { opacity: 0.6; transform: translateX(-50%) scale(1); }
}

@keyframes octops-features-problem-left-out-3 {
	0%, 4% { translate: 0 0; }
	77.333% { animation-timing-function: step-end; translate: -28cqw 8.387cqw; }
	81.333%, 100% { translate: 0 0; }
}

@keyframes octops-features-problem-left-return-3 {
	0% { translate: -17.564cqw 5.261cqw; }
	27.333% { animation-timing-function: step-end; translate: -28cqw 8.387cqw; }
	31.333%, 54% { translate: 0 0; }
	100% { translate: -17.564cqw 5.261cqw; }
}

@keyframes octops-features-problem-center-out-3 {
	0%, 4% { translate: 0 0; }
	77.333% { animation-timing-function: step-end; translate: 2cqw 8.387cqw; }
	81.333%, 100% { translate: 0 0; }
}

@keyframes octops-features-problem-center-return-3 {
	0% { translate: 1.2545cqw 5.261cqw; }
	27.333% { animation-timing-function: step-end; translate: 2cqw 8.387cqw; }
	31.333%, 54% { translate: 0 0; }
	100% { translate: 1.2545cqw 5.261cqw; }
}

@keyframes octops-features-problem-right-out-3 {
	0%, 4% { translate: 0 0; }
	77.333% { animation-timing-function: step-end; translate: 32cqw 8.387cqw; }
	81.333%, 100% { translate: 0 0; }
}

@keyframes octops-features-problem-right-return-3 {
	0% { translate: 20.073cqw 5.261cqw; }
	27.333% { animation-timing-function: step-end; translate: 32cqw 8.387cqw; }
	31.333%, 54% { translate: 0 0; }
	100% { translate: 20.073cqw 5.261cqw; }
}

/* Platform Problem retains its independently authored dark-desktop cohort. */
@media (min-width: 641px) {
	html[data-theme="dark"] .octops-features-problem-visual.is-features-motion-active .octops-features-problem-visual__connector--left {
		animation: octops-features-problem-connector-left-10 10s linear infinite;
	}

	html[data-theme="dark"] .octops-features-problem-visual.is-features-motion-active .octops-features-problem-visual__connector--center {
		animation: octops-features-problem-connector-center-10 10s linear infinite;
	}

	html[data-theme="dark"] .octops-features-problem-visual.is-features-motion-active .octops-features-problem-visual__connector--right {
		animation: octops-features-problem-connector-right-10 10s linear infinite;
	}

	html[data-theme="dark"] .octops-features-problem-visual.is-features-motion-active .octops-features-problem-visual__feed-line,
	html[data-theme="dark"] .octops-features-problem-visual.is-features-motion-active .octops-features-problem-visual__question {
		animation-duration: 10s;
	}

	html[data-theme="dark"] .octops-features-problem-visual.is-features-motion-active .octops-features-problem-visual__feed-line[data-problem-line="1"] { animation-name: octops-features-problem-bar-1-10; }
	html[data-theme="dark"] .octops-features-problem-visual.is-features-motion-active .octops-features-problem-visual__feed-line[data-problem-line="2"] { animation-name: octops-features-problem-bar-2-10; }
	html[data-theme="dark"] .octops-features-problem-visual.is-features-motion-active .octops-features-problem-visual__feed-line[data-problem-line="3"] { animation-name: octops-features-problem-bar-3-10; }
	html[data-theme="dark"] .octops-features-problem-visual.is-features-motion-active .octops-features-problem-visual__feed-line[data-problem-line="4"] { animation-name: octops-features-problem-bar-4-10; }
	html[data-theme="dark"] .octops-features-problem-visual.is-features-motion-active .octops-features-problem-visual__feed-line[data-problem-line="5"] { animation-name: octops-features-problem-bar-5-10; }
	html[data-theme="dark"] .octops-features-problem-visual.is-features-motion-active .octops-features-problem-visual__feed-line[data-problem-line="6"] { animation-name: octops-features-problem-bar-6-10; }
	html[data-theme="dark"] .octops-features-problem-visual.is-features-motion-active .octops-features-problem-visual__feed-line[data-problem-line="7"] { animation-name: octops-features-problem-bar-7-10; }
	html[data-theme="dark"] .octops-features-problem-visual.is-features-motion-active .octops-features-problem-visual__feed-line[data-problem-line="8"] { animation-name: octops-features-problem-bar-8-10; }
	html[data-theme="dark"] .octops-features-problem-visual.is-features-motion-active .octops-features-problem-visual__feed-line[data-problem-line="9"] { animation-name: octops-features-problem-bar-9-10; }
	html[data-theme="dark"] .octops-features-problem-visual.is-features-motion-active .octops-features-problem-visual__feed-line[data-problem-line="10"] { animation-name: octops-features-problem-bar-10-10; }
	html[data-theme="dark"] .octops-features-problem-visual.is-features-motion-active .octops-features-problem-visual__feed-line[data-problem-line="11"] { animation-name: octops-features-problem-bar-11-10; }
	html[data-theme="dark"] .octops-features-problem-visual.is-features-motion-active .octops-features-problem-visual__feed-line[data-problem-line="12"] { animation-name: octops-features-problem-bar-12-10; }

	html[data-theme="dark"] .octops-features-problem-visual.is-features-motion-active .octops-features-problem-visual__question[data-problem-question="1"] { animation-name: octops-features-problem-question-1-10; }
	html[data-theme="dark"] .octops-features-problem-visual.is-features-motion-active .octops-features-problem-visual__question[data-problem-question="2"] { animation-name: octops-features-problem-question-2-10; }
	html[data-theme="dark"] .octops-features-problem-visual.is-features-motion-active .octops-features-problem-visual__question[data-problem-question="3"] { animation-name: octops-features-problem-question-3-10; }

	html[data-theme="dark"] .octops-features-problem-visual.is-features-motion-active .octops-features-problem-visual__dot[data-problem-dot="1"] {
		animation: octops-features-flow-out-opacity-10-reset 10s linear infinite, octops-features-problem-left-out-10 10s linear infinite;
	}

	html[data-theme="dark"] .octops-features-problem-visual.is-features-motion-active .octops-features-problem-visual__dot[data-problem-dot="2"] {
		animation: octops-features-flow-return-opacity-10 10s linear infinite, octops-features-problem-left-return-10 10s linear infinite;
	}

	html[data-theme="dark"] .octops-features-problem-visual.is-features-motion-active .octops-features-problem-visual__dot[data-problem-dot="3"] {
		animation: octops-features-flow-out-opacity-10-reset 10s linear infinite, octops-features-problem-center-out-10 10s linear infinite;
	}

	html[data-theme="dark"] .octops-features-problem-visual.is-features-motion-active .octops-features-problem-visual__dot[data-problem-dot="4"] {
		animation: octops-features-flow-return-opacity-10 10s linear infinite, octops-features-problem-center-return-10 10s linear infinite;
	}

	html[data-theme="dark"] .octops-features-problem-visual.is-features-motion-active .octops-features-problem-visual__dot[data-problem-dot="5"] {
		animation: octops-features-flow-out-opacity-10-reset 10s linear infinite, octops-features-problem-right-out-10 10s linear infinite;
	}

	html[data-theme="dark"] .octops-features-problem-visual.is-features-motion-active .octops-features-problem-visual__dot[data-problem-dot="6"] {
		animation: octops-features-flow-return-opacity-10 10s linear infinite, octops-features-problem-right-return-10 10s linear infinite;
	}
}

@keyframes octops-features-flow-out-opacity-10-reset {
	0% { opacity: 0; }
	1.2%, 23.2% { opacity: 1; }
	24.4%, 100% { opacity: 0; }
}

@keyframes octops-features-flow-return-opacity-10 {
	0%, 8.2% { opacity: 1; }
	9.4%, 15% { opacity: 0; }
	16.2%, 100% { opacity: 1; }
}

@keyframes octops-features-problem-connector-left-10 {
	0% { animation-timing-function: ease-in-out; opacity: 0.4; }
	8% { opacity: 1; }
	20% { animation-timing-function: ease-in-out; opacity: 1; }
	30%, 100% { opacity: 0.4; }
}

@keyframes octops-features-problem-connector-center-10 {
	0%, 2% { opacity: 0.4; }
	2% { animation-timing-function: ease-in-out; }
	10% { opacity: 1; }
	22% { animation-timing-function: ease-in-out; opacity: 1; }
	30%, 100% { opacity: 0.4; }
}

@keyframes octops-features-problem-connector-right-10 {
	0%, 4% { opacity: 0.4; }
	4% { animation-timing-function: ease-in-out; }
	12% { opacity: 1; }
	24% { animation-timing-function: ease-in-out; opacity: 1; }
	30%, 100% { opacity: 0.4; }
}

@keyframes octops-features-problem-bar-1-10 { 0% { animation-timing-function: ease-in-out; opacity: 0.25; } 4% { animation-timing-function: ease-in-out; opacity: 0.9; } 8%, 100% { opacity: 0.25; } }
@keyframes octops-features-problem-bar-2-10 { 0% { opacity: 0.25; } 1.8% { animation-timing-function: ease-in-out; opacity: 0.25; } 5.8% { animation-timing-function: ease-in-out; opacity: 0.9; } 9.8%, 100% { opacity: 0.25; } }
@keyframes octops-features-problem-bar-3-10 { 0% { opacity: 0.25; } 3.6% { animation-timing-function: ease-in-out; opacity: 0.25; } 7.6% { animation-timing-function: ease-in-out; opacity: 0.9; } 11.6%, 100% { opacity: 0.25; } }
@keyframes octops-features-problem-bar-4-10 { 0% { opacity: 0.25; } 5.4% { animation-timing-function: ease-in-out; opacity: 0.25; } 9.4% { animation-timing-function: ease-in-out; opacity: 0.9; } 13.4%, 100% { opacity: 0.25; } }
@keyframes octops-features-problem-bar-5-10 { 0% { opacity: 0.25; } 3.5% { animation-timing-function: ease-in-out; opacity: 0.25; } 7.5% { animation-timing-function: ease-in-out; opacity: 0.9; } 11.5%, 100% { opacity: 0.25; } }
@keyframes octops-features-problem-bar-6-10 { 0% { opacity: 0.25; } 5.3% { animation-timing-function: ease-in-out; opacity: 0.25; } 9.3% { animation-timing-function: ease-in-out; opacity: 0.9; } 13.3%, 100% { opacity: 0.25; } }
@keyframes octops-features-problem-bar-7-10 { 0% { opacity: 0.25; } 7.1% { animation-timing-function: ease-in-out; opacity: 0.25; } 11.1% { animation-timing-function: ease-in-out; opacity: 0.9; } 15.1%, 100% { opacity: 0.25; } }
@keyframes octops-features-problem-bar-8-10 { 0% { opacity: 0.25; } 8.9% { animation-timing-function: ease-in-out; opacity: 0.25; } 12.9% { animation-timing-function: ease-in-out; opacity: 0.9; } 16.9%, 100% { opacity: 0.25; } }
@keyframes octops-features-problem-bar-9-10 { 0% { opacity: 0.25; } 7% { animation-timing-function: ease-in-out; opacity: 0.25; } 11% { animation-timing-function: ease-in-out; opacity: 0.9; } 15%, 100% { opacity: 0.25; } }
@keyframes octops-features-problem-bar-10-10 { 0% { opacity: 0.25; } 8.8% { animation-timing-function: ease-in-out; opacity: 0.25; } 12.8% { animation-timing-function: ease-in-out; opacity: 0.9; } 16.8%, 100% { opacity: 0.25; } }
@keyframes octops-features-problem-bar-11-10 { 0% { opacity: 0.25; } 10.6% { animation-timing-function: ease-in-out; opacity: 0.25; } 14.6% { animation-timing-function: ease-in-out; opacity: 0.9; } 18.6%, 100% { opacity: 0.25; } }
@keyframes octops-features-problem-bar-12-10 { 0% { opacity: 0.25; } 12.4% { animation-timing-function: ease-in-out; opacity: 0.25; } 16.4% { animation-timing-function: ease-in-out; opacity: 0.9; } 20.4%, 100% { opacity: 0.25; } }

@keyframes octops-features-problem-question-1-10 {
	0% { animation-timing-function: ease-in-out; opacity: 0.6; transform: translateX(-50%) scale(1); }
	5% { animation-timing-function: ease-in-out; opacity: 1; transform: translateX(-50%) scale(1.18); }
	10% { animation-timing-function: ease-in-out; opacity: 0.6; transform: translateX(-50%) scale(1); }
	15% { animation-timing-function: ease-in-out; opacity: 1; transform: translateX(-50%) scale(1.18); }
	20%, 100% { opacity: 0.6; transform: translateX(-50%) scale(1); }
}

@keyframes octops-features-problem-question-2-10 {
	0%, 2.5% { opacity: 0.6; transform: translateX(-50%) scale(1); }
	2.5% { animation-timing-function: ease-in-out; }
	7.5% { animation-timing-function: ease-in-out; opacity: 1; transform: translateX(-50%) scale(1.18); }
	12.5% { animation-timing-function: ease-in-out; opacity: 0.6; transform: translateX(-50%) scale(1); }
	17.5% { animation-timing-function: ease-in-out; opacity: 1; transform: translateX(-50%) scale(1.18); }
	22.5%, 100% { opacity: 0.6; transform: translateX(-50%) scale(1); }
}

@keyframes octops-features-problem-question-3-10 {
	0%, 5% { opacity: 0.6; transform: translateX(-50%) scale(1); }
	5% { animation-timing-function: ease-in-out; }
	10% { animation-timing-function: ease-in-out; opacity: 1; transform: translateX(-50%) scale(1.18); }
	15% { animation-timing-function: ease-in-out; opacity: 0.6; transform: translateX(-50%) scale(1); }
	20% { animation-timing-function: ease-in-out; opacity: 1; transform: translateX(-50%) scale(1.18); }
	25%, 100% { opacity: 0.6; transform: translateX(-50%) scale(1); }
}

@keyframes octops-features-problem-left-out-10 {
	0%, 1.2% { translate: 0 0; }
	23.2% { animation-timing-function: step-end; translate: -28cqw 8.387cqw; }
	24.4%, 100% { translate: 0 0; }
}

@keyframes octops-features-problem-left-return-10 {
	0% { translate: -17.564cqw 5.261cqw; }
	8.2% { animation-timing-function: step-end; translate: -28cqw 8.387cqw; }
	9.4%, 16.2% { translate: 0 0; }
	30%, 100% { translate: -17.564cqw 5.261cqw; }
}

@keyframes octops-features-problem-center-out-10 {
	0%, 1.2% { translate: 0 0; }
	23.2% { animation-timing-function: step-end; translate: 2cqw 8.387cqw; }
	24.4%, 100% { translate: 0 0; }
}

@keyframes octops-features-problem-center-return-10 {
	0% { translate: 1.2545cqw 5.261cqw; }
	8.2% { animation-timing-function: step-end; translate: 2cqw 8.387cqw; }
	9.4%, 16.2% { translate: 0 0; }
	30%, 100% { translate: 1.2545cqw 5.261cqw; }
}

@keyframes octops-features-problem-right-out-10 {
	0%, 1.2% { translate: 0 0; }
	23.2% { animation-timing-function: step-end; translate: 32cqw 8.387cqw; }
	24.4%, 100% { translate: 0 0; }
}

@keyframes octops-features-problem-right-return-10 {
	0% { translate: 20.073cqw 5.261cqw; }
	8.2% { animation-timing-function: step-end; translate: 32cqw 8.387cqw; }
	9.4%, 16.2% { translate: 0 0; }
	30%, 100% { translate: 20.073cqw 5.261cqw; }
}
.octops-features-models.is-features-motion-active::before {
	animation: octops-features-models-background 3s linear 1 forwards;
}

.octops-features-models.is-features-motion-active .octops-features-models__base {
	animation: octops-features-models-base 3s linear 1 forwards;
}

.octops-features-models.is-features-motion-active .octops-features-models__plane[data-model-plane="1"] {
	animation: octops-features-models-plane-1 3s linear 1 forwards;
}

.octops-features-models.is-features-motion-active .octops-features-models__plane[data-model-plane="2"] {
	animation: octops-features-models-plane-2 3s linear 1 forwards;
}

.octops-features-models.is-features-motion-active .octops-features-models__plane[data-model-plane="3"] {
	animation: octops-features-models-plane-3 3s linear 1 forwards;
}

.octops-features-models.is-features-motion-active .octops-features-models__label[data-model-label="1"] {
	animation: octops-features-models-label-1 3s linear 1 forwards;
}

.octops-features-models.is-features-motion-active .octops-features-models__label[data-model-label="2"] {
	animation: octops-features-models-label-2 3s linear 1 forwards;
}

.octops-features-models.is-features-motion-active .octops-features-models__label[data-model-label="3"] {
	animation: octops-features-models-label-3 3s linear 1 forwards;
}

.octops-features-models.is-features-motion-active .octops-features-models__more {
	animation: octops-features-models-more 3s linear 1 forwards;
}

.octops-features-models.is-features-motion-active .octops-features-models__summary {
	animation: octops-features-models-summary 3s linear 1 forwards;
}

.octops-features-models.is-features-motion-complete::before,
.octops-features-models.is-features-motion-complete .octops-features-models__base,
.octops-features-models.is-features-motion-complete .octops-features-models__plane,
.octops-features-models.is-features-motion-complete .octops-features-models__label,
.octops-features-models.is-features-motion-complete .octops-features-models__more,
.octops-features-models.is-features-motion-complete .octops-features-models__summary {
	animation: none !important;
}

.octops-features-models.is-features-motion-complete::before,
.octops-features-models.is-features-motion-complete .octops-features-models__base,
.octops-features-models.is-features-motion-complete .octops-features-models__label,
.octops-features-models.is-features-motion-complete .octops-features-models__more,
.octops-features-models.is-features-motion-complete .octops-features-models__summary {
	opacity: 1;
	translate: 0 0;
}

.octops-features-models.is-features-motion-complete .octops-features-models__plane {
	opacity: 0.7;
	scale: 1 0.947;
	translate: 0 0;
}

@keyframes octops-features-models-background {
	0% { animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); opacity: 0; }
	16.667%, 100% { opacity: 1; }
}

@keyframes octops-features-models-base {
	0%, 16.667% { animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); opacity: 0; translate: 0 20px; }
	36.667%, 100% { opacity: 1; translate: 0 0; }
}

@keyframes octops-features-models-plane-1 {
	0%, 10% { animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); opacity: 0; scale: 0.92 0.871; translate: 0 30px; }
	28.333%, 100% { opacity: 0.7; scale: 1 0.947; translate: 0 0; }
}

@keyframes octops-features-models-plane-2 {
	0%, 15% { animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); opacity: 0; scale: 0.92 0.871; translate: 0 25px; }
	33.333%, 100% { opacity: 0.7; scale: 1 0.947; translate: 0 0; }
}

@keyframes octops-features-models-plane-3 {
	0%, 20% { animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); opacity: 0; scale: 0.92 0.871; translate: 0 20px; }
	38.333%, 100% { opacity: 0.7; scale: 1 0.947; translate: 0 0; }
}

@keyframes octops-features-models-label-1 {
	0%, 30% { animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); opacity: 0; translate: -25px 0; }
	45%, 100% { opacity: 1; translate: 0 0; }
}

@keyframes octops-features-models-label-2 {
	0%, 35% { animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); opacity: 0; translate: -25px 0; }
	50%, 100% { opacity: 1; translate: 0 0; }
}

@keyframes octops-features-models-label-3 {
	0%, 40% { animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); opacity: 0; translate: -25px 0; }
	55%, 100% { opacity: 1; translate: 0 0; }
}

@keyframes octops-features-models-more {
	0%, 43.333% { animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); opacity: 0; }
	56.667%, 100% { opacity: 1; }
}

@keyframes octops-features-models-summary {
	0%, 50% { animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); opacity: 0; }
	63.333%, 100% { opacity: 1; }
}

@media (max-width: 900px) {
	.octops-features-hero__inner,
	.octops-features-problem__layout,
	.octops-features-capabilities__overview {
		gap: 40px;
		grid-template-columns: minmax(0, 1fr);
	}

	.octops-features-hero__copy {
		min-height: 0;
	}

	.octops-features-hero__actions {
		margin-top: 40px;
	}

	.octops-features-problem__sticky,
	.admin-bar .octops-features-problem__sticky {
		position: static;
		top: auto;
	}

	.octops-features-capabilities__layout {
		grid-template-columns: 190px minmax(0, 1fr);
	}
}

@media (max-width: 640px) {
	.octops-features-section {
		padding-top: 80px;
	}

	.octops-features-container {
		padding-inline: 16px;
	}

	.octops-features-hero {
		padding-bottom: 80px;
		padding-top: 48px;
	}

	.octops-features-hero__inner {
		gap: 40px;
	}

	.octops-features-hero__copy {
		align-items: center;
		text-align: center;
	}

	.octops-features-hero__eyebrow {
		align-self: center;
	}

	.octops-features-hero__title {
		font-size: 36px;
		font-weight: 500;
		line-height: 44px;
		margin-top: 12px;
	}

	.octops-features-hero__description {
		font-size: 20px;
		line-height: 30px;
		margin-top: 12px;
	}

	.octops-features-hero__actions {
		align-self: center;
		gap: 12px;
		margin-top: 40px;
		width: 100%;
	}

	.octops-features-hero__actions .octops-button {
		flex: 1 1 auto;
		padding-inline: 16px;
	}

	.octops-features-hero__visual {
		min-width: 0;
	}

	.octops-features-hero__benefits-scroll {
		-webkit-overflow-scrolling: touch;
		margin: 16px -16px 0 0;
		max-width: none;
		overscroll-behavior-inline: contain;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-padding-inline: 0;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
		width: calc(100% + 16px);
	}

	.octops-features-hero__benefits-scroll::-webkit-scrollbar {
		display: none;
	}

	.octops-features-hero__benefits {
		display: flex;
		gap: 14px;
		margin-top: 0 !important;
		width: max-content;
	}

	.octops-features-hero__benefit {
		flex: 0 0 auto;
		padding-inline: 22px;
		scroll-snap-align: start;
	}

	.octops-features-hero__benefit:nth-child(1) { min-width: 235px; }
	.octops-features-hero__benefit:nth-child(2) { min-width: 210px; }
	.octops-features-hero__benefit:nth-child(3) { min-width: 211px; }
	.octops-features-hero__benefit:nth-child(4) { min-width: 240px; }

	.octops-features-problem__layout {
		margin-top: 40px;
	}

	.octops-features-problem-visual {
		aspect-ratio: 370 / 355.3904;
	}

	.octops-features-problem-visual__footer {
		font-size: 3.7838cqw;
		line-height: 20px;
		max-width: 83%;
		white-space: normal;
	}

	.octops-features-problem__helper {
		font-size: 16px;
		line-height: 24px;
		margin-top: 40px;
		min-height: 176px;
		padding: 16px 24px;
	}

	.octops-features-problem__card {
		min-height: 260px;
		padding: 28px;
	}

	.octops-features-problem__card + .octops-features-problem__card {
		min-height: 261px;
	}

	.octops-features-problem__card-title {
		margin-top: 8px;
	}

	.octops-features-problem__card-description {
		margin-top: 8px;
		max-width: none;
	}

	.octops-features-overview__grid {
		grid-template-columns: minmax(0, 1fr);
		min-height: 780.678px;
	}

	.octops-features-overview__item {
		min-height: 214px;
	}

	.octops-features-overview__item:nth-child(n + 2) {
		margin-top: -27.031px;
	}

	.octops-features-overview__item:nth-child(even) {
		border-left: 0;
	}

	.octops-features-overview__item:nth-child(n + 2) {
		border-top: 1px solid var(--octops-features-rule);
	}

	.octops-features-architecture__layers {
		margin-top: 44px;
	}

	.octops-features-architecture__layer {
		align-items: start;
		gap: 8px;
		grid-template-columns: minmax(0, 1fr);
		min-height: 0;
		padding: 24px;
	}

	.octops-features-architecture__layer:first-child {
		min-height: 253px;
	}

	.octops-features-architecture__layer:not(:first-child) .octops-features-architecture__layer-status {
		align-items: center;
		height: 28px;
	}

	.octops-features-architecture__tags li {
		padding-inline: 7px;
	}

	.octops-features-architecture__layer:nth-of-type(n + 3) .octops-features-architecture__tags {
		row-gap: 0;
	}

	.octops-features-architecture__layer-arrow {
		height: 52px;
	}

	.octops-features-architecture__callout {
		border-radius: 16px;
		font-size: 16px;
		line-height: 24px;
		margin-inline: 0;
		margin-top: 12px;
		min-height: 263.8px;
		padding: 25px 24px;
	}

	.octops-features-capabilities.is-hidden-mobile,
	.octops-features-capabilities[data-features-hide-mobile="true"] {
		display: none !important;
	}

	.octops-features-capabilities__layout {
		gap: 40px;
		grid-template-columns: minmax(0, 1fr);
	}

	.octops-features-capabilities__toc-column {
		display: block;
		min-width: 0;
	}

	.octops-features-capabilities__toc {
		background: var(--octops-features-card);
		border-radius: 4px;
		box-shadow: 0 8px 16px rgba(24, 24, 27, 0.1), 0 0 1px rgba(24, 24, 27, 0.3);
		padding: 4px;
		position: static;
		top: auto;
	}

	.octops-features-capabilities__toc ul {
		display: grid;
		gap: 8px;
		grid-template-columns: minmax(0, 1fr);
		min-width: 0;
		width: 100%;
	}

	.octops-features-capabilities__toc li {
		max-width: 100%;
		min-width: 0;
		width: 100%;
	}

	.octops-features-capabilities__toc-link {
		align-items: center;
		border-radius: 2px;
		color: var(--octops-text);
		display: flex;
		font-family: var(--octops-font-body);
		font-size: 14px;
		font-weight: 400;
		line-height: 20px;
		max-width: 100%;
		min-height: 32px;
		min-width: 0;
		padding: 6px 8px;
		overflow-wrap: anywhere;
		white-space: normal;
		width: 100%;
	}

	.octops-features-capabilities__toc-link.is-active,
	.octops-features-capabilities__toc-link[aria-selected="true"] {
		background: #3371f4;
		border-radius: 6px;
		color: #ffffff;
	}

	.octops-features-capabilities__toc-link:focus-visible {
		outline: 2px solid var(--octops-primary);
		outline-offset: 2px;
	}

	.octops-features-capabilities__item[hidden] {
		display: none;
	}

	.octops-features-capabilities__item {
		min-height: 0;
		padding: 47px 24px 40px;
	}

	.octops-features-capabilities__item-label {
		color: #0957c3;
	}

	.octops-features-capabilities__item-title,
	.octops-features-capabilities__item:nth-child(n + 4) .octops-features-capabilities__item-title {
		margin-top: 5.2px;
	}

	.octops-features-capabilities__item-description,
	.octops-features-capabilities__item:nth-child(n + 4) .octops-features-capabilities__item-description {
		margin-top: 9.295px;
	}

	.octops-features-capabilities__details,
	.octops-features-capabilities__item:nth-child(n + 4) .octops-features-capabilities__details {
		margin-top: 27.99px;
	}

	.octops-features-capabilities__details-grid,
	.octops-features-capabilities__item:nth-child(n + 4) .octops-features-capabilities__details-grid {
		grid-template-columns: minmax(0, 1fr);
		margin-top: 16.01px;
	}

	.octops-features-capabilities__detail {
		border-top-color: var(--octops-features-diagram-stroke);
		min-height: 128.695px;
	}

	.octops-features-capabilities__detail-title {
		font-family: "Roboto", sans-serif;
	}

	.octops-features-capabilities__detail-description {
		font-family: "Roboto", sans-serif;
		font-size: 13px;
		line-height: 20.8px;
	}

	/* Keep every dot origin on the matching connector start and every animated
	 * translation in the same container-query coordinate system. */
	.octops-features-problem-visual__dot {
		height: 1.8919cqw;
		width: 1.8919cqw;
	}

	.octops-features-problem-visual__dot[data-problem-dot="1"],
	.octops-features-problem-visual__dot[data-problem-dot="2"] {
		left: 46.44cqw;
	}

	.octops-features-problem-visual__dot[data-problem-dot="3"],
	.octops-features-problem-visual__dot[data-problem-dot="4"] {
		left: 47.44cqw;
	}

	.octops-features-problem-visual__dot[data-problem-dot="5"],
	.octops-features-problem-visual__dot[data-problem-dot="6"] {
		left: 48.44cqw;
	}

	.octops-features-support {
		padding-bottom: 80px;
	}

	.octops-features-support__grid {
		grid-template-columns: minmax(0, 1fr);
		min-height: 675px;
	}

	.octops-features-support__item {
		align-items: center;
		display: flex;
		flex-direction: column;
		justify-content: center;
		min-height: 168px;
		padding: 24px 28px;
		text-align: center;
	}

	.octops-features-support__item + .octops-features-support__item {
		border-left: 0;
	}

	.octops-features-support__item-description {
		max-width: 284px;
	}

	.octops-features-problem-visual.is-features-motion-active .octops-features-problem-visual__connector--left {
		animation: octops-features-problem-connector-left-3 3s linear infinite;
	}

	.octops-features-problem-visual.is-features-motion-active .octops-features-problem-visual__connector--center {
		animation: octops-features-problem-connector-center-3 3s linear infinite;
	}

	.octops-features-problem-visual.is-features-motion-active .octops-features-problem-visual__connector--right {
		animation: octops-features-problem-connector-right-3 3s linear infinite;
	}

	.octops-features-problem-visual.is-features-motion-active .octops-features-problem-visual__feed-line,
	.octops-features-problem-visual.is-features-motion-active .octops-features-problem-visual__question {
		animation-duration: 3s;
	}

	.octops-features-problem-visual.is-features-motion-active .octops-features-problem-visual__feed-line[data-problem-line="1"] { animation-name: octops-features-problem-bar-1-3; }
	.octops-features-problem-visual.is-features-motion-active .octops-features-problem-visual__feed-line[data-problem-line="2"] { animation-name: octops-features-problem-bar-2-3; }
	.octops-features-problem-visual.is-features-motion-active .octops-features-problem-visual__feed-line[data-problem-line="3"] { animation-name: octops-features-problem-bar-3-3; }
	.octops-features-problem-visual.is-features-motion-active .octops-features-problem-visual__feed-line[data-problem-line="4"] { animation-name: octops-features-problem-bar-4-3; }
	.octops-features-problem-visual.is-features-motion-active .octops-features-problem-visual__feed-line[data-problem-line="5"] { animation-name: octops-features-problem-bar-5-3; }
	.octops-features-problem-visual.is-features-motion-active .octops-features-problem-visual__feed-line[data-problem-line="6"] { animation-name: octops-features-problem-bar-6-3; }
	.octops-features-problem-visual.is-features-motion-active .octops-features-problem-visual__feed-line[data-problem-line="7"] { animation-name: octops-features-problem-bar-7-3; }
	.octops-features-problem-visual.is-features-motion-active .octops-features-problem-visual__feed-line[data-problem-line="8"] { animation-name: octops-features-problem-bar-8-3; }
	.octops-features-problem-visual.is-features-motion-active .octops-features-problem-visual__feed-line[data-problem-line="9"] { animation-name: octops-features-problem-bar-9-3; }
	.octops-features-problem-visual.is-features-motion-active .octops-features-problem-visual__feed-line[data-problem-line="10"] { animation-name: octops-features-problem-bar-10-3; }
	.octops-features-problem-visual.is-features-motion-active .octops-features-problem-visual__feed-line[data-problem-line="11"] { animation-name: octops-features-problem-bar-11-3; }
	.octops-features-problem-visual.is-features-motion-active .octops-features-problem-visual__feed-line[data-problem-line="12"] { animation-name: octops-features-problem-bar-12-3; }

	.octops-features-problem-visual.is-features-motion-active .octops-features-problem-visual__question[data-problem-question="1"] { animation-name: octops-features-problem-question-1-3; }
	.octops-features-problem-visual.is-features-motion-active .octops-features-problem-visual__question[data-problem-question="2"] { animation-name: octops-features-problem-question-2-3; }
	.octops-features-problem-visual.is-features-motion-active .octops-features-problem-visual__question[data-problem-question="3"] { animation-name: octops-features-problem-question-3-3; }

	.octops-features-problem-visual.is-features-motion-active .octops-features-problem-visual__dot[data-problem-dot="1"] {
		animation: octops-features-flow-out-opacity-3 3s linear infinite, octops-features-problem-left-out-mobile 3s linear infinite;
	}

	.octops-features-problem-visual.is-features-motion-active .octops-features-problem-visual__dot[data-problem-dot="2"] {
		animation: octops-features-flow-return-opacity-3 3s linear infinite, octops-features-problem-left-return-mobile 3s linear infinite;
	}

	.octops-features-problem-visual.is-features-motion-active .octops-features-problem-visual__dot[data-problem-dot="3"] {
		animation: octops-features-flow-out-opacity-3 3s linear infinite, octops-features-problem-center-out-mobile 3s linear infinite;
	}

	.octops-features-problem-visual.is-features-motion-active .octops-features-problem-visual__dot[data-problem-dot="4"] {
		animation: octops-features-flow-return-opacity-3 3s linear infinite, octops-features-problem-center-return-mobile 3s linear infinite;
	}

	.octops-features-problem-visual.is-features-motion-active .octops-features-problem-visual__dot[data-problem-dot="5"] {
		animation: octops-features-flow-out-opacity-3 3s linear infinite, octops-features-problem-right-out-mobile 3s linear infinite;
	}

	.octops-features-problem-visual.is-features-motion-active .octops-features-problem-visual__dot[data-problem-dot="6"] {
		animation: octops-features-flow-return-opacity-3 3s linear infinite, octops-features-problem-right-return-mobile 3s linear infinite;
	}
}

@keyframes octops-features-problem-left-out-mobile {
	0%, 4% { translate: 0 0; }
	77.333% { animation-timing-function: step-end; translate: -28cqw 14.0541cqw; }
	81.333%, 100% { translate: 0 0; }
}

@keyframes octops-features-problem-left-return-mobile {
	0% { translate: -17.564cqw 8.8157cqw; }
	27.333% { animation-timing-function: step-end; translate: -28cqw 14.0541cqw; }
	31.333%, 54% { translate: 0 0; }
	100% { translate: -17.564cqw 8.8157cqw; }
}

@keyframes octops-features-problem-center-out-mobile {
	0%, 4% { translate: 0 0; }
	77.333% { animation-timing-function: step-end; translate: 2cqw 14.0541cqw; }
	81.333%, 100% { translate: 0 0; }
}

@keyframes octops-features-problem-center-return-mobile {
	0% { translate: 1.2545cqw 8.8157cqw; }
	27.333% { animation-timing-function: step-end; translate: 2cqw 14.0541cqw; }
	31.333%, 54% { translate: 0 0; }
	100% { translate: 1.2545cqw 8.8157cqw; }
}

@keyframes octops-features-problem-right-out-mobile {
	0%, 4% { translate: 0 0; }
	77.333% { animation-timing-function: step-end; translate: 32cqw 14.0541cqw; }
	81.333%, 100% { translate: 0 0; }
}

@keyframes octops-features-problem-right-return-mobile {
	0% { translate: 20.073cqw 8.8157cqw; }
	27.333% { animation-timing-function: step-end; translate: 32cqw 14.0541cqw; }
	31.333%, 54% { translate: 0 0; }
	100% { translate: 20.073cqw 8.8157cqw; }
}
@media (prefers-reduced-motion: reduce) {
	.octops-features-section *,
	.octops-features-section *::before,
	.octops-features-section *::after {
		animation: none !important;
		scroll-behavior: auto !important;
		transition: none !important;
	}

	.octops-features-pipeline__flow-line,
	.octops-features-problem-visual__connector,
	.octops-features-problem-visual__feed-line {
		opacity: 1 !important;
	}

	.octops-features-problem-visual__question {
		opacity: 1 !important;
		transform: translateX(-50%) scale(1) !important;
	}

	.octops-features-pipeline__dot,
	.octops-features-problem-visual__dot {
		display: none;
	}
}