@media (max-width: 767px) {
	.hero-section > .mx-auto.grid {
		gap: 14px;
	}

	.hero-visual {
		margin-top: -4px;
	}

	.screen-stage {
		min-height: 0;
		padding: 0;
	}

	.screen-card-main {
		position: relative;
		inset: auto;
		width: 100%;
		animation: none;
	}

	.floating-screen {
		display: none;
	}

	.screen-card {
		border-radius: 24px;
		box-shadow: 0 20px 70px rgba(6, 17, 63, .14);
	}

	.screen-top {
		min-height: 40px;
		padding-inline: 14px;
	}

	.screen-body {
		padding: 18px;
	}

	.screen-body h2 {
		font-size: 1.65rem;
		line-height: 1.16;
	}

	.screen-body img {
		width: 48px;
		height: 48px;
	}

	.screen-body > .mt-8 {
		margin-top: 18px;
	}

	.screen-body > .mt-8.grid {
		gap: 10px;
	}

	.screen-body > .mt-8.grid.sm\:grid-cols-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.metric-tile {
		min-height: 86px;
		padding: 14px;
		border-radius: 18px;
	}

	.metric-tile strong {
		margin-top: 12px;
		font-size: .85rem;
		line-height: 1.25;
	}

	.live-panel,
	.idea-panel {
		padding: 18px;
		border-radius: 20px;
	}

	.idea-panel {
		gap: 18px;
	}

	.idea-panel p {
		font-size: .92rem;
		line-height: 1.45;
	}
}

@media (max-width: 420px) {
	.screen-body {
		padding: 16px;
	}

	.screen-body h2 {
		font-size: 1.5rem;
	}

	.metric-tile {
		min-height: 78px;
		padding: 12px;
	}
}