.bl-rb-success-hero {
	position: relative;
	overflow: hidden;
}

.bl-rb-success-hero__container {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--bl-space-8);
	align-items: center;
}

@media (min-width: 1024px) {
	.bl-rb-success-hero__container {
		grid-template-columns: 1fr 1fr;
		gap: var(--bl-space-12);
	}
}

.bl-rb-success-hero__content {
	display: flex;
	flex-direction: column;
	gap: var(--bl-space-6);
	z-index: 2;
}

.bl-rb-success-hero__headline {
	margin: 0;
	max-width: 16ch;
}

.bl-rb-success-hero__lead {
	margin: 0;
	color: var(--bl-text-secondary);
	max-width: 46ch;
}

.bl-rb-success-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bl-space-4);
	margin-top: var(--bl-space-2);
}

/* Visual Stage */
.bl-rb-success-hero__visual {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--bl-radius-lg);
	background: radial-gradient(circle at center, rgba(61, 191, 176, 0.05) 0%, transparent 60%);
	border: 1px solid var(--bl-border);
}

.bl-rb-success-hero__stage {
	width: 100%;
	height: 100%;
	padding: var(--bl-space-4);
}

.bl-rb-sh-svg {
	width: 100%;
	height: 100%;
	display: block;
	overflow: visible;
}

/* Base definitions for JS to grab */
.bl-rb-sh-orbit {
	transform-origin: 200px 200px; /* Center of SVG */
}

/* Avatar Customer Success Styles (Imported from Solutions) */
.bl-so-cs { inline-size: 100%; block-size: 100%; overflow: visible; }
.bl-so-cs__ring-track { fill: none; stroke: rgba(255, 255, 255, .08); stroke-width: 1.2; vector-effect: non-scaling-stroke; }

.bl-so-cs__ring {
  fill: none;
  stroke: var(--bl-color-brand, #3dbfb0);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-dasharray: 326.73;
  stroke-dashoffset: 0;
  transform: rotate(-90deg);
  transform-box: fill-box;
  transform-origin: center;
}

.bl-so-cs__body { fill: var(--bl-surface-3, #192522); stroke: rgba(61, 191, 176, .35); stroke-width: 1; vector-effect: non-scaling-stroke; }
.bl-so-cs__head { fill: var(--bl-surface-3, #192522); stroke: rgba(61, 191, 176, .4); stroke-width: 1; vector-effect: non-scaling-stroke; }
.bl-so-cs__headset, .bl-so-cs__headset-boom { fill: none; stroke: var(--bl-text-secondary, #a8b4b1); stroke-width: 1.4; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.bl-so-cs__headset-node, .bl-so-cs__headset-mic { fill: var(--bl-color-brand, #3dbfb0); }

.bl-so-cs__eye { fill: var(--bl-text-primary, #f5f8f7); }

.bl-so-cs__smile { fill: none; stroke: var(--bl-text-secondary, #a8b4b1); stroke-width: 1.4; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.bl-so-cs__bubble { opacity: .92; }
.bl-so-cs__bubble-fill { fill: var(--bl-surface-2, #121b19); stroke: rgba(255, 255, 255, .1); stroke-width: 1; vector-effect: non-scaling-stroke; }

.bl-so-cs__bubble-dot {
  fill: var(--bl-color-brand, #3dbfb0);
  transform-box: fill-box;
  transform-origin: center;
}

.bl-so-cs__check-fill { fill: var(--bl-surface-1, #0d1312); stroke: var(--bl-color-brand-light, #6ed7cb); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.bl-so-cs__check-mark { fill: none; stroke: var(--bl-color-brand-light, #6ed7cb); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }