/* Index + ERP landing — hero grid, feature buttons, mobile app (extracted from inline) */
.hero-grid-wrapper {
				padding: 0;
				margin-top: 0;
			}

			/* Pull image up slightly only on desktop — on mobile this overlapped feature cards */
			@media (min-width: 992px) {
				#hero-17 .hero-grid-wrapper {
				margin-top: -40px;
				}

				#hero-17 #hero-main-image {
					max-width: 200% !important;
				}
			}

			.hero-grid {
				position: relative;
				width: 100%;
				height: auto;
				min-height: 500px;
				display: block;
			}

			.hero-grid-card {
				border-radius: 16px;
				position: relative;
				overflow: hidden;
				display: flex;
				align-items: center;
				justify-content: center;
				transition: transform 0.3s ease, box-shadow 0.3s ease;
				cursor: pointer;
			}

			.hero-grid-card:hover {
				transform: translateY(-4px);
				box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
			}

			/* Layout matching the image - 5 cards in vertical masonry */
			/* Left Column */
			.card-size-1 {
				grid-column: 1 / 2;
				grid-row: 1 / 5; /* Large Fashion card - top left, spans 4 rows */
			}

			.card-size-3 {
				grid-column: 1 / 2;
				grid-row: 5 / 8; /* Medium Inspiration card - middle left, below Fashion */
			}

			/* Right Column */
			.card-size-2 {
				grid-column: 2 / 3;
				grid-row: 1 / 3; /* Small Code card - top right */
			}

			.card-size-4 {
				grid-column: 2 / 3;
				grid-row: 3 / 6; /* Medium Category card - middle right, below Code */
			}

			.card-size-5 {
				grid-column: 2 / 3;
				grid-row: 6 / 8; /* Small Category card - bottom right, below Mobile App */
			}

			.hero-grid-card-content {
				padding: 20px;
				width: 100%;
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				position: relative;
			}

			.hero-grid-card-label {
				color: white;
				font-size: 18px;
				font-weight: 600;
				position: absolute;
				bottom: 20px;
				right: 20px;
			}

			.code-icon {
				font-size: 24px;
				color: #94a3b8;
				margin-bottom: 10px;
			}

			.code-snippet {
				font-family: 'Courier New', monospace;
				font-size: 12px;
				line-height: 1.6;
			}

			.code-orange { color: #fb923c; }
			.code-blue { color: #60a5fa; }
			.code-green { color: #34d399; }
			.code-yellow { color: #fbbf24; }

			.category-label {
				color: #94a3b8;
				font-size: 11px;
				margin-bottom: 8px;
			}

			.category-title {
				color: white;
				font-size: 16px;
				font-weight: 700;
				margin-bottom: 4px;
			}

			.category-subtitle {
				color: white;
				font-size: 14px;
				font-weight: 700;
				margin-bottom: 8px;
			}

			.category-files {
				color: #94a3b8;
				font-size: 11px;
				margin-bottom: 8px;
			}

			.category-arrow {
				position: absolute;
				bottom: 15px;
				right: 15px;
				width: 28px;
				height: 28px;
				border-radius: 50%;
				background: rgba(255, 255, 255, 0.2);
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 16px;
				color: white;
			}

			/* Placeholder image for hero cards - replace src with your app screenshot */
			.hero-grid-card.card-size-1 .hero-card-img {
				position: absolute;
				inset: 0;
				width: 100%;
				height: 100%;
				object-fit: cover;
				z-index: 0;
			}
			.hero-grid-card.card-size-1 .hero-grid-card-label {
				z-index: 1;
			}

			.gaming-icon {
				font-size: 48px;
				text-align: center;
			}

			.video-icon {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				width: 50px;
				height: 50px;
				border-radius: 50%;
				background: rgba(255, 255, 255, 0.9);
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 20px;
				color: #fda4af;
			}

			.video-duration {
				position: absolute;
				bottom: 15px;
				right: 15px;
				color: white;
				font-size: 12px;
				font-weight: 600;
				background: rgba(0, 0, 0, 0.3);
				padding: 4px 8px;
				border-radius: 4px;
			}

			.ai-icon {
				font-size: 40px;
				text-align: center;
				margin-bottom: 8px;
			}

			.ai-label {
				position: absolute;
				top: 15px;
				left: 15px;
				color: white;
				font-size: 14px;
				font-weight: 600;
			}

			@media (max-width: 768px) {
				.hero-grid {
					height: 400px;
					gap: 8px;
				}

				.hero-grid-card-content {
					padding: 15px;
				}
			}

			/* Feature Buttons - Card Style (10 cards: 5 per row) */
			.feature-buttons {
				display: grid;
				grid-template-columns: repeat(5, minmax(0, 1fr));
				gap: 15px;
				margin-bottom: 30px;
				width: 100%;
			}

			.feature-btn {
				transition: all 0.3s ease;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				padding: 15px 10px !important;
				background: #fff !important;
				border: none !important;
				border-radius: 12px;
				box-shadow: 0 2px 8px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.02);
				cursor: pointer;
				width: 100%;
				min-width: 0;
			}

			.feature-btn .icon-wrapper {
				width: 48px;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 10px;
				margin-bottom: 0;
				transition: all 0.3s ease;
				background: transparent;
			}

			.feature-btn .flaticon {
				font-size: 36px;
				transition: all 0.3s ease;
				color: inherit;
			}

			.feature-btn .btn-text {
				font-size: 0.7rem !important;
				font-weight: 400;
				color: #333;
				text-align: center;
				line-height: 1.4;
				transition: all 0.3s ease;
				white-space: normal;
				max-width: 100%;
			}

			/* Colorful icons - target :before pseudo-element with more specificity */
			.feature-btn[data-feature="projects"] .icon-wrapper .flaticon-project:before {
				color: #ff6b6b !important;
			}

			.feature-btn[data-feature="scrum"] .icon-wrapper .flaticon-kanban:before {
				color: #f59e0b !important;
			}

			.feature-btn[data-feature="hr"] .icon-wrapper .flaticon-id-card:before {
				color: #4ecdc4 !important;
			}

			.feature-btn[data-feature="finance"] .icon-wrapper .flaticon-money:before {
				color: #44a3db !important;
			}

			.feature-btn[data-feature="sales"] .icon-wrapper .flaticon-target:before {
				color: #667eea !important;
			}

			.feature-btn[data-feature="clients"] .icon-wrapper .flaticon-suit:before {
				color: #f5576c !important;
			}

			.feature-btn[data-feature="analytics"] .icon-wrapper .flaticon-analytics:before {
				color: #fa709a !important;
			}

			.feature-btn[data-feature="livechat"] .icon-wrapper .flaticon-chat:before {
				color: #38bdf8 !important;
			}

			.feature-btn[data-feature="leaves"] .icon-wrapper .flaticon-calendar:before {
				color: #4facfe !important;
			}

			.feature-btn[data-feature="tracker"] .icon-wrapper .flaticon-check:before {
				color: #43e97b !important;
			}

			.feature-btn:hover {
				transform: translateY(-4px);
				box-shadow: 0 4px 16px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.04);
			}

			.feature-btn:hover .icon-wrapper {
				transform: scale(1.1);
			}

			@keyframes feature-btn-active-glow {
				0%, 100% {
					box-shadow: 0 6px 20px rgba(0,0,0,0.15), 0 0 0 2px rgba(0,123,255,0.25);
				}
				50% {
					box-shadow: 0 8px 26px rgba(0,0,0,0.18), 0 0 0 3px rgba(37,99,235,0.45);
				}
			}

			.feature-btn.active {
				transform: translateY(-4px);
				box-shadow: 0 6px 20px rgba(0,0,0,0.15), 0 0 0 2px rgba(0,123,255,0.2);
				animation: feature-btn-active-glow 2.5s ease-in-out infinite;
			}

			.feature-btn.active .icon-wrapper {
				transform: scale(1.1);
			}

			.feature-buttons:hover .feature-btn.active {
				animation: none;
			}

			/* Mobile / tablet: 2 rows × 5 cards, no horizontal scroll */
			@media (max-width: 991px) {
				#hero-17 .hero-17-txt {
					padding-right: 16px !important;
					padding-left: 16px !important;
				}

				#hero-17 .feature-buttons {
					display: grid;
					grid-template-columns: repeat(5, minmax(0, 1fr));
					grid-auto-rows: auto;
					gap: 10px;
					width: 100%;
					max-width: 100%;
					margin: 0 0 20px;
					padding: 0;
					overflow: visible;
				}

				#hero-17 .feature-btn {
					width: 100%;
					min-width: 0;
					max-width: none;
					padding: 10px 4px !important;
					box-sizing: border-box;
				}

				#hero-17 .feature-btn .flaticon {
					font-size: 22px;
				}

				#hero-17 .feature-btn .icon-wrapper {
					width: 32px;
					margin-bottom: 2px;
				}

				#hero-17 .feature-btn .btn-text {
					font-size: 0.55rem !important;
					line-height: 1.25 !important;
				}

				/* Space below feature grid; tame oversized image (inline 200%) */
				#hero-17 .hero-grid-wrapper {
					margin-top: 15px !important;
					margin-bottom: 10px !important;
					padding-left: 0 !important;
					padding-right: 0;
				}

				#hero-17 .hero-single-image-wrap {
					overflow: hidden;
					border-radius: 12px;
				}

				#hero-17 #hero-main-image {
					max-width: 100% !important;
					width: 100%;
					height: auto;
					display: block;
					margin: 0 auto;
				}
			}

			/* Hero checkmark lines: full text desktop, short on mobile */
			#hero-17 .hero-main-title {
				text-align: left;
				line-height: 1.12;
				margin-bottom: 16px;
				color: #000;
				font-size: clamp(1.75rem, 3vw, 2.7rem);
				letter-spacing: -0.02em;
				max-width: 720px;
			}

			#hero-17 .hero-main-title .hero-main-title-highlight {
				display: block;
				color: #1f4fd6;
				font-weight: 700;
				position: relative;
			}

			#hero-17 .hero-main-title .hero-main-title-tail {
				display: inline-block;
				font-style: normal;
				font-weight: 600;
				color: #1f4fd6;
				position: relative;
			}

			#hero-17 .hero-main-title .hero-main-title-amp {
				color: #000;
			}

			#hero-17 .hero-main-title .hero-main-title-highlight::after,
			#hero-17 .hero-main-title .hero-main-title-tail::after {
				content: "";
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0.08em;
				height: 0.2em;
				background: rgba(37, 99, 235, 0.14);
				z-index: -1;
				border-radius: 2px;
			}

			#hero-17 .hero-main-subtitle {
				text-align: left;
				font-size: 1.02rem;
				line-height: 1.65;
				color: #3d3d3d;
				font-weight: 400;
				max-width: 640px;
				margin-bottom: 22px !important;
			}

			.hero-check-row {
				display: flex;
				align-items: center;
				margin-bottom: 8px;
				gap: 10px;
			}

			.hero-check-row .hero-check-mark {
				color: #a78bfa;
				font-size: 16px;
				flex-shrink: 0;
				line-height: 1.2;
			}

			.hero-check-row .hero-check-text {
				margin: 0 !important;
				margin-top: 0 !important;
				font-size: 0.95rem;
				line-height: 1.4;
			}

			.hero-check-line-short {
				display: none;
			}

			.hero-check-line-long {
				display: inline;
			}

			@media (min-width: 992px) {
				.hero-check-row {
					white-space: nowrap;
				}

				.hero-check-row .hero-check-text {
					white-space: nowrap;
				}
			}

			@media (max-width: 991px) {
				#hero-17 .hero-main-title {
					font-size: clamp(1.6rem, 7vw, 2.2rem);
					line-height: 1.15;
					max-width: 100%;
				}

				#hero-17 .hero-main-subtitle {
					font-size: 0.98rem;
					line-height: 1.58;
				}

				.hero-check-row {
					align-items: flex-start;
				}

				.hero-check-line-long {
					display: none !important;
				}

				.hero-check-line-short {
					display: inline !important;
				}
			}

			/* Standardize all text sizes to match reference text */
			main p, main .fbox-txt p, main .txt-block p, main .simple-list p, main .cbox-1-txt p {
				font-size: 1rem !important;
				line-height: 1.6 !important;
				color: #3d3d3d !important;
				font-weight: 400 !important;
				margin-top: 15px !important;
			}

			/* Remove top margin for first child paragraphs to avoid extra space */
			main p:first-child, main .fbox-txt p:first-child, main .txt-block p:first-child {
				margin-top: 0 !important;
			}

			/* Hero section paragraph overrides - must come after global rules */
			.hero-17-txt div p {
				margin-top: 0 !important;
				margin-bottom: 0 !important;
			}

			/* Remove top margin from direct child paragraphs in hero */
			.hero-17-txt > p {
				margin-top: 0 !important;
			}

			/* Force margin-bottom for description paragraph (first direct child p) */
			.hero-17-txt > p:nth-of-type(1) {
				margin-bottom: 25px !important;
			}

			/* Force margin-bottom and margin-top for footer text paragraph (second direct child p) */
			.hero-17-txt > p:nth-of-type(2) {
				margin-bottom: 20px !important;
				margin-top: 20px !important;
			}

			/* Exceptions for specific elements that should remain different */
			.feature-label, .section-id, .p-sm, .p-xs {
				font-size: inherit !important;
			}

			/* TrackAxo Teams — Employee App (section #lnk-1): hero-style cards, 4 per row */
			#lnk-1 {
				background: #f8f9fa;
			}

			#lnk-1 .row {
				overflow: visible;
			}

			#lnk-1 .mobile-app-image-wrapper {
				text-align: center;
				padding: 32px 0px 6px;
				display: flex;
				align-items: center;
				justify-content: center;
				overflow: visible;
			}

			@media (min-width: 768px) {
				#lnk-1 .mobile-app-image-wrapper {
					padding: 12px 20px 4px;
				}
			}

			#lnk-1 .mobile-app-image.img-fluid,
			.mobile-app-image {
				width: 100%;
				max-width: 100%;
				height: auto;
				transition: transform 0.3s ease, opacity 0.3s ease;
			}

			.employee-app-feature-buttons {
				display: grid;
				grid-template-columns: repeat(4, minmax(0, 1fr));
				gap: 15px;
				margin-bottom: 0;
				width: 100%;
			}

			.employee-app-feature-buttons .mobile-app-feature-btn {
				transition: all 0.3s ease;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				padding: 15px 10px !important;
				background: #fff !important;
				border: none !important;
				border-radius: 12px;
				box-shadow: 0 2px 8px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.02);
				cursor: pointer;
				width: 100%;
				min-width: 0;
			}

			.employee-app-feature-buttons .mobile-app-feature-btn .icon-wrapper {
				width: 48px;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 10px;
				margin-bottom: 0;
				transition: all 0.3s ease;
				background: transparent;
			}

			.employee-app-feature-buttons .mobile-app-feature-btn .flaticon {
				font-size: 36px;
				transition: all 0.3s ease;
				color: inherit;
			}

			.employee-app-feature-buttons .mobile-app-feature-btn .btn-text {
				font-size: 0.7rem !important;
				font-weight: 400;
				color: #333;
				text-align: center;
				line-height: 1.4;
				transition: all 0.3s ease;
				white-space: normal;
				max-width: 100%;
			}

			.employee-app-feature-buttons .mobile-app-feature-btn:hover {
				transform: translateY(-4px);
				box-shadow: 0 4px 16px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.04);
			}

			.employee-app-feature-buttons .mobile-app-feature-btn:hover .icon-wrapper {
				transform: scale(1.1);
			}

			.employee-app-feature-buttons .mobile-app-feature-btn.active {
				transform: translateY(-4px);
				box-shadow: 0 6px 20px rgba(0,0,0,0.15), 0 0 0 2px rgba(0,123,255,0.2);
			}

			.employee-app-feature-buttons .mobile-app-feature-btn.active .icon-wrapper {
				transform: scale(1.1);
			}

			.employee-app-feature-buttons .mobile-app-feature-btn[data-feature="attendance"] .icon-wrapper .flaticon-time:before {
				color: #ff6b6b !important;
			}

			.employee-app-feature-buttons .mobile-app-feature-btn[data-feature="leave"] .icon-wrapper .flaticon-calendar:before {
				color: #4ecdc4 !important;
			}

			.employee-app-feature-buttons .mobile-app-feature-btn[data-feature="expense"] .icon-wrapper .flaticon-wallet:before {
				color: #44a3db !important;
			}

			.employee-app-feature-buttons .mobile-app-feature-btn[data-feature="tasks"] .icon-wrapper .flaticon-check:before {
				color: #667eea !important;
			}

			.employee-app-feature-buttons .mobile-app-feature-btn[data-feature="notifications"] .icon-wrapper .flaticon-bell:before {
				color: #f5576c !important;
			}

			.employee-app-feature-buttons .mobile-app-feature-btn[data-feature="profile"] .icon-wrapper .flaticon-user:before {
				color: #fa709a !important;
			}

			.employee-app-feature-buttons .mobile-app-feature-btn[data-feature="chat"] .icon-wrapper .flaticon-chat:before {
				color: #38bdf8 !important;
			}

			.employee-app-feature-buttons .mobile-app-feature-btn[data-feature="reports"] .icon-wrapper .flaticon-pie-chart:before {
				color: #f59e0b !important;
			}

			/* Hero brand strip: match about.html — theme sizing, no max-width cap (avoids blur from downscaling) */
			#hero-17 #brands-1 {
				padding: unset !important;
				padding-top: 56px;
				padding-bottom: 0;
			}

			#hero-17 #brands-1 .brands-carousel-6 {
				margin-bottom: 0 !important;
			}

			/* Tighten gap between logo row and “How it works” (section used pt-100) */
			#lnk-2 {
				padding-top: 10px !important;
			}

			@media (max-width: 991px) {
				#lnk-1 .employee-app-feature-buttons {
					grid-template-columns: repeat(4, minmax(0, 1fr));
					gap: 10px;
					width: 100%;
					max-width: 100%;
				}

				#lnk-1 .employee-app-feature-buttons .mobile-app-feature-btn {
					padding: 10px 4px !important;
					box-sizing: border-box;
				}

				#lnk-1 .employee-app-feature-buttons .mobile-app-feature-btn .flaticon {
					font-size: 22px;
				}

				#lnk-1 .employee-app-feature-buttons .mobile-app-feature-btn .icon-wrapper {
					width: 32px;
					margin-bottom: 2px;
				}

				#lnk-1 .employee-app-feature-buttons .mobile-app-feature-btn .btn-text {
					font-size: 0.55rem !important;
					line-height: 1.25 !important;
				}
			}

			@media (max-width: 768px) {
				#lnk-1 .mobile-app-image.img-fluid,
				.mobile-app-image {
					width: 100%;
					max-width: 100%;
				}
			}

			/* Feature Grid Section */
			.features-grid-section {
				background: #fff;
			}

			.feature-grid-container {
				max-width: 1200px;
				margin: 0 auto;
				padding: 0 20px;
			}

			.feature-grid {
				display: grid;
				grid-template-columns: repeat(10, 1fr);
				grid-template-rows: repeat(5, 100px); /* Fixed row height - 5 rows */
				gap: 12px;
				width: 100%;
				min-width: 1200px; /* Ensure minimum width for 10 columns */
			}

			.feature-grid-container {
				overflow-x: auto;
				overflow-y: hidden;
				-webkit-overflow-scrolling: touch;
				position: relative;
			}

			/* Fade overlay on both sides when scrolling */
			.feature-grid-container::before,
			.feature-grid-container::after {
				content: '';
				position: absolute;
				top: 0;
				bottom: 0;
				width: 60px;
				pointer-events: none;
				z-index: 10;
				transition: opacity 0.3s ease;
			}

			.feature-grid-container::before {
				left: 0;
				background: linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
				opacity: 0;
			}

			.feature-grid-container::after {
				right: 0;
				background: linear-gradient(to left, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
				opacity: 0;
			}

			/* Show left fade when scrolled right */
			.feature-grid-container.scrolled-left::before {
				opacity: 1;
			}

			/* Show right fade when not at the end */
			.feature-grid-container.scrolled-right::after {
				opacity: 1;
			}

			/* Hide fade overlays when at center or when content fits */
			.feature-grid-container.at-center::before,
			.feature-grid-container.at-center::after {
				opacity: 0 !important;
			}

			.feature-grid-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				padding: 10px 10px;
				background: #fff;
				border: 1px solid #e5e7eb;
				border-radius: 8px;
				text-decoration: none;
				color: #333;
				transition: all 0.3s ease;
				cursor: pointer;
				height: 100px;
				width: 100%;
				box-sizing: border-box;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			/* Remove fade from all smaller boxes - they should all be fully visible */
			.feature-grid-item:not(.feature-grid-large) {
				opacity: 1;
			}

			.feature-grid-item:hover {
				background: #f9fafb;
				border-color: #3b82f6;
				transform: translateY(-2px);
				box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
				opacity: 1;
			}

			.feature-grid-item.feature-grid-large {
				grid-column: span 2;
				grid-row: span 2;
				height: 200px;
				background: #f9fafb;
				border-color: #d1d5db;
				width: 100%;
				box-sizing: border-box;
			}

			/* Position large boxes in center - 2x2 grid in center columns (4-5 and 6-7) */
			.feature-grid-item[data-feature="projects-module"] {
				grid-column: 4 / 6;
				grid-row: 2 / 4;
			}

			.feature-grid-item[data-feature="finance-module"] {
				grid-column: 6 / 8;
				grid-row: 2 / 4;
			}

			.feature-grid-item[data-feature="analytics-module"] {
				grid-column: 4 / 6;
				grid-row: 4 / 6;
			}

			.feature-grid-item[data-feature="communication-module"] {
				grid-column: 6 / 8;
				grid-row: 4 / 6;
			}

			.feature-icon {
				margin-bottom: 10px;
				flex-shrink: 0;
			}

			.feature-grid-item .feature-label {
				font-size: 0.65rem;
				font-weight: 400;
				line-height: 1.2;
				text-align: center;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				max-width: 100%;
			}

			.feature-icon .flaticon {
				font-size: 32px;
				color: #3b82f6;
			}

			.feature-icon .flaticon:before {
				color: #3b82f6 !important;
			}

			.feature-label {
				font-size: 0.7rem;
				font-weight: 400;
				text-align: center;
				color: #333;
				line-height: 1.4;
			}

			/* Large Feature Cards - reduced padding */
			.feature-large-content {
				width: 100%;
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				padding: 8px 10px;
			}

			.feature-tabs {
				display: flex;
				gap: 6px;
				margin-bottom: 8px;
			}

			.tab {
				padding: 3px 6px;
				font-size: 0.7rem;
				border-radius: 4px;
				background: #e5e7eb;
				color: #3d3d3d;
			}

			.tab.active {
				background: #3b82f6;
				color: #fff;
			}

			.badge {
				background: rgba(255,255,255,0.3);
				padding: 1px 4px;
				border-radius: 8px;
				font-size: 0.65rem;
				margin-left: 2px;
			}

			.feature-avatars {
				display: flex;
				gap: 6px;
				margin-bottom: 8px;
			}

			.avatar {
				width: 26px;
				height: 26px;
				border-radius: 50%;
				background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
			}

			.feature-title {
				font-size: 0.8rem;
				font-weight: 600;
				color: #3b82f6;
				margin-top: auto;
			}

			/* Large cells: placeholder images (swap src in HTML anytime) */
			.feature-large-content--image {
				justify-content: flex-end;
				padding: 6px 8px 8px;
				gap: 6px;
			}

			.feature-grid-large-img-wrap {
				flex: 1;
				min-height: 0;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 6px;
				overflow: hidden;
				background: #fff;
				border: 1px solid #e5e7eb;
			}

			.feature-grid-large-img {
				width: 100%;
				height: 100%;
				object-fit: cover;
				object-position: center top;
				max-height: 132px;
				display: block;
			}

			.feature-doc {
				background: #fff;
				padding: 6px 8px;
				border-radius: 4px;
				margin-bottom: 8px;
				border: 1px solid #e5e7eb;
			}

			.doc-title {
				font-size: 0.75rem;
				font-weight: 600;
				color: #333;
				margin-bottom: 2px;
			}

			.doc-category {
				font-size: 0.65rem;
				color: #3d3d3d;
			}

			.feature-search {
				background: #fff;
				padding: 6px 8px;
				border-radius: 4px;
				margin-bottom: 8px;
				border: 1px solid #e5e7eb;
			}

			.search-bar {
				font-size: 0.75rem;
				color: #3d3d3d;
				margin-bottom: 4px;
			}

			.search-status {
				font-size: 0.7rem;
				color: #3b82f6;
				font-weight: 500;
			}

			.feature-chat {
				background: #fff;
				padding: 6px 8px;
				border-radius: 4px;
				margin-bottom: 8px;
				border: 1px solid #e5e7eb;
			}

			.chat-header {
				display: flex;
				gap: 6px;
				flex-wrap: wrap;
				font-size: 0.65rem;
			}

			.chat-badge, .chat-unread, .chat-mentions {
				padding: 2px 5px;
				border-radius: 4px;
				background: #e5e7eb;
				color: #3d3d3d;
			}

			/* Always maintain 10 columns, scrollable on smaller screens */
			@media (max-width: 1200px) {
				.feature-grid-container {
					overflow-x: auto;
					padding-bottom: 10px;
				}
				
				.feature-grid {
					min-width: 1200px;
				}
			}

			/* Mobile optimizations */
			@media (max-width: 768px) {
				.feature-grid-container {
					margin: 0 -15px;
					padding: 0 15px;
				}

				.feature-grid {
					min-width: 1000px;
					gap: 8px;
					grid-template-rows: repeat(5, 80px);
				}

				.feature-grid-item {
					padding: 12px 8px;
					height: 80px;
					min-height: 80px;
				}

				.feature-grid-item .feature-icon {
					font-size: 24px;
					margin-bottom: 6px;
				}

				.feature-grid-item .feature-label {
					font-size: 0.6rem;
					line-height: 1.1;
				}

				.feature-grid-item.feature-grid-large {
					height: 160px;
					padding: 8px 10px;
				}

				.feature-grid-item.feature-grid-large .feature-title {
					font-size: 0.8rem;
				}

				.feature-grid-large-img {
					max-height: 100px;
				}

				.feature-tabs .tab,
				.feature-doc .doc-title,
				.feature-search .search-bar {
					font-size: 0.8rem;
				}

				/* Adjust fade overlay width for mobile */
				.feature-grid-container::before,
				.feature-grid-container::after {
					width: 40px;
				}
			}

			@media (max-width: 480px) {
				.feature-grid {
					min-width: 800px;
					gap: 6px;
					grid-template-rows: repeat(5, 70px);
				}

				.feature-grid-item {
					padding: 10px 6px;
					height: 70px;
					min-height: 70px;
				}

				.feature-grid-item .feature-icon {
					font-size: 20px;
					margin-bottom: 4px;
				}

				.feature-grid-item .feature-label {
					font-size: 0.55rem;
				}

				.feature-grid-item.feature-grid-large {
					height: 140px;
					padding: 6px 8px;
				}

				.feature-grid-item.feature-grid-large .feature-title {
					font-size: 0.75rem;
				}

				.feature-grid-large-img {
					max-height: 88px;
				}

				.feature-tabs .tab,
				.feature-doc .doc-title,
				.feature-search .search-bar {
					font-size: 0.75rem;
				}

				/* Smaller fade overlay for very small screens */
				.feature-grid-container::before,
				.feature-grid-container::after {
					width: 30px;
				}
			}

			/* Card Sets - Hidden by default */
			.feature-cards {
				display: none;
				grid-template-columns: repeat(2, 1fr);
				grid-auto-rows: 80px;
				gap: 12px;
				width: 100%;
			}

			.feature-cards.active {
				display: grid;
			}