body, html {
			margin: 0;
			padding: 5px;
			min-height: 125vh;
			font-family: Arial, sans-serif;
			font-size: 14px;
		}

		.outer-container {
			width: auto;
			max-width: 999px;
			margin: 0 auto;
			padding: 5px;
			box-sizing: border-box;
			min-height: calc(100vh - 100px); /* Adjust 50px to match your footer height */
		}

		.inner-container {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 10px;
			padding: 4px;
			border-radius: 20px;
			box-shadow: 0 0 2px rgba(0,0,0,0.1);
		}

		h1 {
			grid-column: 1 / -1;
			text-align: left;
			font-size: 1.5em;
			line-height: 0.7;
			margin: 4px 0;
		}

		.tile {
			padding: 9px;
			border-radius: 10px;
			box-shadow: 0 2px 4px rgba(0,0,0,0.1);
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			text-align: left;
			min-height: 90px;
			transition: all 0.3s ease;
		}

		.tile:hover {
			transform: translateY(-5px);
			box-shadow: 0 4px 8px rgba(0,0,0,0.15);
		}

		.tile h2 {
			font-size: 1.2em;
			line-height: 1;
			margin: 0 0 1px 0;
			text-align: left;
			width: 100%; /* Ensure the header takes full width of the tile */
			align-self: flex-start; /* Align the header to the start (left) of the flex container */
		}

		.tile p {
			font-size: 1em;
			margin: 2px;
			line-height: 1.3;
			text-align: left;
			width: 100%; /* Ensure paragraph takes full width */
			align-self: flex-start; /* Align paragraph to the start (left) of the flex container */
		}

		.button-container {
			display: flex;
			justify-content: center;
			gap: 10px;
			margin-top: 10px;
		}

		.cta-button {
			display: inline-block;
			background-color: orange;
			padding: 8px 16px;
			text-decoration: none;
			border-radius: 3px;
			font-size: 0.8em;
			color: white;
			text-align: center;
			transition: background-color 0.3s ease;
		}

		.cta-button:hover {
			background-color: darkorange;
		}

		.disclaimer {
			grid-column: 1 / -1;
			font-size: 0.9em;
			text-align: center;
			margin-top: 5px;
		}

		.tile1 { color: #000000; background-color: #e3f2fd; }  /* Very Light Blue */
		.tile2 { color: #000000; background-color: #e8f5e9; }  /* Very Light Green */
		.tile3 { color: #000000; background-color: #e1f5fe; }  /* Light Blue */
		.tile4 { color: #000000; background-color: #e0f2f1; }  /* Light Teal */
		.tile5 { color: #000000; background-color: #f1f8e9; }  /* Light Lime Green */
		.tile6 { color: #000000; background-color: #e1f5fe; }  /* Light Blue */
		.tile7 { color: #000000; background-color: #f1f8e9; }  /* Light Lime Green */
		.tile8 { color: #000000; background-color: #e8eaf6; }  /* Light Indigo */
		.tile9 { color: #000000; background-color: #e0f7fa; }  /* Light Cyan */
		.tile10 { color: #000000; background-color: #e0f2f1; } /* Light Teal */
		.tile11 { color: #000000; background-color: #e8f5e9; } /* Very Light Green */

		.leaderboard-section {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;  /* This ensures the section takes full height of its container */
		}
  
		.leaderboard p {
			margin-bottom: 0px;
			font-size: 1.3em;
			font-weight: bold;
			color: blue;
			animation: blink 4s linear infinite;
			text-align: center;
	    }
	  
	   .leaderboard table {
			width: auto;
			max-width: 400px;
			border-collapse: collapse;
			font-size: 0.8em;
			margin: 0px auto;
		}
	  
	   .leaderboard th, .leaderboard td {
			border: 1px solid #ddd;
			padding: 7px;
			text-align: center;
	   }

		.inner-container > section {
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.leaderboard table {
			width: 100%;
			border-collapse: collapse;
		}

		.leaderboard th, .leaderboard td {
			border: 1px solid #ddd;
			padding: 5px;
			text-align: center;
		}

		.leaderboard p {
			margin: 0;
			font-weight: bold;
			font-size: 1.6em;
			color: #333;
		}

		@keyframes blink {
			0% { opacity: .1; }
			25% { opacity: 0.25; }
			50% { opacity: 0.50; }
			75% { opacity: 0.75; }
			100% { opacity: 1; }
		}

		.windmill-punchline {
			color: grey;
			text-align: left;
			font-family: sans-serif;
			padding: 10px;
			margin-bottom: 5px;
		}

		.windmill-punchline h1 {
			font-size: 36px;
			text-align: left;
			margin-bottom: 5px;
			line-height: 0.5;
		}

		.windmill-punchline h1 span {
			font-style: italic;
			text-align: left;
		}

		.windmill-punchline p {
			font-size: 16px;
			text-align: left;
			margin: 0;
			line-height: 0.8;
		}

		.windmill-punchline .subtitle {
			font-size: 23px;
			color: green;
			margin: 4px 0;
			text-align: left;
		}

		.windmill-punchline .features {
			font-size: 16px;
			margin-top: 2px;
			text-align: left;
			white-space: normal;
			word-wrap: break-word;
			hyphens: auto;
		}

		.windmill-punchline .upto {
			font-size: 13px;
			text-align: left;
			vertical-align: super;
			margin-right: 1px;
		}

		body {
			min-height: 100vh;
			display: flex;
			flex-direction: column;
		}

		.outer-container {
			flex: 1;
		}

		.modal {
			position: fixed;
			z-index: 1000;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0,0,0,0.4);
			display: none;
		}

		.modal-content {
			background-color: #fefefe;
			margin: 5% auto;
			padding: 10px;
			border: 1px solid #888;
			width: 90%;
			max-width: 800px;
			height: 80%;
			box-sizing: border-box;
			position: relative;
		}

		.close {
			position: absolute;
			top: 10px;
			right: 20px;
			font-size: 28px;
			font-weight: bold;
			cursor: pointer;
			color: #aaa;
		}

		.close:hover,
		.close:focus {
			color: black;
			text-decoration: none;
		}

		#modalIframe {
			width: 100%;
			height: calc(100% - 30px);
			border: none;
		}
		
		#learnMoreModal .modal-content {
		  background-color: #fefefe;
		  margin: 5% auto;
		  padding: 20px;
		  border: 1px solid #888;
		  width: 70%;
		  max-width: 300px;
		  position: absolute;
		}

		#learnMoreVideo {
		  width: 100%;
		  height: auto;
		}

		.modal-open {
			overflow: hidden;
		}

		.video-modal .modal-content {
			background-color: #fefefe;
			margin: 5% auto;
			padding: 5px;
			border: 1px solid #888;
			width: auto;
			max-width: 90%;
			height: auto;
			display: inline-block;
			position: absolute;
			left: 45%;
			top: -10px;
			transform: translateX(-50%);
		}

		.video-modal video {
			max-width: 100%;
			height: auto;
			display: block;
		}
		.video-modal .close {
			top: -10px;
			right: -10px;
			color: #fff;
			background-color: #000;
			width: 30px;
			height: 30px;
			border-radius: 50%;
			text-align: center;
			line-height: 28px;
		}

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

			.tile {
				transform: none !important;
			}
		}

		@media screen and (max-width: 600px) {
			.windmill-punchline h1 {
				font-size: 28px;
			}

			.windmill-punchline .subtitle {
				font-size: 20px;
			}

			.windmill-punchline .features {
				font-size: 14px;
				line-height: 1.4;
			}

			.windmill-punchline .upto {
				font-size: 11px;
			}
		}