.sbb-section,
.sbb-blog-shell,
.sbb-standard-layout {
	box-sizing: border-box;
	width: min(100%, var(--sbb-section-max-width, 920px));
	margin: var(--sbb-section-vertical-spacing, 32px) auto;
	color: var(--sbb-text-color, #1f2933);
	font-family: inherit;
}

.sbb-section *,
.sbb-blog-shell *,
.sbb-standard-layout * {
	box-sizing: border-box;
}

.sbb-standard-layout {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: var(--sbb-section-vertical-spacing, 32px);
}

.sbb-standard-layout__item {
	grid-column: span 12;
	width: 100%;
	margin: 0 auto;
}

.sbb-standard-layout__item--span-1 { grid-column: span 1; }
.sbb-standard-layout__item--span-2 { grid-column: span 2; }
.sbb-standard-layout__item--span-3 { grid-column: span 3; }
.sbb-standard-layout__item--span-4 { grid-column: span 4; }
.sbb-standard-layout__item--span-5 { grid-column: span 5; }
.sbb-standard-layout__item--span-6 { grid-column: span 6; }
.sbb-standard-layout__item--span-7 { grid-column: span 7; }
.sbb-standard-layout__item--span-8 { grid-column: span 8; }
.sbb-standard-layout__item--span-9 { grid-column: span 9; }
.sbb-standard-layout__item--span-10 { grid-column: span 10; }
.sbb-standard-layout__item--span-11 { grid-column: span 11; }
.sbb-standard-layout__item--span-12 { grid-column: span 12; }

.sbb-standard-layout__item--wide {
	width: min(100%, calc(var(--sbb-section-max-width, 920px) + 220px));
}

.sbb-standard-layout__item--full {
	width: 100%;
}

.sbb-standard-layout__item--screen {
	grid-column: 1 / -1;
	width: 100vw;
	max-width: none;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.sbb-standard-layout__item--align-left {
	justify-self: start;
}

.sbb-standard-layout__item--align-center {
	justify-self: center;
}

.sbb-standard-layout__item--align-right {
	justify-self: end;
}

.sbb-standard-layout__item--align-stretch {
	justify-self: stretch;
}

.sbb-standard-layout__item--card {
	padding: clamp(14px, 3vw, 22px);
	border: 1px solid rgba(31, 41, 51, 0.08);
	border-radius: calc(var(--sbb-section-border-radius, 10px) + 4px);
	background: var(--sbb-card-background-color, #ffffff);
	box-shadow: 0 10px 25px rgba(31, 41, 51, 0.05);
}

.sbb-standard-layout__item--subtle {
	padding: clamp(14px, 3vw, 22px);
	border-radius: calc(var(--sbb-section-border-radius, 10px) + 4px);
	background: var(--sbb-background-color, #f7f5ef);
}

.sbb-standard-layout__item > .sbb-section,
.sbb-standard-layout__item > .sbb-blog-shell,
.sbb-standard-layout__item > .sbb-blog-hub {
	width: 100%;
	margin-top: 0;
	margin-bottom: 0;
}

.sbb-cta {
	position: relative;
	overflow: hidden;
	padding: clamp(28px, 5vw, 48px);
	border: 1px solid color-mix(in srgb, var(--sbb-primary-color, #1f4f46) 18%, transparent);
	border-radius: var(--sbb-section-border-radius, 10px);
	background: linear-gradient(
		135deg,
		var(--sbb-background-color, #f7f5ef) 0%,
		var(--sbb-card-background-color, #ffffff) 100%
	);
	box-shadow: 0 18px 45px rgba(31, 41, 51, 0.08);
}

.sbb-cta::before {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 5px;
	background: linear-gradient(90deg, var(--sbb-primary-color, #1f4f46), var(--sbb-accent-color, #c69c4a));
	content: "";
}

.sbb-cta__content {
	max-width: 680px;
}

.sbb-cta__heading,
.sbb-author-box__name,
.sbb-faq__question {
	margin: 0;
	color: var(--sbb-primary-color, #1f4f46);
	font-weight: 700;
	line-height: 1.2;
}

.sbb-cta__heading {
	font-size: clamp(1.7rem, 4vw, 2.35rem);
}

.sbb-cta__body {
	max-width: 58ch;
	margin: 14px 0 0;
	font-size: 1.05rem;
	line-height: 1.7;
}

.sbb-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 24px;
	padding: var(--sbb-button-padding-vertical, 12px) var(--sbb-button-padding-horizontal, 20px);
	border-radius: var(--sbb-button-border-radius, 6px);
	background: var(--sbb-button-background-color, #1f4f46);
	color: var(--sbb-button-text-color, #ffffff);
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	transition: transform 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
}

.sbb-button:hover,
.sbb-button:focus {
	color: var(--sbb-button-text-color, #ffffff);
	opacity: 0.94;
	transform: translateY(-1px);
	box-shadow: 0 10px 20px rgba(31, 41, 51, 0.14);
}

.sbb-author-box {
	display: flex;
	gap: 18px;
	align-items: flex-start;
	padding: clamp(22px, 4vw, 32px);
	border: 1px solid rgba(31, 41, 51, 0.1);
	border-radius: var(--sbb-section-border-radius, 10px);
	background: var(--sbb-card-background-color, #ffffff);
	box-shadow: 0 12px 30px rgba(31, 41, 51, 0.06);
}

.sbb-author-box__avatar {
	display: grid;
	flex: 0 0 56px;
	width: 56px;
	height: 56px;
	place-items: center;
	border-radius: 999px;
	background: var(--sbb-primary-color, #1f4f46);
	color: #fff;
	font-size: 1.35rem;
	font-weight: 800;
}

.sbb-author-box__name {
	font-size: 1.25rem;
}

.sbb-author-box__meta {
	margin: 5px 0 0;
	color: var(--sbb-accent-color, #c69c4a);
	font-size: 0.95rem;
	font-weight: 700;
}

.sbb-author-box__bio {
	margin: 12px 0 0;
	line-height: 1.7;
}

.sbb-faq {
	padding: clamp(22px, 4vw, 30px);
	border-left: 4px solid var(--sbb-accent-color, #c69c4a);
	border-radius: var(--sbb-section-border-radius, 10px);
	background: var(--sbb-card-background-color, #ffffff);
	box-shadow: 0 10px 25px rgba(31, 41, 51, 0.05);
}

.sbb-faq__question {
	font-size: 1.2rem;
}

.sbb-faq__answer {
	margin-top: 12px;
	line-height: 1.7;
}

.sbb-faq__answer > :first-child,
.sbb-blog-shell__inner > :first-child {
	margin-top: 0;
}

.sbb-faq__answer > :last-child,
.sbb-blog-shell__inner > :last-child {
	margin-bottom: 0;
}

.sbb-blog-shell {
	padding: clamp(20px, 4vw, 34px);
	border-radius: var(--sbb-section-border-radius, 10px);
	background: var(--sbb-background-color, #f7f5ef);
}

.sbb-blog-shell__inner {
	max-width: 74ch;
	margin: 0 auto;
	padding: clamp(22px, 4vw, 42px);
	border-radius: calc(var(--sbb-section-border-radius, 10px) + 2px);
	background: var(--sbb-card-background-color, #ffffff);
	color: var(--sbb-text-color, #1f2933);
	line-height: 1.75;
	box-shadow: 0 14px 34px rgba(31, 41, 51, 0.07);
}

.sbb-blog-shell__inner h1,
.sbb-blog-shell__inner h2,
.sbb-blog-shell__inner h3,
.sbb-blog-shell__inner h4,
.sbb-blog-shell__inner h5,
.sbb-blog-shell__inner h6 {
	color: var(--sbb-primary-color, #1f4f46);
	line-height: 1.25;
}

.sbb-blog-shell__inner a {
	color: var(--sbb-primary-color, #1f4f46);
	font-weight: 700;
}

.sbb-text-block {
	padding: clamp(22px, 4vw, 36px);
	border-radius: var(--sbb-section-border-radius, 10px);
	background: var(--sbb-card-background-color, #ffffff);
	color: var(--sbb-text-color, #1f2933);
	line-height: 1.75;
	box-shadow: 0 10px 25px rgba(31, 41, 51, 0.05);
}

.sbb-text-block__content > :first-child {
	margin-top: 0;
}

.sbb-text-block__content > :last-child {
	margin-bottom: 0;
}

@media (max-width: 640px) {
	.sbb-section,
	.sbb-blog-shell,
	.sbb-standard-layout {
		width: calc(100% - 32px);
	}

	.sbb-standard-layout__item {
		grid-column: span 12;
	}

	.sbb-standard-layout__item--screen {
		grid-column: 1 / -1;
		width: 100vw;
	}

	.sbb-author-box {
		display: block;
	}

	.sbb-author-box__avatar {
		margin-bottom: 14px;
	}
}
