.ga-visibility-chart {
	padding: 48px 25px;
	overflow: hidden;
	box-sizing: border-box;
	width: 100%;
}

.ga-chart-row {
	display: flex;
	align-items: center;
	gap: 24px;
	margin-bottom: 20px;
}

.ga-chart-row--primary {
	margin-bottom: 16px;
	align-items: flex-end;
}

.ga-chart-label {
	min-width: 180px;
	max-width: 180px;
	flex-shrink: 0;
}

/* Value large: sits above the bar column */
.ga-chart-value-large {
	display: flex;
	flex-direction: column;
	margin-bottom: 8px;
}

.ga-chart-seen-from {
	font-family: zuume-edge, sans-serif;
	font-size: 38px;
	font-weight: 200;
	text-transform: uppercase;
	line-height: 1.2;
}

.ga-chart-number {
	font-family: zuume-edge, sans-serif;
	font-size: 90px;
	font-weight: 900;
	line-height: 1;
}

.ga-chart-unit {
	font-size: 40px;
	font-weight: 900;
}

.ga-chart-label-text {
	font-family: articulat-cf, sans-serif;
	font-size: 22px;
	font-weight: 400;
	line-height: 1.4;
	opacity: 0.7;
}

.ga-chart-row--primary .ga-chart-label-text {
	font-family: articulat-cf, sans-serif;
	font-weight: 700;
	font-size: 25px;
	line-height: 1.0;
	opacity: 1;
}

.ga-chart-sub-label {
	display: block;
	font-family: articulat-cf, sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.4;
	opacity: 0.7;
	margin-top: 2px;
}

.ga-chart-bar-wrap {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
	min-width: 0;
}

/* Only the primary bar-wrap gets the value-large above it */
.ga-chart-row--primary .ga-chart-bar-wrap {
	justify-content: flex-end;
}

/* Secondary rows keep bar + inline label side by side */
.ga-chart-row:not(.ga-chart-row--primary) .ga-chart-bar-wrap {
	flex-direction: row;
	align-items: center;
	gap: 16px;
}

.ga-chart-bar {
	height: 64px;
	border-radius: 0 36px 36px 0;
	width: 0%;
	transition: none;
	flex-shrink: 0;
	align-self: stretch;
}

.ga-chart-row--primary .ga-chart-bar {
	height: 80px;
}

.ga-chart-inline-value {
	font-family: zuume-edge, sans-serif;
	font-size: 28px;
	font-weight: 200;
	white-space: nowrap;
	opacity: 0.7;
}

@media (max-width: 600px) {
	.ga-visibility-chart {
		padding: 32px 0px;
	}
	.ga-chart-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}
	.ga-chart-label {
		min-width: 0;
		max-width: 100%;
	}
	.ga-chart-bar-wrap {
		width: 100%;
	}
	.ga-chart-number {
		font-size: 44px;
	}
	.ga-chart-unit {
		font-size: 28px;
	}
	.ga-chart-bar {
		height: 48px;
	}
	.ga-chart-row--primary .ga-chart-bar {
		height: 60px;
	}
}