/* Enhanced Sidebar Color Scheme - Using Original Palette */
	:root {
		/* Sidebar specific colors - Original palette enhanced */
		--sidebar-link-color: #6a7280; /* Medium gray for regular links */
		--sidebar-link-hover: #FC764C; /* Orange on hover */
		--sidebar-link-active: #FC764C; /* Orange for active */
		--sidebar-active-bg: rgba(252, 118, 76, 0.1); /* Subtle orange background */
		--sidebar-active-border: #FC764C; /* Orange border for active items */

		/* Section hierarchy colors */
		--sidebar-section-title: #16293F; /* Navy blue for main sections */
		--sidebar-section-bg: rgba(22, 41, 63, 0.05); /* Very subtle blue background */
		--sidebar-subsection-title: #374151; /* Darker gray for subsections */

		/* Dark mode sidebar colors */
		--sidebar-dark-link-color: #9ca3af; /* Light gray for regular links */
		--sidebar-dark-link-hover: #FC764C; /* Orange on hover */
		--sidebar-dark-link-active: #FC764C; /* Orange for active */
		--sidebar-dark-active-bg: rgba(252, 118, 76, 0.15); /* Subtle orange background */
		--sidebar-dark-active-border: #FC764C; /* Orange border */
		--sidebar-dark-section-title: #e5e7eb; /* Light gray for sections */
		--sidebar-dark-section-bg: rgba(255, 255, 255, 0.05); /* Subtle white background */
		--sidebar-dark-subsection-title: #d1d5db; /* Medium light gray for subsections */
	}

	/* Fix announcement bar issues and duplicate banner */
	.md-announce {
		display: none !important;
		/* Hide the duplicate announcement */
	}

	/* Fix the white bar by ensuring no margin/padding */
	html,
	body {
		margin: 0 !important;
		padding: 0 !important;
	}

	/* Fix potential space in the header area */
	.md-header {
		margin: 0 !important;
		padding: 0 !important;
		position: sticky !important;
		top: 0 !important;
		z-index: 100 !important;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
	}

	/* Fix specifically the top banner space */
	.md-container {
		margin-top: 0 !important;
		padding-top: 0 !important;
	}

	/* Target all possible sources of white space */
	body::before,
	body::after,
	.md-main::before,
	.md-main::after,
	.md-content::before,
	.md-content::after {
		display: none !important;
	}

	/* Force zero margin on container elements */
	body>*,
	.md-container>*,
	.md-main>*,
	.md-main__inner>* {
		margin-top: 0 !important;
	}

	/* Fix the margin between header and hero */
	.md-main {
		margin-top: 0 !important;
		padding-top: 0 !important;
	}

	.md-content {
		margin-top: 0 !important;
		padding-top: 0 !important;
		max-width: calc(100% - var(--md-sidebar-width)) !important;
	}

	.md-main__inner {
		margin-top: 0 !important;
		padding-top: 0 !important;
		max-width: 100% !important;
	}

	.md-content__inner {
		margin-top: 0 !important;
		padding-top: 0 !important;
		max-width: 100% !important;
	}


	/* Force Material theme container to be wider */
	.md-grid {
		max-width: 100% !important;
		padding-top: 0 !important;
		margin-top: 0 !important;
	}

	/* Remove article padding */
	.md-content article {
		padding-top: 0 !important;
	}

	/* Enforce grid layout with !important flags */
	.grid {
		display: grid !important;
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
		gap: 24px !important;
		width: 100% !important;
	}

	.feature-card {
		border: 1px solid #e0e0e0 !important;
		box-sizing: border-box !important;
		width: 100% !important;
		min-width: 0 !important;
		/* Prevent content from breaking grid */
	}

	/* Additional fix for Firefox */
	@-moz-document url-prefix() {
		.grid {
			grid-template-columns: repeat(3, 1fr) !important;
		}
	}

	/* Override for smaller screens */
	@media screen and (max-width: 1024px) {
		.grid {
			grid-template-columns: repeat(2, 1fr) !important;
		}
	}

	@media screen and (max-width: 768px) {
		.grid {
			grid-template-columns: 1fr !important;
		}
	}

	/* Dark mode support - force colors in both modes */
	[data-md-color-scheme="default"] {
		--md-primary-fg-color: #16293F !important;
		--md-primary-fg-color--light: #16293F !important;
		--md-primary-fg-color--dark: #16293F !important;
		--md-accent-fg-color: #FC764C !important;
	}

	[data-md-color-scheme="slate"] {
		--md-primary-fg-color: #0D1B2A !important;
		--md-primary-fg-color--light: #0D1B2A !important;
		--md-primary-fg-color--dark: #0D1B2A !important;
		--md-accent-fg-color: var(--md-primary-fg-color) !important;

		/* Dark mode specific card styling */
		--card-bg-color: #1f1f1f !important;
		--card-text-color: #e0e0e0 !important;
		--card-border-color: #444444 !important;
	}

	/* Dark mode card styling */
	[data-md-color-scheme="slate"] .feature-card {
		background-color: var(--card-bg-color) !important;
		border-color: var(--card-border-color) !important;
	}

	[data-md-color-scheme="slate"] .feature-card h3 {
		color: var(--card-text-color) !important;
	}

	[data-md-color-scheme="slate"] .feature-card p {
		color: var(--card-text-color) !important;
	}

	/* Remove grid debugging border */
	.grid {
		border: none;
	}

	/* Only apply fixed positioning on large screens */
	@media screen and (min-width: 76.25em) {

		/* Left navigation */
		.md-nav--primary>.md-nav__inner>.md-nav__list {
			position: fixed;
			top: 102px;
			/* Position below the tabs bar */
			left: 0;
			height: calc(100vh - 102px - 200px); /* viewport - header - footer space */
			width: 232px;
			overflow-y: auto;
			overflow-x: hidden;
			background-color: var(--md-default-bg-color);
			z-index: 200; /* High z-index for left sidebar */
			padding: 1rem;
			border-right: 1px solid rgba(0, 0, 0, 0.07);
			scroll-behavior: smooth;
			-webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
		}

		/* Style scrollbars for left navigation */
		.md-nav--primary>.md-nav__inner>.md-nav__list::-webkit-scrollbar {
			width: 6px;
		}

		.md-nav--primary>.md-nav__inner>.md-nav__list::-webkit-scrollbar-track {
			background: rgba(0, 0, 0, 0.05);
		}

		.md-nav--primary>.md-nav__inner>.md-nav__list::-webkit-scrollbar-thumb {
			background-color: rgba(0, 0, 0, 0.2);
			border-radius: 3px;
		}

		.md-nav--primary>.md-nav__inner>.md-nav__list::-webkit-scrollbar-thumb:hover {
			background-color: rgba(0, 0, 0, 0.3);
		}

		/* Right table of contents */
		.md-sidebar--secondary {
			position: fixed;
			top: 102px;
			right: 0;
			height: calc(100vh - 102px - 200px);
			overflow-y: auto;
			overflow-x: hidden;
			z-index: 190; /* Slightly lower than left sidebar */
		}

		.md-sidebar--secondary .md-sidebar__scrollwrap {
			height: 100%;
			overflow-y: auto;
		}

		/* Style scrollbars for right sidebar */
		.md-sidebar--secondary::-webkit-scrollbar,
		.md-sidebar--secondary .md-sidebar__scrollwrap::-webkit-scrollbar {
			width: 6px;
		}

		.md-sidebar--secondary::-webkit-scrollbar-track,
		.md-sidebar--secondary .md-sidebar__scrollwrap::-webkit-scrollbar-track {
			background: rgba(0, 0, 0, 0.05);
		}

		.md-sidebar--secondary::-webkit-scrollbar-thumb,
		.md-sidebar--secondary .md-sidebar__scrollwrap::-webkit-scrollbar-thumb {
			background-color: rgba(0, 0, 0, 0.2);
			border-radius: 3px;
		}

		.md-sidebar--secondary::-webkit-scrollbar-thumb:hover,
		.md-sidebar--secondary .md-sidebar__scrollwrap::-webkit-scrollbar-thumb:hover {
			background-color: rgba(0, 0, 0, 0.3);
		}

		/* Adjust content margins to fit between fixed sidebars */
		/* .md-content__inner {
			margin-left: 232px;
			margin-right: 232px;
			padding: 1.2rem;
		} */

		/* Home page exception */
		/* .home-page .md-nav--primary>.md-nav__inner>.md-nav__list {
			display: none !important;
		} */

		/* .home-page .md-content__inner {
			margin-left: 0;
			margin-right: 0;
			max-width: 100% !important;
		} */

		/* Style scrollbars */
		/* .md-nav--primary>.md-nav__inner>.md-nav__list::-webkit-scrollbar,
		.md-sidebar--secondary .md-sidebar__scrollwrap::-webkit-scrollbar {
			width: 4px;
		} */

		/* .md-nav--primary>.md-nav__inner>.md-nav__list::-webkit-scrollbar-track,
		.md-sidebar--secondary .md-sidebar__scrollwrap::-webkit-scrollbar-track {
			background: transparent;
		} */

		/* .md-nav--primary>.md-nav__inner>.md-nav__list::-webkit-scrollbar-thumb,
		.md-sidebar--secondary .md-sidebar__scrollwrap::-webkit-scrollbar-thumb {
			background-color: rgba(0, 0, 0, 0.1);
			border-radius: 4px;
		} */

		/* Dark mode specific styles */
		[data-md-color-scheme="slate"] .md-nav--primary>.md-nav__inner>.md-nav__list,
		[data-md-color-scheme="slate"] .md-sidebar--secondary {
			background-color: var(--md-default-bg-color);
			border-color: rgba(255, 255, 255, 0.07);
		}

		/* Dark mode scrollbar styling */
		[data-md-color-scheme="slate"] .md-nav--primary>.md-nav__inner>.md-nav__list::-webkit-scrollbar-track {
			background: rgba(255, 255, 255, 0.05);
		}

		[data-md-color-scheme="slate"] .md-nav--primary>.md-nav__inner>.md-nav__list::-webkit-scrollbar-thumb {
			background-color: rgba(255, 255, 255, 0.1);
		}

		[data-md-color-scheme="slate"] .md-nav--primary>.md-nav__inner>.md-nav__list::-webkit-scrollbar-thumb:hover {
			background-color: rgba(255, 255, 255, 0.2);
		}

		/* Dark mode scrollbar styling for right sidebar */
		[data-md-color-scheme="slate"] .md-sidebar--secondary::-webkit-scrollbar-track,
		[data-md-color-scheme="slate"] .md-sidebar--secondary .md-sidebar__scrollwrap::-webkit-scrollbar-track {
			background: rgba(255, 255, 255, 0.05);
		}

		[data-md-color-scheme="slate"] .md-sidebar--secondary::-webkit-scrollbar-thumb,
		[data-md-color-scheme="slate"] .md-sidebar--secondary .md-sidebar__scrollwrap::-webkit-scrollbar-thumb {
			background-color: rgba(255, 255, 255, 0.1);
		}

		[data-md-color-scheme="slate"] .md-sidebar--secondary::-webkit-scrollbar-thumb:hover,
		[data-md-color-scheme="slate"] .md-sidebar--secondary .md-sidebar__scrollwrap::-webkit-scrollbar-thumb:hover {
			background-color: rgba(255, 255, 255, 0.2);
		}

		/* Ensure the tab bar remains visible */
		.md-tabs {
			position: sticky;
			top: 0;
			z-index: 30;
		}

		/* Keep footer at the bottom and full width
		.md-footer {
			position: relative;
			margin-left: 0;
			margin-right: 0;
			z-index: 13;
		} */

		/* Prevent the header from being hidden */
		.md-header {
			position: sticky;
			top: 0;
			z-index: 30;
		}
	}





	/* Add scroll behavior for iOS devices */
	@supports (-webkit-overflow-scrolling: touch) {

		.md-nav--primary>.md-nav__inner>.md-nav__list,
		.md-sidebar--secondary .md-sidebar__scrollwrap {
			-webkit-overflow-scrolling: touch;
		}
	}

	/* Navigation styling */
	.md-tabs {
		background-color: var(--md-primary-fg-color);
		color: var(#FFFFFF);
	}

	.md-tabs__link {
		opacity: 0.9;
		font-weight: 500;
		font-size: 0.8125rem; /* Reduced to 13px for cleaner look */
	}

	.md-tabs__link--active,
	.md-tabs__link:hover {
		opacity: 1;
		font-size: 0.8125rem; /* Keep consistent size on hover/active */
	}

	/* Removed duplicate - now handled by professional sidebar styles below */

	/* Fix for mobile header overlapping 'Back to top' link */
	@media screen and (max-width: 76.1875em) {

		/* Target the specific 'Back to top' link in the table of contents */
		.md-nav__title .md-nav__button.md-logo+.md-nav__title-text,
		.md-nav__title a[href="#"] {
			padding-top: 64px !important;
			/* Adjust this value based on your header height */
			display: block;
		}

		/* Ensure table of contents scrolls properly */
		.md-sidebar--primary .md-sidebar__scrollwrap {
			padding-top: 48px;
			/* Add padding to the top of the scrollable area */
		}

		/* Ensure the nav title is visible */
		.md-nav__title {
			height: auto !important;
			margin-top: 48px !important;
		}
	}

	/* CSS to limit image width in documentation */
	.main-content img {
		max-width: 80%;
		height: auto;
		display: block;
		margin-left: auto;
		margin-right: auto;
	}

	/* Add a subtle border and shadow for better visibility */
	.main-content img {
		border: 1px solid #e0e0e0;
		border-radius: 4px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		padding: 5px;
	}

	/* Make sure images are responsive on smaller screens */
	@media (max-width: 768px) {
		.main-content img {
			max-width: 100%;
		}
	}

	.center {
		display: block;
		margin-left: auto;
		margin-right: auto;
	}

	/* Removed duplicates - now handled by professional sidebar styles below */

	/* Ensure active tab is visible */
	.md-tabs__link--active {
		color: var(--md-accent-fg-color) !important;
		opacity: 1;
	}

	/* Fix for dark mode tabs */
	[data-md-color-scheme="slate"] .md-tabs__link {
		color: rgba(255, 255, 255, 0.87) !important;
	}

	[data-md-color-scheme="slate"] .md-tabs__link--active {
		color: #ffffff !important;
	}

	/* CSS for footer */
	/* === Footer styling === */

	/* Light mode: custom background */
	[data-md-color-scheme="default"] .md-footer-meta,
	[data-md-color-scheme="light"] .md-footer-meta {
	background-color: #16293F;
	}

	/* Dark mode: match theme background */
	[data-md-color-scheme="slate"] .md-footer-meta {
	background-color: var(--md-default-bg-color);
	}

	/* Footer border */
	.md-footer-meta {
	border-top: 1px solid var(--md-default-fg-color--light);
	}

	/* Social icons */
	.footer-social-icons .footer-icon {
	fill: var(--md-footer-icon-color, currentColor);
	transition: fill 0.2s ease;
	}

	.footer-social-icons .footer-icon:hover {
	fill: var(--md-footer-icon-color-hover, #6e6e6e);
	}

	[data-md-color-scheme="slate"] .footer-social-icons .footer-icon {
	fill: var(--footer-color-custom);
	}

	[data-md-color-scheme="slate"] .footer-social-icons .footer-icon:hover {
	fill: #ffffff;
	}

	/* === Logo switching === */
	.footer-logo-img {
	width: 180px;
	height: auto;
	display: none;
	}

	.logo-light {
	display: inline;
	}

	[data-md-color-scheme="slate"] .logo-light {
	display: none;
	}

	[data-md-color-scheme="slate"] .logo-dark {
	display: inline;
	}

	[data-md-color-scheme="default"] .logo-dark,
	[data-md-color-scheme="light"] .logo-dark {
	display: none;
	}

	/* Extra space on the left side of the logo */
	.padded-logo {
	padding-left: 2rem;
	}

	/* === Responsive stacking === */
	@media (max-width: 600px) {
	.md-footer-meta .footer-content {
		flex-direction: column;
		text-align: left;
	}

	.md-footer-meta .footer-links,
	.md-footer-meta .footer-logo {
		text-align: left !important;
		justify-content: left;
	}

	.md-footer-meta .footer-links p {
		text-align: left;
	}
	}

	.annotated-image-container {
		position: relative;
		margin: 1.5em auto;
		/* Auto margin centers it */
		width: max-content;
		/* Only as wide as needed */
		max-width: 100%;
		/* Won't overflow container */
		display: block;
	}

	.annotated-image {
		width: 100%;
		height: auto;
		max-height: 80vh;
		/* Ensures image doesn't exceed viewport height */
		object-fit: contain;
		/* Maintains aspect ratio while fitting in container */
		display: block;
	}

	.annotation-tooltip {
		/* Add this to position tooltips better */
		max-width: min(300px, 80vw);
		transform: translateX(-50%);
	}

	/* Admonitions (note, tip, etc.) */
	.md-typeset .admonition {
		border-left: 4px solid var(--md-accent-fg-color);
		border-radius: 4px;
	}

	.md-typeset .admonition-title {
		background-color: #ffeeea;
	}



	:root {
		--md-admonition-icon--aletyx: url('/assets/images/A-aletyx.svg');
	}

	.md-typeset .admonition.aletyx,
	.md-typeset details.aletyx {
		border-color: #16293F;
	}

	.md-typeset .aletyx>.admonition-title,
	.md-typeset .aletyx>summary {
		background-color: #16293F33;
	}

	.md-typeset .aletyx>.admonition-title::before,
	.md-typeset .aletyx>summary::before {
		background-color: #16293F;
		-webkit-mask-image: var(--md-admonition-icon--aletyx);
		mask-image: var(--md-admonition-icon--aletyx);
	}

	/* Change headerlink color */
	.md-typeset .headerlink {
		color: #16293F33;

	}

	.md-typeset h1:hover .headerlink,
	.md-typeset h2:hover .headerlink,
	.md-typeset h3:hover .headerlink,
	.md-typeset h4:hover .headerlink,
	.md-typeset h5:hover .headerlink,
	.md-typeset h6:hover .headerlink {
		color: #16293F;

	}

	/* Dark mode adjustments */
	[data-md-color-scheme="slate"] .md-typeset .headerlink {
		color: #FC764C33;

	}

	[data-md-color-scheme="slate"] .md-typeset h1:hover .headerlink,
	[data-md-color-scheme="slate"] .md-typeset h2:hover .headerlink,
	[data-md-color-scheme="slate"] .md-typeset h3:hover .headerlink,
	[data-md-color-scheme="slate"] .md-typeset h4:hover .headerlink,
	[data-md-color-scheme="slate"] .md-typeset h5:hover .headerlink,
	[data-md-color-scheme="slate"] .md-typeset h6:hover .headerlink {
		color: #FFFFFF;

	}

	/* Change headerlink color */
	.md-typeset .headerlink {
	color: #16293F33;
	}

	/* Headerlink hover color */
	.md-typeset h1:hover .headerlink,
	.md-typeset h2:hover .headerlink,
	.md-typeset h3:hover .headerlink,
	.md-typeset h4:hover .headerlink,
	.md-typeset h5:hover .headerlink,
	.md-typeset h6:hover .headerlink {
	color: #16293F;
	}

	/* Dark mode headerlink adjustments */
	[data-md-color-scheme="slate"] .md-typeset .headerlink {
	color: #FC764C
	}

	[data-md-color-scheme="slate"] .md-typeset h1:hover .headerlink,
	[data-md-color-scheme="slate"] .md-typeset h2:hover .headerlink,
	[data-md-color-scheme="slate"] .md-typeset h3:hover .headerlink,
	[data-md-color-scheme="slate"] .md-typeset h4:hover .headerlink,
	[data-md-color-scheme="slate"] .md-typeset h5:hover .headerlink,
	[data-md-color-scheme="slate"] .md-typeset h6:hover .headerlink {
	color: #FFFFFF
	}

	/* Replace header logo with your custom logo */
	.md-header__button.md-logo img,
	.md-header__button.md-logo svg {
	display: none; /* Hide the default logo */
	}

	.md-header__button.md-logo::before {
	content: "";
	display: block;
	width: 32px;
	height: 32px;
	background-color: #ffffff; /* White logo on purple header */
	-webkit-mask-image: var(--md-admonition-icon--aletyx);
	mask-image: var(--md-admonition-icon--aletyx);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	}

	/* Adjust footer logo if needed */
	.md-footer-logo {
	padding: 1rem 0;
	}

	.md-footer-logo__link {
	position: relative;
	width: 32px;
	height: 32px;
	margin: 0 auto;
	}

	.md-footer-logo__link img,
	.md-footer-logo__link svg {
	display: none;
	}

	.md-footer-logo__link::before {
	content: "";
	position: absolute;
	width: 32px;
	height: 32px;
	background-color: #ffffff; /* White logo in footer */
	-webkit-mask-image: var(--md-admonition-icon--aletyx);
	mask-image: var(--md-admonition-icon--aletyx);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	}

	/* Fix for header visibility with table of contents and banner */
	.md-header,
	.md-tabs {
		z-index: 25 !important;
		/* Higher than any other z-index */
		position: sticky !important;
		top: 0 !important;
	}

	/* Account for the banner if present */
	body.banner-visible .md-header {
		top: 36px !important;
		/* Adjust based on your banner height */
	}

	body.banner-visible .md-tabs {
		top: 76px !important;
		/* Header height + banner height */
	}

	/* Ensure TOC doesn't overlap header */
	.md-sidebar--secondary {
		position: sticky;
		top: 0 !important;
		height: 100vh;
		padding-top: 4.2rem !important;
		/* Add space for header */
		z-index: 20;
	}

	/* Fix possible scrolling issues */
	html,
	body {
		scroll-padding-top: 4.2rem;
	}

	body.banner-visible {
		scroll-padding-top: 7.2rem;
	}

	/* Prevent overlap with sticky header on anchor jumps */
	:target::before {
		content: "";
		display: block;
		height: 4.2rem;
		margin-top: -4.2rem;
	}

	body.banner-visible :target::before {
		height: 7.2rem;
		margin-top: -7.2rem;
	}

	/* Make sure banner is above everything else */
	.top-banner {
		z-index: 300 !important;
		position: sticky !important;
		top: 0 !important;
	}

	/* Responsive sidebar handling specifically for homepage */
	@media screen and (min-width: 960px) and (max-width: 1219px) {

		/* Ensure primary sidebar is visible on homepage */
		.page-index .md-sidebar--primary {
			display: block !important;
		}

		/* Hide only the secondary (TOC) sidebar on homepage */
		.page-index .md-sidebar--secondary {
			display: none !important;
		}

		/* Adjust main content margins */
		.page-index .md-main__inner {
			margin-left: var(--md-sidebar-width) !important;
			margin-right: 0 !important;
		}

		/* Ensure hero banner takes full width */
		.page-index .md-hero {
			width: 100%;
		}
	}

	/* For screens 1220px and above */
	@media screen and (min-width: 1220px) {



		.page-index .md-main__inner {
			margin-left: 0 !important;
			margin-right: 0 !important;
		}
	}

	@media screen and (min-width: 1220px) {

		/* Target the home page content */
		.page-index .home-page {
			max-width: 1200px;
			margin: 0 auto;
			padding: 0 20px;
		}
	}

	.page-index .md-button:not(md-button--primary) {
			background-color: linear-gradient(135deg, #EDEFF7 0%, #edebf5 40%);
				/* Cloud color */
				color: var(--md-accent-bg-color);
				/* Dark navy */
				border: 1px solid #D3D6E0;
				/* Smoke color */
	}



	/* Fix for search dialog appearing behind header
	Add this to the end of your override.css file */

	/* Ensure search elements have higher z-index than header */
	.md-search__overlay {
		z-index: 31 !important;
		/* Higher than header z-index */
	}

	.md-search__form {
		z-index: 32 !important;
	}

	.md-search__output {
		z-index: 32 !important;
	}

	/* Search results container */
	.md-search-result {
		z-index: 32 !important;
	}

	/* Make sure the header has a consistent z-index value */
	.md-header {
		z-index: 30 !important;
		/* Lower than search elements */
	}

	/* Make search dialog wider for better visibility */
	.md-search__inner {
		width: 24rem !important;
		z-index: 32 !important;
	}

	/* Ensure close button works properly */
	.md-search__icon[for="__search"] {
		z-index: 33 !important;
		/* Highest z-index to be clickable */
	}

	/* Ensure input area is working */
	.md-search__input {
		z-index: 32 !important;
	}

	/* Handle any header sub-elements that might need adjusted z-index */
	.md-header__button,
	.md-header__source,
	.md-header__title {
		z-index: 29 !important;
		/* Lower than header */
	}

	/* Fix for top banner if present */
	.top-banner {
		z-index: 35 !important;
		/* Higher than everything */
	}

	/* Ensure tab bar is properly visible but below search */
	.md-tabs {
		z-index: 28 !important;
		/* Below header */
	}

	/* Fix for any existing sidebar issues */
	.md-sidebar {
		z-index: 20 !important;
		/* Below header and search */
	}

	/* ===== HOME NAVIGATION FIXES ===== */
	/* Hide the Home navigation element on homepage only */
	body.page-index .md-nav[data-md-level="0"]>.md-nav__list>.md-nav__item:first-child,
	body[data-page-path="index"] .md-nav[data-md-level="0"]>.md-nav__list>.md-nav__item:first-child,
	body[data-page-path=""] .md-nav[data-md-level="0"]>.md-nav__list>.md-nav__item:first-child,
	.page-index .md-nav__item--home,
	body[data-page-path="index"] .md-nav__item--home,
	body[data-page-path=""] .md-nav__item--home {
		display: none !important;
		visibility: hidden !important;
	}

	/* ===== SEARCH DIALOG Z-INDEX FIXES ===== */
	/* Ensure search elements appear above header */
	.md-search__overlay {
		z-index: 31 !important;
	}

	.md-search__form {
		z-index: 32 !important;
	}

	.md-search__output {
		z-index: 32 !important;
	}

	.md-search-result {
		z-index: 32 !important;
	}

	.md-search__inner {
		z-index: 32 !important;
	}

	.md-search__input {
		z-index: 32 !important;
	}

	.md-search__icon {
		z-index: 33 !important;
	}

	/* Adjusted z-index for header elements */
	.md-header {
		z-index: 30 !important;
	}

	.md-header__button,
	.md-header__source,
	.md-header__title {
		z-index: 29 !important;
	}

	.md-tabs {
		z-index: 28 !important;
	}

	.top-banner {
		z-index: 35 !important;
	}



	/* ===== DARK MODE SEARCH STYLING ===== */
	/* Search results text color in dark mode */
	[data-md-color-scheme="slate"] .md-search-result__article {
		color: #FC764C !important;
	}

	[data-md-color-scheme="slate"] .md-search-result__link:hover,
	[data-md-color-scheme="slate"] .md-search-result__link:focus {
		background-color: rgba(252, 118, 76, 0.1) !important;
	}

	/* Ensure search result links are orange in dark mode */
	[data-md-color-scheme="slate"] .md-search-result__link {
		color: #FFFFFF !important;
	}

	[data-md-color-scheme="slate"] .md-search-result__teaser {
		color: #e0e0e0 !important;
	}

	[data-md-color-scheme="slate"] .md-search-result__meta {
		color: rgba(255, 255, 255, 0.6) !important;
	}

	/* ===== CARD LAYOUT FOR HOMEPAGE ===== */
	/* Ensure uniform card sizes and centering on homepage */
	body.page-index .feature-grid,
	body.page-index .card-grid,
	body.page-index .home-features,
	body[data-page-path="index"] .feature-grid,
	body[data-page-path="index"] .card-grid,
	body[data-page-path="index"] .home-features {
		display: grid !important;
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
		gap: 24px !important;
		width: 100% !important;
		max-width: 1200px !important;
		margin: 2rem auto !important;
		padding: 0 1rem !important;
	}

	/* Card sizing and consistency */
	.feature-card,
	.card {
		height: 100% !important;
		min-height: 300px !important;
		display: flex !important;
		flex-direction: column !important;
		justify-content: flex-start !important;
		padding: 1.5rem !important;
		box-sizing: border-box !important;
		border-radius: 8px !important;
		text-align: center !important;
	}

	/* Center card content */
	.feature-card h3,
	.card h3 {
		text-align: center !important;
		margin-top: 1rem !important;
		margin-bottom: 0.75rem !important;
	}

	.feature-card p,
	.card p {
		text-align: center !important;
		flex-grow: 1 !important;
		margin-bottom: 1rem !important;
	}

	/* Center card icons */
	.feature-icon,
	.card-icon {
		display: flex !important;
		justify-content: center !important;
		align-items: center !important;
		margin-left: auto !important;
		margin-right: auto !important;
		margin-bottom: 1rem !important;
	}

	/* Push buttons to bottom */
	.feature-card a.md-button,
	.card a.md-button {
		margin-top: auto !important;
		margin-bottom: 0 !important;
		align-self: center !important;
	}

	/* ===== FOOTER IMAGE BORDER EXEMPTIONS ===== */
	/* Remove borders from footer images */
	.footer-logo-img,
	.md-footer img,
	.md-footer-meta img,
	[class*="footer"] img,
	.footer-content img,
	.footer-logo img {
		border: none !important;
		padding: 0 !important;
		border-radius: 0 !important;
		box-shadow: none !important;
	}

	/* ===== HIDE AUTOMATED REMINDERS ===== */
	/* Hide search reminders and automated messages */
	.search_reminders,
	.automated_reminder_from_anthropic,
	.userStyle,
	[class*="search_reminders"],
	[class*="automated_reminder"],
	[class*="userStyle"] {
		display: none !important;
		visibility: hidden !important;
		height: 0 !important;
		width: 0 !important;
		position: absolute !important;
		left: -9999px !important;
		top: -9999px !important;
		overflow: hidden !important;
		opacity: 0 !important;
	}

	/* ===== RESPONSIVE ADJUSTMENTS ===== */
	/* Responsive card grid for different screen sizes */
	@media screen and (max-width: 1024px) {

		body.page-index .feature-grid,
		body.page-index .card-grid,
		body.page-index .home-features,
		body[data-page-path="index"] .feature-grid,
		body[data-page-path="index"] .card-grid,
		body[data-page-path="index"] .home-features {
			grid-template-columns: repeat(2, 1fr) !important;
		}
	}

	@media screen and (max-width: 768px) {

		body.page-index .feature-grid,
		body.page-index .card-grid,
		body.page-index .home-features,
		body[data-page-path="index"] .feature-grid,
		body[data-page-path="index"] .card-grid,
		body[data-page-path="index"] .home-features {
			grid-template-columns: 1fr !important;
		}
	}
/* ===== SEARCH STYLING FIXES ===== */
/* Change mark highlighting in search results to orange in dark mode */
[data-md-color-scheme="slate"] mark,
[data-md-color-scheme="slate"] .md-search-result mark,
[data-md-color-scheme="slate"] .md-typeset mark {
	color: #FC764C !important;
	background: transparent !important;
	text-decoration: none !important;
	font-weight: bold !important;
}

/* Make search results use orange for links in dark mode */
[data-md-color-scheme="slate"] .md-search-result__article,
[data-md-color-scheme="slate"] .md-search-result__link {
	color: #FFFFFF !important;
}

[data-md-color-scheme="slate"] .md-search-result__link:hover,
[data-md-color-scheme="slate"] .md-search-result__link:focus {
	background-color: rgba(252, 118, 76, 0.1) !important;
}

/* Fix search result content text color in dark mode */
[data-md-color-scheme="slate"] .md-search-result__teaser {
	color: #e0e0e0 !important;
}

[data-md-color-scheme="slate"] .md-search-result__meta {
	color: rgba(255, 255, 255, 0.6) !important;
}


/* ===== HOME NAVIGATION HIDING ===== */
/* Only hide home navigation on page-index */
body.page-index .md-nav__item--home,
body.page-index .md-nav__item a[href="/"],
body.page-index .md-nav__item a[href$="index.html"],
body.page-index .md-nav__item a[href="#home"],
body[data-page-path="index"] .md-nav__item--home,
body[data-page-path="index"] .md-nav__item a[href="/"],
body[data-page-path="index"] .md-nav__item a[href$="index.html"],
body[data-page-path="index"] .md-nav__item a[href="#home"] {
	display: none !important;
}

/* ===== SEARCH UI Z-INDEX FIXES ===== */
/* Ensure search UI appears above header */
.md-search__inner {
	z-index: 32 !important;
}

.md-search__overlay {
	z-index: 31 !important;
}

.md-search__form {
	z-index: 32 !important;
}

.md-search__output {
	z-index: 32 !important;
}

/* Position the header at appropriate z-index */
.md-header {
	z-index: 30 !important;
}

.md-tabs {
	z-index: 28 !important;
}

/* Fix for any header buttons */
.md-header__button {
	z-index: 33 !important;
}

/* ===== HIDE AUTOMATED REMINDERS ===== */
/* Hide search reminders and automated messages */
.search_reminders,
.automated_reminder_from_anthropic,
.userStyle,
[class*="search_reminders"],
[class*="automated_reminder"],
[class*="userStyle"] {
	display: none !important;
	visibility: hidden !important;
	height: 0 !important;
	width: 0 !important;
	position: absolute !important;
	left: -9999px !important;
	top: -9999px !important;
	overflow: hidden !important;
	opacity: 0 !important;
}

/* ===== RESPONSIVE ADJUSTMENTS ===== */
@media (max-width: 1024px) {
	.feature-cards {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

@media (max-width: 768px) {
	.feature-cards {
		grid-template-columns: 1fr !important;
	}
}

.hero-header {
	width: 100vw !important;
	max-width: 100vw !important;
	position: relative !important;
	left: 50% !important;
	right: 50% !important;
	margin-left: -50vw !important;
	margin-right: -50vw !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	box-sizing: border-box !important;
}

/* Hero header section with consistent styling across modes */
.hero-header {
	text-align: center;
	padding: 20px 20px;
	background: linear-gradient(135deg, var(--hero-gradient-start) 0%, var(--hero-gradient-end) 100%);
	color: white;
	position: relative;
	width: 100vw;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	margin-bottom: 10px;
	box-sizing: border-box;
	min-height: 120px;
	z-index: 250;
	/* Higher than sidebars (200) */
}

/* Add media query for screens below 1220px */
@media (max-width: 1219px) {
	.hero-header {
		z-index: 250;
		/* Keep high z-index for smaller screens too */
	}
}
/* Force the dark mode to use the exact same styling with !important */
[data-md-color-scheme="slate"] .hero-header {
	background: linear-gradient(135deg, var(--hero-gradient-start) 0%, var(--hero-gradient-end) 100%) !important;
	color: white !important;
	padding: 10px 10px !important;
	/* Match the light mode change */
	min-height: 100px !important;
	/* Match the light mode change */
	margin-bottom: 10px !important;
	/* Match the light mode change */


}

/* Ensure text elements remain visible in dark mode */
[data-md-color-scheme="slate"] .hero-header h1,
[data-md-color-scheme="slate"] .hero-header p,
[data-md-color-scheme="slate"] .hero-header .md-button {
	color: white !important;
}

/* Fix button styling for dark mode */
[data-md-color-scheme="slate"] .hero-header .md-button--primary {
	background-color: #FC764C !important;
	color: white !important;
	border-color: #FC764C !important;
}

[data-md-color-scheme="slate"] .hero-header .md-button:not(.md-button--primary) {
	background-color: transparent !important;
	color: white !important;
	border-color: rgba(255, 255, 255, 0.5) !important;
}

/* Ensure whats-new section is full width
[data-md-color-scheme="slate"]*/ .whats-new-section {
	width: 100vw !important;
	max-width: 100vw !important;
	position: relative !important;
	left: 50% !important;
	right: 50% !important;
	margin-left: -50vw !important;
	margin-right: -50vw !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	box-sizing: border-box !important;
	z-index: 250; /* Higher than sidebars (200) */
}

/* Special fix for screens above 1220px */
@media screen and (min-width: 1220px) {
	.hero-header {
		min-height: 100px;
		padding: 10px 10px;
	}

	[data-md-color-scheme="slate"] .hero-header {
		min-height: 100px !important;
		background: linear-gradient(135deg, var(--hero-gradient-start) 0%, var(--hero-gradient-end) 100%) !important;
		padding: 10px 10px !important;
	}
}

/* Responsive adjustments */
@media screen and (max-width: 1024px) {
	.feature-cards {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

@media screen and (max-width: 768px) {
	.hero-header {
		padding: 30px 10px;
	}

	.hero-header h1 {
		font-size: 2rem;
	}

	.hero-header p {
		font-size: 1rem;
	}

	.feature-cards {
		grid-template-columns: 1fr !important;
	}
}

.next-step-card .md-button,
.next-step-card .md-button.md-button--primary {
	display: inline-block !important;
	width: auto !important;
	max-width: fit-content !important;
}

/* Adjust card grids to better fill available space */
.benefits-grid,
.feature-grid {
	display: grid;
	gap: 1.2rem;
	margin: 2rem 0;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	width: 100%;
}

/* Ensure cards maintain an appropriate size even on very large screens */
@media (min-width: 1600px) {

	.benefits-grid,
	.feature-grid {
		grid-template-columns: repeat(4, 1fr);
		max-width: 1600px;
		margin-left: auto;
		margin-right: auto;
	}
}

/* For smaller screens, allow more flexibility */
@media (max-width: 900px) {

	.benefits-grid,
	.feature-grid {
		grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	}
}

/* On very small screens, use a single column layout */
@media (max-width: 480px) {

	.benefits-grid,
	.feature-grid {
		grid-template-columns: 1fr;
	}
}

[data-md-color-scheme="slate"] {
	--md-primary-fg-color: #0D1B2A !important;
	--md-primary-fg-color--light: #0D1B2A !important;
	--md-primary-fg-color--dark: #0D1B2A !important;
	--md-accent-fg-color: #FC764C !important;
	/* Keep accent color as orange in dark mode */

	/* Card colors */
	--card-bg-color: #1e1e2e !important;
	--card-text-color: #e0e0e0 !important;
	--card-border-color: #444444 !important;

	/* Fix for link colors - this is what makes links stay orange in dark mode */
	--md-typeset-a-color: #FC764C !important;
}

/* Fix for feature cards in dark mode */
[data-md-color-scheme="slate"] .feature-card {
	background-color: var(--card-bg-color) !important;
	color: var(--card-text-color) !important;
	border-color: var(--card-border-color) !important;
}

/* Fix for card headings in dark mode */
[data-md-color-scheme="slate"] .feature-card h3 {
	color: white !important;
}

/* Keep feature highlight text orange in dark mode */
[data-md-color-scheme="slate"] .feature-card .feature-highlight {
	color: var(--md-accent-fg-color, #FC764C) !important;
}

/* Fix the paragraph text in dark mode */
[data-md-color-scheme="slate"] .feature-card p {
	color: var(--card-text-color) !important;
}

/* Ensure list items are visible in dark mode */
[data-md-color-scheme="slate"] .feature-card li,
[data-md-color-scheme="slate"] .feature-card b {
	color: var(--card-text-color) !important;
}

/* Fix links in dark mode to ALWAYS be orange */
[data-md-color-scheme="slate"] a:not(.md-button):not(.card-link ),
[data-md-color-scheme="slate"] .feature-card a:not(.card-link) {
	color: var(#FFFFFF, #FC764C) !important;
}

/* Fix icon glow in dark mode */
[data-md-color-scheme="slate"] .feature-card:hover img.feature-icon {
	filter: drop-shadow(0 0 8px var(--md-accent-fg-color, #FC764C)) !important;
}

/* Fix card buttons in dark mode */
[data-md-color-scheme="slate"] .feature-card .card-link {
	background-color: var(--md-accent-fg-color, #FC764C) !important;
	color: white !important;
}

[data-md-color-scheme="slate"] .feature-card .card-link:hover {
	background-color: #e05e36 !important;
}

/* Fix "what's new" section in dark mode */
[data-md-color-scheme="slate"] .whats-new-section {
	color: #e4e4e7 !important;
}

[data-md-color-scheme="slate"] .whats-new-section h2 {
	color: white !important;
}

/* Fix buttons in the "what's new" section */
[data-md-color-scheme="slate"] .md-button--primary {
	background-color: var(--md-accent-fg-color, #FC764C) !important;
	color: white !important;
	border-color: var(--md-accent-fg-color, #FC764C) !important;
}

[data-md-color-scheme="slate"] .md-button:not(.md-button--primary) {
	border-color: rgba(255, 255, 255, 0.3) !important;
	color: white !important;
}
.use-case-card .use-case-icon {
	max-width: 64px !important;
	max-height: 64px !important;
	width: auto !important;
	height: auto !important;
}
.use-case-card {
	padding: 24px;
	border-radius: 8px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
	display: flex;
	flex-direction: column;
}

.card-footer {
	margin-top: auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.use-case-icon {
	max-width: 64px;
	max-height: 64px;
	width: auto;
	height: auto;
}

.read-more {
	font-weight: 500;
	text-decoration: none;
}

/* Make benefit card icons bigger without affecting page-index */
.benefit-card .benefit-icon i.material-icons {
	font-size: 64px !important;
	/* Increase from default size */
	display: block !important;
	margin-bottom: 16px !important;
}

/* Ensure proper spacing and alignment */
.benefit-card .benefit-icon {
	text-align: center !important;
	margin-bottom: 16px !important;
	min-height: 64px !important;
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
}

/* Exclude page-index images from these changes */
body.page-index .benefit-icon i.material-icons {
	font-size: inherit !important;
}
/* Prevent orphaned cards in benefit-grid and feature-cards */
@media screen and (min-width: 741px) and (max-width: 903px) {

	.benefits-grid:not(body.page-index .benefits-grid),
	.feature-grid:not(body.page-index .feature-grid),
	.feature-cards:not(body.page-index .feature-cards) {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

/* Add more specific breakpoints for better card distribution */
@media screen and (min-width: 904px) and (max-width: 1200px) {

	.benefits-grid:not(body.page-index .benefits-grid),
	.feature-grid:not(body.page-index .feature-grid),
	.feature-cards:not(body.page-index .feature-cards) {
		grid-template-columns: repeat(3, 1fr) !important;
	}
}

/* Prevent odd numbers of cards from creating orphaned rows */
@media screen and (min-width: 1201px) {

	.benefits-grid:not(body.page-index .benefits-grid),
	.feature-grid:not(body.page-index .feature-grid),
	.feature-cards:not(body.page-index .feature-cards) {
		grid-template-columns: repeat(4, 1fr) !important;
		/* Ensures if you have 4 or 8 cards, they'll distribute evenly */
	}
}

/* For mobile, ensure clean single column */
@media screen and (max-width: 740px) {

	.benefits-grid:not(body.page-index .benefits-grid),
	.feature-grid:not(body.page-index .feature-grid),
	.feature-cards:not(body.page-index .feature-cards) {
		grid-template-columns: 1fr !important;
	}
}

/* Larger deployment icons */
.deployment-card img,
.deployment-card svg {
	width: 96px;
	height: 96px;
	margin: 0 auto 24px;
	display: block;
}

/* Dark mode support */
[data-md-color-scheme="slate"] .deployment-card svg {
	stroke: #FC764C;
}

[data-md-color-scheme="default"] .deployment-card svg {
	stroke: #16293F;
}

/* ==========================================================================
   Card Grids & Components
   ========================================================================== */

/* Standard grid and existing cards - maintain original page-index behavior */
.grid {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: 24px !important;
	width: 100% !important;
	border: none;
}

/* Homepage specific card grids */
body.page-index .feature-grid,
body.page-index .card-grid,
body.page-index .home-features,
body[data-page-path="index"] .feature-grid,
body[data-page-path="index"] .card-grid,
body[data-page-path="index"] .home-features {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: 24px !important;
	width: 100% !important;
	max-width: 1200px !important;
	margin: 2rem auto !important;
	padding: 0 1rem !important;
}

/* Responsive adjustments for page-index cards */
@media screen and (max-width: 1024px) {
	.grid {
		grid-template-columns: repeat(1, 1fr) !important;
	}

	body.page-index .feature-grid,
	body.page-index .card-grid,
	body.page-index .home-features,
	body[data-page-path="index"] .feature-grid,
	body[data-page-path="index"] .card-grid,
	body[data-page-path="index"] .home-features {
		grid-template-columns: repeat(1, 1fr) !important;
	}
}

@media screen and (max-width: 768px) {

	.grid,
	body.page-index .feature-grid,
	body.page-index .card-grid,
	body.page-index .home-features,
	body[data-page-path="index"] .feature-grid,
	body[data-page-path="index"] .card-grid,
	body[data-page-path="index"] .home-features {
		grid-template-columns: 1fr !important;
	}
}

/* Existing card styles - maintain for page-index */
.feature-card,
.card {
	height: 100% !important;
	min-height: 300px !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: flex-start !important;
	padding: 1.5rem !important;
	box-sizing: border-box !important;
	border-radius: 8px !important;
	border: 1px solid #e0e0e0 !important;
	text-align: center !important;
	min-width: 0 !important;
}

.feature-card h3,
.card h3 {
	text-align: center !important;
	margin-top: 1rem !important;
	margin-bottom: 0.75rem !important;
}

.feature-card p,
.card p {
	text-align: center !important;
	flex-grow: 1 !important;
	margin-bottom: 1rem !important;
}

.feature-icon,
.card-icon {
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	margin-left: auto !important;
	margin-right: auto !important;
	margin-bottom: 1rem !important;
}

.feature-card a.md-button,
.card a.md-button {
	margin-top: auto !important;
	margin-bottom: 0 !important;
	align-self: center !important;
}

/* Firefox specific fix */
@-moz-document url-prefix() {
	.grid {
		grid-template-columns: repeat(3, 1fr) !important;
	}
}

/* ==========================================================================
   NEW: Path, Use Case, and Benefit Cards
   ========================================================================== */

/* Path cards container */
.path-grid {
	display: grid;
	gap: 24px;
	width: 100%;
	max-width: 1200px;
	margin: 2rem auto;
	padding: 0 20px;
}

/* Use case and benefit grids */
.use-case-grid,
.benefit-grid {
	display: grid;
	gap: 1.5rem;
	width: 100%;
	max-width: 1200px;
	margin: 2rem auto;
	padding: 0 1.5rem;
}

/* Use case grid responsive breakpoints */
@media (min-width: 1200px) {

	.use-case-grid,
	.benefit-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 768px) and (max-width: 1199px) {

	.use-case-grid,
	.benefit-grid {
		grid-template-columns: repeat(1, 1fr);
	}
}

@media (max-width: 767px) {

	.use-case-grid,
	.benefit-grid {
		grid-template-columns: 1fr;
	}
}

/* New card styling */
.path-card,
.use-case-card,
.benefit-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background-color: var(--card-bg-color-light);
	border-radius: 8px;
	padding: 1.75rem 1.5rem;
	padding-top: 2.5rem;
	height: 100%;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.path-card:hover,
.use-case-card:hover,
.benefit-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Icon container positioning in top-right corner */
.path-icon,
.use-case-icon,
.benefit-icon {
	position: absolute;
	top: 1rem;
	right: 1rem;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background-color: rgba(22, 41, 63, 0.1);
	padding: 8px;
}

.path-icon img,
.path-icon svg,
.use-case-icon img,
.use-case-icon svg,
.benefit-icon img,
.benefit-icon svg {
	width: 32px !important;
	height: 32px !important;
	min-width: 32px !important;
	min-height: 32px !important;
	object-fit: contain;
}

/* Card content */
.path-card h3,
.use-case-card h3,
.benefit-card h3 {
	font-size: 1.25rem;
	font-weight: 600;
	margin-top: 0;
	margin-bottom: 0.75rem;
	padding-right: 50px;
	line-height: 1.4;
	text-align: left;
}

.path-card p,
.use-case-card p,
.benefit-card p {
	font-size: 0.95rem;
	line-height: 1.6;
	color: #FFFFFF;
	flex-grow: 1;
	margin-bottom: 1.25rem;
	text-align: left;
}

/* Button alignment */
.path-card .md-button,
.use-case-card .md-button,
.benefit-card .md-button {
	margin-top: auto;
}
/* ==========================================================================
   Use Case and Benefit Card Fixes
   ========================================================================== */

/* Use case grid with proper breakpoints */
.use-case-grid,
.benefit-grid {
	display: grid;
	gap: 1.5rem;
	width: 100%;
	max-width: 1200px;
	margin: 2rem auto;
	padding: 0 1.5rem;
	text-align: left !important;
}

/* Specific breakpoints */
@media (min-width: 1200px) {

	.use-case-grid,
	.benefit-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media (min-width: 768px) and (max-width: 1199px) {

	.use-case-grid,
	.benefit-grid {
		grid-template-columns: repeat(1, 1fr);
	}
}

@media (max-width: 767px) {

	.use-case-grid,
	.benefit-grid {
		grid-template-columns: 1fr;
	}
}

/* Fixed styling for use case and benefit cards */
.use-case-card,
.benefit-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background-color: var(--card-bg-color-light, #f5f5f5);
	border-radius: 8px;
	padding: 1.75rem 1.5rem;
	padding-top: 2.5rem;
	height: 100%;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	text-align: left !important;
}

.use-case-card h3,
.benefit-card h3 {
	font-size: 1.25rem;
	font-weight: 600;
	margin-top: 0;
	margin-bottom: 0.75rem;
	padding-right: 50px;
	line-height: 1.4;
	text-align: left !important;
}

.use-case-card p,
.benefit-card p {
	font-size: 0.95rem;
	line-height: 1.6;
	color: #444;
	flex-grow: 1;
	margin-bottom: 1.25rem;
	text-align: left !important;
}

.use-case-card .md-button,
.benefit-card .md-button {
	align-self: flex-start !important;
	margin-top: auto;
}

/* ==========================================================================
   UPDATED: Separate Benefit Card and Use Case Card Styling
   ========================================================================== */

/* Base grid styling that applies to all card types */
.card-grid-base {
	display: grid;
	gap: 24px;
	width: 100%;
	max-width: 1200px;
	margin: 2rem auto;
	padding: 0 1.5rem;
}

/* Specific benefit grid styling - completely separate from use-case grid */
.benefit-grid:not(body.page-index .benefit-grid) {
	display: grid;
	gap: 24px;
	width: 100%;
	max-width: 1200px;
	margin: 2rem auto;
	padding: 0 1.5rem;
}

/* Specific use-case grid styling - completely separate from benefit-grid */
.use-case-grid:not(body.page-index .use-case-grid) {
	display: grid;
	gap: 24px;
	width: 100%;
	max-width: 1200px;
	margin: 2rem auto;
	padding: 0 1.5rem;
}

/* Specific feature-grid styling - separate from other grid types */
.feature-grid:not(body.page-index .feature-grid) {
	display: grid;
	gap: 24px;
	width: 100%;
	max-width: 1200px;
	margin: 2rem auto;
	padding: 0 1.5rem;
}

/*
   Smart Grid Distribution Logic
   This ensures that cards are distributed evenly based on count.
   It adapts to the number of items to create balanced rows.
*/

/* 1 CARD: Always single column */
.benefit-grid:not(body.page-index .benefit-grid),
.use-case-grid:not(body.page-index .use-case-grid),
.feature-grid:not(body.page-index .feature-grid) {
	grid-template-columns: 1fr;
}

/* 2 CARDS: Two columns on larger screens, one column on smaller */
.benefit-grid:not(body.page-index .benefit-grid).card-count-2,
.use-case-grid:not(body.page-index .use-case-grid).card-count-2,
.feature-grid:not(body.page-index .feature-grid).card-count-2 {
	grid-template-columns: repeat(2, 1fr);
}

/* 3 CARDS: Three columns on larger screens, one on smaller */
.benefit-grid:not(body.page-index .benefit-grid).card-count-3,
.use-case-grid:not(body.page-index .use-case-grid).card-count-3,
.feature-grid:not(body.page-index .feature-grid).card-count-3 {
	grid-template-columns: repeat(3, 1fr);
}

/* 4 CARDS: 2x2 grid for balanced layout */
.benefit-grid:not(body.page-index .benefit-grid).card-count-4,
.use-case-grid:not(body.page-index .use-case-grid).card-count-4,
.feature-grid:not(body.page-index .feature-grid).card-count-4 {
	grid-template-columns: repeat(2, 1fr);
}

/* 5-6 CARDS: 3x2 grid for balanced layout */
.benefit-grid:not(body.page-index .benefit-grid).card-count-5,
.benefit-grid:not(body.page-index .benefit-grid).card-count-6,
.use-case-grid:not(body.page-index .use-case-grid).card-count-5,
.use-case-grid:not(body.page-index .use-case-grid).card-count-6,
.feature-grid:not(body.page-index .feature-grid).card-count-5,
.feature-grid:not(body.page-index .feature-grid).card-count-6 {
	grid-template-columns: repeat(3, 1fr);
}

/* 7-8 CARDS: 4x2 grid for balanced layout */
.benefit-grid:not(body.page-index .benefit-grid).card-count-7,
.benefit-grid:not(body.page-index .benefit-grid).card-count-8,
.use-case-grid:not(body.page-index .use-case-grid).card-count-7,
.use-case-grid:not(body.page-index .use-case-grid).card-count-8,
.feature-grid:not(body.page-index .feature-grid).card-count-7,
.feature-grid:not(body.page-index .feature-grid).card-count-8 {
	grid-template-columns: repeat(4, 1fr);
}

/*
   Responsive Design for Different Screen Sizes
   This ensures proper card distribution at different viewport widths
*/

/* Extra Large Screens (1400px+): Up to 4 columns depending on card count */
@media (min-width: 1400px) {

	/* Default to 4 columns for larger screens when no specific count class */
	.benefit-grid:not(body.page-index .benefit-grid):not([class*="card-count-"]),
	.use-case-grid:not(body.page-index .use-case-grid):not([class*="card-count-"]),
	.feature-grid:not(body.page-index .feature-grid):not([class*="card-count-"]) {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* Large Screens (1200px-1399px): Up to 3 columns */
@media (min-width: 1200px) and (max-width: 1399px) {

	/* Default to 3 columns when no specific count class */
	.benefit-grid:not(body.page-index .benefit-grid):not([class*="card-count-"]),
	.use-case-grid:not(body.page-index .use-case-grid):not([class*="card-count-"]),
	.feature-grid:not(body.page-index .feature-grid):not([class*="card-count-"]) {
		grid-template-columns: repeat(3, 1fr);
	}

	/* Override for 7-8 cards to ensure balanced layout */
	.benefit-grid:not(body.page-index .benefit-grid).card-count-7,
	.benefit-grid:not(body.page-index .benefit-grid).card-count-8,
	.use-case-grid:not(body.page-index .use-case-grid).card-count-7,
	.use-case-grid:not(body.page-index .use-case-grid).card-count-8,
	.feature-grid:not(body.page-index .feature-grid).card-count-7,
	.feature-grid:not(body.page-index .feature-grid).card-count-8 {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Medium Screens (900px-1199px): Force even distribution with 2 columns
   This is the critical range where you were seeing the 3+1 layout problem */
@media (min-width: 900px) and (max-width: 1199px) {

	/* Force ALL grids to use exactly 2 columns in this range for consistent layout */
	.benefit-grid:not(body.page-index .benefit-grid),
	.use-case-grid:not(body.page-index .use-case-grid),
	.feature-grid:not(body.page-index .feature-grid) {
		grid-template-columns: repeat(2, 1fr) !important;
		/* Important to override card count classes */
	}

	/* Special handling for 4-item grids */
	.benefit-grid:not(body.page-index .benefit-grid).card-count-4,
	.use-case-grid:not(body.page-index .use-case-grid).card-count-4,
	.feature-grid:not(body.page-index .feature-grid).card-count-4 {
		grid-template-columns: repeat(2, 1fr) !important;
	}

	/* Special handling for 3-item grids - this is your problem case */
	.benefit-grid:not(body.page-index .benefit-grid).card-count-3,
	.use-case-grid:not(body.page-index .use-case-grid).card-count-3,
	.feature-grid:not(body.page-index .feature-grid).card-count-3 {
		display: grid !important;
		grid-template-columns: repeat(3, 1fr) !important;
		grid-template-areas:
			"item1 item2 item3" !important;
	}

	/* For exactly 3 items, arrange them in single row (3 columns) */
	.benefit-grid:not(body.page-index .benefit-grid).card-count-3>*:nth-child(1),
	.use-case-grid:not(body.page-index .use-case-grid).card-count-3>*:nth-child(1),
	.feature-grid:not(body.page-index .feature-grid).card-count-3>*:nth-child(1) {
		grid-area: item1 !important;
	}

	.benefit-grid:not(body.page-index .benefit-grid).card-count-3>*:nth-child(2),
	.use-case-grid:not(body.page-index .use-case-grid).card-count-3>*:nth-child(2),
	.feature-grid:not(body.page-index .feature-grid).card-count-3>*:nth-child(2) {
		grid-area: item2 !important;
	}

	.benefit-grid:not(body.page-index .benefit-grid).card-count-3>*:nth-child(3),
	.use-case-grid:not(body.page-index .use-case-grid).card-count-3>*:nth-child(3),
	.feature-grid:not(body.page-index .feature-grid).card-count-3>*:nth-child(3) {
		grid-area: item3 !important;
	}
}

/* Small Screens (600px-899px): Adaptive layout based on card count */
@media (min-width: 600px) and (max-width: 899px) {

	/* Default to 2 columns */
	.benefit-grid:not(body.page-index .benefit-grid),
	.use-case-grid:not(body.page-index .use-case-grid),
	.feature-grid:not(body.page-index .feature-grid) {
		grid-template-columns: repeat(2, 1fr) !important;
	}

	/* For exactly 3 items, use 1 row of 3 if screen is wide enough */
	@media (min-width: 768px) and (max-width: 899px) {

		.benefit-grid:not(body.page-index .benefit-grid).card-count-3,
		.use-case-grid:not(body.page-index .use-case-grid).card-count-3,
		.feature-grid:not(body.page-index .feature-grid).card-count-3 {
			grid-template-columns: repeat(3, 1fr) !important;
		}
	}

	/* For exactly 4 items, always use 2x2 grid */
	.benefit-grid:not(body.page-index .benefit-grid).card-count-4,
	.use-case-grid:not(body.page-index .use-case-grid).card-count-4,
	.feature-grid:not(body.page-index .feature-grid).card-count-4 {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

/* Mobile Screens (below 600px): Single column */
@media (max-width: 599px) {

	.benefit-grid:not(body.page-index .benefit-grid),
	.use-case-grid:not(body.page-index .use-case-grid),
	.feature-grid:not(body.page-index .feature-grid) {
		grid-template-columns: 1fr !important;
	}
}

/*
   Card Styling - Separate styling for benefit and use-case cards
*/

/* Benefit Card specific styling */
.benefit-card:not(body.page-index .benefit-card) {
	position: relative;
	display: flex;
	flex-direction: column;
	background-color: var(--card-bg-color-light, #f5f5f5);
	border-radius: 8px;
	padding: 1.75rem 1.5rem;
	padding-top: 2.5rem;
	height: 100%;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	text-align: left !important;
}

.benefit-card:not(body.page-index .benefit-card) h3 {
	font-size: 1.25rem;
	font-weight: 600;
	margin-top: 0;
	margin-bottom: 0.75rem;
	padding-right: 50px;
	line-height: 1.4;
	text-align: left !important;
}

.benefit-card:not(body.page-index .benefit-card) p {
	font-size: 0.95rem;
	line-height: 1.6;
	color: #444;
	flex-grow: 1;
	margin-bottom: 1.25rem;
	text-align: left !important;
}

.benefit-card:not(body.page-index .benefit-card) .md-button {
	align-self: flex-start !important;
	margin-top: auto;
}

/* Use Case Card specific styling */
.use-case-card:not(body.page-index .use-case-card) {
	position: relative;
	display: flex;
	flex-direction: column;
	background-color: var(--card-bg-color-light, #f5f5f5);
	border-radius: 8px;
	padding: 1.75rem 1.5rem;
	padding-top: 2.5rem;
	height: 100%;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	text-align: left !important;
}

.use-case-card:not(body.page-index .use-case-card) h3 {
	font-size: 1.25rem;
	font-weight: 600;
	margin-top: 0;
	margin-bottom: 0.75rem;
	padding-right: 50px;
	line-height: 1.4;
	text-align: left !important;
}

.use-case-card:not(body.page-index .use-case-card) p {
	font-size: 0.95rem;
	line-height: 1.6;
	color: #444;
	flex-grow: 1;
	margin-bottom: 1.25rem;
	text-align: left !important;
}

.use-case-card:not(body.page-index .use-case-card) .md-button {
	align-self: flex-start !important;
	margin-top: auto;
}

/* Icon container positioning for both card types */
.benefit-icon:not(body.page-index .benefit-icon),
.use-case-icon:not(body.page-index .use-case-icon) {
	position: absolute;
	top: 1rem;
	right: 1rem;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background-color: rgba(22, 41, 63, 0.1);
	padding: 8px;
}

.benefit-icon:not(body.page-index .benefit-icon) img,
.benefit-icon:not(body.page-index .benefit-icon) svg,
.use-case-icon:not(body.page-index .use-case-icon) img,
.use-case-icon:not(body.page-index .use-case-icon) svg {
	width: 32px !important;
	height: 32px !important;
	min-width: 32px !important;
	min-height: 32px !important;
	object-fit: contain;
}

/* Hover effects for both card types */
.benefit-card:not(body.page-index .benefit-card):hover,
.use-case-card:not(body.page-index .use-case-card):hover {
	transform: translateY(-3px);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Dark mode support for both card types */
[data-md-color-scheme="slate"] .benefit-card:not(body.page-index .benefit-card),
[data-md-color-scheme="slate"] .use-case-card:not(body.page-index .use-case-card) {
	background-color: var(--card-bg-color, #1e1e2e) !important;
	border-color: var(--card-border-color, #444444) !important;
}

[data-md-color-scheme="slate"] .benefit-card:not(body.page-index .benefit-card) h3,
[data-md-color-scheme="slate"] .use-case-card:not(body.page-index .use-case-card) h3 {
	color: white !important;
}

[data-md-color-scheme="slate"] .benefit-card:not(body.page-index .benefit-card) p,
[data-md-color-scheme="slate"] .use-case-card:not(body.page-index .use-case-card) p {
	color: var(--card-text-color, #e0e0e0) !important;
}

/* Base styles for the benefit-grid */
.div.benefits-grid,
div.benefits-grid,
.benefits-grid {
	display: grid;
	gap: 24px;
	width: 100%;
	margin: 2rem auto;
}

/* Ensure consistent behavior for benefit cards */
.div.benefit-card,
div.benefit-card,
.benefit-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-width: 0;
	/* Prevents overflow */
}

/*
   Target the problematic layout range (tablet view)
   The exact range where the 3+1 issue appears
*/
@media (min-width: 900px) and (max-width: 1200px) {

	/* Force TWO columns in this problematic range */
	.div.benefits-grid:not(.page-index .benefits-grid),
	div.benefits-grid:not(.page-index .benefits-grid),
	.benefits-grid:not(.page-index .benefits-grid) {
		grid-template-columns: repeat(2, 1fr) !important;
	}

	/* Make sure each card takes its full space */
	.div.benefit-card:not(.page-index .benefit-card),
	div.benefit-card:not(.page-index .benefit-card),
	.benefit-card:not(.page-index .benefit-card) {
		width: 100% !important;
	}
}

/* For larger screens, allow 4 columns for benefit cards */
@media (min-width: 1201px) {

	.div.benefits-grid:not(.page-index .benefits-grid),
	div.benefits-grid:not(.page-index .benefits-grid),
	.benefits-grid:not(.page-index .benefits-grid) {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* For smaller screens, keep a single column */
@media (max-width: 899px) {

	.div.benefits-grid:not(.page-index .benefits-grid),
	div.benefits-grid:not(.page-index .benefits-grid),
	.benefits-grid:not(.page-index .benefits-grid) {
		grid-template-columns: 1fr;
	}
}

/* This fixes the 4-card case specifically */
@media (min-width: 900px) and (max-width: 1200px) {

	/* Count-specific overrides - these ensure even distribution */
	.benefits-grid.card-count-4:not(.page-index .benefits-grid.card-count-4) {
		grid-template-columns: repeat(2, 1fr) !important;
	}

	/* Force 3 cards to display in a balanced 2-column layout */
	.benefits-grid.card-count-3:not(.page-index .benefits-grid.card-count-3) {
		display: grid !important;
		grid-template-columns: repeat(2, 1fr) !important;
		grid-template-rows: auto auto !important;
		grid-template-areas:
			"card1 card2"
			"card3 card3" !important;
	}

	/* Position the cards explicitly */
	.benefits-grid.card-count-3:not(.page-index .benefits-grid.card-count-3)>*:nth-child(1) {
		grid-area: card1 !important;
	}

	.benefits-grid.card-count-3:not(.page-index .benefits-grid.card-count-3)>*:nth-child(2) {
		grid-area: card2 !important;
	}

	.benefits-grid.card-count-3:not(.page-index .benefits-grid.card-count-3)>*:nth-child(3) {
		grid-area: card3 !important;
	}
}
/*
   Ultra-minimal fix for the benefit cards 3+1 issue
   Just add this CSS to your stylesheet
*/

/* Target specifically the problem range you identified in your screenshot */
@media (min-width: 905px) and (max-width: 1243px) {

	/* Force exactly 2 columns for benefits-grid in this range */
	.benefits-grid:not(.page-index .benefits-grid),
	div.benefits-grid:not(.page-index .benefits-grid) {
		display: grid !important;
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 24px !important;
	}

	/* Ensure cards take full width of their grid cell */
	.benefit-card:not(.page-index .benefit-card),
	div.benefit-card:not(.page-index .benefit-card) {
		width: 100% !important;
		max-width: 100% !important;
	}
}
/* ===== RESPONSIVE ADJUSTMENTS ===== */

/* Feature cards container */
.feature-cards {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
	box-sizing: border-box;
}

/* Grid layout - base styles */
.grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	width: 100%;
	margin: 20px 0;
	border: none;
}

/* Feature card styling */
.feature-card {
	border: 1px solid #16293F;
	border-radius: 8px;
	padding: 24px;
	margin: 0;
	transition: all 0.3s ease;
	background-color: white;
	text-align: center;
	cursor: pointer;
	height: 100%;
	display: flex;
	flex-direction: column;
	position: relative;
	box-sizing: border-box;
	min-width: 0;
	/* Prevent content from breaking grid */
}

/* Hero header section with consistent styling across modes */
.hero-header {
	text-align: center;
	padding: 10px 10px;
	background: linear-gradient(135deg, var(--hero-gradient-start) 0%, var(--hero-gradient-end) 100%);
	color: white;
	position: relative;
	width: 100vw;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	margin-bottom: 10px;
	box-sizing: border-box;
	min-height: 100px;
	z-index: 300;
	/* Default z-index */
}

/* Adjust z-index for smaller screens to prevent overlap */
@media (max-width: 1219px) {
	.hero-header {
		z-index: 20;
		/* Lower z-index for smaller screens */
	}
}

/* Firefox specific fix */
@-moz-document url-prefix() {
	.grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ===== RESPONSIVE GRID BREAKPOINTS ===== */

/* Standard breakpoints for regular pages */
@media screen and (max-width: 1024px) {
	.grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media screen and (max-width: 768px) {
	.grid {
		grid-template-columns: 1fr;
	}

	.hero-header {
		padding: 40px 20px;
	}

	.hero-header h1 {
		font-size: 2rem;
	}

	.hero-header p {
		font-size: 1rem;
	}
}

/* ===== FIXED GRID SYSTEM FOR 3-CARD LAYOUTS ===== */

/* Keep 3 columns in this specific range to fix the layout issues */
@media screen and (min-width: 1025px) and (max-width: 1560px) {
	.grid {
		grid-template-columns: repeat(3, 1fr);
	}

	/* Specific exception for homepage if needed */
	body.page-index .grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Prevent orphaned cards in benefit-grid and feature-cards */
@media screen and (min-width: 741px) and (max-width: 903px) {

	.benefits-grid:not(body.page-index .benefits-grid),
	.feature-grid:not(body.page-index .feature-grid),
	.feature-cards:not(body.page-index .feature-cards) {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Add more specific breakpoints for better card distribution */
@media screen and (min-width: 904px) and (max-width: 1200px) {

	.benefits-grid:not(body.page-index .benefits-grid),
	.feature-grid:not(body.page-index .feature-grid),
	.feature-cards:not(body.page-index .feature-cards) {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Prevent odd numbers of cards from creating orphaned rows */
@media screen and (min-width: 1201px) {

	.benefits-grid:not(body.page-index .benefits-grid),
	.feature-grid:not(body.page-index .feature-grid),
	.feature-cards:not(body.page-index .feature-cards) {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* For mobile, ensure clean single column */
@media screen and (max-width: 740px) {

	.benefits-grid:not(body.page-index .benefits-grid),
	.feature-grid:not(body.page-index .feature-grid),
	.feature-cards:not(body.page-index .feature-cards) {
		grid-template-columns: 1fr;
	}
}

/* ===== DARK MODE SUPPORT ===== */

/* Dark mode variables */
[data-md-color-scheme="slate"] {
	--md-primary-fg-color: #0D1B2A;
	--md-primary-fg-color--light: #0D1B2A;
	--md-primary-fg-color--dark: #0D1B2A;
	--md-accent-fg-color: #FC764C;

	/* Card colors */
	--card-bg-color: #1e1e2e;
	--card-text-color: #e0e0e0;
	--card-border-color: #444444;
}

/* Dark mode card styling */
[data-md-color-scheme="slate"] .feature-card {
	background-color: var(--card-bg-color);
	border-color: var(--card-border-color);
}

[data-md-color-scheme="slate"] .feature-card h3 {
	color: var(--card-text-color);
}

[data-md-color-scheme="slate"] .feature-card p {
	color: var(--card-text-color);
}

/* Force the dark mode to use the exact same styling with !important */
[data-md-color-scheme="slate"] .hero-header {
	background: linear-gradient(135deg, var(--hero-gradient-start) 0%, var(--hero-gradient-end) 100%);
	color: white;
	padding: 30px 10px;
	min-height: 100px;
	margin-bottom: 20px;
}

/* Ensure text elements remain visible in dark mode */
[data-md-color-scheme="slate"] .hero-header h1,
[data-md-color-scheme="slate"] .hero-header p,
[data-md-color-scheme="slate"] .hero-header .md-button {
	color: white;
}

/* ===== HEADER AND NAVIGATION FIXES ===== */

/* Fix for header visibility with table of contents and banner */
.md-header,
.md-tabs {
	z-index: 25;
	position: sticky;
	top: 0;
}

/* Ensure search elements have higher z-index than header */
.md-search__overlay {
	z-index: 31;
}

.md-search__form {
	z-index: 32;
}

.md-search__output {
	z-index: 32;
}

/* Search results container */
.md-search-result {
	z-index: 32;
}

/* Make sure the header has a consistent z-index value */
.md-header {
	z-index: 30;
}

/* Make search dialog wider for better visibility */
.md-search__inner {
	width: 24rem;
	z-index: 32;
}

/* Ensure close button works properly */
.md-search__icon[for="__search"] {
	z-index: 33;
}

/* Ensure tab bar is properly visible but below search */
.md-tabs {
	z-index: 28;
}

/* Fix for any existing sidebar issues */
.md-sidebar {
	z-index: 20;
}

/* ===== BENEFIT CARD FIXES ===== */
/* Ultra-minimal fix for the benefit cards 3+1 issue */

/* Target specifically the problem range */
@media (min-width: 905px) and (max-width: 1243px) {

	/* Force exactly 2 columns for benefits-grid in this range */
	.benefits-grid:not(.page-index .benefits-grid),
	div.benefits-grid:not(.page-index .benefits-grid) {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 24px;
	}

	/* Ensure cards take full width of their grid cell */
	.benefit-card:not(.page-index .benefit-card),
	div.benefit-card:not(.page-index .benefit-card) {
		width: 100%;
		max-width: 100%;
	}
}

/* Special handling for icon containers to ensure proper display */
.path-icon-container,
.feature-icon,
.benefit-icon i.material-icons,
.use-case-icon {
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	margin-bottom: 1rem !important;
}

/* Responsive layout fixes for tablets */
@media (min-width: 905px) and (max-width: 1243px) {

	/* Prevent cards from being squeezed too much */
	.benefit-card {
		min-height: 340px !important;
	}

	/* Force exactly 2 columns for benefits-grid in this range */
	.benefits-grid:not(.page-index .benefits-grid),
	div.benefits-grid:not(.page-index .benefits-grid) {
		display: grid !important;
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 24px !important;
	}
}

/* Path icons container positioning */
.path-icon-container {
	margin: 0 auto 24px !important;
	width: 100px !important;
	height: 100px !important;
}

		/* Top banner exceptions for dark mode */
		[data-md-color-scheme="slate"] .top-banner,
		[data-md-color-scheme="slate"] .top-banner a {
			color: #ffffff !important;
			/* White text to ensure visibility */
		}

		[data-md-color-scheme="slate"] .top-banner a:hover {
			color: #ffffff !important;
			text-decoration: underline;
		}

		/* Prevent the general dark mode link styling from affecting the banner */
		[data-md-color-scheme="slate"] a:not(.md-button):not(.top-banner a) {
			color: #FFFFFF !important;
		}
/* Top banner exceptions for dark mode - make these more specific */
[data-md-color-scheme="slate"] .top-banner a {
	color: #ffffff !important;
	font-weight: 600 !important;
}

[data-md-color-scheme="slate"] .top-banner a:hover {
	color: #ffffff !important;
	text-decoration: underline !important;
}

/* Fix the general dark mode link styling to exclude top-banner links */
[data-md-color-scheme="slate"] a:not(.md-button):not(.top-banner a):not(.card-link) {
	color:  #FFFFFF !important;
}
.md-consent {
	z-index: 300 !important;
	/* Lower value than sidebar */
}

/* Fix for table of contents scrolling - properly sticky */
.md-sidebar--secondary {
	position: sticky !important;
	top: 72px !important;
	height: calc(100vh - 72px) !important;
	overflow-y: visible !important;
	padding-top: 5 !important;
	z-index: 10 !important;
	background-color: var(--md-default-bg-color);
}

/* .md-sidebar--secondary .md-sidebar__scrollwrap {
	height: 100% !important;
	overflow-y: auto !important;
	padding-bottom: 72px !important;
	position: relative !important;
} */


/* Improve left navigation styling */
.md-nav__item .md-nav__link {
	color: rgba(0, 0, 0, 0.87) !important;
	transition: color 0.2s ease;
}

/* Section titles in left navigation */
.md-nav__item--section>.md-nav__link,
.md-nav__item--nested>.md-nav__link {
	color: #FC764C !important;
	font-weight: 600 !important;
	margin-top: 0.8rem !important;
	margin-bottom: 0.2rem !important;
}

/* Navigation link base styles */
.md-sidebar .md-nav__link {
	color: var(--sidebar-link-color) !important;
	transition: all 0.2s ease;
}

/* Indent nested items for better hierarchy */
.md-sidebar .md-nav__item .md-nav__item .md-nav__link {
	padding-left: 2rem !important;
}

.md-sidebar .md-nav__item .md-nav__item .md-nav__item .md-nav__link {
	padding-left: 3rem !important;
}

/* Active link in left navigation */
.md-sidebar .md-nav__item .md-nav__link--active {
	color: var(--sidebar-link-active) !important;
	font-weight: 600 !important;
	border-left: 3px solid var(--sidebar-active-border) !important;
	margin-left: -3px !important;
	padding-left: 10px !important;
	background-color: var(--sidebar-active-bg) !important;
	border-radius: 0 4px 4px 0 !important;
}

/* Hover effect for navigation links */
.md-sidebar .md-nav__link:not(.md-nav__link--active):hover {
	color: var(--sidebar-link-hover) !important;
	background-color: rgba(0, 0, 0, 0.03) !important;
	border-radius: 4px !important;
}

/* Section titles - Main level */
.md-sidebar .md-nav--primary > .md-nav__title,
.md-sidebar .md-nav__item--section > .md-nav__link {
	color: var(--sidebar-section-title) !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	font-size: 0.8125rem !important;
	letter-spacing: 0.05em !important;
	background-color: var(--sidebar-section-bg) !important;
	padding: 0.5rem 0.75rem !important;
	margin: 0.5rem 0 0.25rem 0 !important;
	border-radius: 4px !important;
	border-left: 3px solid var(--sidebar-section-title) !important;
}


/* Subsection titles */
.md-sidebar .md-nav__item--nested > .md-nav__link:not(.md-nav__link--active) {
	color: var(--sidebar-subsection-title) !important;
	font-weight: 600 !important;
	font-size: 0.8125rem !important;
	padding-left: 1.5rem !important;
	position: relative !important;
}

/* Keep navigation simple and always expanded */

/* Dark mode sidebar styles */
[data-md-color-scheme="slate"] .md-sidebar .md-nav__link {
	color: var(--sidebar-dark-link-color) !important;
}

[data-md-color-scheme="slate"] .md-sidebar .md-nav__item .md-nav__link--active {
	color: var(--sidebar-dark-link-active) !important;
	border-left-color: var(--sidebar-dark-active-border) !important;
	background-color: var(--sidebar-dark-active-bg) !important;
}

[data-md-color-scheme="slate"] .md-sidebar .md-nav__link:not(.md-nav__link--active):hover {
	color: var(--sidebar-dark-link-hover) !important;
	background-color: rgba(255, 255, 255, 0.05) !important;
}

/* Dark mode section titles */
[data-md-color-scheme="slate"] .md-sidebar .md-nav--primary > .md-nav__title,
[data-md-color-scheme="slate"] .md-sidebar .md-nav__item--section > .md-nav__link {
	color: var(--sidebar-dark-section-title) !important;
	background-color: var(--sidebar-dark-section-bg) !important;
	border-left-color: var(--sidebar-dark-section-title) !important;
}

[data-md-color-scheme="slate"] .md-sidebar .md-nav__item--nested > .md-nav__link:not(.md-nav__link--active) {
	color: var(--sidebar-dark-subsection-title) !important;
}

/* Dark mode arrow styling */
[data-md-color-scheme="slate"] .md-sidebar .nav-arrow {
	color: var(--sidebar-dark-link-color) !important;
}

/* Force table of contents to remain fixed */
.md-sidebar--secondary {
	will-change: transform;
	transform: translate3d(0, 0, 0);
	backface-visibility: hidden;
	perspective: 1000px;
}

/* Hide table of contents on home page */
body[data-md-page="/"] .md-sidebar--secondary,
body[data-md-page="/index.html"] .md-sidebar--secondary,
body.page-index .md-sidebar--secondary {
	display: none !important;
	z-index: 0 !important;
}

/* Add additional CSS to ensure proper scrolling in TOC */
.md-sidebar--secondary .md-sidebar__scrollwrap {
	contain: strict;
	overscroll-behavior: contain;
}

/* Handle mobile views properly - minimal changes only */
@media screen and (max-width: 76.1875em) {
	/* Reset our desktop fixed positioning for mobile */
	.md-sidebar--primary .md-nav {
		height: auto !important;
	}
	
	.md-sidebar--secondary {
		position: relative !important;
		height: auto !important;
		top: auto !important;
		right: auto !important;
	}
	
	/* Ensure content is visible */
	.md-content {
		display: block !important;
		position: relative !important;
		z-index: 1 !important;
	}
}
/* Enhanced Deployment Icon Styling */
.deployment-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 1.5rem;
	border-radius: 8px;
	border: 1px solid var(--card-border-color, #e0e0e0);
	box-shadow: var(--card-shadow, 0 2px 4px rgba(0, 0, 0, 0.1));
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	background-color: var(--card-bg-color, #fff);
	height: 100%;
}

/* Make deployment icons consistently sized and centered */
.deployment-card .deployment-icon {
	width: 64px !important;
	height: 64px !important;
	min-width: 64px !important;
	min-height: 64px !important;
	margin: 0 auto 1.25rem !important;
	display: block !important;
	object-fit: contain !important;
}

/* Fix for Docker and Local deployment icons specifically */
.deployment-card img[alt="Docker"],
.deployment-card img[alt="Local"] {
	width: 64px !important;
	height: 64px !important;
	opacity: 1 !important;
	visibility: visible !important;
}

/* Improve hover effect */
.deployment-card:hover {
	transform: translateY(-5px);
	box-shadow: var(--card-shadow-hover, 0 8px 16px rgba(0, 0, 0, 0.1));
}

/* Dark mode support */
[data-md-color-scheme="slate"] .deployment-card {
	background-color: var(--card-bg-color, #1e1e2e);
	border-color: var(--card-border-color, #444);
}

[data-md-color-scheme="slate"] .deployment-card h4 {
	color: white;
}

/* Fix for icon visibility in dark mode */
[data-md-color-scheme="slate"] .deployment-icon {
	filter: brightness(0) invert(1);
}

/* Ensure proper z-index stacking
/* .md-nav--primary>.md-nav__inner>.md-nav__list {
	z-index: 200 !important; /* High z-index for left sidebar
} */

.md-footer,
.md-footer-meta {
	z-index: 100 !important; /* Footer above content but below sidebars */
	position: relative !important;
}

.md-content {
	z-index: 10; /* Main content lowest */
}

/* Fix sidebar and footer overlap in light mode */
[data-md-color-scheme="default"] .md-nav--primary>.md-nav__inner>.md-nav__list {
	background-color: #fff !important;
	/* Solid white background in light mode */
}

/* Add proper background to left sidebar to prevent transparency issues */
.md-nav--primary>.md-nav__inner>.md-nav__list {
	background-color: var(--md-default-bg-color) !important;
}