/* IMG-11: tablet (681–1199) uses the stacked mobile hero, not the short
   1920×760 strip. new-homepage.css mobile stack stops at 680 — this sheet
   carries title, CTA, chip and ticks through iPad portrait and landscape. */
@media (min-width: 681px) and (max-width: 1199px) {
	.hero-section .container {
		display: flex !important;
		flex-direction: column !important;
		justify-content: flex-end !important;
		height: 100%;
		padding-bottom: 20px !important;
	}

	.hero-section .hero-content {
		position: static !important;
		height: auto !important;
		flex: 0 0 auto !important;
		align-items: center !important;
		justify-content: flex-end !important;
		width: 100% !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		padding-left: 0 !important;
		text-align: center;
	}

	.hero-section .hero-content-top {
		width: 100%;
		max-width: 100%;
		margin-left: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.hero-section .hero-content-top .hero-title {
		font-size: clamp(32px, 5.6vw, 48px) !important;
		line-height: 1.05 !important;
	}

	.hero-section .hero-content-top .hero-subtitle {
		font-size: 16px !important;
		margin-bottom: 12px !important;
	}

	.hero-section .hero-content-bottom {
		width: 100%;
		max-width: 420px;
		justify-content: center;
		flex-direction: column;
		flex-wrap: nowrap;
		gap: 12px;
	}

	.hero-section .hero-content-bottom .lumi-btn,
	.hero-section .btn-success {
		width: 100%;
	}

	.hero-section .icon-list-section {
		flex-direction: column !important;
		flex-wrap: nowrap !important;
		align-items: flex-start !important;
		justify-content: flex-start !important;
		gap: 6px !important;
		column-gap: 0 !important;
		padding-top: 14px !important;
		padding-bottom: 0 !important;
	}

	.hero-section .icon-list-section .review-box {
		position: static !important;
		inset: auto !important;
		width: 100% !important;
		align-self: stretch !important;
		justify-content: center !important;
		margin: 0 !important;
	}

	.hero-section .icon-list-section > .icon-list-item {
		align-self: flex-start !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	.hero-section .icon-list-section .icon-list-item .icon-list-title {
		white-space: normal !important;
		font-size: 16px !important;
	}
}