/* Homepage (templates/page-home.php) – Figma 5:2 / 6:969 */

/* Hero: 548px band, copy 720px wide left, wave art 720x320 right (5:59 at x=660 y=60) */
.be_home-hero {
	display: flex;
	align-items: flex-start;
	min-height: 548px;
	padding: 88px var(--be-pad-x) 96px;
}

.be_home-hero-copy {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
	width: 720px;
	max-width: 100%;
}

.be_home-hero-title { font: var(--be-display); letter-spacing: -1.5px; }
.be_home-hero-accent { display: block; color: var(--be-teal-light); }
.be_home-hero .be_hero-sub { max-width: 500px; }
.be_home-hero-form { width: 100%; max-width: 440px; margin-top: 8px; }
.be_home-hero-note { color: var(--be-on-dark-muted); font: var(--be-caption); }

.be_home-hero-art {
	top: 60px;
	right: 60px;
	width: 720px;
}

@media (max-width: 1280px) {
	.be_home-hero-art { right: -40px; width: 620px; }
}

@media (max-width: 1100px) {
	.be_home-hero { min-height: 0; padding-top: 64px; padding-bottom: 72px; }
	.be_home-hero-copy { width: 560px; }
	.be_home-hero-art { top: auto; right: -140px; bottom: 24px; width: 520px; opacity: 0.6; }
}

@media (max-width: 700px) {
	/* Mobile 6:981: copy, then the art under the form (350x160) */
	.be_home-hero { flex-direction: column; padding: 40px var(--be-pad-x) 0; }
	.be_home-hero-copy { gap: 16px; width: 100%; }
	.be_home-hero-form { max-width: none; margin-top: 0; }
	.be_home-hero-art { position: static; width: calc(100% + 20px); margin: 16px 0 0 -10px; opacity: 1; }
}

/* Sections: 64px rhythm (Main starts at y=64; blocks 64px apart) */
.be_home-featured { padding-bottom: 0; }
.be_home-markets, .be_home-watch, .be_home-learn { padding-top: 64px; }
.be_home-market .be_section-head { margin-bottom: 12px; }
.be_row--banner.be_row--banner { padding-top: 64px; }

.be_empty { color: var(--be-muted); font: var(--be-body-sm); }

@media (max-width: 1100px) {
	.be_home-markets, .be_home-watch, .be_home-learn, .be_row--banner.be_row--banner { padding-top: 48px; }
}

@media (max-width: 700px) {
	.be_home-markets, .be_home-watch, .be_home-learn, .be_row--banner.be_row--banner { padding-top: 40px; }
	.be_home-market .be_section-head { margin-bottom: 8px; }
}