/**
 * Homepage Flexible Content sections.
 *
 * Geometry follows the supplied OCTOPS desktop/mobile Figma nodes while all
 * visible values and media remain owned by WordPress/ACF.
 */

.octops-home-section {
	position: relative;
	width: 100%;
}

.octops-home-section:not(.octops-home-statistics) {
	padding-block: 80px;
}

.octops-home-section .octops-container {
	max-width: 1408px;
	padding-inline: 64px;
}

.octops-home-intro {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-inline: auto;
	text-align: center;
	width: 100%;
}

.octops-home-intro__badge {
	margin: 0;
}

.octops-home-intro__heading {
	color: var(--octops-text);
	font-family: "Poppins", sans-serif;
	font-size: 30px;
	font-weight: 500;
	line-height: 38px;
	margin: 0;
	max-width: 1100px;
}

.octops-home-intro__description {
	color: var(--octops-text);
	font-size: 20px;
	line-height: 30px;
	margin: 8px 0 0;
	max-width: 1180px;
}

.octops-home-section--fixed-dark {
	--octops-text: #fafafa;
	--octops-text-muted: #d4d4d8;
	--octops-panel: #07234e;
	--octops-border: rgba(106, 166, 255, 0.3);
	background-color: #021b42;
	color: #fafafa;
	isolation: isolate;
	position: relative;
}

.octops-home-fixed-grid {
	background-image:
		linear-gradient(rgba(106, 166, 255, 0.11) 1px, transparent 1px),
		linear-gradient(90deg, rgba(106, 166, 255, 0.11) 1px, transparent 1px);
	background-position: 0 0, 0 0;
	background-size: 72px 60px;
	inset: 0;
	pointer-events: none;
	position: absolute;
	z-index: 0;
}

.octops-home-fixed-grid.is-viewport-fixed {
	clip-path: inset(
		var(--octops-home-grid-clip-top, 0px)
		0
		var(--octops-home-grid-clip-bottom, 0px)
		0
	);
	position: fixed;
}

.octops-home-section--fixed-dark > .octops-container {
	position: relative;
	z-index: 1;
}

.octops-home-how-boundary-holder,
.octops-home-how-boundary-surface {
	display: contents;
}

.octops-home-section--fixed-dark .octops-eyebrow {
	-webkit-backdrop-filter: blur(4px) saturate(110%) brightness(0.96);
	backdrop-filter: blur(4px) saturate(110%) brightness(0.96);
	background: rgba(7, 16, 31, 0.16) padding-box;
	box-shadow:
		0 4px 4px rgba(9, 87, 195, 0.1),
		0 8px 10px rgba(9, 87, 195, 0.025);
	color: #fafafa;
}

.octops-home-section--fixed-dark .octops-eyebrow::after {
	background: url("../images/effects/eyebrow-rim-dark.svg") center / 100% 100% no-repeat;
	border-radius: inherit;
	content: "";
	inset: 0;
	padding: 1px;
	pointer-events: none;
	position: absolute;
	-webkit-mask:
		linear-gradient(#000 0 0) content-box,
		linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask:
		linear-gradient(#000 0 0) content-box,
		linear-gradient(#000 0 0);
	mask-composite: exclude;
}

/* Figma dark mode keeps the connected Outcomes surface in the emphasized token. */
html[data-theme="dark"] .octops-home-how-it-works,
html[data-theme="dark"] .octops-home-system-architecture {
	background-color: #152f66;
}

html[data-theme="dark"] .octops-home-how-it-works {
	--octops-panel: #0d1624;
	--octops-home-how-card-backing: #152f66;
}

/* Statistic cards */
.octops-home-statistics {
	padding-block: 40px 80px;
}

.octops-home-statistics__grid {
	display: grid;
	gap: 24px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.octops-home-statistics__card {
	background: var(--octops-panel);
	border: 1px solid var(--octops-border);
	border-radius: 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-height: 140px;
	padding: 25px;
}

.octops-home-statistics__card.is-hidden-desktop {
	display: none;
}

.octops-home-statistics__icon-frame,
.octops-home-statistics__icon {
	display: block;
	height: 24px;
	width: 24px;
}

html[data-theme="dark"] .octops-home-statistics__icon {
	filter: brightness(0) invert(1);
}

.octops-home-statistics__value {
	color: var(--octops-primary);
	font-size: 20px;
	font-weight: 600;
	line-height: 30px;
	margin: 0;
}

.octops-home-statistics__label {
	color: var(--octops-text);
	font-size: 14px;
	line-height: 20px;
	margin: 0;
}

/* The Problem */
.octops-home-problem {
	--octops-home-alert-error-background: #fef2f2;
	--octops-home-alert-error-border: #fecaca;
	--octops-home-alert-error-text: #991919;
	--octops-home-alert-title: #dc2626;
	--octops-home-alert-warning-background: #fff7ed;
	--octops-home-alert-warning-border: #fed7aa;
	--octops-home-alert-warning-text: #92310a;
}

html[data-theme="dark"] .octops-home-problem {
	--octops-home-alert-error-background: #1f0808;
	--octops-home-alert-error-border: #511111;
	--octops-home-alert-error-text: #fca5a5;
	--octops-home-alert-title: #f87171;
	--octops-home-alert-warning-background: #220a04;
	--octops-home-alert-warning-border: #6c2710;
	--octops-home-alert-warning-text: #fdba74;
}

.octops-home-problem__layout {
	align-items: start;
	display: grid;
	gap: 24px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.octops-home-problem__content {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.octops-home-problem__content .octops-home-intro {
	align-items: flex-start;
	text-align: left;
}

.octops-home-problem__cards {
	display: grid;
	gap: 24px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.octops-home-problem__card {
	background: var(--octops-panel);
	border: 1px solid var(--octops-border);
	border-radius: 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-height: 166px;
	padding: 25px;
	transition: border-color 180ms ease;
}

.octops-home-problem__card:hover,
.octops-home-problem__card:focus-within {
	background:
		linear-gradient(var(--octops-panel), var(--octops-panel)) padding-box,
		linear-gradient(135deg, #afceff, #ffd496) border-box;
	border-color: transparent;
}

.octops-home-problem__card-icon-frame,
.octops-home-problem__card-icon {
	display: block;
	height: 24px;
	width: 24px;
}

.octops-home-problem__card-icon {
	object-fit: contain;
}

.octops-home-problem__card-title {
	color: var(--octops-text);
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	margin: 0;
}

.octops-home-problem__panel {
	-webkit-backdrop-filter: blur(16px) saturate(110%);
	backdrop-filter: blur(16px) saturate(110%);
	background: var(--octops-bg);
	border: 0;
	border-radius: 16px;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
	display: flex;
	flex-direction: column;
	gap: 24px;
	overflow: hidden;
	padding: 5px 5px 25px;
	position: sticky;
	top: 112px;
}

body.admin-bar .octops-home-problem__panel {
	top: 144px;
}

.octops-home-problem__panel-bar,
.octops-home-capabilities__browser-bar,
.octops-home-case-studies__card-bar {
	align-items: center;
	display: flex;
	gap: 16px;
	height: 56px;
	padding: 12px 20px;
}

.octops-home-capabilities__browser-bar {
	background: color-mix(in srgb, var(--octops-panel) 94%, transparent);
	border-bottom: 1px solid var(--octops-border);
}

.octops-home-problem__panel-bar {
	--octops-glass-dark-shadow: none;
	--octops-glass-light-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
	--octops-glass-light-surface: rgba(0, 0, 0, 0.004);
	border-radius: 16px;
	flex: 0 0 auto;
}

.octops-home-problem__traffic-lights,
.octops-home-capabilities__traffic-lights,
.octops-home-case-studies__traffic-lights {
	display: flex;
	flex: 0 0 auto;
	gap: 4px;
}

.octops-home-problem__traffic-lights i,
.octops-home-capabilities__traffic-lights i,
.octops-home-case-studies__traffic-lights i {
	border-radius: 50%;
	display: block;
	height: 8px;
	width: 8px;
}

.octops-home-problem__traffic-lights i:nth-child(1),
.octops-home-capabilities__traffic-lights i:nth-child(1),
.octops-home-case-studies__traffic-lights i:nth-child(1) {
	background: #ff5050;
}

.octops-home-problem__traffic-lights i:nth-child(2),
.octops-home-capabilities__traffic-lights i:nth-child(2),
.octops-home-case-studies__traffic-lights i:nth-child(2) {
	background: #ffb800;
}

.octops-home-problem__traffic-lights i:nth-child(3),
.octops-home-capabilities__traffic-lights i:nth-child(3),
.octops-home-case-studies__traffic-lights i:nth-child(3) {
	background: #00c060;
}

.octops-home-problem__panel-title {
	color: var(--octops-home-alert-title);
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
	margin: 0;
}

.octops-home-problem__panel-warning {
	align-items: center;
	color: var(--octops-home-alert-title);
	display: flex;
	font-size: 12px;
	font-weight: 700;
	height: 22px;
	justify-content: center;
	margin-left: auto;
	position: relative;
	transform: translateY(-1px);
	width: 24px;
}

.octops-home-problem__panel-warning::before {
	border-bottom: 20px solid var(--octops-home-alert-title);
	border-left: 11px solid transparent;
	border-right: 11px solid transparent;
	content: "";
	inset: 0 auto auto 1px;
	position: absolute;
}

.octops-home-problem__panel-warning::after {
	border-bottom: 16px solid var(--octops-bg);
	border-left: 8.5px solid transparent;
	border-right: 8.5px solid transparent;
	content: "";
	inset: 2px auto auto 3.5px;
	position: absolute;
}

.octops-home-problem__panel-warning {
	z-index: 0;
}

.octops-home-problem__panel-warning::before,
.octops-home-problem__panel-warning::after {
	z-index: -1;
}

.octops-home-problem__alerts {
	display: flex;
	flex-direction: column;
	gap: 11px;
	padding: 0 24px;
}

.octops-home-problem__alert {
	align-items: center;
	background: var(--octops-home-alert-error-background);
	border: 0;
	border-radius: 4px;
	box-shadow: inset 0 0 0 1px var(--octops-home-alert-error-border);
	color: var(--octops-home-alert-error-text);
	display: flex;
	gap: 8px;
	min-height: 40px;
	padding: 8px 12px;
}

.octops-home-problem__alert.is-warning {
	background: var(--octops-home-alert-warning-background);
	box-shadow: inset 0 0 0 1px var(--octops-home-alert-warning-border);
	color: var(--octops-home-alert-warning-text);
}

.octops-home-problem__alert-icon-frame,
.octops-home-problem__alert-icon {
	display: block;
	flex: 0 0 16px;
	height: 16px;
	width: 16px;
}

.octops-home-problem__alert p {
	font-size: 12px;
	line-height: 16px;
	margin: 0;
}

html[data-theme="dark"] .octops-home-problem__alert:not(.is-warning) .octops-home-problem__alert-icon {
	filter: brightness(0) saturate(100%) invert(88%) sepia(13%) saturate(1355%) hue-rotate(303deg) brightness(104%) contrast(98%);
}

html[data-theme="dark"] .octops-home-problem__alert.is-warning .octops-home-problem__alert-icon {
	filter: brightness(0) saturate(100%) invert(81%) sepia(77%) saturate(753%) hue-rotate(325deg) brightness(103%) contrast(98%);
}

/* Capabilities */
.octops-home-capabilities__container {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.octops-home-capabilities__scroll-stage {
	position: relative;
}

.octops-home-capabilities__layout {
	align-items: start;
	display: grid;
	gap: 40px;
	grid-template-columns: minmax(320px, 423px) minmax(0, 1fr);
	position: relative;
}

.octops-home-capabilities__panels {
	align-self: center;
	min-width: 0;
	position: sticky;
	top: 116px;
}

body.admin-bar .octops-home-capabilities__panels {
	top: 148px;
}

.octops-home-capabilities__tabs {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.octops-home-capabilities__tab {
	align-self: flex-start;
	appearance: none;
	background: var(--octops-panel);
	border: 1px solid var(--octops-border);
	border-radius: 16px;
	box-shadow: 0 4px 4px rgba(9, 87, 195, 0.1);
	color: var(--octops-text);
	cursor: pointer;
	display: flex;
	flex-direction: column;
	font-family: "Manrope", sans-serif;
	gap: 4px;
	min-height: 0;
	padding: 25px;
	position: relative;
	text-align: left;
	transition: border-color 600ms cubic-bezier(0.4, 0, 0.2, 1), border-radius 600ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 600ms cubic-bezier(0.4, 0, 0.2, 1);
	width: 100%;
}

.octops-home-capabilities__tab::before {
	background: linear-gradient(135deg, #afceff, #ffd496);
	border-radius: inherit;
	content: "";
	inset: -1px;
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	opacity: 0;
	padding: 2px;
	pointer-events: none;
	position: absolute;
	transition: opacity 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

.octops-home-capabilities__tab.is-active {
	border-color: transparent;
	border-radius: 19px;
}

.octops-home-capabilities__tab.is-active::before {
	opacity: 1;
}

.octops-home-capabilities__tab:focus-visible {
	outline: 3px solid var(--octops-focus);
	outline-offset: 3px;
}

.octops-home-capabilities__tab-title {
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
}

.octops-home-capabilities__tab-description {
	display: block;
	font-size: 14px;
	line-height: 20px;
}

.octops-home-capabilities__tab-description-inner,
.octops-home-capabilities__tab-description-copy {
	display: block;
}

/* Measure every media panel synchronously without changing the selected tab. */
.octops-home-capabilities__scroll-stage.is-measuring-capabilities .octops-home-capabilities__panel[hidden] {
	display: block;
}

.octops-home-capabilities__panel[hidden] {
	display: none;
}

.octops-home-capabilities__browser {
	background: linear-gradient(90deg, #afceff, #ffd496) border-box;
	border: 7px solid transparent;
	border-radius: 16px;
	box-shadow:
		0 0 40px rgba(204, 217, 255, 0.3),
		0 0 24px rgba(255, 212, 150, 0.55),
		0 0 16px rgba(176, 207, 255, 0.7),
		0 0 6px rgba(191, 224, 255, 0.9);
	overflow: hidden;
}

.octops-home-capabilities__browser-bar {
	background: var(--octops-panel);
	border-bottom: 0;
	border-radius: 10px 10px 0 0;
	padding-inline: 24px;
}

.octops-home-capabilities__browser-bar p {
	background: rgba(255, 255, 255, 0.02);
	border-radius: 999px;
	box-shadow: 0 4px 4px rgba(9, 87, 195, 0.1);
	color: var(--octops-text-muted);
	font-size: 16px;
	line-height: 24px;
	margin: 0;
	padding: 4px 24px;
}

.octops-home-capabilities__media-frame {
	background: color-mix(in srgb, var(--octops-panel) 96%, #afceff);
	aspect-ratio: 849 / 480;
	overflow: hidden;
}

.octops-home-capabilities__media {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

/* How It Works */
.octops-home-how-it-works__container,
.octops-home-system-architecture__container,
.octops-home-case-studies__container,
.octops-home-resources__container,
.octops-home-faq__layout {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.octops-home-how-it-works__scroll-stage,
.octops-home-system-architecture__scroll-stage {
	position: relative;
	width: 100%;
}

.octops-home-how-it-works__stage {
	--octops-home-how-progress: 0;
	--octops-home-how-card-width: 251px;
	--octops-home-how-orbit-size: 1001px;
	--octops-home-how-step-radius: 484.5px;
	height: 1106px;
	margin-inline: auto;
	max-width: 1191px;
	position: relative;
	width: 100%;
}

.octops-home-how-it-works__orbit {
	height: var(--octops-home-how-orbit-size);
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: var(--octops-home-how-orbit-size);
}

.octops-home-how-it-works__orbit-ring,
.octops-home-how-it-works__orbit-progress {
	border-radius: 50%;
	inset: 0;
	position: absolute;
}

.octops-home-how-it-works__orbit-ring {
	border: 3px solid rgba(175, 206, 255, 0.7);
}

.octops-home-how-it-works__orbit-progress {
	background: conic-gradient(
		from 0deg,
		#ffd496 calc(var(--octops-home-how-progress) * 1turn),
		transparent 0
	);
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
	mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
}

.octops-home-how-it-works__orbit-core {
	background: #afceff;
	border: 8px solid rgba(51, 113, 244, 0.32);
	border-radius: 50%;
	height: 22px;
	left: calc(50% - 11px);
	position: absolute;
	top: calc(50% - 11px);
	transform:
		rotate(calc(var(--octops-home-how-progress) * 360deg))
		translateY(calc(var(--octops-home-how-orbit-size) / -2));
	width: 22px;
}

.octops-home-how-it-works__steps {
	inset: 0;
	isolation: isolate;
	list-style: none;
	margin: 0;
	padding: 0;
	position: absolute;
	z-index: 2;
}

.octops-home-how-it-works__step {
	--octops-home-step-angle: calc(
		(360deg / var(--octops-home-step-count)) * var(--octops-home-step-index)
	);
	left: 50%;
	/* Opacity belongs to the article, but tracks must never show through it. */
	background: var(--octops-home-how-card-backing, #021b42);
	border-radius: 12px;
	position: absolute;
	top: 50%;
	transform:
		translate(-50%, -50%)
		rotate(var(--octops-home-step-angle))
		translateY(calc(var(--octops-home-how-step-radius) * -1))
		rotate(calc(0deg - var(--octops-home-step-angle)));
	width: var(--octops-home-how-card-width);
	z-index: 2;
}

.octops-home-how-it-works__step article {
	background: #ffffff;
	border: 1px solid rgba(106, 166, 255, 0.7);
	border-radius: 12px;
	box-shadow: 0 0 18px rgba(106, 166, 255, 0.6);
	color: #27272a;
	display: flex;
	flex-direction: column;
	gap: 8px;
	box-sizing: border-box;
	min-height: 126px;
	opacity: 1;
	padding: 16px;
	transition: opacity 240ms ease, border-color 240ms ease, box-shadow 240ms ease;
}

.octops-home-how-it-works__step:is(.is-active, .is-complete) article {
	border-color: #ffd496;
	box-shadow: 0 0 24px rgba(255, 212, 150, 0.7);
	opacity: 1;
}

.octops-home-how-it-works__step-number,
.octops-home-how-it-works__step-title,
.octops-home-how-it-works__step-description {
	margin: 0;
}

.octops-home-how-it-works__step-number {
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
}

.octops-home-how-it-works__step-title {
	color: #3371f4;
	font-size: 18px;
	font-weight: 600;
	line-height: 28px;
}

.octops-home-how-it-works__step-description {
	font-size: 16px;
	line-height: 24px;
}

html[data-theme="dark"] .octops-home-how-it-works__step article {
	background: var(--octops-panel);
	color: #fafafa;
}

html[data-theme="dark"] .octops-home-how-it-works__step-title {
	color: #76a0f8;
}

html[data-theme="dark"] .octops-home-how-it-works__step:is(.is-active, .is-complete) article {
	border-color: rgba(255, 193, 129, 0.7);
	box-shadow: 0 0 18px rgba(255, 193, 129, 0.55);
}

/* System Architecture */
.octops-home-how-it-works + .octops-home-system-architecture,
.octops-home-system-architecture.is-home-how-adjacent {
	padding-top: 0;
}

.octops-home-system-architecture__intro--mobile {
	display: none;
}

.octops-home-system-architecture__graph {
	margin-inline: auto;
	max-width: 1152px;
	min-height: 442px;
	position: relative;
	width: 100%;
}

.octops-home-system-architecture__connectors {
	height: 100%;
	inset: 0;
	overflow: visible;
	pointer-events: none;
	position: absolute;
	width: 100%;
	z-index: 1;
}

.octops-home-system-architecture__connector {
	fill: none;
	stroke: #76a0f8;
	stroke-dasharray: var(--octops-home-architecture-path-length, 1);
	stroke-dashoffset: var(--octops-home-architecture-path-length, 1);
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-opacity: 0.48;
	stroke-width: 1.5;
	transition: stroke-dashoffset 360ms ease, opacity 240ms ease;
}

.octops-home-system-architecture__connector.is-structure {
	stroke: #6aa6ff;
	stroke-opacity: 0.65;
}

.octops-home-system-architecture__connector.is-tone-amber {
	stroke: #f2ba69;
}

.octops-home-system-architecture__connector.is-tone-green {
	stroke: #22c976;
}

.octops-home-system-architecture__connector.is-loop {
	stroke: #ffd496;
	stroke-dasharray: 7 8;
	stroke-opacity: 0.72;
}

.octops-home-system-architecture__packet {
	fill: #afceff;
	filter: drop-shadow(0 0 4px rgba(175, 206, 255, 0.9));
	opacity: 0;
	pointer-events: none;
}

.octops-home-system-architecture__mobile-junction {
	display: none;
	fill: #9cc2ff;
	opacity: 0;
	pointer-events: none;
	transition: opacity 180ms ease;
}

.octops-home-system-architecture__group-anchor {
	display: block;
	height: 0;
	pointer-events: none;
	width: 100%;
}

.octops-home-system-architecture__packet.is-loop {
	fill: #ffd496;
	filter: drop-shadow(0 0 4px rgba(255, 212, 150, 0.9));
}

.octops-home-system-architecture__groups {
	display: grid;
	gap: 32px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	position: relative;
	z-index: 2;
}

.octops-home-system-architecture__group {
	display: flex;
	flex-direction: column;
	gap: 24px;
	min-width: 0;
}

.octops-home-system-architecture__group-header,
.octops-home-system-architecture__node {
	background: #062149;
	border: 1px dashed rgba(106, 166, 255, 0.3);
	border-radius: 14px;
	color: #fafafa;
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-height: 128px;
	padding: 17px;
}

.octops-home-system-architecture__group-header {
	transition: opacity 280ms ease, border-color 280ms ease;
}

.octops-home-system-architecture__group.is-amber .octops-home-system-architecture__group-header,
.octops-home-system-architecture__node.is-amber {
	border-color: rgba(255, 212, 150, 0.55);
}

.octops-home-system-architecture__group.is-green .octops-home-system-architecture__group-header,
.octops-home-system-architecture__node.is-green {
	border-color: rgba(0, 192, 96, 0.62);
}

.octops-home-system-architecture__nodes {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.octops-home-system-architecture__node {
	border-radius: 12px;
	border-style: solid;
	min-height: 108px;
	opacity: 0.48;
	transition: opacity 280ms ease, border-color 280ms ease, box-shadow 280ms ease;
}

.octops-home-system-architecture__node.is-revealed,
.octops-home-system-architecture__group.is-revealed .octops-home-system-architecture__group-header {
	opacity: 1;
}

.octops-home-system-architecture__node.is-active {
	border-color: #6aa6ff;
	box-shadow: 0 0 24px rgba(106, 166, 255, 0.28);
}

.octops-home-system-architecture__node.is-active.is-amber {
	border-color: #ffd496;
	box-shadow: 0 0 24px rgba(255, 212, 150, 0.25);
}

.octops-home-system-architecture__node.is-active.is-green,
.octops-home-system-architecture__node.is-goal.is-done {
	border-color: #22c976;
	box-shadow: 0 0 24px rgba(34, 201, 118, 0.24);
}

.octops-home-system-architecture__number,
.octops-home-system-architecture__kicker,
.octops-home-system-architecture__group-title,
.octops-home-system-architecture__description,
.octops-home-system-architecture__node-number,
.octops-home-system-architecture__node-title,
.octops-home-system-architecture__node-description {
	margin: 0;
}

.octops-home-system-architecture__number,
.octops-home-system-architecture__kicker,
.octops-home-system-architecture__node-number {
	color: #76a0f8;
	font-family: "JetBrains Mono", monospace;
	font-size: 10px;
	letter-spacing: 0.08em;
	line-height: 14px;
	text-transform: uppercase;
}

.octops-home-system-architecture__group-meta,
.octops-home-system-architecture__node-meta {
	align-items: center;
	display: flex;
	gap: 6px;
	margin: 0;
}

.octops-home-system-architecture__node-dot {
	background: #76a0f8;
	border-radius: 50%;
	display: block;
	height: 4px;
	width: 4px;
}

.octops-home-system-architecture__group.is-amber .octops-home-system-architecture__number,
.octops-home-system-architecture__group.is-amber .octops-home-system-architecture__kicker,
.octops-home-system-architecture__node.is-amber .octops-home-system-architecture__node-number {
	color: #ffd496;
}

.octops-home-system-architecture__node.is-amber .octops-home-system-architecture__node-dot {
	background: #ffd496;
}

.octops-home-system-architecture__group.is-green .octops-home-system-architecture__number,
.octops-home-system-architecture__group.is-green .octops-home-system-architecture__kicker,
.octops-home-system-architecture__node.is-green .octops-home-system-architecture__node-number {
	color: #4ade80;
}

.octops-home-system-architecture__node.is-green .octops-home-system-architecture__node-dot {
	background: #4ade80;
}

.octops-home-system-architecture__group-title,
.octops-home-system-architecture__node-title {
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
}

.octops-home-system-architecture__description,
.octops-home-system-architecture__node-description {
	color: #fafafa;
	font-size: 12px;
	line-height: 16px;
}

.octops-home-system-architecture__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	list-style: none;
	margin: 2px 0 0;
	padding: 0;
}

.octops-home-system-architecture__tags li {
	border: 1px solid rgba(106, 166, 255, 0.28);
	border-radius: 4px;
	color: #d4d4d8;
	font-size: 9px;
	letter-spacing: 0.05em;
	line-height: 14px;
	padding: 1px 6px;
	text-transform: uppercase;
}

/* Case studies */
.octops-home-case-studies__grid {
	display: grid;
	gap: 40px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin-inline: auto;
	max-width: 1228px;
	width: 100%;
}

.octops-home-case-studies__card {
	background: var(--octops-panel);
	border: 0;
	border-radius: 16px;
	box-shadow: inset 0 0 0 1px var(--octops-primary);
	display: flex;
	flex-direction: column;
	gap: 16px;
	overflow: hidden;
	padding: 24px;
	position: relative;
	isolation: isolate;
}

.octops-home-case-studies__card-bar {
	--octops-glass-light-shadow:
		inset 0 0 0 1px rgba(255, 255, 255, 0.1),
		0 4px 4px rgba(9, 87, 195, 0.1);
	--octops-glass-light-surface: rgba(0, 0, 0, 0.004);
	border-radius: 999px;
	height: auto;
	margin: 0;
	min-height: 56px;
	padding: 16px;
}

.octops-home-case-studies__card-title {
	color: #2d67df;
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
	margin: 0;
	min-width: 0;
	overflow-wrap: anywhere;
}

.octops-home-case-studies__card-link {
	border-radius: 16px;
	color: inherit;
	inset: 0;
	position: absolute;
	text-decoration: none;
	z-index: 1;
}

.octops-home-case-studies__card-link:focus-visible {
	outline: 3px solid var(--octops-focus);
	outline-offset: -3px;
}

html[data-theme="dark"] .octops-home-case-studies__card-title {
	color: var(--octops-primary);
}

.octops-home-case-studies__summary {
	display: grid;
	gap: 8px;
	grid-template-columns: minmax(0, 1fr) 16px minmax(0, 1fr);
	position: relative;
}

.octops-home-case-studies__summary-arrow {
	align-items: center;
	align-self: center;
	display: flex;
	grid-column: 2;
	grid-row: 1;
	height: 16px;
	justify-content: center;
	width: 16px;
}

.octops-home-case-studies__summary-arrow img {
	display: block;
	height: 11px;
	width: 11px;
}

.octops-home-case-studies__summary-side {
	display: flex;
	flex-direction: column;
	gap: 4px;
	justify-content: center;
	min-width: 0;
}

.octops-home-case-studies__summary-side.is-before {
	grid-column: 1;
	grid-row: 1;
}

.octops-home-case-studies__summary-side.is-after {
	grid-column: 3;
	grid-row: 1;
}

.octops-home-case-studies__summary-side p {
	color: var(--octops-text);
	font-size: 14px;
	line-height: 20px;
	margin: 0;
}

.octops-home-case-studies__label {
	color: var(--octops-text-muted) !important;
	font-size: 12px !important;
	line-height: 16px !important;
	margin: 0 !important;
}

.octops-home-case-studies__comparison {
	--octops-home-comparison-position: 50%;
	aspect-ratio: 546 / 355;
	border-radius: 7px;
	overflow: hidden;
	position: relative;
	z-index: 2;
}

.octops-home-case-studies__layer {
	inset: 0;
	position: absolute;
}

.octops-home-case-studies__layer.is-after {
	clip-path: inset(0 0 0 var(--octops-home-comparison-position));
}

.octops-home-case-studies__media {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.octops-home-case-studies__comparison-label {
	--octops-glass-light-shadow:
		inset 0 0 0 1px rgba(255, 255, 255, 0.1),
		0 4px 4px rgba(9, 87, 195, 0.1);
	--octops-glass-light-surface: rgba(0, 0, 0, 0.004);
	border-radius: 999px;
	color: #fafafa;
	font-size: 16px;
	line-height: 24px;
	max-width: calc(50% - 24px);
	min-width: 96px;
	overflow: hidden;
	padding: 4px 18px;
	position: absolute;
	text-align: center;
	text-overflow: ellipsis;
	top: 12px;
	white-space: nowrap;
	z-index: 2;
}

.octops-home-case-studies__comparison-label.is-before {
	left: 12px;
}

.octops-home-case-studies__comparison-label.is-after {
	min-width: 85px;
	right: 12px;
}

.octops-home-case-studies__divider {
	background: #ffffff;
	box-shadow: 0 0 0 1px rgba(39, 39, 42, 0.3);
	height: 100%;
	left: var(--octops-home-comparison-position);
	position: absolute;
	top: 0;
	transform: translateX(-50%);
	width: 3px;
	z-index: 3;
}

.octops-home-case-studies__divider-handle {
	align-items: center;
	background: #ffffff;
	border-radius: 50%;
	box-shadow:
		0 3px 6px rgba(9, 30, 66, 0.2),
		0 1px 2px rgba(9, 30, 66, 0.16);
	display: flex;
	height: 33px;
	justify-content: center;
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 33px;
}

.octops-home-case-studies__divider-handle img {
	display: block;
	height: 14px;
	width: 14px;
}

.octops-home-case-studies__range {
	appearance: none;
	background: transparent;
	cursor: ew-resize;
	height: 100%;
	inset: 0;
	opacity: 0;
	position: absolute;
	width: 100%;
	z-index: 4;
}

.octops-home-case-studies__range:focus-visible {
	opacity: 1;
	outline: 3px solid var(--octops-focus);
	outline-offset: -4px;
}

/* Resources */
.octops-home-resources__tabs {
	align-items: center;
	background: var(--octops-panel-muted);
	border-radius: 4px;
	display: flex;
	height: 36px;
	overflow-x: auto;
	padding: 4px;
	scrollbar-width: none;
}

.octops-home-resources__tabs::-webkit-scrollbar {
	display: none;
}

.octops-home-resources__tab {
	appearance: none;
	background: transparent;
	border: 0;
	border-radius: 999px;
	color: var(--octops-text);
	cursor: pointer;
	flex: 0 0 auto;
	font-family: "Manrope", sans-serif;
	font-size: 14px;
	height: 28px;
	line-height: 20px;
	padding: 4px 24px;
}

.octops-home-resources__tab.is-active {
	--octops-glass-light-shadow:
		inset 0 0 0 1px rgba(255, 255, 255, 0.1),
		0 4px 4px rgba(9, 87, 195, 0.1);
	--octops-glass-light-surface: rgba(0, 0, 0, 0.004);
	color: #2d67df;
}

html[data-theme="dark"] .octops-home-resources__tab.is-active {
	color: #fafafa;
}

.octops-home-resources__tab:focus-visible {
	outline: 2px solid var(--octops-focus);
	outline-offset: -2px;
}

.octops-home-resources__panel[hidden] {
	display: none;
}

.octops-home-resources__grid {
	display: grid;
	gap: 24px;
	grid-template-columns: minmax(360px, 0.9fr) minmax(0, 1.2fr);
	grid-template-rows: repeat(3, minmax(0, auto));
}

.octops-home-resources__card {
	background: var(--octops-panel);
	border: 1px solid var(--octops-primary);
	border-radius: 16px;
	min-width: 0;
	overflow: hidden;
}

.octops-home-resources__card:first-child {
	align-self: start;
	grid-row: 1 / span 3;
}

.octops-home-resources__card-link {
	color: var(--octops-text);
	display: flex;
	gap: 8px;
	height: 100%;
	padding: 24px;
	text-decoration: none;
}

.octops-home-resources__card-link:focus-visible {
	outline: 3px solid var(--octops-focus);
	outline-offset: -4px;
}

.octops-home-resources__card:first-child .octops-home-resources__card-link {
	flex-direction: column;
	padding: 24px;
}

.octops-home-resources__card-media {
	border-radius: 12px;
	flex: 0 0 226px;
	height: 166px;
	overflow: hidden;
}

.octops-home-resources__card:first-child .octops-home-resources__card-media {
	flex-basis: 212px;
	height: 212px;
	width: 100%;
}

.octops-home-resources__card-image {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.octops-home-resources__card-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

.octops-home-resources__card-eyebrow {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	font-size: 10px;
	gap: 6px;
	line-height: 14px;
}

.octops-home-resources__card-category {
	align-items: center;
	background: var(--octops-panel);
	border-radius: 4px;
	box-shadow: inset 0 0 1px var(--octops-primary);
	color: var(--octops-primary);
	display: inline-flex;
	font-size: 12px;
	font-weight: 400;
	height: 20px;
	justify-content: center;
	line-height: 16px;
	min-height: 16px;
	overflow: hidden;
	padding: 2px 6px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.octops-home-resources__card-separator {
	background: var(--octops-primary);
	border-radius: 50%;
	height: 3px;
	width: 3px;
}

.octops-home-resources__card-title-row {
	--octops-glass-light-shadow:
		inset 0 0 0 1px rgba(255, 255, 255, 0.1),
		0 4px 4px rgba(9, 87, 195, 0.1);
	--octops-glass-light-surface: rgba(0, 0, 0, 0.004);
	align-items: center;
	border-radius: 999px;
	display: flex;
	gap: 12px;
	justify-content: space-between;
	min-height: 48px;
	padding: 8px 16px;
}

.octops-home-resources__card-title {
	color: #2d67df;
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
	margin: 0;
}

.octops-home-resources__card-arrow {
	align-items: center;
	color: #2d67df;
	display: flex;
	flex: 0 0 20px;
	height: 20px;
	justify-content: center;
	position: relative;
	width: 20px;
}

.octops-home-resources__card-arrow::before {
	background: currentColor;
	content: "";
	height: 12px;
	inset: 4px;
	-webkit-mask: url("../images/icons/post-card-arrow.svg") center / 12px 12px no-repeat;
	mask: url("../images/icons/post-card-arrow.svg") center / 12px 12px no-repeat;
	position: absolute;
	width: 12px;
}

.octops-home-resources__card-arrow img {
	display: block;
	height: 100%;
	opacity: 0;
	width: 100%;
}

html[data-theme="dark"] .octops-home-resources__card-title,
html[data-theme="dark"] .octops-home-resources__card-arrow {
	color: var(--octops-primary);
}

.octops-home-resources__card-excerpt,
.octops-home-resources__card-meta {
	font-size: 12px;
	line-height: 16px;
	margin: 0;
}

.octops-home-resources__card-excerpt {
	border-bottom: 1px solid var(--octops-border);
	padding-bottom: 8px;
}

.octops-home-resources__card-meta {
	display: flex;
	gap: 12px;
	margin-top: auto;
}

/* Homepage FAQ */
.octops-home-faq__layout {
	align-items: center;
}

.octops-home-faq__filters {
	display: none;
}

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

.octops-home-faq__item {
	background: var(--octops-panel);
	border: 1px solid var(--octops-border);
	border-radius: 8px;
	overflow: hidden;
}

.octops-home-faq__question {
	font-size: inherit;
	margin: 0;
}

.octops-home-faq__trigger {
	appearance: none;
	align-items: center;
	background: transparent;
	border: 0;
	color: var(--octops-text);
	cursor: pointer;
	display: flex;
	font-family: "Manrope", sans-serif;
	font-size: 14px;
	font-weight: 400;
	justify-content: space-between;
	line-height: 20px;
	min-height: 56px;
	padding: 12px;
	text-align: left;
	width: 100%;
}

.octops-home-faq__item.is-open .octops-home-faq__trigger {
	background: var(--octops-panel-muted);
}

.octops-home-faq__trigger:focus-visible {
	outline: 3px solid var(--octops-focus);
	outline-offset: -3px;
}

.octops-home-faq__answer {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 240ms ease;
}

.octops-home-faq__item.is-open .octops-home-faq__answer {
	grid-template-rows: 1fr;
}

.octops-home-faq__answer[aria-hidden="true"] {
	display: grid;
}

.octops-home-faq__answer .octops-accordion__panel-inner {
	min-height: 0;
	overflow: hidden;
}

.octops-home-faq__answer-body {
	color: var(--octops-text-muted);
	font-size: 14px;
	line-height: 20px;
	padding: 12px;
}

.octops-home-faq__answer-body > *:first-child,
.octops-home-faq__answer-body p:first-child {
	margin-top: 0;
}

.octops-home-faq__answer-body > *:last-child,
.octops-home-faq__answer-body p:last-child {
	margin-bottom: 0;
}

.octops-home-faq__more-link {
	height: 40px;
	min-height: 40px;
	min-width: 100%;
	width: 100%;
}

.octops-home-faq__more-icon {
	display: block;
	height: 16px;
	position: relative;
	width: 16px;
}

.octops-home-faq__more-icon::before,
.octops-home-faq__more-icon::after {
	content: "";
	position: absolute;
}

.octops-home-faq__more-icon::before {
	background: currentColor;
	height: 1.5px;
	left: 2px;
	top: 7px;
	width: 12px;
}

.octops-home-faq__more-icon::after {
	border-right: 1.5px solid currentColor;
	border-top: 1.5px solid currentColor;
	height: 6px;
	right: 2px;
	top: 4px;
	transform: rotate(45deg);
	width: 6px;
}

@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
	.octops-home-how-it-works__scroll-stage.is-scroll-pinned > .octops-home-how-it-works__stage {
		position: sticky;
		top: var(--octops-home-pin-top, 0);
	}
}

@media (max-width: 640px) {
	.octops-home-section--fixed-dark.is-home-mobile-low-paint > .octops-home-fixed-grid {
		display: none;
	}
}

@media (max-width: 640px) and (prefers-reduced-motion: no-preference) {
	.octops-home-how-it-works[data-home-how-it-works-count="5"] .octops-home-how-it-works__scroll-stage.is-mobile-fixed-pin > .octops-home-how-it-works__stage {
		margin-inline: 0;
		max-width: none;
		transform: none;
		width: var(--octops-home-mobile-pin-width);
	}

	.octops-home-how-it-works[data-home-how-it-works-count="5"] .octops-home-how-it-works__scroll-stage.is-mobile-fixed-pin > .octops-home-how-it-works__stage.is-mobile-pin-before,
	.octops-home-how-it-works[data-home-how-it-works-count="5"] .octops-home-how-it-works__scroll-stage.is-mobile-fixed-pin > .octops-home-how-it-works__stage.is-mobile-pin-after {
		left: var(--octops-home-mobile-pin-flow-left);
		position: absolute;
	}

	.octops-home-how-it-works[data-home-how-it-works-count="5"] .octops-home-how-it-works__scroll-stage.is-mobile-fixed-pin > .octops-home-how-it-works__stage.is-mobile-pin-before {
		top: 0;
	}

	.octops-home-how-it-works[data-home-how-it-works-count="5"] .octops-home-how-it-works__scroll-stage.is-mobile-fixed-pin > .octops-home-how-it-works__stage.is-mobile-pin-active {
		left: var(--octops-home-mobile-pin-left);
		position: fixed;
		top: var(--octops-home-pin-top, 0);
		z-index: 2;
	}

	.octops-home-how-it-works[data-home-how-it-works-count="5"] .octops-home-how-it-works__scroll-stage.is-mobile-fixed-pin > .octops-home-how-it-works__stage.is-mobile-pin-after {
		top: var(--octops-home-mobile-pin-distance);
	}

	.octops-home-how-boundary-holder.is-home-how-boundary-held {
		display: block;
		height: var(--octops-home-how-boundary-height, auto);
		margin-top: calc(var(--octops-home-how-boundary-distance, 0px) * -1);
		overflow-anchor: none;
		position: relative;
	}

	.octops-home-how-boundary-holder.is-home-how-boundary-held::after {
		display: none;
	}

	.octops-home-how-boundary-holder.is-home-how-boundary-held > .octops-home-how-boundary-surface {
		--octops-home-how-boundary-surface: #021b42;
		background-color: var(--octops-home-how-boundary-surface);
		display: block;
		left: 0;
		right: 0;
		z-index: 1;
	}

	html[data-theme="dark"] .octops-home-how-boundary-holder.is-home-how-boundary-held > .octops-home-how-boundary-surface {
		--octops-home-how-boundary-surface: #152f66;
	}

	/* Paint the authored 24 px How/Architecture boundary inside the same
	 * compositor surface. The extra pixel covers Safari's fixed/absolute seam
	 * without changing the holder, release point, or document geometry. */
	.octops-home-how-boundary-holder.is-home-how-boundary-held > .octops-home-how-boundary-surface::before {
		background-color: var(--octops-home-how-boundary-surface);
		content: "";
		height: 25px;
		inset: -24px 0 auto;
		pointer-events: none;
		position: absolute;
	}

	.octops-home-how-boundary-holder.is-home-how-boundary-held > .octops-home-how-boundary-surface.is-mobile-pin-before,
	.octops-home-how-boundary-holder.is-home-how-boundary-held > .octops-home-how-boundary-surface.is-mobile-pin-after {
		position: absolute;
	}

	.octops-home-how-boundary-holder.is-home-how-boundary-held > .octops-home-how-boundary-surface.is-mobile-pin-before {
		top: 0;
	}

	.octops-home-how-boundary-holder.is-home-how-boundary-held > .octops-home-how-boundary-surface.is-mobile-pin-active {
		position: fixed;
		top: var(--octops-home-how-boundary-top, 0px);
	}

	.octops-home-how-boundary-holder.is-home-how-boundary-held > .octops-home-how-boundary-surface.is-mobile-pin-after {
		top: var(--octops-home-how-boundary-distance, 0px);
	}
}

@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
	.octops-home-capabilities__scroll-stage.is-scroll-pinned > .octops-home-capabilities__layout,
	.octops-home-system-architecture__scroll-stage.is-scroll-pinned > .octops-home-system-architecture__graph {
		position: sticky;
		top: var(--octops-home-pin-top, 0);
	}

	.octops-home-capabilities__scroll-stage.is-scroll-pinned .octops-home-capabilities__panels {
		position: static;
	}

	.octops-home-capabilities__scroll-stage.is-scroll-pinned > .octops-home-capabilities__layout {
		min-height: var(--octops-home-capabilities-canvas-height, 0px);
	}

	.octops-home-capabilities__scroll-stage.is-scroll-pinned .octops-home-capabilities__tabs {
		gap: 12px;
	}

	.octops-home-capabilities__scroll-stage.is-scroll-pinned .octops-home-capabilities__tab {
		padding: 10px 16px;
	}

	.octops-home-capabilities__scroll-stage.is-scroll-pinned.is-scroll-compact .octops-home-capabilities__tabs {
		gap: 8px;
	}

	.octops-home-capabilities__scroll-stage.is-scroll-pinned.is-scroll-compact .octops-home-capabilities__tab {
		padding: 6px 12px;
	}

	.octops-home-how-it-works__scroll-stage.is-scroll-pinned > .octops-home-how-it-works__stage {
		--octops-home-how-card-width: 251px;
		--octops-home-how-orbit-size: min(
			1001px,
			var(--octops-home-how-pin-max-orbit-width, 1001px),
			var(--octops-home-how-pin-max-orbit-height, 1001px)
		);
		--octops-home-how-step-radius: calc((var(--octops-home-how-orbit-size) / 2) - 16px);
		height: calc(var(--octops-home-how-orbit-size) + 105px);
		max-width: 1191px;
		width: min(100%, calc(var(--octops-home-how-orbit-size) + 190px));
	}

	.octops-home-how-it-works__scroll-stage.is-scroll-pinned .octops-home-how-it-works__orbit {
		height: var(--octops-home-how-orbit-size);
		width: var(--octops-home-how-orbit-size);
	}

	.octops-home-how-it-works__scroll-stage.is-scroll-pinned .octops-home-how-it-works__orbit-core {
		transform:
			rotate(calc(var(--octops-home-how-progress) * 360deg))
			translateY(calc(var(--octops-home-how-orbit-size) / -2));
	}

	.octops-home-how-it-works__scroll-stage.is-scroll-pinned .octops-home-how-it-works__step {
		transform:
			translate(-50%, -50%)
			rotate(var(--octops-home-step-angle))
			translateY(calc(var(--octops-home-how-step-radius) * -1))
			rotate(calc(0deg - var(--octops-home-step-angle)));
		width: var(--octops-home-how-card-width);
	}

	.octops-home-how-it-works__scroll-stage.is-scroll-pinned .octops-home-how-it-works__step article {
		min-height: 126px;
		padding: 16px;
	}
}

@media (min-width: 1024px) and (max-height: 820px) and (prefers-reduced-motion: no-preference) {
	.octops-home-how-it-works__scroll-stage.is-scroll-pinned > .octops-home-how-it-works__stage {
		--octops-home-how-card-width: 190px;
		--octops-home-how-step-radius: calc((var(--octops-home-how-orbit-size) / 2) - 20px);
		height: calc(var(--octops-home-how-orbit-size) + 88px);
	}

	.octops-home-how-it-works__scroll-stage.is-scroll-pinned .octops-home-how-it-works__step article {
		min-height: 106px;
		padding: 12px;
	}

	.octops-home-how-it-works__scroll-stage.is-scroll-pinned .octops-home-how-it-works__step-number,
	.octops-home-how-it-works__scroll-stage.is-scroll-pinned .octops-home-how-it-works__step-description {
		font-size: 14px;
		line-height: 20px;
	}

	.octops-home-how-it-works__scroll-stage.is-scroll-pinned .octops-home-how-it-works__step-title {
		font-size: 16px;
		line-height: 24px;
	}
}

@media (min-width: 901px) and (max-width: 1023px) {
	.octops-home-capabilities__layout {
		display: flex;
		flex-direction: column;
		gap: 24px;
	}

	.octops-home-capabilities__tabs {
		--octops-home-capability-rail-card-width: min(320px, 70vw);
		flex-direction: row;
		overflow-x: auto;
		padding: 8px max(2px, calc((100% - var(--octops-home-capability-rail-card-width)) / 2)) 16px 0;
		scroll-padding-inline: 0 calc((100% - var(--octops-home-capability-rail-card-width)) / 2);
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		width: 100%;
	}

	.octops-home-capabilities__tabs::-webkit-scrollbar {
		display: none;
	}

	.octops-home-capabilities__tab {
		flex: 0 0 var(--octops-home-capability-rail-card-width);
		scroll-snap-align: center;
	}

	.octops-home-capabilities__panels {
		position: static;
		width: 100%;
	}
}

@media (max-width: 1099px) {
	.octops-home-section .octops-container {
		padding-inline: 32px;
	}

	.octops-home-problem__layout {
		grid-template-columns: 1fr;
	}

	.octops-home-problem__panel {
		position: static;
	}

	.octops-home-capabilities__layout {
		grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.2fr);
	}

	.octops-home-problem__cards {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.octops-home-system-architecture__groups {
		gap: 16px;
	}
}

@media (min-width: 901px) and (max-width: 1279px) {
	.octops-home-how-it-works__stage {
		--octops-home-how-orbit-size: min(860px, calc(100vw - 240px));
		height: calc(var(--octops-home-how-orbit-size) + 100px);
	}

	.octops-home-how-it-works__orbit {
		height: var(--octops-home-how-orbit-size);
		width: var(--octops-home-how-orbit-size);
	}

	.octops-home-how-it-works__orbit-core {
		transform:
			rotate(calc(var(--octops-home-how-progress) * 360deg))
			translateY(calc(var(--octops-home-how-orbit-size) / -2));
	}

	.octops-home-how-it-works__step {
		transform:
			translate(-50%, -50%)
			rotate(var(--octops-home-step-angle))
			translateY(calc((var(--octops-home-how-orbit-size) / -2) + 14px))
			rotate(calc(0deg - var(--octops-home-step-angle)));
		width: 200px;
	}

	.octops-home-how-it-works__step article {
		min-height: 96px;
		padding: 14px;
	}
}

@media (max-width: 900px) {
	.octops-home-section:not(.octops-home-statistics) {
		padding-block: 64px;
	}

	.octops-home-statistics {
		padding-block: 32px 64px;
	}

	.octops-home-capabilities__scroll-stage {
		min-height: 0 !important;
	}

	.octops-home-capabilities__layout {
		display: flex;
		flex-direction: column;
		gap: 24px;
		position: static;
	}

	.octops-home-capabilities__tabs {
		--octops-home-capability-rail-card-width: 40vw;
		gap: 16px;
		flex-direction: row;
		overflow-x: auto;
		padding: 8px max(2px, calc((100% - var(--octops-home-capability-rail-card-width)) / 2)) 16px 0;
		scroll-padding-inline: 0 calc((100% - var(--octops-home-capability-rail-card-width)) / 2);
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		width: 100%;
	}

	.octops-home-capabilities__tabs::-webkit-scrollbar {
		display: none;
	}

	.octops-home-capabilities__tab {
		flex: 0 0 var(--octops-home-capability-rail-card-width);
		scroll-snap-align: center;
	}

	.octops-home-capabilities__panels {
		position: static;
		width: 100%;
	}

	.octops-home-how-it-works__stage {
		--octops-home-how-step-radius: min(300px, calc(50vw - 112px));
		height: 700px;
	}

	.octops-home-how-it-works__orbit {
		height: 520px;
		width: 520px;
	}

	.octops-home-how-it-works__orbit-core {
		transform:
			rotate(calc(var(--octops-home-how-progress) * 360deg))
			translateY(-260px);
	}

	.octops-home-how-it-works__step {
		transform:
			translate(-50%, -50%)
			rotate(var(--octops-home-step-angle))
			translateY(calc(var(--octops-home-how-step-radius) * -1))
			rotate(calc(0deg - var(--octops-home-step-angle)));
		width: 180px;
	}

	.octops-home-how-it-works__step article {
		min-height: 90px;
		padding: 12px;
	}

	.octops-home-system-architecture__groups,
	.octops-home-case-studies__grid {
		grid-template-columns: 1fr;
	}

	.octops-home-system-architecture__connectors {
		display: block;
	}

	.octops-home-system-architecture__groups {
		gap: 24px;
	}

	.octops-home-system-architecture__group,
	.octops-home-system-architecture__nodes {
		gap: 30px;
	}

	.octops-home-system-architecture__group-header,
	.octops-home-system-architecture__node {
		padding: 17px;
	}

	.octops-home-system-architecture__connector {
		stroke-opacity: 0.75;
		stroke-width: 1px;
	}

	.octops-home-system-architecture__connector.is-structure {
		stroke: #6aa6ff;
		stroke-opacity: 0.75;
		stroke-width: 1.5px;
	}

	.octops-home-system-architecture__connector.is-loop {
		stroke: #ffc181;
		stroke-dasharray: 9 9;
	}

	.octops-home-resources__grid {
		grid-template-columns: 1fr;
		grid-template-rows: none;
	}

	.octops-home-resources__card:first-child {
		grid-row: auto;
	}

	.octops-home-resources__card-link,
	.octops-home-resources__card:first-child .octops-home-resources__card-link {
		flex-direction: column;
		padding: 24px;
	}

	.octops-home-resources__card-media,
	.octops-home-resources__card:first-child .octops-home-resources__card-media {
		flex-basis: auto;
		height: 212px;
		width: 100%;
	}
}

@media (max-width: 640px) {
	.octops-home-section .octops-container {
		padding-inline: 16px;
	}

	.octops-home-section:not(.octops-home-statistics) {
		padding-block: 32px;
	}

	.octops-home-statistics {
		padding-block: 24px 32px;
	}

	.octops-home-section.octops-home-how-it-works {
		padding-block: 80px 24px;
	}

	.octops-home-section.octops-home-how-it-works + .octops-home-section.octops-home-system-architecture,
	.octops-home-system-architecture.is-home-how-adjacent {
		padding-block: 0 80px;
	}

	.octops-home-system-architecture.is-home-how-adjacent::before {
		background-color: inherit;
		content: "";
		height: 2px;
		inset: -1px 0 auto;
		pointer-events: none;
		position: absolute;
		z-index: 1;
	}

	.octops-home-case-studies + .octops-home-resources,
	.octops-home-resources + .octops-home-faq {
		padding-top: 8px;
	}

	.octops-home-intro__heading {
		font-size: 30px;
		line-height: 38px;
	}

	.octops-home-intro__description {
		font-size: 20px;
		line-height: 30px;
	}

	.octops-home-statistics__grid {
		gap: 24px;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.octops-home-statistics__card,
	.octops-home-statistics__card.is-hidden-desktop {
		display: flex;
		min-height: 159px;
		padding: 25px;
	}

	.octops-home-problem__content {
		gap: 40px;
	}

	.octops-home-problem__content .octops-home-intro {
		align-items: center;
		text-align: center;
	}

	.octops-home-problem__cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.octops-home-problem__card {
		min-height: 166px;
		padding: 25px;
	}

	.octops-home-problem__card-title {
		font-size: 14px;
		line-height: 20px;
	}

	.octops-home-problem__panel {
		margin-top: 24px;
	}

	.octops-home-problem__panel-bar {
		padding-inline: 12px;
	}

	.octops-home-problem__alerts {
		padding: 0 24px;
	}

	.octops-home-capabilities__tab {
		--octops-home-capability-rail-card-width: 173px;
		flex-basis: var(--octops-home-capability-rail-card-width);
		padding: 20px;
	}

	.octops-home-capabilities__tabs {
		--octops-home-capability-rail-card-width: 173px;
	}

	.octops-home-capabilities__browser {
		border-width: 6px;
	}

	.octops-home-capabilities__browser-bar {
		height: 48px;
		padding: 8px 16px;
	}

	.octops-home-capabilities__browser-bar p {
		font-size: 14px;
		line-height: 20px;
		padding: 4px 16px;
	}

	.octops-home-capabilities__media-frame {
		aspect-ratio: 294 / 496;
	}

	.octops-home-how-it-works__stage {
		--octops-home-how-orbit-size: min(330px, calc(100vw - 20px));
		--octops-home-how-step-radius: min(
			calc((var(--octops-home-how-orbit-size) / 2) - 8px),
			calc((100vw - 92px) / 2)
		);
		height: 396px;
	}

	.octops-home-how-it-works__orbit {
		height: var(--octops-home-how-orbit-size);
		width: var(--octops-home-how-orbit-size);
	}

	.octops-home-how-it-works__orbit-ring {
		border-width: 1px;
	}

	.octops-home-how-it-works__orbit-core {
		border-width: 4px;
		height: 12px;
		left: calc(50% - 6px);
		top: calc(50% - 6px);
		transform:
			rotate(calc(var(--octops-home-how-progress) * 360deg))
			translateY(calc(var(--octops-home-how-orbit-size) / -2));
		width: 12px;
	}

	.octops-home-how-it-works__step {
		transform:
			translate(-50%, -50%)
			rotate(var(--octops-home-step-angle))
			translateY(calc(var(--octops-home-how-step-radius) * -1))
			rotate(calc(0deg - var(--octops-home-step-angle)));
		width: 84px;
	}

	.octops-home-how-it-works__step article {
		gap: 2px;
		min-height: 42px;
		padding: 4px;
	}

	.octops-home-how-it-works__step-number,
	.octops-home-how-it-works__step-description {
		font-size: 6px;
		line-height: 8px;
	}

	.octops-home-how-it-works__step-title {
		font-size: 7px;
		line-height: 9px;
	}

	.octops-home-system-architecture__intro--desktop {
		display: none;
	}

	.octops-home-system-architecture__intro--mobile {
		display: block;
	}

	.octops-home-system-architecture__graph {
		min-height: 0;
	}

	.octops-home-system-architecture__connectors {
		display: block;
	}

	.octops-home-case-studies__grid {
		gap: 40px;
	}

	.octops-home-case-studies__card {
		padding: 24px;
	}

	.octops-home-case-studies__summary {
		gap: 8px;
	}

	.octops-home-case-studies__comparison {
		aspect-ratio: 322 / 355;
	}

	.octops-home-resources__tabs {
		margin-inline: -8px;
	}

	.octops-home-resources__tab {
		padding-inline: 16px;
	}

	.octops-home-resources__grid {
		gap: 40px;
	}

	.octops-home-faq__trigger {
		min-height: 56px;
	}

	.octops-home-faq__filters {
		background: var(--octops-panel);
		border: 1px solid var(--octops-border);
		border-radius: 4px;
		box-shadow: 0 4px 4px rgba(9, 87, 195, 0.1);
		display: flex;
		flex-direction: column;
		padding: 4px 12px;
		width: 100%;
	}

	.octops-home-faq__filter {
		appearance: none;
		background: transparent;
		border: 0;
		color: var(--octops-text);
		cursor: pointer;
		font: inherit;
		min-height: 36px;
		padding: 8px 0;
		text-align: left;
	}

	.octops-home-faq__filter.is-active {
		color: var(--octops-primary);
	}

	.octops-home-faq__filter:focus-visible {
		outline: 2px solid var(--octops-focus);
		outline-offset: 2px;
	}

	.octops-home-faq__answer-body {
		font-size: 14px;
		line-height: 20px;
	}
}

.octops-home-section.octops-home-how-it-works + .octops-home-section.octops-home-system-architecture,
.octops-home-system-architecture.is-home-how-adjacent {
	padding-top: 0;
}

@media (prefers-reduced-motion: reduce) {
	.octops-home-capabilities__layout {
		position: static;
	}

	.octops-home-capabilities__scroll-stage {
		min-height: 0 !important;
	}

	.octops-home-capabilities__scroll-stage,
	.octops-home-how-it-works__scroll-stage,
	.octops-home-system-architecture__scroll-stage {
		height: auto !important;
	}

	.octops-home-capabilities__panels {
		position: static;
	}

	.octops-home-how-it-works__stage,
	.octops-home-system-architecture__graph {
		position: relative;
		top: auto;
	}

	.octops-home-how-it-works__step article,
	.octops-home-capabilities__tab,
	.octops-home-capabilities__tab::before,
	.octops-home-system-architecture__group-header,
	.octops-home-system-architecture__node,
	.octops-home-system-architecture__connector,
	.octops-home-system-architecture__mobile-junction,
	.octops-home-faq__answer,
	.octops-home-faq__chevron {
		transition: none;
	}

	.octops-home-how-it-works__step article,
	.octops-home-system-architecture__node {
		opacity: 1;
	}

	.octops-home-system-architecture__connector {
		stroke-dashoffset: 0 !important;
	}

	.octops-home-system-architecture__packet {
		display: none;
	}
}

/* Latest five-step How It Works composition: Figma 4228:66196. */
.octops-home-how-it-works__entry-line {
	display: none;
}

.octops-home-how-it-works__center {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 14px;
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: min(286px, 34%);
	z-index: 3;
}

.octops-home-how-it-works__center-prompt {
	color: #fafafa;
	font-size: 20px;
	line-height: 30px;
	margin: 0;
	text-align: center;
}

.octops-home-how-it-works__center-link {
	color: #fafafa;
	flex: 0 0 auto;
}

.octops-home-how-it-works__center-link-icon {
	-webkit-mask: url("../images/icons/arrow-down.svg") center / 13.6667px 13.6667px no-repeat;
	mask: url("../images/icons/arrow-down.svg") center / 13.6667px 13.6667px no-repeat;
	transform: rotate(-90deg);
}

.octops-home-how-it-works[data-home-how-it-works-count="0"] .octops-home-how-it-works__stage {
	height: auto;
	min-height: 0;
}

.octops-home-how-it-works[data-home-how-it-works-count="0"] .octops-home-how-it-works__center {
	margin-inline: auto;
	padding-block: 48px;
	position: static;
	transform: none;
}

.octops-home-how-it-works[data-home-how-it-works-count="5"] .octops-home-how-it-works__stage {
	--octops-home-how-orbit-size: 65.2935cqw;
	aspect-ratio: 971 / 1071;
	container-type: inline-size;
	height: auto;
	max-width: 971px;
	width: min(100%, 971px);
}

.octops-home-how-it-works[data-home-how-it-works-count="5"] .octops-home-how-it-works__orbit {
	height: var(--octops-home-how-orbit-size);
	left: 50%;
	top: 38.516cqw;
	transform: translateX(-50%);
	width: var(--octops-home-how-orbit-size);
}

.octops-home-how-it-works[data-home-how-it-works-count="5"] .octops-home-how-it-works__orbit-ring,
.octops-home-how-it-works[data-home-how-it-works-count="5"] .octops-home-how-it-works__orbit-progress {
	border: 0;
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
	mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
}

.octops-home-how-it-works[data-home-how-it-works-count="5"] .octops-home-how-it-works__orbit-ring {
	background: linear-gradient(90deg, #afceff 0%, #ffd496 100%);
}

.octops-home-how-it-works[data-home-how-it-works-count="5"] .octops-home-how-it-works__orbit-progress {
	background: conic-gradient(
		from 0deg,
		rgba(255, 255, 255, 0.92) calc(var(--octops-home-how-orbit-progress, 1) * 1turn),
		transparent 0
	);
}

.octops-home-how-it-works[data-home-how-it-works-count="5"] .octops-home-how-it-works__orbit-core {
	border-width: clamp(4px, 0.8239cqw, 8px);
	height: 2.2657cqw;
	left: calc(50% - 1.13285cqw);
	top: calc(50% - 1.13285cqw);
	transform:
		rotate(calc(var(--octops-home-how-orbit-progress, 1) * 360deg))
		translateY(calc(var(--octops-home-how-orbit-size) / -2));
	width: 2.2657cqw;
}

.octops-home-how-it-works[data-home-how-it-works-count="5"] .octops-home-how-it-works__entry-line {
	background: #ffffff;
	display: block;
	height: 30.484cqw;
	left: calc(50% - 2px);
	position: absolute;
	top: 12.9763cqw;
	width: 4px;
	z-index: 0;
}

.octops-home-how-it-works[data-home-how-it-works-count="5"].is-progressive .octops-home-how-it-works__entry-line {
	transform: scaleY(var(--octops-home-how-entry-progress, 0));
	transform-origin: center top;
}

.octops-home-how-it-works[data-home-how-it-works-count="5"].is-progressive:not(.is-orbit-started) .octops-home-how-it-works__orbit-core {
	opacity: 0;
}

/* Cards and track keep their emphasis through the current step. Keep the complete
 * static composition for no-JavaScript and reduced-motion visitors. */
@media (prefers-reduced-motion: no-preference) {
	.octops-home-how-it-works.is-progressive .octops-home-how-it-works__step article {
		opacity: 0.32;
	}

	.octops-home-how-it-works.is-progressive .octops-home-how-it-works__step:is(.is-active, .is-complete) article {
		opacity: 1;
	}

	.octops-home-how-it-works.is-progressive .octops-home-how-it-works__orbit-ring {
		opacity: 0.32;
	}

	.octops-home-how-it-works[data-home-how-it-works-count="5"].is-progressive:not(.is-orbit-started) .octops-home-how-it-works__orbit-progress {
		opacity: 0;
	}

	.octops-home-how-it-works[data-home-how-it-works-count="5"].is-progressive .octops-home-how-it-works__entry-line {
		background: rgba(255, 255, 255, 0.32);
		transform: none;
	}

	.octops-home-how-it-works[data-home-how-it-works-count="5"].is-progressive .octops-home-how-it-works__entry-line::after {
		background: #ffffff;
		content: "";
		inset: 0;
		opacity: 1;
		position: absolute;
		transform: scaleY(var(--octops-home-how-entry-progress, 0));
		transform-origin: center top;
	}

	.octops-home-how-it-works[data-home-how-it-works-count="5"].is-progressive.is-home-mobile-low-paint .octops-home-how-it-works__entry-line.is-active::after {
		/* Mobile advances by complete steps, including the entry segment. */
		transform: none;
	}
}

.octops-home-how-it-works[data-home-how-it-works-count="5"] .octops-home-how-it-works__step {
	left: auto;
	top: auto;
	transform: none;
	width: 21.6272cqw;
}

.octops-home-how-it-works[data-home-how-it-works-count="5"] .octops-home-how-it-works__step:nth-child(1),
.octops-home-how-it-works[data-home-how-it-works-count="5"] .octops-home-how-it-works__step:nth-child(2) {
	left: 50%;
	transform: translateX(-50%);
}

.octops-home-how-it-works[data-home-how-it-works-count="5"] .octops-home-how-it-works__step:nth-child(1) {
	top: 0;
}

.octops-home-how-it-works[data-home-how-it-works-count="5"] .octops-home-how-it-works__step:nth-child(2) {
	top: 32.0299cqw;
}

.octops-home-how-it-works[data-home-how-it-works-count="5"] .octops-home-how-it-works__step:nth-child(3) {
	left: 71.8847cqw;
	top: 63.8517cqw;
}

.octops-home-how-it-works[data-home-how-it-works-count="5"] .octops-home-how-it-works__step:nth-child(4) {
	left: 40.2678cqw;
	top: 97.3223cqw;
}

.octops-home-how-it-works[data-home-how-it-works-count="5"] .octops-home-how-it-works__step:nth-child(5) {
	left: 6.5911cqw;
	top: 63.8517cqw;
}

.octops-home-how-it-works[data-home-how-it-works-count="5"] .octops-home-how-it-works__step article {
	gap: 0.8239cqw;
	min-height: 12.9763cqw;
	padding: 1.7508cqw;
}

.octops-home-how-it-works[data-home-how-it-works-count="5"] .octops-home-how-it-works__step-number,
.octops-home-how-it-works[data-home-how-it-works-count="5"] .octops-home-how-it-works__step-description {
	font-size: 1.6478cqw;
	line-height: 2.4717cqw;
}

.octops-home-how-it-works[data-home-how-it-works-count="5"] .octops-home-how-it-works__step-title {
	font-size: 1.8538cqw;
	line-height: 2.8836cqw;
}

.octops-home-how-it-works[data-home-how-it-works-count="5"] .octops-home-how-it-works__center {
	gap: 1.4418cqw;
	left: 50%;
	top: 65.1905cqw;
	transform: translateX(-50%);
	width: 29.4542cqw;
}

.octops-home-how-it-works[data-home-how-it-works-count="5"] .octops-home-how-it-works__center-prompt {
	font-size: 2.0597cqw;
	line-height: 3.0896cqw;
}

.octops-home-how-it-works[data-home-how-it-works-count="5"] .octops-home-how-it-works__center-link {
	background: linear-gradient(90deg, rgba(175, 206, 255, 0.05), rgba(255, 212, 150, 0.05)) padding-box;
	font-size: 1.6478cqw;
	height: 4.9434cqw;
	line-height: 2.4717cqw;
	min-height: 4.9434cqw;
	padding-inline: 2.2657cqw;
}

@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
	.octops-home-how-it-works[data-home-how-it-works-count="5"] .octops-home-how-it-works__scroll-stage.is-scroll-pinned > .octops-home-how-it-works__stage {
		--octops-home-how-orbit-size: 65.2935cqw;
		aspect-ratio: 971 / 1071;
		height: auto;
		max-width: 971px;
		width: min(100%, var(--octops-home-how-pin-max-stage-width, 971px));
	}

	.octops-home-how-it-works[data-home-how-it-works-count="5"] .octops-home-how-it-works__scroll-stage.is-scroll-pinned .octops-home-how-it-works__step {
		transform: none;
		width: 21.6272cqw;
	}

	.octops-home-how-it-works[data-home-how-it-works-count="5"] .octops-home-how-it-works__scroll-stage.is-scroll-pinned .octops-home-how-it-works__step:nth-child(1),
	.octops-home-how-it-works[data-home-how-it-works-count="5"] .octops-home-how-it-works__scroll-stage.is-scroll-pinned .octops-home-how-it-works__step:nth-child(2) {
		transform: translateX(-50%);
	}

	.octops-home-how-it-works[data-home-how-it-works-count="5"] .octops-home-how-it-works__scroll-stage.is-scroll-pinned .octops-home-how-it-works__step article {
		min-height: 12.9763cqw;
		padding: 1.7508cqw;
	}
}

@media (max-width: 640px) {
	.octops-home-how-it-works[data-home-how-it-works-count="5"] .octops-home-how-it-works__stage {
		--octops-home-how-orbit-size: 75.8017cqw;
		aspect-ratio: auto;
		height: auto;
		left: 50%;
		margin-inline: 0;
		max-width: 420px;
		padding-top: min(calc(120.6997cqw + 20px), 527px);
		transform: translateX(-50%);
		width: min(420px, calc(100% + 32px));
	}

	.octops-home-how-it-works[data-home-how-it-works-count="5"] .octops-home-how-it-works__orbit {
		height: var(--octops-home-how-orbit-size);
		top: 36.4431cqw;
		width: var(--octops-home-how-orbit-size);
	}

	.octops-home-how-it-works[data-home-how-it-works-count="5"] .octops-home-how-it-works__orbit-ring,
	.octops-home-how-it-works[data-home-how-it-works-count="5"] .octops-home-how-it-works__orbit-progress {
		-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
		mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
	}

	.octops-home-how-it-works[data-home-how-it-works-count="5"] .octops-home-how-it-works__entry-line {
		height: 28.863cqw;
		left: calc(50% - 1px);
		top: 17.2012cqw;
		width: 2px;
	}

	.octops-home-how-it-works[data-home-how-it-works-count="5"] .octops-home-how-it-works__step {
		width: 34.4023cqw;
	}

	.octops-home-how-it-works[data-home-how-it-works-count="5"] .octops-home-how-it-works__step:nth-child(2) {
		top: 29.1545cqw;
	}

	.octops-home-how-it-works[data-home-how-it-works-count="5"] .octops-home-how-it-works__step:nth-child(3) {
		left: auto;
		right: 0;
		top: 65.5977cqw;
	}

	.octops-home-how-it-works[data-home-how-it-works-count="5"] .octops-home-how-it-works__step:nth-child(4) {
		left: 50%;
		top: 103.7901cqw;
		transform: translateX(-50%);
	}

	.octops-home-how-it-works[data-home-how-it-works-count="5"] .octops-home-how-it-works__step:nth-child(5) {
		left: 0;
		top: 65.5977cqw;
	}

	.octops-home-how-it-works[data-home-how-it-works-count="5"] .octops-home-how-it-works__step article {
		gap: 0.5831cqw;
		min-height: 17.2012cqw;
		padding: 2.3324cqw;
	}

	.octops-home-how-it-works[data-home-how-it-works-count="5"] .octops-home-how-it-works__step-number,
	.octops-home-how-it-works[data-home-how-it-works-count="5"] .octops-home-how-it-works__step-description {
		font-size: clamp(9px, 2.9155cqw, 12px);
		line-height: clamp(12px, 4.0816cqw, 17px);
	}

	.octops-home-how-it-works[data-home-how-it-works-count="5"] .octops-home-how-it-works__step-title {
		font-size: clamp(10px, 3.2069cqw, 13px);
		line-height: clamp(14px, 4.6647cqw, 19px);
	}

	.octops-home-how-it-works[data-home-how-it-works-count="5"] .octops-home-how-it-works__center {
		gap: 2.9155cqw;
		left: auto;
		margin: 24px auto 0;
		position: relative;
		top: auto;
		transform: none;
		width: min(calc(100% - 32px), 358px);
	}

	.octops-home-how-it-works[data-home-how-it-works-count="5"] .octops-home-how-it-works__center-prompt {
		font-size: clamp(10px, 3.2069cqw, 13px);
		line-height: clamp(15px, 4.6647cqw, 19px);
	}

	.octops-home-how-it-works[data-home-how-it-works-count="5"] .octops-home-how-it-works__center-link {
		font-size: clamp(9px, 2.7697cqw, 12px);
		height: clamp(36px, 11.6618cqw, 48px);
		line-height: clamp(14px, 4.0816cqw, 17px);
		min-height: clamp(36px, 11.6618cqw, 48px);
		padding-inline: clamp(10px, 3.4985cqw, 15px);
	}

	.octops-home-how-it-works[data-home-how-it-works-count="5"] .octops-home-how-it-works__center-link-icon {
		flex-basis: 16px;
		height: 16px;
		margin-left: 4px;
		width: 16px;
	}
}