@import url('https://fonts.googleapis.com/css2?family=Cresta:wght@400;500;600;700&display=swap');
	@import "tailwindcss";

	html,
	body {
		font-family: 'Cresta', sans-serif;
		background-color: #F2F2F2;
		overflow-x: hidden !important;
	}

	/* Helper: mobile-only elements should be hidden by default and only
	shown inside the phone media query below. Use `mobile-only` on HTML
	elements that must never appear on desktop. */
	.mobile-only {
		display: none !important;
	}

	/* Show mobile-only elements when dropdown is open on mobile */
	@media (max-width: 768px) {
		header.header--open .mobile-only {
			display: block !important;
		}
	}

/* Explicitly hide promo mobile-only visuals by default so they cannot appear
   on the desktop if JS hasn't run or if a previous mobile action left inline
   styles in place. These are shown only under the mobile media query below. */
.promo-shield-mobile,
.promo-cleaning-mobile,
.promo-penizek-mobile,
.promo-fuelcan-mobile,
.promo-fuelgun-mobile,
.promo-icons-mobile {
    display: none !important;
}

/* Minimal responsive shim: provide basic `md:` utilities when Tailwind
   processing is not available. This ensures `md:hidden` etc. behave
   as expected (hide on medium+ viewports). */
@media (min-width: 768px) {
	.md\:hidden { display: none !important; }
	.md\:block { display: block !important; }
	.md\:flex { display: flex !important; }
	.md\:inline { display: inline !important; }
	.md\:inline-block { display: inline-block !important; }
}

	/* Hide the visual vertical scrollbar but preserve scrolling behavior.
	This keeps the UI clean while not disabling scroll interactions.
	If you'd rather fully disable vertical scroll, replace with `overflow-y: hidden` on body. */
	html {
		scrollbar-width: none;
		/* Firefox */
		-ms-overflow-style: none;
		/* IE 10+ */
	}

	html::-webkit-scrollbar {
		width: 0px;
		height: 0px;
		background: transparent;
	}

	/* Also hide on body for some WebKit builds */
	body::-webkit-scrollbar {
		width: 0;
		height: 0;
	}

	.gradient-red {
		@apply bg-gradient-to-r from-[#C40228] to-[#ED3D1A] z-50;
	}

	/* utility class: solid-name-styled gradient for sections that should match the header
	Use `bg-gradient-red` on elements to get the same horizontal red gradient as the site header. */
	.bg-gradient-red {
		@apply bg-gradient-to-r from-[#C40228] to-[#ED3D1A];
	}

	/* Dedicated promo gradient to be used only for the promo CTA section. */
	.promo-gradient {
		/* left-to-right red gradient matching the brand */
		background: linear-gradient(90deg, #C40228 0%, #ED3D1A 100%);
	}

	/* promo-cta container: centers the CTA horizontally within the promo-left block */
	.promo-cta {
		@apply flex justify-center;
		/* fallback for environments without Tailwind processing */
		display: flex;
		justify-content: left;
		width: 100%;
		margin-top: 8px;
	}

	/* ensure promo CTA anchor text renders centered vertically across browsers */
	.promo-cta a {
		line-height: 1;
		vertical-align: middle;
	}

	/* Reusable promo button class used in promo section */
	.promo-btn {
		background: #FFFFFF !important;
		color: #000000 !important;
		font-weight: 900 !important;
		font-style: italic !important;
		font-size: 20px !important;
		white-space: nowrap !important;
		text-align: center !important;
		border-radius: 999px !important;
		margin-top: 8px !important;
		width: 284px !important;
		height: 38px !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		text-decoration: none !important;
	}

	.header-link {
		@apply text-white uppercase font-black italic text-[20px] tracking-wide inline-flex items-center gap-2 px-4 py-2 transition duration-200 ease-in-out;
	}

	.header-link:hover {
		@apply opacity-90;
	}

	.header-link--pill {
		@apply bg-[#0FC26C] h-[38px] text-white rounded-full transition duration-200 ease-in-out;
	}

	/* Default pill labels: show full label on desktop, hide mobile short label */
	.header-link--pill .pill-mobile {
		display: none;
	}

	.header-link--pill .pill-full {
		display: inline;
	}

	.hero-link--pill {
		@apply bg-[#0FC26C] text-white font-black italic rounded-full inline-flex items-center justify-center cursor-pointer h-[38px] w-[218px] mt-20 text-[18px] transition duration-200 ease-in-out;
	}

	.hero-link--pill:hover {
		@apply opacity-95;
	}

	/* pill used for feature links/buttons (exact requested size and style) */
	.features-link-pill {
		@apply bg-[#0FC26C] text-[#FAFAFA] font-black italic rounded-full inline-flex items-center justify-center cursor-pointer h-[38px] w-[272px] text-[20px];
		/* explicit fallbacks for environments without Tailwind processing */
		background: #0FC26C;
		color: #FAFAFA;
		font-style: italic;
		font-weight: 900;
		font-size: 18px;
		width: 272px;
		height: 38px;
		border-radius: 100px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		text-decoration: none;
	}

	.features-link-pill:hover {
		opacity: 0.95;
	}

/* Map-trail step styles (centralized from inline/Tailwind utilities) */
.map-step {
	display: flex;
	align-items: flex-start;
	gap: 1.25rem; /* equals Tailwind gap-5 */
}
.svg-fo.map-step {
	/* ensure elements inside SVG foreignObject render as flex containers */
	display: flex;
}
.map-step__num {
	font-size: 130px;
	font-weight: 900;
	font-style: italic;
	color: #d92b2b;
	line-height: 1;
	width: 140px;
	flex: 0 0 140px;
}
.map-step__content {
	max-width: 560px;
	color: #1E1E1E;
}
/* Step 3 specific content width */
.map-step__content--step3 {
	width: 460px;
	/* prevent flex container from shrinking this content for Step 3 */
	flex: 0 0 460px;
	min-width: 460px;
}
.map-step--right .map-step__content {
	text-align: right;
}
.map-step--left .map-step__content {
	text-align: left;
}
.map-step__title {
	font-size: 44px;
	font-weight: 900;
	font-style: italic;
	color: #1E1E1E;
	margin: 0;
	white-space: nowrap;
	text-align: left;
}
.map-step__title-row {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}
.map-step__badge {
	background: #1AC660;
	width: 102px;
	height: 25px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	color: #FFFFFF;
	font-size: 12px;
	font-weight: 900;
	font-style: italic;
	line-height: 1;
	margin-left: 8px;
}
.map-step__badge--gold {
    background: #E2BA04;
}

/* For Step 3: ensure the title row (title + badge) is left-aligned inside the
   content block even for right-side steps that typically right-align text. */
.map-step__content--step3 .map-step__title-row {
	display: flex;
	width: 100%;
	justify-content: flex-start;
	align-items: center;
}
.map-step__content--step3 .map-step__title {
	text-align: left;
}
.map-step__desc {
	margin-top: 1.0rem;
	margin-bottom: 0;
	color: #1E1E1E;
	max-width: 520px;
	text-align: left;
	font-size: 18px;
	line-height: 1.0;
}

/* Utility: prevent a phrase from wrapping (used for short bold phrases) */
.no-wrap {
    white-space: nowrap;
}


/* small note under description (e.g. "Registrácia je ZDARMA...") */
.map-step__note {
	margin-top: 0.5rem;
	text-align: left;
	font-weight: 700;
	color: #1AC660;
}

/* Media block placed left of the step numeral */
.map-step__media {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	margin-right: 1rem;
}

/* Ensure order inside the step row: media -> number -> content */
.map-step__media { order: 0; }
.map-step__num { order: 1; }
.map-step__content { order: 2; }

.map-step--left .map-step__media { margin-right: 1rem; margin-left: 0; }
.map-step--right .map-step__media { margin-right: 1rem; }

/* Nudge the first right-side step's media up so it aligns better with the trail */
#mapSteps .map-step.map-step.map-step--right:first-of-type .map-step__media,
#mapSteps .map-step.map-step--right:first-of-type .map-step__media {
	margin-top: -140px;
}

/* Nudge the actual image inside the media block slightly left */
#mapSteps .map-step.map-step--right:first-of-type .map-step__media img {
	transform: translateX(-75px);
}
.map-step__img-sm { width: 140px; height: auto; display: block; }
.map-step__img-md { width: 511px; height: 207px; display: block; }
.map-step__img-badge { width: 60px; height: auto; display: block; }
.map-step__img-icon { width: 48px; height: auto; display: inline-block; margin-right: 6px; }

/* large image used for step 1 (explicit size requested) */
.map-step__img-lg { width: 316px; height: 473px; display: block; object-fit: contain; }

/* Side image shown next to step content (used for Step 2) */
.map-step__side {
	order: 3;
	flex: 0 0 auto;
	margin-left: -40px; /* nudged further left */
	display: flex;
	align-items: center;
}
.map-step__img-side {
	width: 610px;
	height: 408px;
	display: block;
	object-fit: contain;
}

/* Allow the SVG and its foreignObject content to overflow the SVG viewport
   so step blocks placed near the edges are fully visible. The outer
   container also needs to allow overflow. */
.map-trail {
	overflow: visible !important;
}
#mapTrailSvg {
	overflow: visible;
}
#mapTrailSvg foreignObject {
	overflow: visible;
}


	.header-link--icon {
		@apply px-4 py-3 rounded-md text-white hover:bg-white/20 hover:shadow-md cursor-pointer transition duration-200 ease-in-out flex flex-col items-center justify-center z-50;
		background: transparent;
	}

	.header-link--icon .hamburger-bar {
		@apply block w-9 h-[3px] bg-white rounded transition-colors duration-200 ease-in-out;
		transition: all 0.3s ease;
	}

	.header-link--icon .hamburger-bar+.hamburger-bar {
		@apply mt-[5px];
	}

	/* Transform hamburger to X when menu is open */
	header.header--open .header-link--icon .hamburger-bar:nth-child(1) {
		transform: rotate(45deg) translate(6px, 6px);
	}

	header.header--open .header-link--icon .hamburger-bar:nth-child(2) {
		opacity: 0;
	}

	header.header--open .header-link--icon .hamburger-bar:nth-child(3) {
		transform: rotate(-45deg) translate(6px, -6px);
	}

	.bg-green {
		background-color: #0FC26C;
	}

	.hero-bg {
		position: relative;
		overflow: visible;
	}

  header-dropdown {
    @apply hidden w-[100%] text-[#fff] overflow-hidden;
    /* original declarations (fallbacks) */
    background: linear-gradient(90deg, #C40228 0%, #ED3D1A 100%);
}



/* When header receives this class it expands to show dropdown content */

/* Keep header height fixed; show dropdown as absolutely positioned panel below header */
header {
    @apply overflow-visible;
}







/* Dropdown panel positioned under the header (desktop) */
.header-dropdown {
    @apply absolute top-[100%] left-[0] w-[100%] text-[#fff] overflow-hidden z-[40];
    /* original declarations (fallbacks) */
    /* keep in DOM so we can animate;
    hidden state uses max-height/opacity */
		display: block;
    max-height: 0;
    /* collapsed */
		background: linear-gradient(90deg, rgba(196,2,40,1) 0%, rgba(237,61,26,1) 100%);
    /* sit below the fixed header (header z-50) */
		opacity: 0;
    transform: translateY(-6px);
    transition: max-height 360ms cubic-bezier(.2,.9,.2,1), opacity 260ms ease, transform 260ms ease;
    pointer-events: none;
}



	/* Visible/open state */
	header.header--open .header-dropdown {
    /* original declarations (fallbacks) */
    max-height: 648px;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}



/* Give the dropdown the rounded bottom corners when visible so the combined
   header + dropdown visually appear as a single rounded panel. */
.header-dropdown {
    @apply rounded-bl-[50px] rounded-br-[50px];
}



header.header--open .header-dropdown {
    @apply block;
}

/* Remove bottom border-radius from header when dropdown is open */
header.header--open {
	@apply rounded-bl-none rounded-br-none;
}

.header-dropdown__inner {
    @apply pt-[28px] pb-[32px] flex gap-[24px];
    /* original declarations (fallbacks) */
    align-items: stretch;
    /* allow columns to fill available height */
	opacity: 0;
    transform: translateY(8px);
    transition: opacity 300ms ease, transform 300ms ease;
}



	/* animate inner content once dropdown expands */
	header.header--open .header-dropdown__inner {
    /* original declarations (fallbacks) */
    opacity: 1;
    transform: translateY(0);
}



/* Three-column layout: left (menu), center (QR + badges), right (links + social) */
.header-dropdown__left {
    /* original declarations (fallbacks) */
    flex: 0 0 36%;
}



/* Nudge the left links further left inside the dropdown on desktop */
@media (min-width: 769px) {
    /* original declarations (fallbacks) */
    .header-dropdown__left {
		padding-left: 64px;
    }
}


.header-dropdown__center {
    @apply flex flex-row gap-[24px];
    /* original declarations (fallbacks) */
    flex: 0 0 28%;
    /* QR codes side-by-side */
	align-items: flex-end;
    /* align QR blocks to the bottom */
	justify-content: center;
    align-self: stretch;
    /* fill column height so align-items:flex-end works */
	padding-top: 56px;
    /* push QR blocks down by adding top padding */
	padding-bottom: 20px;
    /* small bottom padding */;
}



@media (min-width: 769px) {

	/* Nudge the whole center column to the right so QR blocks + links sit closer to the right side */
	.header-dropdown__center {
    @apply ml-[80px];
    /* original declarations (fallbacks) */
    /* adjusted per request */;
}



}



@media (min-width: 769px) {

	/* nudge the Google Play badge slightly lower than the App Store badge */
	.header-dropdown__center .header-dropdown__qr:nth-child(2) .qr-badge {
    @apply block;
    /* original declarations (fallbacks) */
    transform: translateY(15px);
    transition: transform 260ms ease;
}



	/* also nudge the QR image itself a bit down for the second block */
	.header-dropdown__center .header-dropdown__qr:nth-child(2) img:first-child {
    /* original declarations (fallbacks) */
    transform: translateY(4px);
    transition: transform 260ms ease;
}



}


.header-dropdown__right {
    @apply flex flex-col justify-center items-end;
    /* original declarations (fallbacks) */
    flex: 0 0 36%;
}



/* Promo block under social icons inside the right column */
.header-dropdown__promo {
    @apply max-w-[260px] ml-[auto] text-[#fff];
    /* original declarations (fallbacks) */
    /* keep the promo block floated to the right, but left-align internal text */
	text-align: left;
}



@media (min-width: 769px) {

	/* move promo block slightly further to the right */
	.header-dropdown__promo {
    /* original declarations (fallbacks) */
    transform: translateX(40px);
}



	/* Shift the entire right column slightly to the left so it sits closer to the center */
	.header-dropdown__right {
    /* original declarations (fallbacks) */
    transform: translateX(-180px);
}



}


.header-dropdown__promo .promo-title {
    /* original declarations (fallbacks) */
    opacity: 0.95;
}


.header-dropdown__promo .promo-logos img,
.header-dropdown__promo .promo-logo {
    @apply max-w-[100%] h-[auto];
    /* original declarations (fallbacks) */
    display: inline-block;
}


.header-dropdown__promo .promo-text {
    /* original declarations (fallbacks) */
    opacity: 0.95;
}


.header-dropdown__promo .promo-title,
.header-dropdown__promo .promo-text,
.header-dropdown__promo .promo-ok {
    
    /* original declarations (fallbacks) */
    /* medium */;
}


.header-dropdown__promo .promo-ok img {
    @apply max-w-[100%] h-[auto];
    /* original declarations (fallbacks) */
    display: inline-block;
}



.header-dropdown__links li {
    /* original declarations (fallbacks) */
    list-style: none;
}


.header-dropdown__links li a {
    @apply text-[44px] font-black leading-[1];
    /* original declarations (fallbacks) */
    letter-spacing: 0.5px;
}



.header-dropdown__qr img {
    @apply block;
}



/* Ensure QR images keep their intended pixel size and don't shrink inside flex
   containers when we added the links into the center column. */
.header-dropdown__center > .header-dropdown__qr {
    @apply flex flex-col items-center;
    /* original declarations (fallbacks) */
    flex: 0 0 auto;
}



.header-dropdown__center > .header-dropdown__qr img:first-child {
    @apply w-[133px] h-[133px] block;
    /* original declarations (fallbacks) */
    object-fit: contain;
}



.header-dropdown__center__links {
    /* original declarations (fallbacks) */
    align-self: flex-end;
}



.header-dropdown__links-right ul {
    /* original declarations (fallbacks) */
    text-align: right;
}


.header-dropdown__links-right li a {
    @apply text-[14px] text-[#fff];
}



/* Hide the desktop dropdown on small screens; mobile header behavior remains */
@media (max-width: 768px) {
    /* original declarations (fallbacks) */
    .header-dropdown { display: none !important;
  }
}



.header-dropdown__links a,
.header-dropdown__links-right a {
    @apply text-[#fff];
    /* original declarations (fallbacks) */
    text-decoration: none;
}



.header-dropdown__links li a:hover {
    /* original declarations (fallbacks) */
    opacity: 0.9;
}



/* Mobile dropdown: show full-screen overlay with menu */
@media (max-width: 768px) {
	/* Show dropdown as full overlay on mobile */
	.header-dropdown {
		display: none !important;
		position: fixed !important;
		top: 64px !important;
		left: 0 !important;
		right: 0 !important;
		width: 100vw !important;
		height: 678px !important;
		max-height: 678px !important;
		background: linear-gradient(90deg, #C40228 0%, #ED3D1A 100%) !important;
		z-index: 9999 !important;
		padding: 12px 24px 40px 24px !important;
		overflow-y: auto !important;
		overflow-x: hidden !important;
		border-radius: 0 !important;
		-webkit-overflow-scrolling: touch !important;
	}

	/* Add rounded bottom corners when dropdown is open */
	header.header--open .header-dropdown {
		border-radius: 0 0 28px 28px !important;
	}

	/* Hide desktop columns on mobile */
	.header-dropdown__left,
	.header-dropdown__center,
	.header-dropdown__right,
	.header-dropdown__inner {
		display: none !important;
	}

	/* Mobile-only container inside dropdown */
	.header-dropdown__mobile {
		width: 100% !important;
		padding: 0 !important;
	}

	/* Show mobile-only content when header is open */
	header.header--open .header-dropdown .mobile-only {
		display: block !important;
	}

	/* Mobile top section with logo */
	.mobile-top {
		display: flex !important;
		align-items: center !important;
		justify-content: space-between !important;
		margin-bottom: 0 !important;
	}

	/* Mobile navigation links styling */
	.mobile-nav {
		margin-top: 0 !important;
	}

	.mobile-nav-links {
		list-style: none !important;
		padding: 0 !important;
		margin: 0 !important;
	}

	.mobile-nav-links li {
		margin-bottom: 5px !important;
	}

	.mobile-nav-links li a {
		color: #FFFFFF !important;
		font-size: 36px !important;
		font-weight: 900 !important;
		font-style: italic !important;
		text-decoration: none !important;
		text-transform: uppercase !important;
		letter-spacing: 0.5px !important;
		line-height: 1.1 !important;
	}

	/* Mobile social icons */
	.mobile-social {
		display: flex !important;
		gap: 32px !important;
		margin: 28px 0 0 0 !important;
		align-items: center !important;
	}

	.mobile-social img {
		object-fit: contain !important;
	}

	/* Mobile promo section */
	.mobile-promo {
		margin-top: 32px !important;
		padding-top: 0 !important;
	}

	.mobile-promo .promo-text {
		color: #FFFFFF !important;
		font-size: 16px !important;
		font-weight: 500 !important;
		margin-bottom: 12px !important;
	}

	.mobile-promo .promo-logos {
		margin-bottom: 12px !important;
	}

	.mobile-promo .promo-logos img {
		max-width: 160px !important;
		height: auto !important;
	}

	.mobile-promo .promo-ok img {
		max-width: 120px !important;
		height: auto !important;
		margin-top: 8px !important;
	}

	/* Mobile small links */
	.mobile-links-small {
		margin-top: 28px !important;
		padding-top: 0 !important;
	}

	.mobile-links-small ul {
		list-style: none !important;
		padding: 0 !important;
		margin: 0 !important;
	}

	.mobile-links-small li {
		margin-top: 20px !important;
	}

	.mobile-links-small li:first-child {
		margin-top: 0 !important;
	}

	.mobile-links-small a {
		color: #FAFAFA !important;
		font-size: 16px !important;
		font-weight: 400 !important;
		text-decoration: none !important;
	}

	/* Ensure header stays fixed and allows dropdown to open */
	header.header--open {
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		height: 64px !important;
		z-index: 9998 !important;
	}

	/* Show dropdown when header is open */
	header.header--open .header-dropdown {
		display: block !important;
		opacity: 1 !important;
		pointer-events: auto !important;
	}
}
/* Ensure the header bottom corners are rounded on mobile when dropdown is open */
	/* Mobile header adjustments to match provided mobile reference (step 1) */
	@media (max-width: 480px) {
		header.gradient-red {
			height: 64px;
			align-items: center;
			padding-left: 12px;
			padding-right: 12px;
			/* smaller corner radius on mobile as requested */
			border-bottom-left-radius: 28px !important;
			border-bottom-right-radius: 28px !important;
		}

		/* Remove bottom radius when menu is open */
		header.header--open.gradient-red {
			border-bottom-left-radius: 0 !important;
			border-bottom-right-radius: 0 !important;
		}

	/* Mobile: ensure the community section uses the requested light-gray background */
	@media (max-width: 480px) {
		.community-section {
			background-color: #F2F2F2 !important;
		}
	}


	/* Tweak: lift the right-top mobile phone image higher on small screens */
	@media (max-width: 480px) {
	.right-top-mobile-img {
		transform: translateY(-12px) !important;
		margin-top: -40px !important;
	}
	}
		/* logo: smaller and left-aligned */
		.site-logo {
			height: 22px !important;
			width: 154px !important;
			/* nudge slightly more to the right on mobile for visual balance */
			margin-left: 20px !important;
		}

		/* nudge the portal pill slightly more to the right on mobile */
		.header-link--pill {
			margin-left: 12px !important;
		}

		/* hide regular header links, keep the portal pill and the hamburger */
		header nav a.header-link {
			display: none !important;
		}

		header nav a.header-link.header-link--pill {
			display: inline-flex !important;
		}

		header nav .header-link--icon {
			display: inline-flex !important;
		}

		/* style the pill on mobile: 78x24, small text */
		header nav a.header-link.header-link--pill {
			height: 24px !important;
			min-height: 24px !important;
			width: 78px !important;
			padding: 0 8px !important;
			font-size: 12px !important;
			align-items: center !important;
			justify-content: center !important;
			text-align: center !important;
		}

		/* show shortened label and hide full label on mobile */
		.header-link--pill .pill-full {
			display: none !important;
		}

		.header-link--pill .pill-mobile {
			display: inline !important;
		}

		header nav {
			margin-right: 8px !important;
			gap: 8px !important;
		}
	}

	/* Make the whole page background white on small screens as requested */
	@media (max-width: 480px) {

		html,
		body {
			background-color: #FFFFFF !important;
		}
	}

	/* Mobile: Hero / Carousel adjustments (step 2) */
	@media (max-width: 480px) {
		.slide-inner {
			flex-direction: column;
			/* align the left column to the start so text and icons sit flush left like the reference */
			align-items: flex-start;
			gap: 12px;
			padding-left: 12px;
			padding-right: 12px;
		}

		.hero-left {
			width: 100% !important;
			/* left-align text on mobile to match the provided screenshot */
			text-align: left;
			padding-top: 56px !important;
			/* add a small left padding to give breathing room from the screen edge */
			padding-left: 8px;
		}

		.hero-right {
			width: 100% !important;
			display: flex;
			justify-content: center;
			margin-top: -10px;
		}

		.hero-left .hero-title {
			font-size: 42px !important;
			line-height: 1.02 !important;
			letter-spacing: 0 !important;
		}

		.hero-line {
			gap: 8px !important;
		}

		/* keep original icon intrinsic sizes on mobile; only adjust spacing so they remain inline with text */
		.hero-icon {
			margin: 0 6px !important;
		}

		/* CTA sizing on mobile */
		.hero-link--pill {
			width: 180px !important;
			height: 40px !important;
			font-size: 16px !important;
			padding: 0 14px !important;
		}

		/* Scale down the hero car and allow it to peek below the section */
		.hero-right .hero-car {
			max-width: 360px !important;
			width: 100% !important;
			height: auto !important;
			transform: translateY(-12px) !important;
		}

		/* ensure pagination dots remain visible and centered */
		.hero-controls {
			bottom: 36px !important;
		}
	}

	/* Further mobile tweaks for hero badge and spacing to match reference */
	@media (max-width: 480px) {
		.hero-badge {
			width: 96px !important;
			height: 96px !important;
			right: 18px !important;
			top: 8px !important;
		}

		.hero-badge__text {
			font-size: 12px !important;

			@media (max-width: 480px) {

				.hero-left .hero-line img.hero-icon,
				.hero-left .hero-line .hero-icon,
				.hero-icon-sidecar,
				.hero-icon-sidecar-second,
				.hero-icon-pig,
				.hero-icon-money,
				.hero-icon-money-second,
				.hero-icon-carfront,
				.hero-icon-carfront-second,
				.hero-icon-persowave,
				.hero-icon-mobilecheck,
				.hero-icon-shield,
				.hero-icon-gas-pump,
				.hero-icon-tire,
				.hero-icon-wrench,
				.hero-icon-nocrash,
				.hero-icon-shine {
					height: 40px !important;
					width: auto !important;
					margin: 0 6px !important;
					display: inline-block !important;
					vertical-align: middle !important;
				}

				/* ensure the inline-flex gap doesn't add excessive space on mobile */
				.hero-line {
					gap: 6px !important;
				}
			}

			line-height: 1 !important;
			transform: rotate(8deg) !important;
			padding: 6px !important;
		}

		/* Make the large hero title lines tighter and bold like the reference */
		.hero-left .hero-title span {
			/* keep the icon and the text inline and vertically centered like desktop */
			display: inline-flex !important;
			align-items: center !important;
			gap: 10px !important;
			line-height: 0.95 !important;
		}

		/* On mobile keep icon widths/heights unchanged (use intrinsic sizes defined above);
		only ensure inline alignment and a small gap which we set on .hero-left .hero-title span */
	}

	.hero-bg::before {
		content: '';
		position: absolute;
		margin-top: 50px;
		left: 0;
		right: 0;
		top: -100px;
		bottom: 0;
		background-image: url('/img/heroBg.png');
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		filter: brightness(45%);
		z-index: 0;
		border-bottom-left-radius: 50px;
		border-bottom-right-radius: 50px;
	}

	.hero-bg>* {
		position: relative;
		z-index: 10;
	}


	.questions-section {
		position: relative;
		overflow: visible;
	}


	.questions-section h2 {
		margin-top: -50px;
		line-height: 0.95;
	}


	h2 {
		line-height: 0.95;
	}


	.showcase-title {
		line-height: 1.02;
	}


	.questions-section>.mx-auto {
		position: relative;
	}


	.questions-section .questions-bg {
		position: absolute;
		right: calc((100vw - 1350px) / 2 * -1);
		top: 32px;
		width: 1030px;
		height: 735px;
		border-radius: 24px;
		border-top-left-radius: 50px;
		border-bottom-left-radius: 50px;
		z-index: 0;
		overflow: visible;
		pointer-events: none;
		background: linear-gradient(90deg, #C40228 0%, #ED3D1A 100%);
	}

	/* Hide decorative background on smaller viewports to avoid overlap */

	/* Reusable card: left-top
	Applies the same utility styles previously used inline in the HTML. */
	.left-top {
		@apply bg-white rounded-[18px] p-6 shadow-md flex flex-col items-center justify-center w-[570px] h-[473px] overflow-hidden;
	}

	/* Reusable card: left-bottom
	Matches the second left column card (different height and vertical centering). */
	.left-bottom {
		@apply bg-white rounded-[18px] p-6 shadow-md flex items-center justify-center w-[570px] h-[530px] overflow-hidden;
	}

	/* Reusable card: right-top
	Matches the right column top card (phone mockup) */
	.right-top {
		@apply bg-white rounded-[18px] p-6 shadow-md flex items-center justify-center w-[570px] h-[697px] overflow-hidden;
	}

	/* Reusable card: right-bottom
	Small bottom card on the right column */
	.right-bottom {
		@apply bg-white rounded-[18px] p-6 shadow-md w-[570px] h-[304px] flex flex-col items-center justify-center overflow-hidden;
	}

	/* Mobile adjustments for left-top card */
	@media (max-width: 480px) {
		.left-top {
			width: 327px !important;
			height: 297px !important;
			padding: 12px !important;
		}

		/* Ensure the headline inside the card is 20px on mobile */
		.left-top .community-card-label {
			font-size: 20px !important;
			line-height: 1.1 !important;
		}

		/* Constrain the screenshot image to the card width and preserve aspect */
		.left-top .lefttop-img {
			width: 327px !important;
			height: auto !important;
			max-height: 220px !important;
			object-fit: contain !important;
		}

		/* Center the card on mobile */
		.left-top {
			margin-left: auto !important;
			margin-right: auto !important;
			display: block !important;
			text-align: center !important;
		}

		.left-top .community-icon-row,
		.left-top .community-card-label {
			margin-left: auto !important;
			margin-right: auto !important;
			text-align: center !important;
		}

		/* More robust centering for tricky parent layouts: center using relative positioning + transform */
		.left-top {
			position: relative !important;
			left: 50% !important;
			transform: translateX(-52%) !important;
		}
	}

	/* Mobile adjustments for left-bottom card */
	@media (max-width: 480px) {
		.left-bottom {
			width: 327px !important;
			height: 487px !important;
			padding: 12px !important;
			margin-left: auto !important;
			margin-right: auto !important;
			display: block !important;
			text-align: center !important;
			position: relative !important;
			left: 50% !important;
			transform: translateX(calc(-50% - 8px)) !important;
		}

		.left-bottom .leftbottom-img {
			width: 327px !important;
			height: auto !important;
			max-height: 380px !important;
			object-fit: contain !important;
		}
	}

	@media (max-width: 1400px) {
		.questions-section .questions-bg {
			width: 425px !important;
			height: auto !important;
			max-width: none !important;
			position: absolute !important;
			right: 30px !important;
			transform: translateY(-275px) !important;
			z-index: 5 !important;
		}
	}

	/* Ensure content inside the inner wrapper renders above the questions-bg element; exclude the bg itself */
	.questions-section>.mx-auto>*:not(.questions-bg) {
		position: relative;
		z-index: 10;
	}

	/* Image inside the questions background (the car) */
	.questions-bg__img {
		width: 806px;
		height: 453px;
		max-width: none;
		max-height: none;
		object-fit: cover;
		display: block;
		margin-right: 100px;
		margin-left: 50px;
		transform: translateY(-250px);
		will-change: transform;
	}

	/* Move the accordion slightly up to reduce the visual gap under the heading */
	.questions-section .accordion {
		margin-top: -24px;
		/* shift accordion left to better align with content */
		margin-left: -200px;
	}

	/* "Zobraziť všetky" control under the questions accordion */
	.questions-show-all {
		display: block;
		width: 1203px;
		/* match the accordion width */
		margin-top: 64px;
		margin-left: -200px;
		/* match accordion left shift */
		color: #1E1E1E;
		font-weight: 900;
		font-style: italic;
		font-size: 20px;
		text-decoration: none;
		cursor: pointer;
		text-align: left;
	}

	.questions-show-all:hover {
		opacity: 0.9;
	}

	/* On narrow viewports restore normal flow so layout doesn't overlap */
	@media (max-width: 1280px) {
		.questions-section .accordion {
			margin-top: 0;
			margin-left: 0;
		}

		.questions-show-all {
			margin-left: 0;
			width: auto;
			text-align: center;
		}
	}

	@media (max-width: 900px) {

		/* Restore natural flow on small screens so title doesn't overlap */
		.questions-section h2 {
			margin-top: 0;
		}
	}

	/* Move the small decorative bar above the questions heading */
	.map-trail-bar-wrap {
		/* pull the bar upward so it sits visually above the heading without affecting layout flow */
		transform: translateY(-10px);
		margin-bottom: 12px;
	}

	@media (max-width: 900px) {
		.map-trail-bar-wrap {
			transform: translateY(0);
			margin-bottom: 12px;
		}
	}

	/* Same behaviour for question headings: separate utility class so it can be used independently */
	.question-bar-wrap {
		/* pull the bar upward so it sits visually above the heading without affecting layout flow */
		transform: translateY(-60px);
		margin-bottom: 12px;
	}

	@media (max-width: 900px) {
		.question-bar-wrap {
			transform: translateY(0);
			margin-bottom: 12px;
		}
	}

	/* Decorative bar for the Advertise section (same behavior as other small header bars) */
	.advertise-bar-wrap {
		transform: translateY(-10px);
		margin-bottom: 12px;
	}

	@media (max-width: 900px) {
		.advertise-bar-wrap {
			transform: translateY(0);
			margin-bottom: 12px;
		}
	}

	/* Visual style for the small pill bar — color only, width/height set via utility classes in HTML */
	.advertise-bar {
		/* use the same horizontal red brand gradient as the header */
		background: linear-gradient(90deg, #C40228 0%, #ED3D1A 100%);
	}



	/* Decorative bar variant for the Questions section — identical to .map-trail-bar */
	.question-bar {
		background: #0FC26C;
		background-image: none;
	}

	.hero-carousel {
		@apply relative;
	}

	.hero-slides {
		position: relative;
		transform: translateY(-55px);
	}

	.hero-slides-track {
		display: flex;
		transition: transform 600ms cubic-bezier(.2, .9, .3, 1);
		will-change: transform;
	}

	.hero-slides-track .hero-slide {
		flex: 0 0 100vw;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.hero-left .hero-title {
		@apply text-[96px] font-black italic leading-[0.95] space-y-2 uppercase;
	}

	.hero-slide--3 .hero-left .hero-title {
		@apply text-[76px];
	}

	/* Slide 5 specific title sizing */
	.hero-slide--5 .hero-left .hero-title {
		@apply text-[76px];
	}

	/* Slide 6 specific title sizing */
	.hero-slide--6 .hero-left .hero-title {
		@apply text-[76px];
	}

	/* Slide 7 specific title sizing */
	.hero-slide--7 .hero-left .hero-title {
		@apply text-[76px];
	}

	/* Slide 7: show desktop image, hide mobile image by default */
	.hero-slide--7 .hero-slide7-desktop {
		display: block;
	}
	.hero-slide--7 .hero-slide7-mobile {
		display: none;
	}

	.hero-slide--3 .hero-left {
		width: 1175px !important;
		max-width: 1175px !important;
	}

	.hero-line {
		@apply inline-flex items-center gap-4 leading-[0.95];
		/* enforce inline-flex centering */
		display: inline-flex;
		align-items: center !important;
		gap: 1rem;
		line-height: 0.95;
	}

	.hero-icon {
		@apply h-auto mx-2;
		/* ensure icon centers inside the flex-line */
		display: block;
		align-self: center !important;
		vertical-align: middle;
		margin-top: 0;
		margin-bottom: 0;
	}

	.hero-icon-sidecar {
		@apply w-[128px] h-[60px];
	}

	.hero-icon-sidecar-second {
		@apply w-[116px] h-[54px] ml-3;
	}

	.hero-icon-pig {
		@apply w-[85px] h-[80px] ml-6;
	}

	.hero-icon-money {
		@apply w-[91px] h-[66px];
	}

	.hero-icon-money-second {
		@apply w-[82px] h-[60px] ml-6;
	}

	.hero-icon-carfront {
		@apply w-[59px] h-[52px];
	}

	.hero-icon-carfront-second {
		@apply w-[71px] h-[62px] ml-6;
	}

	.hero-icon-persowave {
		@apply w-[51px] h-[61px];
	}

	.hero-icon-mobilecheck {
		@apply w-[44px] h-[65px];
	}

	.hero-icon-shield {
		@apply w-[47px] h-[59px];
	}

	.hero-icon-gas-pump {
		@apply w-[51px] h-[56px];
	}

	.hero-icon-shield {
		@apply w-[47px] h-[59px];
	}

	.hero-icon-sidecar,
	.hero-icon-pig,
	.hero-icon-money,
	.hero-icon-shield,
	.hero-icon-gas-pump {
		vertical-align: middle;
	}

	.hero-icon-carfront,
	.hero-icon-persowave {
		vertical-align: middle;
	}

	/* new icon sizes requested: tire (55x55) and wrench (52x52) */
	.hero-icon-tire {
		@apply w-[55px] h-[55px];
	}

	.hero-icon-wrench {
		@apply w-[52px] h-[52px];
	}

	.hero-icon-tire,
	.hero-icon-wrench {
		vertical-align: middle;
	}

	/* new icon: nocrash (66x66) */
	.hero-icon-nocrash {
		@apply w-[66px] h-[66px];
	}

	.hero-icon-nocrash {
		vertical-align: middle;
	}

	/* new icon: shine (74x74) */
	.hero-icon-shine {
		@apply w-[74px] h-[74px];
	}

	.hero-icon-shine {
		vertical-align: middle;
	}

	.hero-icon-fade {
		opacity: 0;
		animation: hero-fade-in 800ms ease forwards, hero-bob 3000ms ease-in-out var(--bob-delay, 0ms) infinite;
	}

	@keyframes hero-fade-in {
		from {
			opacity: 0;
			transform: translateY(6px);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	@keyframes hero-bob {
		0% {
			transform: translateY(0);
		}

		50% {
			transform: translateY(-8px);
		}

		100% {
			transform: translateY(0);
		}
	}

	.hero-icon {
		transform-origin: center center;
		transition: transform 200ms linear;
	}

	.hero-animate {
		opacity: 0;
		transform: translateY(24px);
		animation: hero-fade-up 900ms cubic-bezier(.2, .9, .3, 1) forwards;
		animation-delay: var(--delay, 0ms);
	}

	@keyframes hero-fade-up {
		from {
			opacity: 0;
			transform: translateY(24px);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.hero-badge {
		position: absolute;
		@apply w-[209px] h-[209px] rounded-full bg-[#0FC26C] flex items-center justify-center z-40;
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
	}

	.hero-badge__text {
		@apply inline-block text-white italic font-black text-[22px] leading-tight text-center px-4 uppercase;
		line-height: 1.05;
		transform: rotate(10deg);
		transform-origin: center center;
	}

	.hero-sub {
		@apply opacity-95;
	}

	.hero-right {
		@apply relative mt-auto;
		min-height: auto;
	}

	.hero-car {
		@apply block relative right-0 bottom-0 mt-[170px];
	}

	/* copy of hero-car for tire graphics */
	.hero-tires {
		@apply block relative right-0 bottom-0 mt-[170px];
	}

	.hero-motorcyclists {
		@apply block relative right-45 top-43 mt-[170px];
	}

	.hero-mobile {
		@apply block relative right-0 bottom-15 mt-[170px];
	}

	.hero-pumpgun {
		@apply block relative left-30 bottom-20 mt-[170px];
	}

	.hero-shield {
		@apply block relative left-105 top-15 mt-[170px];
	}

	/* slide5 specific badge classes (mirror existing hero image utilities) */
	.slide5shieldbadge {
		@apply block relative right-0 bottom-0 mt-[170px];
	}

	/* Questions / Accordion styles (appended) */
	.accordion {
		display: block;
	}

	.shadow-accordion {
		box-shadow: 0 10px 30px rgba(16, 16, 16, 0.06);
	}

	.accordion-item-wrapper {
		cursor: pointer;
		transition: none;
		will-change: max-height;
		background-clip: padding-box;
		border-radius: 44px;
		overflow: hidden;
	}

	.accordion-item-wrapper:focus {
		outline: none;
		outline-offset: 0;
	}

	.accordion-item-wrapper.open {
		transform: translateY(-2px);
	}

	.accordion-icon {
		transition: none;
	}

	.accordion-item-wrapper[aria-expanded="true"] .accordion-icon {
		transform: rotate(180deg);
	}

	/* Disable pointer interactions while an item is animating to avoid conflicting toggles */
	.accordion-item-wrapper.animating {
		pointer-events: none;
	}

	/* The wrapper will expand in height to reveal body content; animate via max-height.
		For best results the JS sets an explicit measured `max-height` when opening.
		This implementation relies on JS to toggle `max-height` for the open/close
		animation. If JS is not available you will need a CSS-only fallback (checkbox
		or :target technique) for expandable behaviour. */
	.accordion-item-wrapper {
		max-height: none;
		transition: transform 220ms ease, box-shadow 220ms ease;
	}

	.accordion-header {
		min-height: 88px;
	}

	.accordion-item-wrapper.expanded {
		/* will be set via JS to measured height */
	}

	.accordion-body {
		max-height: 0;
		overflow: hidden;
		opacity: 0;
		padding-top: 0;
		padding-bottom: 0;
		/* Slower, smooth open/close for both directions */
		transition: max-height 700ms cubic-bezier(.2, .9, .3, 1), opacity 600ms ease, padding 600ms cubic-bezier(.2, .9, .3, 1);
	}

	.accordion-body.open {
		opacity: 1;
		padding-top: 18px;
		padding-bottom: 18px;
	}

	/* Accordion body typography per spec: 24px, color #1E1E1E, weight 400 */
	.accordion-item-wrapper .accordion-body,
	.accordion-body {
		font-size: 24px;
		color: #1E1E1E;
		font-weight: 400;
		line-height: 1.5;
	}

	/* Accordion header typography: 24px, medium (500) */
	.accordion-item-wrapper .accordion-header,
	.accordion-header {
		font-size: 24px;
		font-weight: 500;
		color: #1E1E1E;
	}

	@media (max-width: 768px) {
		.accordion {
			width: 100%;
		}

		.accordion-item-wrapper {
			border-radius: 36px;
		}

		.accordion-header {
			min-height: 72px;
		}
	}


	/* Speech bubble styling for review cards */
	.speech-bubble {
		position: relative;
	}

	.speech-bubble::after {
		content: "";
		position: absolute;
		/* slightly larger tail and moved a bit up (closer to the card) */
		bottom: -24px;
		left: 4px;
		width: 0;
		height: 0;
		border-left: 34px solid transparent;
		border-right: 34px solid transparent;
		border-top: 34px solid #ffffff;
		/* same as card background */
		/* no shadow for the speech-bubble tail */
		filter: none;
	}

	/* Right-aligned tail variant for right-column review cards */
	.speech-bubble--right::after {
		left: auto;
		right: 4px;
	}

	/* Per-card tail placement helpers */
	.speech-tail-left::after {
		left: 4px !important;
		right: auto !important;
	}

	.speech-tail-right::after {
		right: 4px !important;
		left: auto !important;
	}

	/* Slightly smaller tail on small screens so it doesn't overflow */
	@media (max-width: 768px) {

		.speech-bubble::after,
		.speech-bubble--right::after {
			/* slightly larger on small screens but raised a bit */
			bottom: -14px;
			border-left-width: 22px;
			border-right-width: 22px;
			border-top-width: 22px;
			left: 4px;
			right: auto;
		}

		.speech-bubble--right::after {
			left: auto;
			right: 4px;
		}
	}

	/* Promo title and description semantic classes
	These replicate the previous inline utility styles and provide
	a single place to adjust appearance. */
	.promo-title {
		/* font-black, italic, text-[48px], mb-4 */
		font-size: 48px;
		font-weight: 900;
		font-style: italic;
		margin-bottom: 32px;
		/* approx mb-4 */
		line-height: 1.05;
		color: #FFFFFF;
		text-transform: uppercase;
		/* container already sets white, but keep explicit */
	}

	.promo-description {
		/* w-[355px], text-[18px], text-[#FAFAFA], mb-12 */
		width: 355px;
		font-size: 18px;
		color: #FAFAFA;
		margin-bottom: 48px;
		/* approx mb-12 */
	}

	/* Promo badges: absolutely positioned inside .promo-right so each badge
	can be manually moved by editing inline `left`/`top` and CSS variables
	`--bx`/`--by` for fine offsets. */
	.promo-badges {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		pointer-events: none;
		/* allow clicks to pass through to underlying icons except for the badge images themselves */
		z-index: 80;
	}

	.promo-badge {
		position: absolute;
		display: none;
		/* shown when .badge--visible is added */
		width: auto;
		height: auto;
		transform: translate(var(--bx, 0), var(--by, 0));
		object-fit: contain;
		pointer-events: auto;
		/* badge images can receive pointer events */
		z-index: 90;
	}

	.promo-badge.badge--visible {
		display: block;
	}

	/* Shift the promo car slightly left when the 'pump' tab is active. */
	.promo-car--shifted {
		margin-right: -160px;
	}

	/* Promo section: move car image to the right on medium+ screens
		Use a class selector so behaviour works without Tailwind processing. */
	@media (min-width: 768px) {
		.promo-right>img.promo-car {
			position: relative;
			transform: translateX(-50px) translateY(80px) !important;
			transition: transform 320ms cubic-bezier(.2, .9, .3, 1) !important;
			will-change: transform;
			/* ensure the image remains visible when shifted */
			margin-right: -70px;
		}
	}

	.slide5pumpbadge {
		@apply block relative left-30 bottom-20 mt-[170px];
	}



	.hero-arrow {
		@apply absolute w-[40px] h-[40px] rounded-full flex items-center justify-center text-white text-[26px] z-60 cursor-pointer bg-transparent top-1/2 -translate-y-1/2;

	}

	.hero-arrow--left {
		@apply left-[80px];
	}

	.hero-arrow--right {
		@apply right-[80px];
	}

	.hero-dots-wrap {
		/* show only a sliding window of 5 dots */
		--dot-size: 20px;
		--dot-gap: 12px;
		--visible-dots: 5;
		--dot-step: calc(var(--dot-size) + var(--dot-gap));
		width: calc((var(--dot-step) * var(--visible-dots)) - var(--dot-gap));
		overflow: hidden;
	}

	.hero-dots {
		display: flex;
		gap: var(--dot-gap);
		z-index: 60;
		list-style: none;
		padding: 0;
		margin: 0;
		transition: transform 320ms cubic-bezier(.2, .9, .3, 1);
		will-change: transform;
	}

	.hero-dots .dot {
		width: var(--dot-size);
		height: var(--dot-size);
		border-radius: 9999px;
		background: white;
		transition: all 200ms ease-in-out;
		flex: 0 0 auto;
	}

	.hero-dots .dot.active {
		background: #0FC26C;
		transform: scale(1.05);
	}

	.hero-controls {
		/* moved further higher per request */
		@apply absolute inset-x-0 bottom-[96px] w-full pointer-events-none flex items-center justify-center h-[26px];
	}

	.hero-controls .hero-arrow,
	.hero-controls .hero-dots {
		@apply pointer-events-auto;
	}


	@media (max-width: 900px) {
		.hero-carousel {
			@apply flex-col gap-8 items-start;
		}

		/* Slightly reduce the upward offset on smaller screens */
		.hero-slides {
			transform: translateY(-30px);
		}

		.hero-left,
		.hero-right {
			@apply w-full;
		}

		.hero-left {
			@apply pr-0;
		}

		.hero-arrow--left {
			@apply left-[12px];
		}

		.hero-arrow--right {
			@apply right-[12px];
		}

		.hero-controls {
			@apply bottom-[64px];
		}

		.hero-dots-wrap {
			--dot-size: 16px;
			--dot-gap: 10px;
		}

		.hero-dots .dot {
			width: var(--dot-size);
			height: var(--dot-size);
		}
	}

	/* Features / Benefits section styles */
	.features-section {
		@apply py-20;
		position: relative;
		overflow: visible;
	}

	.feature-card {
		@apply bg-white rounded-[50px] py-6 pr-6 pl-12 shadow-md;
	}

	/* Make the first feature card a fixed size on mobile (slightly larger) */
	@media (max-width: 768px) {
		.features-left>.feature-card:first-child {
			width: 340px;
			max-width: 340px;
			height: 400px;
			box-sizing: border-box;
			margin: 0 auto;
		}

		/* Title inside the first feature card on mobile */
		.features-left>.feature-card:first-child .feature-header {
			font-size: 24px;
			line-height: 1.2;
		}

		/* Feature item text size on mobile */
		.features-left>.feature-card:first-child .feature-item,
		.features-left>.feature-card:first-child .features-text {
			font-size: 16px;
			line-height: 1.4;
		}

		/* Second feature card size on mobile (327x575) */
		.features-left>.feature-card:nth-child(2) {
			width: 327px;
			max-width: 327px;
			height: 575px;
			box-sizing: border-box;
			margin: 0 auto;
			/* nudge the second card slightly lower on mobile */
			margin-top: 24px;
		}

		/* Make feature cards use light gray background on mobile */
		.feature-card {
			background-color: #F2F2F2 !important;
		}

		/* Shift feature card content slightly to the left on mobile */
		.features-left>.feature-card {
			padding-left: 16px !important;
			padding-right: 12px !important;
		}

		/* Add a slight left offset to headers so they shift right with the content */
		.features-left>.feature-card .feature-header,
		.features-left>.feature-card .feature-header-bar-wrap {
			margin-left: 4px !important;
		}

		/* Title inside the second feature card on mobile */
		.features-left>.feature-card:nth-child(2) .feature-header {
			font-size: 24px;
			line-height: 1.2;
		}

		/* Feature item text size in the second feature card on mobile */
		.features-left>.feature-card:nth-child(2) .feature-item,
		.features-left>.feature-card:nth-child(2) .features-text {
			font-size: 16px;
			line-height: 1.4;
		}

		/* Description line in the second feature card on mobile */
		.features-left>.feature-card:nth-child(2) .feature-description {
			font-size: 16px;
			line-height: 1.4;
		}

		/* Add vertical gap between feature items on mobile */
		.features-text .feature-item {
			margin-bottom: 12px;
		}

		.features-text .feature-item:last-child {
			margin-bottom: 0;
		}

		/* Resize breakout car in download section for mobile */
		.download-car-breakout {
			width: 375px !important;
			height: 300px !important;
			max-width: 425px !important;
			object-fit: cover;
		}

		/* Make artboard illustration a bit wider on mobile for better visual weight */
		.features-right .artboard-img {
			width: 420px !important;
			max-width: none !important;
			height: auto !important;
			/* center the artboard horizontally on small screens */
			margin: 0 auto !important;
			left: auto !important;
			right: auto !important;
			transform: none !important;
			display: block !important;
		}

		/* Position breakout car with requested offset on small mobile viewports */
		.download-car-breakout {
			position: absolute !important;
			right: 0px !important;
			transform: translateY(-250px) !important;
			z-index: 5 !important;
		}

		/* Remove the container gap on mobile so stacked columns collapse without extra spacing */
		.features-section>.mx-auto {
			gap: 0 !important;
		}
	}

	.features-right img {
		@apply block;
	}

	/* Specific breakpoint overrides for the download breakout width
	- max-width:480px => set width: 425px
	- max-width:375px => set width: 375px (this comes after and will override the 480px rule for narrower screens)
	*/
	@media (max-width: 480px) {
		.download-car-breakout {
			width: 425px !important;
			height: 385px !important;
			max-width: none !important;
      transform: translateY(-140px) !important;

		}
	}

	@media (max-width: 375px) {
		.download-car-breakout {
			width: 375px !important;
			height: 310px !important;
			max-width: none !important;
			transform: translateY(-200px) !important;
		}

		/* ensure the portal pill is nudged right on the narrowest phones */
		.mobile-pill { margin-left: 12px !important; }
	}

	/* Make the right-side illustration fill the column (desktop) */
	.features-right {
		display: flex;
		align-items: stretch;
		position: relative;
	}

	/* Target the main artboard illustration separately so we can layer a secondary car image under it */
	.features-right .artboard-img {
		width: 100%;
		height: 1042px;
		object-fit: cover;
		display: block;
		position: relative;
		z-index: 10;
		top: 30px;
		max-width: none !important;
	}

	/* Secondary car/road image that sits under the artboard. Positioned absolutely so it can peek out beneath the artboard */
	.features-right .features-car {
		position: absolute;
		right: 0;
		bottom: -40px;
		/* Exact requested size for the secondary image */
		width: 1562px;
		height: 833px;
		max-width: none;
		pointer-events: none;
		display: block;
		object-fit: cover;
		transform: translateY(10px);
	}

	@media (max-width: 900px) {

		/* on smaller screens keep natural height so image doesn't force large blocks */
		.features-right img {
			height: auto !important;
			object-fit: contain;
		}

		/* make the underlay car flow inline on small screens instead of absolute */
		.features-right .features-car {
			position: relative;
			bottom: 0;
			transform: none;
			width: 100%;
			max-width: none;
			margin-top: 12px;
			z-index: 5;
		}

		/* mobile behaviour for the breakout image placed inside the download section */
		.download-car-breakout {
			position: relative;
			bottom: 0;
			transform: none;
			width: 100%;
			max-width: none;
			margin-top: 12px;
			z-index: 5;
		}
	}

	/* Desktop: make the download columns stretch so right column can align to bottom */
	@media (min-width: 900px) {
		.download-inner {
			align-items: stretch;
			/* ensure children fill height */
		}

		.download-right {
			display: flex;
			flex-direction: column;
			justify-content: flex-end;

			/* promo icons (small row above the promo car) */
			.promo-icons {
				display: none;
				/* hidden on small screens */
			}

			@media (min-width: 768px) {
				.promo-icons {
					display: flex;
					gap: 12px;
					align-items: center;
					position: absolute;
					right: 140px;
					/* place above the car area; tweak if needed */
					top: 8%;
					z-index: 30;
				}

				.promo-icons .promo-icon {
					display: block;
					object-fit: contain;
				}

				/* explicit pixel sizes to match request */
				.promo-icons .promo-icon[width="40"][height="40"] {
					width: 40px;
					height: 40px;
				}

				.promo-icons .promo-icon[width="38"][height="44"] {
					width: 38px;
					height: 44px;
				}

				.promo-icons .promo-icon[width="43"][height="43"] {
					width: 43px;
					height: 43px;
				}
			}

			/* align content to bottom of column */
			margin-bottom: 50px;
			/* requested bottom margin */
			height: 100%;
		}
	}

	@media (max-width: 900px) {
		.download-right {
			margin-bottom: 0;
			justify-content: flex-start;
			height: auto;
		}
	}

	/* New download section with white background */
	.download-section {
		position: relative;
		overflow: visible;
		margin-top: 140px;
	}

	/* Advertise / client logos with car preview section */
	.advertise-section {
		position: relative;
		overflow: visible;
		background: transparent;
		margin-top: 0px;
	}

	.advertise-title {
		font-weight: 900;
		font-style: italic;
		font-size: 64px;
		color: #1E1E1E;
		text-transform: uppercase;
		margin-bottom: 140px;
		line-height: 1.02;
	}

	.adv-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
		column-gap: var(--adv-gap-x, 150px) !important;
		row-gap: var(--adv-gap-y, 100px) !important;
		justify-content: center;
	}

	.adv-card {
		width: 408px;
		height: 259px;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		overflow: visible;
		padding: 16px;
		box-sizing: border-box;
		border-radius: 50px;
	}

	.adv-logo {
		position: absolute;
		top: 30px;
		left: 40px;
		display: block;
		z-index: 20;
		object-fit: contain;
		transition: filter 220ms ease, opacity 220ms ease;
	}

	/* On card hover, only the logo image becomes white (using filters). */
	.adv-card:hover .adv-logo {
		/* convert colored logo to white while preserving transparency */
		filter: grayscale(100%) brightness(0) invert(1);
		opacity: 0.98;
	}

	.adv-car {
		position: absolute;

		left: var(--adv-car-left, auto);
		top: var(--adv-car-top, auto);
		right: var(--adv-car-right, -140px);
		bottom: var(--adv-car-bottom, -65px);
		z-index: 5;
		pointer-events: none;
		transform: translateZ(0);
	}


	.adv-car--1 {
		--adv-car-right: -140px;
		--adv-car-bottom: -65px;
		--adv-car-left: auto;
		--adv-car-top: auto;
	}

	.adv-car--2 {
		--adv-car-right: -100px;
		--adv-car-bottom: -65px;
		--adv-car-left: auto;
		--adv-car-top: auto;
	}

	.adv-car--3 {
		--adv-car-right: -80px;
		--adv-car-bottom: -65px;
		--adv-car-left: auto;
		--adv-car-top: auto;
	}

	.adv-car--4 {
		--adv-car-right: -140px;
		--adv-car-bottom: -65px;
		--adv-car-left: auto;
		--adv-car-top: auto;
	}

	.adv-car--5 {
		--adv-car-right: -100px;
		--adv-car-bottom: -65px;
		--adv-car-left: auto;
		--adv-car-top: auto;
	}

	.adv-car--6 {
		--adv-car-right: -90px;
		--adv-car-bottom: -65px;
		--adv-car-left: auto;
		--adv-car-top: auto;
	}

	@media (max-width: 1024px) {
		.adv-grid {
			grid-template-columns: repeat(2, minmax(240px, 1fr));
		}

		.adv-car {
			width: 200px;
			right: 10px;
		}
	}

	@media (max-width: 600px) {
		.adv-grid {
			grid-template-columns: 1fr;
		}

		.advertise-title {
			text-align: center;
		}

		.adv-card {
			width: 100%;
			max-width: 408px;
			height: 259px;
		}

		.adv-car {
			width: 140px;
			right: 8px;
			bottom: -8px;
		}
	}

	/* Ensure promo icons are hidden on small screens but visible on md+.
		Placed at end to override any accidental nested media rules earlier. */
	.promo-icons {
		display: none;
	}

	@media (min-width: 768px) {
		.promo-icons {
			display: flex !important;
			gap: 35px;
			/* increased gap between icons */
			align-items: center;
			position: absolute;
			right: -300px;
			/* moved icons more to the left */
			top: 8%;
			z-index: 60;
		}

		.promo-icons .promo-icon {
			display: block;
			object-fit: contain;
		}

	}

	/* Desktop: Broker logo size (should be 235x88) */
	@media (min-width: 768px) {
		.promo-logo img[src*="brokerLogo"] {
			width: 235px !important;
			height: 88px !important;
			max-width: none !important;
		}
	}

	/* Desktop: Orlen logo size (must be 96x87 on desktop as requested) */
	@media (min-width: 768px) {
		.promo-logo img[src*="orlen"] {
			width: 96px !important;
			height: 87px !important;
			max-width: none !important;
		}
	}

	.download-section .download-inner {
		max-width: 1550px;
		margin: 0 auto;
	}

	/* Utility class combining the inline Tailwind-like utilities used on the download wrapper
	This mirrors: `pr-6 py-20 bg-white h-[746px] w-[1750px] rounded-tr-[50px] rounded-br-[50px]` */
	.download-bg {
		padding-right: 24px;
		/* pr-6 */
		padding-top: 80px;
		/* py-20 */
		padding-bottom: 80px;
		/* py-20 */
		background-color: #FFFFFF;
		/* bg-white */
		height: 746px;
		/* h-[746px] */
		width: 1750px;
		/* w-[1750px] */
		border-top-right-radius: 50px;
		/* rounded-tr-[50px] */
		border-bottom-right-radius: 50px;
		/* rounded-br-[50px] */
		box-sizing: border-box;
	}

	.download-section .container {
		position: relative;
		z-index: 20;
	}

	.download-section .download-inner {
		max-width: 1550px;
		margin: 0 auto;
	}

	/* Ensure any direct child wrapper inside the download section sits above the breakout image
	(some templates don't use a `.container` class — target the direct child and the
		`.download-inner` specifically). */
	.download-section>div,
	.download-section .download-inner {
		position: relative;
		z-index: 20;
	}

	.download-title {
		color: #1E1E1E;
	}

	.qr-placeholder {
		display: inline-block;
	}

	/* Image container for the download-left column */
	.download-img-container {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		/* left align inside the column */
		padding-left: 70px;
		/* exact requested size and allow overflow so illustration can bleed */
		width: 1009px;
		height: 914px;
		overflow: visible;
		position: relative;
	}

	.download-img {
		max-width: none;
		width: auto;
		height: 100%;
		display: block;
		object-fit: contain;
		/* nudge image left and slightly up to create more overlap */
		transform: translate(-120px, -70px);
	}

	/* QR image: exact requested size on desktop, responsive on small screens */
	.qr-codes {
		display: block;
		width: 531px;
		height: 285px;
		object-fit: contain;
	}

	@media (max-width: 900px) {
		.qr-codes {
			width: 100%;
			height: auto;
		}
	}

	/* Nudge QR image to the right on desktop; reset on small screens */
	.qr-codes {
		transform: translateX(165px);
	}

	@media (max-width: 900px) {
		.qr-codes {
			transform: none;
		}
	}

	/* QR grid for badges/cards */
	.qr-grid {
		display: flex;
		gap: 2rem;
		align-items: flex-start;
		margin-left: 160px;
		/* align cards with art/title */
		margin-top: 20px;
	}

	/* Square cards (250x285) used instead of the single QR image */
	.qr-card {
		width: 250px;
		height: 285px;
		background: #ffffff;
		border: 1.5px solid #1E1E1E;
		border-radius: 30px;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		gap: 12px;
		align-items: center;
		justify-content: center;
		padding: 12px 8px;
	}

	@media (max-width: 900px) {
		.qr-card {
			width: calc(50% - 8px);
			height: auto;
			min-height: 200px;
		}

		.qr-grid {
			margin-left: 0;
		}

		.qr-grid {
			margin-top: 0;
		}
	}

	/* image inside QR card (centered) */
	.qr-card__img {
		width: 133px;
		height: 133px;
		object-fit: contain;
		display: block;
	}

	.qr-card__img_second {
		width: 133px;
		height: 133px;
		object-fit: contain;
		display: block;
		transform: translateY(15px);
	}

	@media (max-width: 900px) {
		.qr-card__img {
			width: 110px;
			height: 110px;
		}
	}

	/* store badge below each QR */
	.qr-badge {
		display: block;
		object-fit: contain;
	}

	@media (max-width: 900px) {
		.qr-badge {
			width: 110px;
		}
	}

	/* Text block above the QR cards */
	.qr-text {
		width: 510px;
		/* exact requested width */
		color: #1E1E1E;
		font-size: 20px;
		line-height: 1.3;
		margin-left: 160px;
		/* align with cards/title */
		margin-bottom: 12px;
	}

	@media (max-width: 900px) {
		.qr-text {
			width: 100%;
			margin-left: 0;
			font-size: 16px;
		}
	}

	@media (max-width: 600px) {
		.qr-grid {
			gap: 0.6rem;
		}
	}

	/* Title above QR codes in download section */
	.download-qr-title {
		font-weight: 900;
		font-style: italic;
		font-size: 44px;
		text-transform: uppercase;
		color: #1E1E1E;
		margin: 120px 0 14px 160px;
		/* align with cards */
		line-height: 1.02;
	}

	@media (max-width: 900px) {
		.download-qr-title {
			font-size: 28px;
			margin-left: 0;
		}
	}

	@media (max-width: 900px) {

		/* undo left-nudge on small screens */
		.download-img {
			transform: none;
		}

		.download-img-container {
			width: 100%;
			height: auto;
		}
	}

	@media (max-width: 900px) {

		/* Ensure the right artwork stacks below the feature cards on small screens */
		.features-right {
			@apply order-last mt-6;
		}

		.features-left {
			@apply order-first;
		}
	}

	/* Feature header style: bold italic 44px */
	.feature-header {
		@apply font-black italic text-[40px];
		/* tighten multi-line height so the two header lines sit closer */
		line-height: 0.95;
		/* small bottom gap to separate header from the description */
		margin-bottom: 6px;
	}

	/* small decorative bar above the first feature header */
	.features-right {
		display: flex;
		align-items: stretch;
		position: relative;
	}

	/* Target the main artboard illustration separately so we can layer a secondary car image under it */
	.features-right .artboard-img {
		width: 100%;
		height: 1042px;
		object-fit: cover;
		display: block;
		position: relative;
		z-index: 10;
		max-width: none !important;
	}

	/* Breakout car image for the download section (placed inside .download-section but visually behind the container) */
	.download-car-breakout {
		height: 833px;
		width: 1562px;
		position: absolute;
		right: -240px;
		bottom: 430px;
		max-width: none;
		z-index: 5;
		/* behind the container (container z-index:20) */
		pointer-events: none;
		display: block;
		object-fit: cover;
		transform: translateY(10px);
	}

	/* small decorative bar above the first feature header */
	.feature-header-bar {
		width: 100px;
		height: 20px;
		background: #E2BA04;
		border-radius: 100px;
		margin-bottom: 18px;
		margin-top: 18px;
		width: 100px;
		height: 20px;
		background: #E2BA04;

		/* Add vertical gap between stacked feature cards on mobile */
		.features-left>.feature-card {
			margin-bottom: 18px;
		}

		.features-left>.feature-card:last-child {
			margin-bottom: 0;
		}

		border-radius: 100px;
	}

	/* green variant of the decorative header bar (used for second feature card) */
	.feature-header-bar--green {
		background: #0FC26C;
	}

	/* wrapper to hold the bar and the small database icon */
	.feature-header-bar-wrap {
		display: inline-flex;
		align-items: center;
		gap: 20px;
		margin-bottom: 14px;
	}

	/* Community feature component classes (use Tailwind @apply for reuse) */
	@layer components {
		.community-feature-title {
			@apply font-bold text-[24px];
		}

		.community-feature-desc {
			@apply text-[#1E1E1E] text-[24px] leading-tight tracking-tight;
		}

		.center-features-gap {
			@apply gap-3;
		}
	}

	/* Fallback plain-CSS rules (in case Tailwind/PostCSS @apply isn't processed) */
	.community-feature-title {
		font-weight: 700;
		font-size: 24px;
		color: #1E1E1E;
		margin-bottom: 4px;
	}

	.community-feature-desc {
		color: #1E1E1E;
		font-size: 24px;
		line-height: 1.02;
		letter-spacing: -0.02em;
		margin-top: 0;
	}

	/* Label inside community card (fallback styles) */
	.community-card-label {
		font-weight: 700;
		font-style: italic;
		font-size: 32px;
		color: #1E1E1E;
		text-transform: uppercase;
		margin: 0;
		transform: translateY(40px);
		will-change: transform;
		line-height: 105%;
	}

	/* Icon row inside the community card — nudge icons downward using transform (prefers transform over margin) */
	.community-icon-row {
		transform: translateY(18px);
		will-change: transform;
	}




	.feature-header-icon {
		transform: translateY(0px);
	}

	/* slightly smaller/green-icon variant used next to green header bar */
	.feature-header-icon--green {
		transform: translateY(-3px);
	}

	.feature-item {
		display: flex;
		align-items: center;
		gap: 12px;
	}


	.feature-item--top {
		align-items: flex-start;
	}

	.feature-item--top .feature-item__icon {

		transform: translateY(2px) translateX(-2px);
	}

	.features-text .feature-item span {
		display: inline-block;
	}


	.features-text {
		font-weight: 400;
		font-size: 24px;
		margin-top: 32px;
		color: #1E1E1E;
		line-height: 1.35;
	}

	/* small description line below header for the second feature card */
	.feature-description {
		font-weight: 400;
		font-size: 24px;
		color: #1E1E1E;
		margin: 4px 0 12px 0;
	}

	/* make emphasized strong text bolder inside features lists */
	.features-text strong {
		font-weight: 700;
	}

	/* shift the feature cards slightly to the left on wider screens */
	.features-left {
		/* reduce desktop horizontal nudge to avoid overlap with right column */
		transform: translateX(40px);
	}

	@media (max-width: 900px) {
		.features-left {
			transform: translateX(0);
		}
	}

	/* Exact sizing for feature cards (desktop). Keep responsive fallback on mobile. */
	.features-left .feature-card {
		box-sizing: border-box;
		width: 686px;
	}

	.features-left .feature-card:first-of-type {
		height: 431px;
	}

	.features-left .feature-card:nth-of-type(2) {
		height: 691px;
	}

	@media (max-width: 900px) {
		.features-left .feature-card {
			width: 100%;
			height: auto;
		}
	}

	/* Nudge specific left-top phone image down slightly */
	.lefttop-img {
		transform: translateY(15px);
		will-change: transform;
	}

	/* Nudge left-bottom phone image down slightly */
	.leftbottom-img {
		transform: translateY(12px);
		will-change: transform;
	}

	/* Mobile-specific alias: reuse leftbottom-img behaviour for mobile images */
	.mobile-img {
		transform: translateY(-12px);
		will-change: transform;
	}


	/* Earnings / Advertising section styles */
	.earnings-section {
		position: relative;
		overflow: visible;
		margin-top: 320px;
		background: transparent;
	}

	.earnings-section .mx-auto {
		position: relative;
		z-index: 10;
	}

	.earnings-title {
		font-weight: 900;
		font-style: italic;
		font-size: 40px;
		color: #1E1E1E;
		line-height: 1.02;
	}

	.earnings-sub {
		color: #1E1E1E;
		font-size: 20px;
		margin-top: 8px;
	}

	.earnings-list {
		list-style: none;
		padding: 0;
		margin: 0;
		margin-top: 18px;
	}

	.earnings-list li {
		display: flex;
		align-items: flex-start;
		gap: 14px;
		font-size: 22px;
		line-height: 1.4;
		margin-bottom: 14px;
		color: #1E1E1E;
	}

	.earnings-list .list-icon {
		width: 22px;
		height: 22px;
		margin-top: 6px;
	}

	.earnings-right {
		position: relative;
	}

	.earnings-car {
		display: block;
		max-width: 100%;
		height: auto;
		transform: translateY(-60px);
		position: relative;
		z-index: 12;
	}

	/* White panel behind the car image (exact pixel size requested) */
	.earnings-car-bg {
		position: absolute;
		right: 0;
		bottom: 0;
		width: 980px;
		height: 481px;
		border-radius: 50px;
		z-index: 6;
		pointer-events: none;
		transform: translateY(10px);
		/* slight visual lift */
	}

	.earnings-coins {
		position: absolute;
		right: 8%;
		top: -10%;
		pointer-events: none;
	}

	.earnings-coins .coin {
		width: 56px;
		height: 56px;
		object-fit: contain;
		position: absolute;
		opacity: 0.95;
	}

	.earnings-coins .coin-1 {
		right: 8px;
		top: -12px;
		transform: translateY(0);
		animation: coin-bob 2200ms infinite ease-in-out;
	}

	.earnings-coins .coin-2 {
		right: 72px;
		top: 8px;
		transform: translateY(0);
		animation: coin-bob 2400ms 200ms infinite ease-in-out;
	}

	.earnings-coins .coin-3 {
		right: 136px;
		top: -8px;
		transform: translateY(0);
		animation: coin-bob 2000ms 400ms infinite ease-in-out;
	}

	@keyframes coin-bob {
		0% {
			transform: translateY(0);
		}

		50% {
			transform: translateY(-12px);
		}

		100% {
			transform: translateY(0);
		}
	}

	@media (max-width: 900px) {
		.earnings-section {
			padding-top: 24px;
			padding-bottom: 24px;
			margin-top: 140px;
		}

		.earnings-title {
			font-size: 28px;
		}

		.earnings-list li {
			font-size: 16px;
		}

		.earnings-coins {
			display: none;
		}

		.earnings-left,
		.earnings-right {
			width: 100%;
		}

		/* On mobile, show earnings-right below earnings-left */
		.earnings-left {
			order: 1 !important;
		}

		.earnings-right {
			order: 2 !important;
			margin-bottom: 16px;
		}

		.earnings-car {
			transform: translateY(-20px);
		}
	}

	@media (max-width: 1200px) {

		/* scale the white panel down on narrower desktops/tablets so it doesn't overflow */
		.earnings-car-bg {
			width: 720px;
			height: 354px;
			right: 8px;
		}
	}

	@media (max-width: 900px) {
		.earnings-car-bg {
			display: none;
		}
	}

	/* On wide screens shift the panel and image further right so they line up to the section edge */
	@media (min-width: 1400px) {

		/* increased right offset to push panel further out */
		.earnings-car-bg {
			right: -220px;
		}

		.earnings-car {
			transform: translateY(-60px);
		}
	}

	@media (min-width: 1750px) {

		/* larger screens: push even further */
		.earnings-car-bg {
			right: -450px;
		}

		.earnings-car {
			transform: translateY(-60px);
		}
	}

	/* New step layout (icons + divider + text) */
	.earnings-steps {
		display: flex;
		align-items: flex-start;
	}

	.icons-col {
		width: 72px;
		flex: 0 0 72px;
	}

	.step-icon {
		object-fit: contain;
		display: block;
	}

	.steps-divider {
		width: 2px;
		background: #E6E6E6;
		margin: 4px 12px;
		border-radius: 2px;
	}

	.icons-sep {
		width: 4px;
		height: 44px;
		background: #D9D9D9;
		border-radius: 4px;
	}

	.icons-sep--short {
		height: 36px;
	}

	.icons-sep--long {
		height: 72px;
	}

	.text-col {
		flex: 1 1 auto;
		display: flex;
		flex-direction: column;
		gap: 1.5rem;
	}

	.step-text {
		color: #1E1E1E;
		font-size: 24px;
		line-height: 1.10;
		margin: 0;
		width: 670px;
		box-sizing: border-box;
	}

	@media (max-width: 900px) {
		.earnings-steps {
			flex-direction: row;
			gap: 12px;
		}

		/* On mobile show the icons column next to the step text */
		.icons-col {
			display: flex !important;
			flex: 0 0 28px !important;
			width: 28px !important;
			height: 227px !important;
			align-items: flex-start !important;
			justify-content: center !important;
		}

		/* Move the icons separator further right on mobile for better spacing */
		.icons-sep {
			margin-left: 12px !important;
		}

		.steps-divider {
			display: none;
		}

		.step-text {
			font-size: 16px;
		}
	}

	/* Ensure step text doesn't overflow on small screens */
	@media (max-width: 900px) {
		.step-text {
			width: 100%;
		}
	}

	/* Community section tweaks */
	@media (min-width: 900px) {
		.community-section {
			overflow: visible;
		}

		/* lift the right-top container up to match reference artwork */
		.community-section .community-right-top {
			z-index: 20;
		}
	}

	/* Nudge the right-top phone mockup slightly upward using transform */
	.righttop-img {
		transform: translateY(-21px);
		will-change: transform;
	}

	/* Right-bottom card text styling: bold, italic, 28px, color #1E1E1E */
	.community-right-bottom-text {
		font-weight: 700;
		font-style: italic;
		font-size: 28px;
		color: #1E1E1E;
		text-transform: uppercase;
		margin: 0;
		line-height: 1.08;
		text-align: center;
	}

	/* Bottom icons row inside community right column (five icons in order) */
	.community-bottom-icons {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 16px;
		margin-bottom: 30px;
	}

	.community-bottom-icons .community-bottom-icon {
		display: block;
		margin: 0;
		object-fit: contain;
	}

	/* Make showcase prev/next arrows visually thicker/larger */
	.showcase-prev,
	.showcase-next {
		width: 48px;
		height: 48px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.showcase-prev i,
	.showcase-next i {
		font-size: 34px;
		line-height: 1;
		color: #1E1E1E;
		-webkit-font-smoothing: antialiased;
		transform: translateY(0.5px);
	}

	@media (max-width: 800px) {

		.showcase-prev,
		.showcase-next {
			width: 40px;
			height: 40px;
		}

		.showcase-prev i,
		.showcase-next i {
			font-size: 26px;
		}
	}


	/* Nudge the main showcase slide image slightly upward to match reference */
	.showcase-slider .slide img {
		transform: translateY(-10px);
		transition: transform 220ms ease;
	}

/* Desktop: position the showcase arrows over the left text column to match reference */
@media (min-width: 900px) {
	.showcase-carousel {
		position: relative;
	}

	.showcase-carousel .showcase-prev,
	.showcase-carousel .showcase-next {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		width: 44px;
		height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: transparent;
		color: #1E1E1E;
		border-radius: 0;
		box-shadow: none;
		z-index: 1200;
	}

	/* place both arrows inside the left column area (adjust percentages if needed) */
	.showcase-carousel .showcase-prev { left: 8%; }
	.showcase-carousel .showcase-next { left: 24%; }

	.showcase-carousel .showcase-prev i,
	.showcase-carousel .showcase-next i { font-size: 28px; }
}

	@media (max-width: 900px) {
		.showcase-slider .slide img {
			transform: translateY(-6px);
		}
	}

	/* Smooth fade for text/logo when slides change */
	.showcase-text h3,
	.showcase-text .showcase-logo img,
	.showcase-text p {
		transition: opacity 200ms ease, transform 200ms ease;
	}

	/* Map trail styles (car + svg) */
	.map-trail {
		position: relative;
	}

	#mapTrailSvg {
		display: block;
		width: 100%;
		height: auto;
	}

	.map-car {
		position: fixed;
		left: 0;
		top: 0;
		width: 56px;
		height: auto;
		transform: translate(-50%, -50%) rotate(0deg);
		will-change: transform, opacity;
		pointer-events: none;
		opacity: 0;
		transition: opacity 240ms linear;
	}

	@media (max-width: 768px) {
		.map-car {
			display: none;
		}
	}

	/* Promo icons: default (grayscale) and active state */
	.promo-icons {
		display: flex;
		gap: 20px;
		align-items: center;
	}

	.promo-icon {
		cursor: pointer;
		transition: transform 140ms ease, opacity 140ms ease, filter 140ms ease;
		filter: grayscale(100%);
		opacity: 0.85;
	}

	.promo-icon[aria-pressed="true"],
	.promo-icon.active {
		filter: none;
		opacity: 1;
		transform: translateY(-6px);
	}

	/* ensure promo icons are clickable on small screens but visually shown mainly on md+ via existing layout rules */
	.promo-icons .promo-icon:focus {
		outline: 2px solid rgba(255, 255, 255, 0.15);
		outline-offset: 4px;
	}

	/* Site footer */
	.site-footer {
		height: 746px;
		background: #1E1E1E;
		border-top-left-radius: 50px;
		border-top-right-radius: 50px;
		overflow: hidden;
		color: #FFFFFF;
		/* center inner content vertically */
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.site-footer .footer-inner {
		/* allow easy configuration of the inner container width via CSS variable */
		--footer-inner-max: 1470px;
		max-width: var(--footer-inner-max);
		width: 100%;
		margin: 0 auto;
		/* remove large top/bottom padding so the inner block can be vertically centered
		horizontal padding retained */
	}

	.footer-grid {
		display: flex;
		gap: 120px;
		/* center columns vertically within the footer */
		align-items: center;
	}

	/* wrapper for the three middle columns so they sit closer together */
	.footer-mid {
		display: flex;
		gap: 75px;
		/* tighter gap between the three lists */
		align-items: flex-start;
	}

	.footer-col {
		flex: 1 1 0;
		min-width: 75px;
	}

	.footer-col--brand {
		margin-top: 50px;
		flex: 0 0 280px;
	}

	.footer-col--contact {
		/* push the contact column to the far right */
		margin-left: auto;
		/* keep it from shrinking too small if space is tight */
		flex: 0 0 auto;
		/* nudge the contact column to the right for visual alignment */
		transform: translateX(60px);
		transition: transform 220ms ease;
		margin-top: 40px;
		/* layout as column so icons can be right-aligned while address is left-aligned */
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}

	.footer-logo {
		display: block;
	}

	.footer-sublogo img {
		display: block;
		margin-top: 18px;
	}

	.footer-invite {
		font-size: 20px;
		font-weight: 500;
		color: #FAFAFA;
		margin-top: 48px;
		margin-bottom: 6px;
	}

	.footer-col h4 {
		font-weight: 700;
		font-size: 16px;
		margin-bottom: 12px;
		text-transform: uppercase;
		color: #FFFFFF;
	}

	.footer-links {
		list-style: none;
		padding: 0;
		margin: 0;
	}

	.footer-links li {
		margin-bottom: 35px;
	}

	.footer-links a {
		color: #FAFAFA;
		text-decoration: none;
		font-size: 20px;
		font-weight: 500;
		line-height: 1.25;
	}

	.footer-links a:hover {
		color: #FFFFFF;
		opacity: 0.95;
	}

	.footer-social {
		display: flex;
		gap: 40px;
		align-items: center;
		margin-bottom: 12px;
		justify-content: flex-start;
	}

	.footer-social a {
		color: #FFFFFF;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.06);
		text-decoration: none;
	}

	.footer-social a:hover {
		background: rgba(255, 255, 255, 0.12);
	}

	/* ensure social images fill the anchor box and keep correct aspect */
	.footer-social a img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: contain;
	}

	/* individual icon sizes */
	.footer-social a:nth-child(1) {
		width: 36px;
		height: 36px;
	}

	.footer-social a:nth-child(1) i {
		font-size: 16px;
		line-height: 1;
	}

	.footer-social a:nth-child(2) {
		width: 19px;
		height: 36px;
	}

	.footer-social a:nth-child(2) i {
		font-size: 12px;
		line-height: 1;
	}

	.footer-social a:nth-child(3) {
		width: 36px;
		height: 36px;
	}

	.footer-social a:nth-child(3) i {
		font-size: 16px;
		line-height: 1;
	}

	.footer-address {
		font-size: 16px;
		font-weight: 500;
		color: #A6A6A6;
		line-height: 1.4;
		/* address text should be left-aligned inside the contact column */
		text-align: left;
		/* keep address from stretching full width when right-aligned icons are present */
		max-width: 320px;
	}

	/* OK Riders logo placed under the address; keep left-aligned inside the right column */
	.footer-okriders-logo {
		display: block;
		align-self: flex-start;
		margin-top: 16px;
	}

	@media (max-width: 980px) {
		.footer-grid {
			flex-direction: column;
			gap: 28px;
		}

		.footer-col--brand {
			flex: none;
		}

		/* on small screens allow regular flow and restore vertical padding */
		.site-footer {
			height: auto;
			padding-top: 48px;
			padding-bottom: 48px;
		}

		/* reset contact spacing on stacked layout */
		.footer-col--contact {
			margin-left: 0;
			transform: none;
		}

		/* stacked layout: make the middle wrapper stack its children too */
		.footer-mid {
			display: flex;
			flex-direction: column;
			gap: 12px;
		}
	}

	/* FINAL MOBILE OVERRIDE: ensure hero icons are small on narrow devices
		Placed at EOF to guarantee it wins over previous declarations. */
	@media (max-width: 480px) {

		.hero-left .hero-line img.hero-icon,
		.hero-left .hero-line img[class*="hero-icon"],
		img.hero-icon,
		.hero-icon,
		[class*="hero-icon-"] {
			height: 40px !important;
			width: auto !important;
			max-height: 40px !important;
			max-width: none !important;
			margin-left: 2px !important;
			margin-right: 2px !important;
			padding: 0 !important;
			display: inline-block !important;
			vertical-align: middle !important;
		}

		/* If any icon classes set explicit widths via @apply, override them here too */
		.hero-icon-sidecar,
		.hero-icon-sidecar-second,
		.hero-icon-pig,
		.hero-icon-money,
		.hero-icon-money-second,
		.hero-icon-carfront,
		.hero-icon-carfront-second,
		.hero-icon-persowave,
		.hero-icon-mobilecheck,
		.hero-icon-shield,
		.hero-icon-gas-pump,
		.hero-icon-tire,
		.hero-icon-wrench,
		.hero-icon-nocrash,
		.hero-icon-shine {
			width: auto !important;
			height: 24px !important;
		}

		/* tighten the line gap to keep icons visually aligned */
		.hero-line {
			gap: 6px !important;
		}
	}

	/* Ensure the artboard illustration is centered on all mobile sizes
	Applies for <=900px (covers 900/768/480/375 breakpoints). This rule
	uses !important to override earlier desktop sizing and position rules. */
	@media (max-width: 900px) {
		.features-right .artboard-img {
			width: 420px !important;
			max-width: 100% !important;
			height: auto !important;
			margin-left: auto !important;
			margin-right: auto !important;
			left: auto !important;
			right: auto !important;
			transform: none !important;
			display: block !important;
			top: 0 !important;
		}
	}

	/* Download section sizing on mobile — set the inner download panel to exact phone panel size
	This explicitly targets the `.download-inner` container and the `.download-img-container` so
	the absolute positioned `.download-car-breakout` is not affected. */
	@media (max-width: 480px) {
		.download-section .download-inner {
			width: 327px !important;
			height: 642px !important;
			max-width: none !important;
			margin: 0 auto !important;
			background-color: #F2F2F2 !important;
			border-radius: 14px !important;
			box-sizing: border-box !important;
			overflow: visible !important;
		}

		.download-section .download-img-container {
			width: 100% !important;
			height: 100% !important;
			padding-left: 0 !important;
			overflow: visible !important;
		}

		/* On mobile show the right column above the left column */
		.download-section .download-right {
			order: -1 !important;
		}

		/* Hide the raw QR code images on mobile; show only store badges */
		.qr-card__img,
		.qr-card__img_second {
			display: none !important;
		}

		/* Hide the whole register section on phones */
		.register {
			display: none !important;
			visibility: hidden !important;
			height: 0 !important;
			overflow: hidden !important;
		}

		/* Hide original QR grid and show only badges on mobile */
		.qr-grid {
			display: none !important;
		}

		.qr-badges-mobile {
			display: flex !important;
			gap: 0px;
			justify-content: center;
			align-items: center;
			width: 100%;
		}

		.qr-badge {
			display: block !important;
			margin: 0 auto !important;
			max-width: 100% !important;
			height: auto !important;
		}

		/* Also nudge the first badge a bit on very small screens */
		.qr-badges-mobile .qr-badge:first-child {
			margin-left: 1px !important;
		}

		/* Nudge the download QR title slightly to the right on phone widths */
		.download-qr-title {
			margin-left: 12px !important;
			font-size: 28px !important;
		}

		/* Specific exact badge sizes for mobile: first = 128x43, second = 162x63 */
		.qr-badges-mobile .qr-badge:first-child {
			width: 128px !important;
			height: 43px !important;
			max-width: none !important;
			object-fit: contain !important;
			margin-left: 18px !important;
		}

		.qr-badges-mobile .qr-badge:last-child {
			width: 162px !important;
			height: 63px !important;
			max-width: none !important;
			object-fit: contain !important;
		}

		/* Set download image exact size on mobile as requested (510x396) */
		.download-img {
			width: 510px !important;
			height: 396px !important;
			max-width: none !important;
			object-fit: contain !important;
			display: block !important;
			margin: 0 auto !important;
			/* Nudge image slightly left and up on mobile for better visual overlap */
			transform: translate(-48px, -24px) !important;
		}
	}

	@media (max-width: 375px) {
		.download-section .download-inner {
			width: 327px !important;
			height: 642px !important;
			max-width: none !important;
			margin: 0 auto !important;
			background-color: #F2F2F2 !important;
			border-radius: 14px !important;
			box-sizing: border-box !important;
			overflow: visible !important;
		}

		.download-section .download-img-container {
			width: 100% !important;
			height: 100% !important;
			padding-left: 0 !important;
			overflow: visible !important;
		}

		/* Set download image exact size on very small mobile screens (510x396) */
		.download-img {
			width: 510px !important;
			height: 396px !important;
			max-width: none !important;
			object-fit: contain !important;
			display: block !important;
			margin: 0 auto !important;
			/* Slightly stronger left/up nudge for the narrowest screens */
			transform: translate(-60px, -28px) !important;
		}

		/* On very small mobile screens show the right column above the left column */
		.download-section .download-right {
			order: -1 !important;
		}

		/* Slightly larger right nudge for the QR title on the narrowest phones */
		.download-qr-title {
			margin-left: 16px !important;
			font-size: 28px !important;
		}

		/* Hide the raw QR code images on very small mobile screens; show only store badges */
		.qr-card__img,
		.qr-card__img_second {
			display: none !important;
		}

		/* Hide the whole register section on very small phones */
		.register {
			display: none !important;
			visibility: hidden !important;
			height: 0 !important;
			overflow: hidden !important;
		}

		.qr-badge {
			display: block !important;
			margin: 0 auto !important;
			max-width: 100% !important;
			height: auto !important;
		}

		/* nudge portal pill on very narrow phones */
		.mobile-pill { margin-left: 12px !important; }
	}

	/* Ensure the download-bg wrapper uses exact mobile panel size on phones
	Override the desktop width/height so the element becomes 327x642 on small devices */
	@media (max-width: 480px) {
		.download-bg {
			padding-top: 0 !important;
			width: 327px !important;
			height: 642px !important;
			max-width: none !important;
			margin: 0 auto !important;
			box-sizing: border-box !important;
			border-radius: 14px !important;
			/* Move the download-bg panel slightly up on phones to adjust overlap */
			transform: translateY(-24px) !important;
		}
	}

	@media (max-width: 375px) {
		.download-bg {
			width: 327px !important;
			height: 642px !important;
			max-width: none !important;
			margin: 0 auto !important;
			box-sizing: border-box !important;
			border-radius: 14px !important;
			/* Slightly stronger upward nudge on the narrowest screens */
			transform: translateY(-70px) !important;
		}

		/* nudge portal pill on very narrow phones */
		.mobile-pill { margin-left: 12px !important; }
	}

	/* Mobile: place the left-top screenshot image above its text block on phones */
	@media (max-width: 480px) {
		.left-top {
			display: flex !important;
			flex-direction: column !important;
			align-items: center !important;
		}

		.left-top .lefttop-img {
			order: 1 !important;
			margin-bottom: 12px !important;
		}

		.left-top > .w-full.text-center.mb-4 {
			order: 2 !important;
			width: 100% !important;
			text-align: center !important;
		}
	}

	/* Mobile: remove top margin for mobile-only community features block */
	@media (max-width: 480px) {
		.community-mobile-features {
			margin-top: 0 !important;
		}
	}

	/* Mobile: reduce community feature/title sizes to 16px for better mobile fit */
	@media (max-width: 480px) {
		.community-feature-title,
		.community-title,
		.community-card-label,
		.community-feature-desc {
			font-size: 16px !important;
			line-height: 1.2 !important;
		}

		/* If there are nested header elements, ensure their font-size cascades */
		.community-card-label span,
		.community-feature-title span {
			font-size: inherit !important;
			line-height: inherit !important;
		}
	}

	/* Mobile: nudge community card label upward for better vertical placement on phones */
	@media (max-width: 480px) {
		.community-card-label {
			transform: translateY(-8px) !important;
		}
	}

	/* Mobile-specific editable label class for the community card
	Use `.community-cr-label-mobile` to adjust the mobile label independently of desktop. */
	.community-cr-label-mobile {
		/* default (desktop) no-op so it doesn't change desktop styles */
	}

	@media (max-width: 480px) {
		.community-cr-label-mobile {
			font-size: 20px !important;
			line-height: 1.2 !important;
			transform: translateY(-8px) !important;
			/* allow quick overrides for spacing */
			margin-top: 0 !important;
			margin-bottom: 0 !important;
			text-align: center !important;
		}
	}

	/* Mobile: nudge the community icon row upward so icons sit closer to the label on phones */
	@media (max-width: 480px) {
		.community-icon-row {
			transform: translateY(-10px) !important;
		}
	}

	/* CONSOLIDATED: All `@media (max-width: 480px)` rules merged into one block below.
	Existing scattered `@media (max-width: 480px)` blocks remain above as a safety
	measure; this consolidated block preserves the same rule order and ensures a
	single place to maintain phone-specific overrides. If you want, I can remove
	the scattered blocks after you verify the site visually. */
	@media (max-width: 480px) {
		/* Header / branding */
		header.gradient-red {
			height: 64px;
			align-items: center;
			padding-left: 12px;
			padding-right: 12px;
			border-bottom-left-radius: 28px !important;
			border-bottom-right-radius: 28px !important;
		}

		.site-logo {
			height: 22px !important;
			width: 154px !important;
			margin-left: 20px !important;
		}

		/* nudge the portal pill slightly more to the right on mobile */
		.mobile-pill { margin-left: 12px !important; }

		/* header links / pill behaviour */
		header nav a.header-link { display: none !important; }
		header nav a.header-link.header-link--pill { display: inline-flex !important; }
		header nav .header-link--icon { display: inline-flex !important; }
		header nav a.header-link.header-link--pill {
			height: 24px !important; min-height: 24px !important; width: 78px !important;
			padding: 0 8px !important; font-size: 12px !important; align-items: center !important;
			justify-content: center !important; text-align: center !important;
		}

		.header-link--pill .pill-full { display: none !important; }
		.header-link--pill .pill-mobile { display: inline !important; }

		header nav { margin-right: 8px !important; gap: 8px !important; }

		/* Page background override for phones */
		html, body { background-color: #FFFFFF !important; }

		/* Hero / carousel */
		.slide-inner { flex-direction: column; align-items: flex-start; gap: 12px; padding-left: 12px; padding-right: 12px; }

		.hero-left {
			width: 100% !important; text-align: left; padding-top: 60px !important; padding-left: 24px;
		}

		.hero-right { width: 100% !important; display:flex; justify-content:center; align-items:center !important; margin-top:-10px; }

		/* Center hero title and car inside the mobile hero frame */
		.hero-left .hero-title { font-size: 42px !important; line-height: 1.02 !important; letter-spacing: 0 !important; }
		.hero-line { gap: 8px !important; }
		.hero-icon { margin: 0 6px !important; }

		/* Slide 3 specific mobile layout - stack text properly */
		.hero-slide--3 .hero-left .hero-title { font-size: 28px !important; line-height: 1.1 !important; text-align: left !important; }
		.hero-slide--3 .hero-left .hero-line:nth-child(1) { display: block !important; white-space: normal !important; }
		.hero-slide--3 .hero-left .hero-line:nth-child(1) .hero-icon-carfront { display: none !important; }
		.hero-slide--3 .hero-left .hero-line:nth-child(2) { display: block !important; }
		.hero-slide--3 .hero-left .hero-line:nth-child(3) { display: block !important; }
		.hero-slide--3 .hero-left .hero-line:nth-child(4) { display: block !important; }
		.hero-slide--3 .hero-left .hero-icon-carfront-third { width: 24px !important; height: 21px !important; max-width: 24px !important; max-height: 21px !important; }

		/* Slide 4 specific mobile font size */
		.hero-slide:nth-child(4) .hero-left .hero-title { font-size: 38px !important; }

		/* Slide 5 specific mobile layout */
		.hero-slide--5 .hero-left .hero-title { font-size: 28px !important; line-height: 1.1 !important; }
		.hero-slide--5 .hero-left .hero-line { display: block !important; }

		/* Slide 6 specific mobile font size */
		.hero-slide--6 .hero-left .hero-title { font-size: 29px !important; line-height: 1.1 !important; }
		.hero-slide--6 .hero-left .hero-line { display: block !important; }

		/* Slide 7 specific mobile font size */
		.hero-slide--7 .hero-left .hero-title { font-size: 28px !important; line-height: 1.1 !important; }
		.hero-slide--7 .hero-left .hero-line { display: block !important; }
		.hero-slide--7 .hero-left .hero-icon-sidecar-second { width: 43px !important; height: 20px !important; max-width: 43px !important; max-height: 20px !important; }
		.hero-slide--7 .hero-slide7-desktop { display: none !important; }
		.hero-slide--7 .hero-slide7-mobile { display: block !important; }

		.hero-link--pill { width: 168px !important; height: 30px !important; font-size: 14px !important; padding: 0 12px !important; margin-top: 20px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; }

		/* Mobile hero image sizing per slide */
		.hero-right .hero-car { max-width: 255px !important; width: 255px !important; height: 231px !important; margin: 0 auto !important; transform: translateY(0) !important; }
		.hero-right .hero-motorcyclists { max-width: 420px !important; width: 420px !important; height: 405px !important; margin: 0 auto !important; transform: translate(155px, -70px) !important;
 }
		.hero-right .hero-mobile { max-width: 166px !important; width: 166px !important; height: 260px !important; margin: 0 auto !important; transform: translateY(100px) !important; }
		.hero-right .hero-shield { max-width: 240px !important; width: 240px !important; height: 220px !important; margin: 0 auto !important; transform: translateX(-335px) !important; }
		.hero-right .hero-pumpgun { max-width: 275px !important; width: 275px !important; height: 200px !important; margin: 0 auto !important; transform: translate(-170px, 40px) !important;}
		.hero-right .hero-tires { max-width: 235px !important; width: 100% !important; height: 197px!important; margin: 0 auto !important; transform: translate(0px, 40px) !important; }
		.hero-controls { bottom: 36px !important; }

		/* Hero badge + icon sizing */
		.hero-badge { width: 96px !important; height: 96px !important; right: 12px !important; top: 90px !important; }
		.hero-badge__text { font-size: 10px !important; line-height: 1.3 !important; transform: rotate(8deg) !important; padding: 6px !important; }

		/* make phone-sized hero icons consistent */
		.hero-left .hero-line img.hero-icon,
		.hero-left .hero-line .hero-icon,
		.hero-icon,
		[class*="hero-icon-"] {
			height: 40px !important; width: auto !important; max-height: 40px !important; max-width: none !important;
			margin-left: 2px !important; margin-right: 2px !important; padding: 0 !important; display:inline-block !important;
			vertical-align: middle !important;
		}

		.hero-icon-sidecar,
		.hero-icon-sidecar-second,
		.hero-icon-pig,
		.hero-icon-money,
		.hero-icon-money-second,
		.hero-icon-carfront,
		.hero-icon-carfront-second,
		.hero-icon-persowave,
		.hero-icon-mobilecheck,
		.hero-icon-shield,
		.hero-icon-gas-pump,
		.hero-icon-tire,
		.hero-icon-wrench,
		.hero-icon-nocrash,
		.hero-icon-shine { width: auto !important; height: 24px !important; }

		.hero-line { gap: 6px !important; }

		/* Left-top / Left-bottom cards */
		.left-top { width: 327px !important; height: 297px !important; padding: 12px !important; margin-left:auto !important; margin-right:auto !important; display:block !important; text-align:center !important; position:relative !important; left:50% !important; transform:translateX(-52%) !important; }
		.left-top .community-card-label { font-size: 20px !important; line-height:1.1 !important; }
		.left-top .lefttop-img { width: 327px !important; height: auto !important; max-height:220px !important; object-fit: contain !important; }

		.left-bottom { width: 327px !important; height: 487px !important; padding:12px !important; margin-left:auto !important; margin-right:auto !important; display:block !important; text-align:center !important; position:relative !important; left:50% !important; transform:translateX(-50%) !important; }
		.left-bottom .leftbottom-img { width: 327px !important; height:auto !important; max-height:380px !important; object-fit: contain !important; }

		/* Mobile right-bottom card sizing and text */
		.right-bottom-mobile { width: 327px !important; height: 217px !important; padding: 12px !important; box-sizing: border-box !important; }
		.right-bottom-mobile .community-right-bottom-text { font-size: 18px !important; line-height:1.2 !important; }
		.right-bottom-mobile .community-bottom-icons img { width: 24px !important; height: 24px !important; }

		/* Tighter, lowered icon row for mobile: 124x20 and icons 20x20 */
		.right-bottom-mobile .community-bottom-icons {
			width: 124px !important;
			height: 20px !important;
			gap: 6px !important;
			margin-top: 12px !important;
			justify-content: space-between !important;
			align-items: center !important;
			display: flex !important;
		}

		.right-bottom-mobile .community-bottom-icons img { width: 20px !important; height: 20px !important; }

		/* Make the plus icon smaller (10x10) specifically on mobile */
		.right-bottom-mobile .community-bottom-icons img[alt="plus"] {
			width: 10px !important;
			height: 10px !important;
			max-width: 10px !important;
			max-height: 10px !important;
		}

		/* Download panel & QR adjustments for phones */
		.download-section .download-inner { width: 327px !important; height: 642px !important; max-width:none !important; margin:0 auto !important; background-color: #F2F2F2 !important; border-radius:14px !important; box-sizing: border-box !important; overflow: visible !important; }
		.download-section .download-img-container { width:100% !important; height:100% !important; padding-left:0 !important; overflow: visible !important; }
		.download-section .download-right { order:-1 !important; }
		.qr-card__img, .qr-card__img_second { display:none !important; }
		.register { display:none !important; visibility:hidden !important; height:0 !important; overflow:hidden !important; }
		.qr-grid { display:none !important; }
		.qr-badges-mobile { display:flex !important; gap:0; justify-content:center; align-items:center; width:100%; }
		.qr-badge { display:block !important; margin:0 auto !important; max-width:100% !important; height:auto !important; }
		.qr-badges-mobile .qr-badge:first-child { width:128px !important; height:43px !important; margin-left:18px !important; }
		.qr-badges-mobile .qr-badge:last-child { width:162px !important; height:63px !important; }
		.download-qr-title { margin-left:12px !important; font-size:28px !important; }
		.download-img { width:510px !important; height:396px !important; max-width:none !important; object-fit:contain !important; display:block !important; margin:0 auto !important; transform: translate(-48px,-24px) !important; }

		/* download-bg phone override */
		.download-bg { padding-top:0 !important; width:327px !important; height:642px !important; max-width:none !important; margin:0 auto !important; box-sizing:border-box !important; border-radius:14px !important; transform: translateY(-24px) !important; }



		/* left-top: image above text (ordering) */
		.left-top { display:flex !important; flex-direction:column !important; align-items:center !important; }
		.left-top .lefttop-img { order:1 !important; margin-bottom:12px !important; }
		.left-top > .w-full.text-center.mb-4 { order:2 !important; width:100% !important; text-align:center !important; }

		/* community small-screen tweaks */
		.community-mobile-features { margin-top:0 !important; }

		/* Remove the horizontal gap between community columns on phones */
		.community-section > .mx-auto {
			gap: 18px !important;
		}
		.community-feature-title, .community-title, .community-card-label, .community-feature-desc { font-size:16px !important; line-height:1.2 !important; }
		.community-card-label { transform: translateY(-8px) !important; }

		/* mobile-only editable label */
		.community-cr-label-mobile { font-size:20px !important; line-height:1.2 !important; transform: translateY(-8px) !important; margin-top:0 !important; margin-bottom:0 !important; text-align:center !important; }

		.community-icon-row { transform: translateY(-20px) !important; }

		/* Ensure right-bottom card text is 18px on phones */
		.right-bottom-mobile .community-right-bottom-text {
			font-size: 18px !important;
			line-height: 1.2 !important;
		}

		/* Nudge the right-bottom text slightly upward on phones */
		.right-bottom-mobile .community-right-bottom-text {
			transform: translateY(-8px) !important;
			margin-top: 0 !important;
		}

		/* Make community icons 24x24 on phones */
		.community-icon-row img,
		.community-bottom-icon,
		.feature-header-icon,
		.hero-icon-carfront,
		.community-right .community-bottom-icon {
			width: 24px !important;
			height: 24px !important;
			max-width: 24px !important;
			max-height: 24px !important;
		}

		/* FINAL hero icon tightening (keeps precedence) */
		.hero-left .hero-line img.hero-icon,
		.hero-left .hero-line img[class*="hero-icon"],
		img.hero-icon,
		.hero-icon,
		[class*="hero-icon-"] {
			height: 40px !important;
			width: auto !important;
			max-height: 35px !important;
			max-width: none !important;
			margin-left: 2px !important;
			margin-right: 2px !important;
			padding: 0 !important;
			display: inline-block !important;
			vertical-align: middle !important;
		}

		.hero-icon-sidecar,
		.hero-icon-sidecar-second,
		.hero-icon-pig,
		.hero-icon-money,
		.hero-icon-money-second,
		.hero-icon-carfront,
		.hero-icon-carfront-second,
		.hero-icon-persowave,
		.hero-icon-mobilecheck,
		.hero-icon-shield,
		.hero-icon-gas-pump,
		.hero-icon-tire,
		.hero-icon-wrench,
		.hero-icon-nocrash,
		.hero-icon-shine { width: auto !important; height: 24px !important; }

		.hero-line { gap: 6px !important; }
	}

	/* Mobile-specific styles for the new right-top mobile block */
	@media (max-width: 480px) {
		.right-top-mobile {
			width: 327px !important;
			height: 557px !important;
			padding: 12px !important;
			box-sizing: border-box !important;
			display: flex !important;
			flex-direction: column !important;
			align-items: center !important;
			justify-content: flex-start !important;
		}

		.right-top-mobile-img {
			width: 230px !important;
			height: 265px !important;
			max-width: none !important;
			object-fit: contain !important;
			display: block !important;
			margin: 0 auto 12px auto !important;
		}

		/* Slightly tighten the feature titles inside the mobile card */
		.right-top-mobile .community-feature-title,
		.right-top-mobile .community-feature-desc {
			font-size: 16px !important;
			line-height: 1.2 !important;
			color: #1E1E1E !important;
		}
	}

	/* Showcase carousel: specific mobile sizes for each slide image and text sizing */
	@media (max-width: 480px) {
		.showcase-slider .slide img {
			display: block;
			margin: 0 auto;
			object-fit: contain !important;
			max-width: none !important;
		}

		.showcase-slider .slide:nth-of-type(1) img {
			width: 285px !important;
			height: 157px !important;
		}

		.showcase-slider .slide:nth-of-type(2) img {
			width: 301px !important;
			height: 166px !important;
		}

		.showcase-slider .slide:nth-of-type(3) img {
			width: 307px !important;
			height: 170px !important;
		}

		.showcase-slider .slide:nth-of-type(4) img {
			width: 295px !important;
			height: 164px !important;
		}

		/* Showcase copy/text sizing on phones */
		.showcase-section p,
		.showcase-section .showcase-text p {
			font-size: 16px !important;
			line-height: 1.35 !important;
		}
	}

	/* On phones: make showcase title 24px and place the descriptive text under the carousel */
	@media (max-width: 480px) {
		.showcase-carousel .mx-auto {
			flex-direction: column !important;
			align-items: flex-start !important;
			gap: 12px !important;
			padding-left: 16px !important;
			padding-right: 16px !important;
			position: relative !important;
		}

		/* Make the children of .showcase-text participate directly in the flex container so
			the title can be ordered separately from the logo/paragraph on mobile. */
		.showcase-carousel .showcase-text {
			display: contents !important;
			padding: 0 12px !important;
		}

		/* Ordering when .showcase-text is display:contents */
		.showcase-carousel .showcase-title {
			order: 1 !important;
			width: 318px !important;
			text-align: left !important;
			font-size: 24px !important;
			margin-top: 0 !important;
			margin-bottom: 8px !important;
			margin-left: 0 !important;
		}

		.showcase-carousel .showcase-slider {
			width: 100% !important;
			height: auto !important;
			order: 2 !important;
			transform: none !important;
			margin: 0 auto !important;
			max-width: none !important;
		}

		.showcase-carousel .showcase-slider .slide {
			position: relative !important;
			inset: auto !important;
		}

		.showcase-carousel .showcase-title {
			font-size: 24px !important;
			margin-top: 0 !important;
			margin-bottom: 12px !important;
			text-align: left !important;
		}

		.showcase-carousel .showcase-logo,
		.showcase-carousel .showcase-text p {
			order: 3 !important;
			width: 318px !important;
			text-align: left !important;
			margin-top: 8px !important;
			font-size: 16px !important;
			margin-left: 0 !important;
		}

		/* Ensure the logo and any branding inside the text block align left like the reference image */
		.showcase-carousel .showcase-logo {
			text-align: left !important;
			margin-left: 0 !important;
			margin-right: auto !important;
		}

		/* Arrows: visible on mobile and positioned inside the slider container */
		.showcase-slider .showcase-prev,
		.showcase-slider .showcase-next {
			display: flex !important;
			position: absolute !important;
			top: 50% !important;
			transform: translateY(-50%) !important;
			width: 44px !important;
			height: 44px !important;
			align-items: center !important;
			justify-content: center !important;
			background: transparent !important;
			color: #1E1E1E !important;
			border-radius: 0 !important;
			box-shadow: none !important;
		}

		/* place the arrows at the very left/right edges of the viewport on phones */
		.showcase-slider .showcase-prev {
			left: -12px !important;
		}

		.showcase-slider .showcase-next {
			right: -12px !important;
		}

		/* Reduce prominence of the arrows on mobile slightly */
		.showcase-slider .showcase-prev i,
		.showcase-slider .showcase-next i {
			font-size: 20px !important;
		}
	}

	/* Mobile: explicit sizes for showcase logos to match reference */
	@media (max-width: 480px) {
		.showcase-logo img[src*="canapuffLogo.png"] {
			width: 161px !important;
			height: 44px !important;
			max-width: none !important;
			object-fit: contain !important;
			display: inline-block !important;
		}

		.showcase-logo img[src*="biogroupLogo.png"] {
			width: 105px !important;
			height: 56px !important;
			max-width: none !important;
			object-fit: contain !important;
			display: inline-block !important;
		}

		.showcase-logo img[src*="oktagonLogo.png"] {
			width: 139px !important;
			height: 21px !important;
			max-width: none !important;
			object-fit: contain !important;
			display: inline-block !important;
		}

		.showcase-logo img[src*="pizzahutLogo.png"] {
			width: 160px !important;
			height: 33px !important;
			max-width: none !important;
			object-fit: contain !important;
			display: inline-block !important;
		}
	}

	/* Mobile: make promo CTA card match requested 327x540 size and adjust inner layout */
	@media (max-width: 480px) {
		.promo-section {
			padding-top: 20px !important;
			padding-bottom: 20px !important;
		}

		.promo-gradient {
			width: 327px !important;
			height: 412px !important;
			margin: 0 auto !important;
			border-radius: 12px !important;
			/* allow children to overflow on mobile when needed */
			overflow: visible !important;
			background: linear-gradient(90deg, #C40228 0%, #ED3D1A 100%);
		}

		.promo-left {
			width: 327px !important;
			padding-left: 18px !important;
			padding-right: 18px !important;
			padding-top: 18px !important;
			padding-bottom: 18px !important;
			box-sizing: border-box !important;
			height: 412px !important;
			position: relative !important;
			display: flex !important;
			flex-direction: column !important;
			justify-content: center !important;
			/* allow content to overflow on mobile and nudge the block down slightly */
			overflow: visible !important;
		}

		/* Place the promo CTA anchored to the bottom of the promo card with small offset */
		.promo-cta {
			position: absolute !important;
			bottom: 18px !important;
			left: 50% !important;
			transform: translateX(-60%) !important;
			width: 100% !important;
			display: flex !important;
			justify-content: center !important;
			pointer-events: auto !important;
		}

		/* Pin title and description to fixed positions inside the promo card */
		.promo-title {
			position: absolute !important;
			top: 80px !important;
			left: 18px !important;
			font-size: 24px !important;
			line-height: 1.05 !important;
			margin: 0 !important;
			width: calc(100% - 36px) !important;
			text-transform: uppercase !important;
		}

		.promo-description {
			position: absolute !important;
			top: 145px !important;
			left: 18px !important;
			width: 290px !important;
			font-size: 16px !important;
			margin: 0 0 8px 0 !important;
		}

		/* When the database tab is active, place the description lower to make room for coins/badge */
		.promo-left.promo-tab-car4 .promo-description {
			top: 160px !important;
		}

		/* When the carClean tab is active, push the description further down to make room */
		.promo-left.promo-tab-carclean .promo-description {
			top: 190px !important;
		}

		/* Mobile: override promo button to green with white 16px text */
		.promo-btn {
			background: #0FC26C !important;
			color: #FFFFFF !important;
			font-size: 16px !important;
			width: 223px !important;
			height: 30px !important;
		}

		.promo-right {
			display: none !important;
		}

		/* Mobile: show mobile-only promo icons under the promo card */
		.mobile-only,
		.promo-icons-mobile {
			/* Hidden by default on desktop; revealed on small screens via the mobile @media block */
			display: flex !important;
			gap: 16px !important;
			justify-content: center !important;
			align-items: center !important;
			margin-top: 12px !important;
			/* nudge slightly downward but keep icons closer to the card */
			transform: translateY(8px) !important;
			/* position relative so arrow buttons can be absolutely positioned without affecting layout */
			position: relative !important;
			will-change: transform;
		}

		/* Ensure mobile arrows for promo icons don't shift the icon row: position them absolutely */
		.promo-icons-mobile .promo-icons-prev,
		.promo-icons-mobile .promo-icons-next {
			position: absolute !important;
			top: 50% !important;
			transform: translateY(-50%) !important;
			width: 36px !important;
			height: 36px !important;
			display: flex !important;
			align-items: center !important;
			justify-content: center !important;
			background: transparent !important;
			color: #1E1E1E !important;
			border-radius: 0 !important;
			z-index: 60 !important;
			box-shadow: none !important;
		}

		.promo-icons-mobile .promo-icons-prev {
			left: 8px !important;
		}

		.promo-icons-mobile .promo-icons-next {
			right: 8px !important;
		}

		.promo-icon-mobile {
			width: 32px !important;
			height: 32px !important;
			object-fit: contain !important;
		}

		/* Hide the desktop promo-icons on mobile to avoid duplication */
		.promo-icons { display: none !important; }

		@media (max-width: 480px) {

			/* On phones hide ORLEN logo that replaces the broker logo when pump tab is active */
			.promo-logo img[src*="orlen"] {
				display: none !important;
			}

			/* Position mobile-only shield so it sits above the promo gradient */
			.promo-gradient {
				position: relative !important;
			}

			.promo-shield-mobile {
				position: absolute !important;
				top: -75px !important;
				left: 50% !important;
				transform: translateX(-50%) !important;
				width: 101px !important;
				height: 144px !important;
				pointer-events: none !important;
				display: block !important;
			}

			/* Mobile-only cleaning image shown when carClean is active */
			.promo-cleaning-mobile {
				position: absolute !important;
				top: -110px !important;
				left: 50% !important;
				transform: translateX(-50%) !important;
				width: 210px !important;
				height: 214px !important;
				pointer-events: none !important;
				display: none !important;
			}

			/* Mobile-only penizek image shown when car4 (database) is active */
			.promo-penizek-mobile {
				position: absolute !important;
				top: -110px !important;
				left: 50% !important;
				transform: translateX(-50%) !important;
				width: 173px !important;
				height: 166px !important;
				pointer-events: none !important;
				display: none !important;
			}

			/* Mobile fuel images shown when carPump is active */
			.promo-fuelcan-mobile,
			.promo-fuelgun-mobile {
				position: absolute !important;
				top: -48px !important;
				pointer-events: none !important;
				display: none !important;
			}

			.promo-fuelcan-mobile {
				left: calc(40% - 64px) !important;
				top: -75px !important;
				width: 175px !important;
				height: 175px !important;
			}

			.promo-fuelgun-mobile {
				left: 40% !important;
				top: -100px !important;
				width: 131px !important;
				height: 93px !important;
				transform: rotate(30deg) !important;
				transform-origin: center center !important;
			}

		}

		/* Pin the promo logo to a fixed position inside the promo card on mobile */
		.promo-logo {
			position: absolute !important;
			top: 240px !important;
			left: 18px !important;
			width: auto !important;
			margin: 0 !important;
			padding: 0 !important;
			text-align: left !important;
			z-index: 5 !important;
		}

		.promo-logo img {
			max-width: 166px !important;
			height: auto !important;
			display: block !important;
		}

	/* If carClean tab is active, hide the promo logo (applies across breakpoints) */
	.promo-left.promo-tab-carclean .promo-logo,
	.promo-left.promo-tab-carclean .promo-logo img {
		display: none !important;
	}

	/* Also hide the promo logo when the database tab (car4) is active */
	.promo-left.promo-tab-car4 .promo-logo,
	.promo-left.promo-tab-car4 .promo-logo img {
		display: none !important;
	}
	}

/* Mobile: set reviews section H2 to 36px for phone view (<=480px) */
@media (max-width: 480px) {
    .reviews-section h2 {
        font-size: 36px !important;
        line-height: 1.05 !important;
        margin-bottom: 24px !important;
    }
}

/* Mobile: make small decorative bars 60x12 on phones */
@media (max-width: 480px) {
	.map-trail-bar,
	.question-bar,
	.feature-header-bar,
	.advertise-bar {
		width: 60px !important;
		height: 12px !important;
		border-radius: 6px !important;
	}

	/* Hide desktop map trail, show mobile stacked version */
	.map-trail-desktop {
		display: none !important;
	}

	.map-trail-mobile {
		display: flex !important;
		flex-direction: column !important;
		gap: 40px !important;
		padding: 24px 12px !important;
	}

	/* Mobile map step styling */
	.map-step-mobile {
		display: flex !important;
		flex-direction: column !important;
		gap: 8px !important;
		align-items: flex-start !important;
	}

	.map-step-mobile__num {
		font-size: 80px !important;
		font-weight: 900 !important;
		font-style: italic !important;
		color: #C40228 !important;
		line-height: 1 !important;
		flex-shrink: 0 !important;
		margin-bottom: 0 !important;
	}

	.map-step-mobile__content {
		flex: 1 !important;
		display: flex !important;
		flex-direction: column !important;
		gap: 12px !important;
		width: 100% !important;
	}

	.map-step-mobile__img {
		width: 100% !important;
		max-width: 280px !important;
		height: auto !important;
		margin: 8px 0 !important;
	}

	/* Step 1: stepMobile1.png */
	.map-step-mobile:nth-child(1) .map-step-mobile__content {
		position: relative !important;
	}

	.map-step-mobile:nth-child(1) .map-step-mobile__img:first-of-type {
		max-width: 343px !important;
		width: 343px !important;
		height: 300px !important;
	}

	.map-step-mobile:nth-child(1) .map-step-mobile__img:nth-of-type(2) {
		max-width: 122px !important;
		width: 122px !important;
		height: 233px !important;
		position: absolute !important;
		top: -10px !important;
		left: 78% !important;
		transform: translateX(-50%) !important;
		z-index: 2 !important;
	}

	/* Step 2: slide7.png */
	.map-step-mobile:nth-child(2) .map-step-mobile__img:first-of-type {
		max-width: 136% !important;
		width: 128% !important;
		height: 300px !important;
		margin-left: -37px !important;
		margin-right: 8px !important;
	}

	.map-step-mobile:nth-child(2) .map-step-mobile__img:nth-of-type(2) {
		max-width: 325px !important;
		width: 325px !important;
		height: 250px !important;
		margin-top: -225px !important;
	}

	/* Step 3: stepCar3.png */
	.map-step-mobile:nth-child(3) .map-step-mobile__img:first-of-type {
		max-width: 126% !important;
		width: 110% !important;
		height: 420px !important;
		margin-left: 5px !important;
		margin-right: -24px !important;
	}

	.map-step-mobile:nth-child(3) .map-step-mobile__img:nth-of-type(2) {
		max-width: 346px !important;
		width: 346px !important;
		height: 140px !important;
		margin-top: -300px !important;
		margin-left: 80px !important;
	}

	/* Step 4: mobile4.png */
	.map-step-mobile:nth-child(4) .map-step-mobile__img {
		max-width: 130% !important;
		width: 130% !important;
		height: 230px !important;
		margin-left: -50px !important;
	}

	/* Step 5: penizky.png */
	.map-step-mobile:nth-child(5) .map-step-mobile__img {
		max-width: 200px !important;
		width: 200px !important;
		height: 144px !important;
		margin-left: auto !important;
		margin-right: -34px !important;
	}

	.map-step-mobile__title {
		font-size: 24px !important;
		font-weight: 900 !important;
		font-style: italic !important;
		text-transform: uppercase !important;
		color: #1E1E1E !important;
		line-height: 1.2 !important;
		margin: 0 !important;
	}

	.map-step-mobile__title-row {
		display: flex !important;
		align-items: center !important;
		gap: 12px !important;
		flex-wrap: wrap !important;
	}

	.map-step-mobile__badge {
		background: #0FC26C !important;
		color: #FFFFFF !important;
		font-size: 12px !important;
		font-weight: 900 !important;
		font-style: italic !important;
		text-transform: uppercase !important;
		padding: 4px 12px !important;
		border-radius: 100px !important;
		display: inline-block !important;
		width: 102px !important;
		height: 25px !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
	}

	.map-step-mobile__badge--gold {
		background: #E2BA04 !important;
	}

	.map-step-mobile__desc {
		font-size: 16px !important;
		color: #1E1E1E !important;
		line-height: 1.5 !important;
		margin: 0 !important;
	}

	.map-step-mobile__note {
		font-size: 16px !important;
		font-weight: 700 !important;
		color: #1AC660 !important;
		font-style: italic !important;
		margin-top: 8px !important;
	}

	/* Map trail section title */
	.map-trail-section {
		background: #F2F2F2 !important;
	}

	.map-trail-section h2 {
		font-size: 32px !important;
		margin-bottom: 32px !important;
	}
}

/* Desktop: hide mobile version, show desktop SVG */
@media (min-width: 481px) {
	.map-trail-mobile {
		display: none !important;
	}

	.map-trail-desktop {
		display: block !important;
	}
}

	/* Ensure desktop (>=768px) shows the full promo copy — restore visibility/size
	in case earlier mobile overrides affected desktop rendering. */
	@media (min-width: 768px) {
		.promo-title {
			display: block !important;
			position: static !important;
			font-size: 48px !important;
			line-height: 1.05 !important;
			margin-bottom: 32px !important;
			color: #FFFFFF !important;
			text-transform: uppercase !important;
		}

		.promo-description {
			display: block !important;
			position: static !important;
			width: 355px !important;
			font-size: 18px !important;
			margin-bottom: 48px !important;
			color: #FAFAFA !important;
		}

		.promo-right {
			display: block !important;
		}
	}

/* Mobile: set background for reviews and promo sections to light gray (#F2F2F2) */
@media (max-width: 480px) {
	.reviews-section,
	.promo-section {
		background-color: #F2F2F2 !important;
	}
}

/* Mobile: ensure reviews-section has no top margin on phones */
@media (max-width: 480px) {
	.reviews-section {
		margin-top: 0 !important;
	}
}

/* Mobile: position small carside icon inside review cards to the top-left */
@media (max-width: 480px) {
	.review-card img[alt="carside icon"],
	.review-card-right img[alt="carside icon"] {
		position: absolute !important;
		top: 18px !important;
		left: 18px !important;
		right: auto !important;
		bottom: auto !important;
		width: 52px !important;
		height: 25px !important;
	}
}

/* Mobile: make review paragraph text 16px for better mobile fit */
@media (max-width: 480px) {
	.reviews-section .review-card p,
	.reviews-section .review-card-right p,
	.reviews-section .reviews-left .review-card p {
		font-size: 16px !important;
		line-height: 1.4 !important;
		margin-top: 32px !important;
		margin-bottom: 4px !important;
	}
}

/* Mobile: exact sizes for each review card (first..fifth) */
@media (max-width: 480px) {
	/* Left column (three stacked cards) */
	.reviews-left > .review-card:nth-of-type(1) {
		width: 327px !important;
		height: 293px !important;
		margin-left: auto !important;
		margin-right: auto !important;
		box-sizing: border-box !important;
		overflow: hidden !important;
	}

	.reviews-left > .review-card:nth-of-type(2) {
		width: 327px !important;
		height: 401px !important;
		margin-left: auto !important;
		margin-right: auto !important;
		box-sizing: border-box !important;
		overflow: hidden !important;
	}

	.reviews-left > .review-card:nth-of-type(3) {
		width: 327px !important;
		height: 293px !important;
		margin-left: auto !important;
		margin-right: auto !important;
		box-sizing: border-box !important;
		overflow: hidden !important;
	}

	/* Right column (two stacked cards) */
	/* Swap: 4th card should be taller (530), 5th slightly shorter (369) */
	.reviews-right > .review-card-right:nth-of-type(1) {
		width: 327px !important;
		height: 530px !important;
		margin-left: auto !important;
		margin-right: auto !important;
		box-sizing: border-box !important;
		overflow: hidden !important;
	}

	.reviews-right > .review-card-right:nth-of-type(2) {
		width: 327px !important;
		height: 369px !important;
		margin-left: auto !important;
		margin-right: auto !important;
		box-sizing: border-box !important;
		overflow: hidden !important;
	}

	/* Ensure the review cards keep their internal padding/layout when forced to height */
	.review-card,
	.review-card-right {
		padding: 16px !important;
		display: block !important;
	}
}

/* Questions section: mobile specific overrides (<=480px) */
@media (max-width: 480px) {
	/* Remove the decorative questions background on phones to avoid overlap */
	.questions-section .questions-bg {
		display: none !important;
		visibility: hidden !important;
		width: 0 !important;
		height: 0 !important;
		pointer-events: none !important;
	}

	/* Make the questions title large and readable on phones */
	.questions-section h2 {
		font-size: 36px !important;
		line-height: 1.05 !important;
		margin-top: 0 !important;
		margin-bottom: 16px !important;
	}

	/* Constrain accordions to the phone panel width and set header height to 60px */
	.questions-section .accordion {
		width: 327px !important;
		margin: 0 auto !important;
		box-sizing: border-box !important;
	}

	.questions-section .accordion .accordion-item-wrapper {
		width: 327px !important;
		min-height: 60px !important;
		border-radius: 12px !important;
		padding: 0 12px !important;
		box-sizing: border-box !important;
		overflow: hidden !important;
	}

	.questions-section .accordion .accordion-header {
		min-height: 60px !important;
		height: 60px !important;
		display: flex !important;
		align-items: center !important;
		padding-left: 12px !important;
		padding-right: 12px !important;
		font-size: 18px !important;
	}
}

/* Questions accordion typography on mobile: header 18px, body 16px */
@media (max-width: 480px) {
	.questions-section .accordion .accordion-header {
		font-size: 18px !important;
		font-weight: 500 !important;
		line-height: 1.1 !important;
	}

	.questions-section .accordion .accordion-body {
		font-size: 16px !important;
		line-height: 1.45 !important;
	}
}

/* Mobile: style for "Zobraziť všetky" control inside Questions section */
@media (max-width: 480px) {
	.questions-show-all {
		font-size: 16px !important;
		text-align: left !important;
		width: 327px !important;
		margin: 12px auto 0 auto !important;
		color: #1E1E1E !important;
		font-weight: 900 !important;
		font-style: italic !important;
	}
}

/* Mobile-only question car image (small, centered) */
@media (max-width: 480px) {

	.questions-bg-mobile {
		display: block !important;
		position: relative !important;
		width: 418px !important;
		margin: 0 auto 8px auto !important;
		z-index: 0 !important;
		pointer-events: none !important;
	}

	.questions-bg-mobile__img {
		display: block !important;
		width: 418px !important;
		height: 177px !important;
		object-fit: contain !important;
		margin: 0 auto !important;
	}

	/* Keep the large gradient background hidden on phones (we only want the car) */
	.questions-section .questions-bg {
		display: none !important;
		visibility: hidden !important;
		width: 0 !important;
		height: 0 !important;
		pointer-events: none !important;
	}
}

/* Mobile: ensure Questions section uses light gray background on phones */
@media (max-width: 480px) {
	.questions-section {
		background-color: #F2F2F2 !important;
	}
}

/* Mobile: ensure reviews section has no bottom margin on phones */
@media (max-width: 480px) {
	.reviews-section {
		margin-bottom: 0 !important;
	}
}

/* Advertise section: mobile adjustments */
@media (max-width: 480px) {
	.advertise-section {
		background-color: #F2F2F2 !important;
		padding-top: 24px !important;
		padding-bottom: 100px !important;
		margin-top: 0px !important;
		margin-bottom: 0px !important;
	}

	.advertise-title {
		font-size: 36px !important;
		line-height: 1.05 !important;
		margin-bottom: 24px !important;
		text-align: left !important;
		padding-left: 12px !important;
	}

	.adv-grid {
		gap: 16px !important;
		grid-template-columns: 1fr !important;
	}

	.adv-card {
		width: 327px !important;
		height: 176px !important;
		margin: 0 auto !important;
		padding: 12px !important;
		box-sizing: border-box !important;
		border-radius: 14px !important;
		overflow: visible !important;
	}

	/* When a card is activated on touch, use the element's --active-bg variable */
	.adv-card.adv-card--active {
		background-color: var(--active-bg) !important;
		color: #ffffff !important;
	}

	/* Also invert logos when active to match hover state */
	.adv-card.adv-card--active .adv-logo {
		filter: grayscale(100%) brightness(0) invert(1) !important;
		opacity: 0.98 !important;
	}

	/* Mobile: show only first 3 advertise cards; 'show all' toggles .adv-grid--expanded */
	.adv-grid {
		grid-template-columns: 1fr !important;
	}

	/* hide cards 4+ using animated properties instead of display */
	.adv-grid .adv-card:nth-child(n+4) {
		max-height: 0 !important;
		opacity: 0 !important;
		transform: translateY(-8px) !important;
		overflow: hidden !important;
		pointer-events: none !important;
		transition: max-height 360ms cubic-bezier(.2,.9,.2,1), opacity 260ms ease, transform 300ms cubic-bezier(.2,.9,.2,1);
	}

	.adv-grid.adv-grid--expanded .adv-card:nth-child(n+4) {
		max-height: 500px !important; /* large enough to reveal each card */
		opacity: 1 !important;
		transform: translateY(0) !important;
		pointer-events: auto !important;
	}

	/* ensure all adv-cards have a smooth base transition */
	.adv-card {
		transition: transform 300ms cubic-bezier(.2,.9,.2,1), opacity 260ms ease, max-height 360ms cubic-bezier(.2,.9,.2,1);
	}

	/* Mobile 'show all' link styling */
	.adv-show-all {
		display: block !important;
		/* move the control up on small screens so it's visually closer to the cards */
		margin-top: -65px !important;
		text-align: left !important;
		font-style: italic !important;
		font-weight: 900 !important;
		font-size: 16px !important;
		color: #1E1E1E !important;
		text-decoration: none !important;
		padding-left: 12px !important;
	}

	.adv-logo {
		top: 24px !important;
		left: 24px !important;
		width: 120px !important;
		height: auto !important;
		max-width: 120px !important;
		object-fit: contain !important;
	}

	/* Footer: mobile layout and logo sizes */
	.site-footer {
		background-color: #1E1E1E !important;
		color: #FFFFFF !important;
		padding-top: 24px !important;
		padding-bottom: 24px !important;
	}

	.footer-inner {
		max-width: 327px !important;
		margin: 0 auto !important;
		padding-left: 12px !important;
		padding-right: 12px !important;
	}

	.footer-grid {
		display: grid !important;
		grid-template-columns: 1fr !important;
		gap: 18px !important;
		align-items: start !important;
	}

	.footer-col--brand {
		display: flex !important;
		/* place invite text above logos on mobile */
		flex-direction: column !important;
		gap: 8px !important;
		align-items: flex-start !important;
	}

	.footer-logo {
		width: 104px !important;
		height: 48px !important;
		object-fit: contain !important;
		display: block !important;
	}

	.footer-sublogo img {
		width: 123px !important;
		height: 20px !important;
		object-fit: contain !important;
		display: block !important;
		margin: 0 !important;
	}

	/* Small adjustment: invite text next to the logo */
	.footer-invite {
		font-size: 14px !important;
		color: #FFFFFF !important;
		margin: 0 !important;
		line-height: 1 !important;
	}

	/* If sublogo shares the same row, ensure it doesn't wrap and is vertically centered */
	.footer-sublogo {
		display: flex !important;
		align-items: center !important;
	}

	/* Row containing the main footer logo and the brandcars sublogo */
	.footer-logos-row {
		display: flex !important;
		flex-direction: row !important;
		align-items: center !important;
		gap: 50px !important;
		background: none !important;
		background-color: transparent !important;
	}

	/* Ensure the main footer logo aligns left and sublogo sits to its right */
	.footer-logos-row .footer-logo { margin: 0 !important; }
	.footer-logos-row .footer-sublogo { margin: 0 !important; }

	/* Column that contains the invite text above the second (brandcars) logo */
	.footer-subcol {
		display: flex !important;
		flex-direction: column !important;
		align-items: flex-start !important;
		justify-content: center !important;
		gap: 6px !important;
	}

	/* Slightly reduce invite size when it's above the small brandcars logo and left-align */
	.footer-subcol .footer-invite {
		font-size: 13px !important;
		text-align: left !important;
		align-self: flex-start !important;
	}

	/* Ensure the brandcars image sits flush under the invite line */
	.footer-subcol .footer-sublogo img {
		display: block !important;
		width: 123px !important;
		height: 20px !important;
		object-fit: contain !important;
	}

	/* Ensure no background boxes behind logos or invite text on mobile */
	.footer-logos-row img,
	.footer-sublogo,
	.footer-logo,
	.footer-invite {
		background: none !important;
		background-color: transparent !important;
	}

	.footer-mid {
		display: grid !important;
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 12px !important;
	}

	.footer-col .footer-links {
		padding: 0 !important;
		margin: 0 !important;
		list-style: none !important;
	}

	.footer-col .footer-links li { margin-bottom: 8px !important; }

	.footer-col .footer-links a { color: #FFFFFF !important; text-decoration: none !important; font-size: 14px !important; background: none !important; }

	.footer-col--contact {
		display: flex !important;
		flex-direction: column !important;
		gap: 12px !important;
		align-items: flex-start !important;
	}

	.footer-social a img { width: 24px !important; height: 24px !important; margin-right: 8px !important; }

	.footer-address { font-size: 12px !important; color: #CCCCCC !important; }

	.footer-okriders-logo {
		width: 106px !important;
		height: 20px !important;
		object-fit: contain !important;
		display: block !important;
		margin-top: 6px !important;
	}

	/* Position advertise car images on mobile as requested */
	img.adv-car {
		position: absolute !important;
		right: -55px !important;
		bottom: -42px !important;
		object-fit: contain !important;
		max-width: none !important;
	}

	/* Force hero to exact phone dimensions on small screens (375x812) */
	@media (max-width: 480px) {
		.hero-bg {
			width: 375px !important;
			height: 812px !important;
			max-width: none !important;
			margin: 0 auto !important;
			overflow: hidden !important;
			position: relative !important;
		}

		/* Constrain carousel & slides to the same width so layout matches the fixed phone frame */
		.hero-carousel,
		.hero-slides,
		.hero-slides-track {
			width: 375px !important;
			max-width: 375px !important;
			margin: 0 auto !important;
		}

		.slide-inner {
			width: 375px !important;
			max-width: 375px !important;
			padding-left: 0 !important;
			padding-right: 0 !important;
			box-sizing: border-box !important;
		}

		/* Make the hero image use the requested mobile size (255x231) */
		.hero-right .hero-car,
		.hero-car {
			width: 255px !important;
			height: 231px !important;
			max-width: none !important;
			object-fit: contain !important;
			display: block !important;
			margin: 0 auto !important;
		}
	}

	/* Reduce logo visual size inside the card on phones (if logos are images inside adv-card) */
	.adv-card .adv-logo img,
	.adv-card img.adv-logo {

	}

	/* Per-logo exact sizes on mobile as requested */
	.adv-logo--ticketmaster,
	.adv-logo--ticketmaster img {
		width: 175px !important;
		height: 23px !important;
		max-width: 175px !important;
	}

	.adv-logo--pizzahut,
	.adv-logo--pizzahut img {
		width: 164px !important;
		height: 34px !important;
		max-width: 164px !important;
	}

	.adv-logo--costa,
	.adv-logo--costa img {
		width: 105px !important;
		height: 40px !important;
		max-width: 105px !important;
	}

	.adv-logo--cpp,
	.adv-logo--cpp img {
		width: 102px !important;
		height: 50px !important;
		max-width: 102px !important;
	}

	.adv-logo--pp,
	.adv-logo--pp img {
		width: 170px !important;
		height: 45px !important;
		max-width: 170px !important;
	}

	/* Beko exact mobile size */
	.adv-logo--beko,
	.adv-logo--beko img {
		width: 85px !important;
		height: 48px !important;
		max-width: 85px !important;
	}

	/* Exact mobile sizes for the car images inside advertise cards */
	img.adv-car.adv-car--1 {
		width: 259px !important;
		height: 165px !important;
		max-width: 259px !important;
		object-fit: contain !important;
	}

	img.adv-car.adv-car--2 {
		width: 268px !important;
		height: 170px !important;
		max-width: 268px !important;
		object-fit: contain !important;
	}

	img.adv-car.adv-car--4 {
		/* beko is adv-car--4 per markup */
		width: 277px !important;
		height: 177px !important;
		max-width: 277px !important;
		object-fit: contain !important;
	}

	img.adv-car.adv-car--3 {
		width: 259px !important;
		height: 127px !important;
		max-width: 259px !important;
		object-fit: contain !important;
	}

	img.adv-car.adv-car--5 {
		width: 270px !important;
		height: 138px !important;
		max-width: 270px !important;
		object-fit: contain !important;
	}

	img.adv-car.adv-car--6 {
		width: 271px !important;
		height: 151px !important;
		max-width: 271px !important;
		object-fit: contain !important;
	}
}

/* ===== SCROLL ANIMATIONS ===== */

/* Keyframes */
@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(40px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes fadeInScale {
	from {
		opacity: 0;
		transform: scale(0.8);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes bounce {
	0%, 100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-10px);
	}
}

/* Base animation setup */
.animate-on-scroll {
	opacity: 0;
}

.animate-on-scroll.animated {
	animation-fill-mode: forwards;
}

/* Hero Section Animations */
.hero-car {
	animation: fadeInUp 0.8s ease-out forwards;
}

.hero-icon {
	animation: fadeIn 0.6s ease-out forwards;
	animation-delay: 0.3s;
}

.hero-icon.bounce-animation {
	animation: fadeIn 0.6s ease-out forwards, bounce 2s ease-in-out 1s infinite;
}

.hero-title, .hero-text {
	animation: fadeInUp 0.8s ease-out forwards;
	animation-delay: 0.2s;
}

.hero-eyecatcher {
	animation: fadeInScale 0.8s ease-out forwards;
	animation-delay: 0.4s;
}

.hero-button-left {
	animation: fadeIn 0.6s ease-out forwards;
	animation-delay: 0.6s;
}

.hero-button-right {
	animation: fadeIn 0.6s ease-out forwards;
	animation-delay: 0.8s;
}

/* App Section */
.app-title, .app-text {
	animation: fadeInUp 0.8s ease-out forwards;
}

.app-badge {
	opacity: 0;
}

.app-badge.animated {
	animation: fadeIn 0.5s ease-out forwards;
}

.app-badge:nth-child(1) { animation-delay: 0.2s; }
.app-badge:nth-child(2) { animation-delay: 0.3s; }
.app-badge:nth-child(3) { animation-delay: 0.4s; }
.app-badge:nth-child(4) { animation-delay: 0.5s; }

.app-phone-center {
	animation: fadeIn 1s ease-out forwards;
	animation-delay: 0.3s;
}

/* Download Section */
.download-icon, .download-title {
	animation: fadeInUp 0.8s ease-out forwards;
}

.download-image {
	animation: fadeInUp 0.8s ease-out forwards;
	animation-delay: 0.2s;
}

.download-qr {
	animation: fadeIn 0.8s ease-out forwards;
	animation-delay: 0.4s;
}

/* Desktop Section */
.desktop-image, .desktop-title {
	animation: fadeInUp 0.8s ease-out forwards;
}

.desktop-content {
	animation: fadeIn 0.8s ease-out forwards;
	animation-delay: 0.3s;
}

/* Benefits Section */
.benefits-title {
	animation: fadeInUp 0.8s ease-out forwards;
}

.benefits-content {
	animation: fadeIn 0.8s ease-out forwards;
	animation-delay: 0.2s;
}

.benefits-card {
	animation: fadeInScale 0.8s ease-out forwards;
}

.benefits-card:nth-child(1) { animation-delay: 0.1s; }
.benefits-card:nth-child(2) { animation-delay: 0.2s; }
.benefits-card:nth-child(3) { animation-delay: 0.3s; }

/* Features Section (5x) */
.feature-title, .feature-image {
	animation: fadeInUp 0.8s ease-out forwards;
}

.feature-content {
	opacity: 0;
}

.feature-content.animated {
	animation: fadeIn 0.6s ease-out forwards;
}

.feature-content-row {
	opacity: 0;
}

.feature-content-row.animated {
	animation: fadeIn 0.5s ease-out forwards;
}

/* Map Trail Section */
.map-trail-logo, .map-trail-title, .map-trail-image {
	animation: fadeInUp 0.8s ease-out forwards;
}

.map-trail-content {
	animation: fadeIn 0.8s ease-out forwards;
	animation-delay: 0.3s;
}

/* FAQ Section */
.faq-title {
	animation: fadeInUp 0.8s ease-out forwards;
}

.faq-content {
	animation: fadeIn 0.8s ease-out forwards;
	animation-delay: 0.2s;
}

/* Footer */
footer {
	animation: fadeIn 1s ease-out forwards;
}