.bb-block {
	position: relative;
	background: var(--bob-surface-bg, var(--bob-color-white));
	color: var(--bob-surface-text, var(--bob-color-ink));
}

.bb-container {
	width: min(100% - 2rem, var(--bob-block-max-width, var(--bob-container-lg)));
	margin-inline: auto;
}

.bb-eyebrow {
	margin: 0 0 0.75rem;
	font-size: var(--bob-font-size-eyebrow);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bob-muted-text, var(--bob-color-ink-soft));
}

.bb-heading,
.bb-heading-display-3,
.bb-heading-display-2,
.bb-heading-display-1,
.bb-heading-1,
.bb-heading-2,
.bb-heading-3,
.bb-heading-4,
.bb-heading-5,
.bb-heading-6,
.bb-heading--display-3,
.bb-heading--display-2,
.bb-heading--display-1,
.bb-heading--h1,
.bb-heading--h2,
.bb-heading--h3,
.bb-heading--h4,
.bb-heading--h5,
.bb-heading--h6 {
	margin: 0;
	line-height: var(--bob-line-height-heading);
	text-wrap: balance;
}

.bb-heading-display-3,
.bb-heading--display-3 {
	font-size: var(--bob-type-display-3-size);
}

.bb-heading-display-2,
.bb-heading--display-2 {
	font-size: var(--bob-type-display-2-size);
}

.bb-heading-display-1,
.bb-heading--display-1 {
	font-size: var(--bob-type-display-1-size);
}

.bb-heading-1,
.bb-heading--h1 {
	font-size: var(--bob-type-h1-size);
}

.bb-heading-2,
.bb-heading--h2 {
	font-size: var(--bob-type-h2-size);
}

.bb-heading-3,
.bb-heading--h3 {
	font-size: var(--bob-type-h3-size);
}

.bb-heading-4,
.bb-heading--h4 {
	font-size: var(--bob-type-h4-size);
}

.bb-heading-5,
.bb-heading--h5 {
	font-size: var(--bob-type-h5-size);
}

.bb-heading-6,
.bb-heading--h6 {
	font-size: var(--bob-type-h6-size);
}

.bb-body {
	margin-top: 1.25rem;
	font-size: var(--bob-body-size, var(--bob-text-md-size));
	line-height: var(--bob-line-height-body);
	color: var(--bob-body-text, inherit);
}

.bb-body--2xl {
	--bob-body-size: var(--bob-text-2xl-size);
}

.bb-body--xl {
	--bob-body-size: var(--bob-text-xl-size);
}

.bb-body--lg {
	--bob-body-size: var(--bob-text-lg-size);
}

.bb-body--md {
	--bob-body-size: var(--bob-text-md-size);
}

.bb-body--sm {
	--bob-body-size: var(--bob-text-sm-size);
}

.bb-body--xs {
	--bob-body-size: var(--bob-text-xs-size);
}

.bb-body > :first-child {
	margin-top: 0;
}

.bb-body > :last-child {
	margin-bottom: 0;
}

.bb-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1.5rem;
}

.bb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	padding: var(--bob-btn-py, var(--bob-btn-md-py)) var(--bob-btn-px, var(--bob-btn-md-px));
	border-radius: var(--bob-btn-radius, 999px);
	border: 1px solid currentColor;
	font-size: var(--bob-btn-font-size, var(--bob-btn-md-font-size));
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.bb-btn:hover,
.bb-btn:focus-visible {
	transform: translateY(-1px);
}

.bb-btn svg,
.bb-btn__icon {
	width: var(--bob-btn-icon-size, var(--bob-btn-md-icon-size));
	height: var(--bob-btn-icon-size, var(--bob-btn-md-icon-size));
	flex-shrink: 0;
}

.bb-btn__icon {
	font-size: var(--bob-btn-icon-size, var(--bob-btn-md-icon-size));
}

.bb-btn--primary {
	background: var(--bob-btn-primary-bg, var(--bob-color-ink));
	border-color: var(--bob-btn-primary-bg, var(--bob-color-ink));
	color: var(--bob-btn-primary-text, var(--bob-color-white));
}

.bb-btn--primary:hover,
.bb-btn--primary:focus-visible {
	background: var(--bob-btn-primary-bg-hover, var(--bob-btn-primary-bg, var(--bob-color-ink)));
	border-color: var(--bob-btn-primary-bg-hover, var(--bob-btn-primary-bg, var(--bob-color-ink)));
}

.bb-btn--secondary {
	background: var(--bob-btn-secondary-bg, transparent);
	border-color: var(--bob-btn-secondary-border, currentColor);
	color: var(--bob-btn-secondary-text, inherit);
}

.bb-btn--secondary:hover,
.bb-btn--secondary:focus-visible {
	background: var(--bob-btn-secondary-bg-hover, var(--bob-btn-secondary-bg, transparent));
}

.bb-btn--text {
	background: var(--bob-btn-tertiary-bg, transparent);
	border-color: var(--bob-btn-tertiary-bg, transparent);
	color: var(--bob-btn-tertiary-text, currentColor);
}

.bb-btn--text:hover,
.bb-btn--text:focus-visible {
	background: var(--bob-btn-tertiary-bg-hover, var(--bob-btn-tertiary-bg, transparent));
	border-color: var(--bob-btn-tertiary-bg-hover, var(--bob-btn-tertiary-bg, transparent));
}

.bb-btn--sm {
	--bob-btn-font-size: var(--bob-btn-sm-font-size);
	--bob-btn-icon-size: var(--bob-btn-sm-icon-size);
	--bob-btn-py: var(--bob-btn-sm-py);
	--bob-btn-px: var(--bob-btn-sm-px);
}

.bb-btn--md {
	--bob-btn-font-size: var(--bob-btn-md-font-size);
	--bob-btn-icon-size: var(--bob-btn-md-icon-size);
	--bob-btn-py: var(--bob-btn-md-py);
	--bob-btn-px: var(--bob-btn-md-px);
}

.bb-btn--lg {
	--bob-btn-font-size: var(--bob-btn-lg-font-size);
	--bob-btn-icon-size: var(--bob-btn-lg-icon-size);
	--bob-btn-py: var(--bob-btn-lg-py);
	--bob-btn-px: var(--bob-btn-lg-px);
}

.bb-btn--xl {
	--bob-btn-font-size: var(--bob-btn-xl-font-size);
	--bob-btn-icon-size: var(--bob-btn-xl-icon-size);
	--bob-btn-py: var(--bob-btn-xl-py);
	--bob-btn-px: var(--bob-btn-xl-px);
}

.pt-none {
	padding-top: 0;
}

.pt-xs {
	padding-top: var(--bob-space-xs);
}

.pt-sm {
	padding-top: var(--bob-space-sm);
}

.pt-md {
	padding-top: var(--bob-space-md);
}

.pt-lg {
	padding-top: var(--bob-space-lg);
}

.pt-xl {
	padding-top: var(--bob-space-xl);
}

.pb-none {
	padding-bottom: 0;
}

.pb-xs {
	padding-bottom: var(--bob-space-xs);
}

.pb-sm {
	padding-bottom: var(--bob-space-sm);
}

.pb-md {
	padding-bottom: var(--bob-space-md);
}

.pb-lg {
	padding-bottom: var(--bob-space-lg);
}

.pb-xl {
	padding-bottom: var(--bob-space-xl);
}

.p-sm {
	padding: var(--bob-space-sm);
}

.p-md {
	padding: var(--bob-space-md);
}

.p-lg {
	padding: var(--bob-space-lg);
}

.m-sm {
	margin: var(--bob-space-sm);
}

.m-md {
	margin: var(--bob-space-md);
}

.m-lg {
	margin: var(--bob-space-lg);
}

.mt-sm {
	margin-top: var(--bob-space-sm);
}

.mt-md {
	margin-top: var(--bob-space-md);
}

.mt-lg {
	margin-top: var(--bob-space-lg);
}

.mb-sm {
	margin-bottom: var(--bob-space-sm);
}

.mb-md {
	margin-bottom: var(--bob-space-md);
}

.mb-lg {
	margin-bottom: var(--bob-space-lg);
}

.w-sm {
	--bob-block-max-width: var(--bob-container-sm);
}

.w-md {
	--bob-block-max-width: var(--bob-container-md);
}

.w-lg {
	--bob-block-max-width: var(--bob-container-lg);
}

.w-full {
	--bob-block-max-width: 100%;
}

.layout-centered {
	text-align: center;
}

.layout-centered .bb-body {
	max-width: 44rem;
	margin-inline: auto;
}

.layout-centered .bb-actions {
	justify-content: center;
}

.hide-mobile {
	display: block;
}

.hide-desktop {
	display: block;
}

@media (max-width: 781px) {
	.hide-mobile {
		display: none !important;
	}
}

@media (min-width: 782px) {
	.hide-desktop {
		display: none !important;
	}
}
