/* Editable Elementor homepage introduction around the reusable game widget. */
.sj-home-surface {
	display: flow-root;
	background: var(--color-navy);
}

/* One canvas behind both surfaces keeps the binary grid continuous at their seam. */
.sj-home-surface .sj-header,
.sj-home-surface .elementor .sj-home-hero.e-con {
	background: transparent;
}

.elementor .sj-home-hero.e-con {
	--gap: 0px;
	--row-gap: 0px;
	--column-gap: 0px;
	--container-max-width: 1280px;
	width: 100%;
	max-width: none;
	padding: 32px max(32px, calc((100% - 1280px) / 2)) 48px;
	background: var(--color-navy);
	color: var(--color-offwhite);
	isolation: isolate;
}

/* Keep the complete game, including its toolbar and controls, opaque.
   The shared binary field remains visible around the game frame. */
.sj-home-hero .sj-game {
	background: var(--sj-game-sky);
}

.elementor .sj-home-intro.e-con {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	align-items: end;
	gap: 32px;
	width: 100%;
	padding: 0;
	margin: 0 0 32px;
}

.elementor .sj-home-heading.e-con {
	--gap: 12px;
	--row-gap: 12px;
	padding: 0;
	min-width: 0;
}

.sj-home-hero .elementor-widget {
	--kit-widget-spacing: 0px;
}

.sj-home-eyebrow .elementor-heading-title {
	color: var(--color-lime);
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.sj-home-title .elementor-heading-title {
	margin: 0;
	color: var(--color-offwhite);
	font-family: var(--font-heading);
	font-size: clamp(40px, 4.6vw, 66px);
	font-weight: 700;
	line-height: 1.04;
	letter-spacing: -0.04em;
}

.sj-home-description {
	max-width: 420px;
	padding-bottom: 4px;
	color: var(--color-offwhite);
	font-family: var(--font-body);
	font-size: var(--font-size-body);
	line-height: 1.8;
}

.sj-home-description p { margin: 0; }
.sj-home-embed { width: 100%; }

/* Native Elementor actions remain editable above the optional playground. */
.elementor .sj-home-hero .sj-home-hero-actions.e-con {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 24px;
	width: 100%;
	margin: 0 0 28px;
	padding: 0;
}
.sj-home-hero-actions > .elementor-widget { width: auto; }
.sj-home-hero-actions .elementor-button { min-height: 44px; padding: 12px 24px; }

@media (max-width: 767px) {
	.elementor .sj-home-hero.e-con {
		padding: 24px 16px 32px;
	}
	.elementor .sj-home-intro.e-con {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
		margin-bottom: 24px;
	}
	.sj-home-title .elementor-heading-title {
		font-size: clamp(28px, 8.5vw, 50px);
	}
	.sj-home-description { font-size: var(--font-size-body); line-height: 1.7; }
	.elementor .sj-home-hero .sj-home-intro.e-con { gap: 16px; margin-bottom: 20px; }
	.elementor .sj-home-hero .sj-home-hero-actions.e-con { gap: 12px 20px; margin-bottom: 24px; }
}