@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;1,400&family=Roboto:wght@300&display=swap');
		 
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

		body {
			font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
			background-image: url('../images/maths.png');
			background-repeat: repeat;
			background-attachment: fixed;
			/* Remove background-size to use natural size */
			min-height: 100vh;
			position: relative;
		}
		
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
            position: relative;
            z-index: 2;
        }

		header {
			padding: 0.4rem 0 1rem 0;
			text-align: center;
		}

		.logo {
			display: inline-block;
		}

		.logo img {
			height: 60px;
			width: auto;
			max-width: 200px;
		}
		
        .content {
            padding: 2rem 0;
            max-width: 600px;
        }

		h1 {
			font-family: 'EB Garamond', serif;
			font-weight: 400;
			font-size: 148px;
			color: #320a17;
			margin-bottom: 1rem;
			letter-spacing:-0.05em;
		}

		h2 {
			font-family: 'EB Garamond', serif;
			font-weight: 400;
			font-style: italic;
			font-size: 49px;
			color: #320a17;
			margin-bottom: 2rem;
			letter-spacing:-0.05em;
		}

		.description {
			font-family: 'Roboto', sans-serif;
			font-weight: 500;
			font-size: 19px;
			color: #000;
			line-height:1.5em;
		}

		.availability {
			font-family: 'Roboto', sans-serif;
			font-weight: 500;
			font-size: 19px;
			color: #000;
			line-height:1.5em;
		}
		
		strong  {
				font-weight:900;
		}

        .divider {
            width: 75px;
            height: 3px;
            background-color: #333;
            margin: 2rem 0;
        }

       .widget-container {
            margin-top: 2rem;
        }

        /* Q character image on right side */
		.q-image {
			position: fixed;
			right: 0%;
			top: 0;
			width: 40%; /* Slightly wider to accommodate full image */
			height: 100vh;
			background-image: url('../images/q-character.png');
			background-size: contain; /* Shows full image without cropping */
			background-position: center bottom;
			background-repeat: no-repeat;
			z-index: 1;
		}

		/* ElevenLabs widget positioning - Force full height */
		elevenlabs-convai {
			display: block !important;
			width: auto !important;
			height: auto !important;
			min-height: 120px !important;
			max-height: none !important;
			margin-left: -20px !important;
			position: relative !important;
			top: unset !important;
			left: unset !important;
			right: unset !important;
			bottom: unset !important;
			overflow: visible !important;
		}

		/* Override any internal iframe or shadow DOM sizing */
		elevenlabs-convai iframe,
		elevenlabs-convai > *,
		elevenlabs-convai::part(*) {
			height: auto !important;
			min-height: 120px !important;
			max-height: none !important;
		}
		
		/* Override ElevenLabs internal overlay positioning */
		elevenlabs-convai .overlay {
			position: static !important;
		}

		/* Alternative: If the above doesn't work due to shadow DOM, try this */
		elevenlabs-convai::part(overlay) {
			position: static !important;
		}

		/* Additional overrides for common ElevenLabs internal classes */
		elevenlabs-convai .overlay,
		elevenlabs-convai [class*="overlay"] {
			position: static !important;
			top: auto !important;
			left: auto !important;
			right: auto !important;
			bottom: auto !important;
			transform: none !important;
		}		

		/* Additional override for any nested elements */
		elevenlabs-convai * {
			height: auto !important;
			min-height: inherit !important;
			overflow: visible !important;
		}

		/* Force overlay positioning */
		elevenlabs-convai::part(overlay) {
			position: static !important;
			inset: unset !important;
		}
		
		/* Override ElevenLabs CSS custom properties */
		elevenlabs-convai {
			--el-overlay-padding: 20px !important;
			--el-branding-bottom: 10px !important; /* Move branding higher */
			--el-branding-margin: 5px !important;
		}	

		/* Target the specific ElevenLabs overlay class for branding positioning */
		elevenlabs-convai .overlay.flex.transition-opacity,
		elevenlabs-convai [class*="overlay"][class*="flex"][class*="transition-opacity"] {
			margin-top: 15px !important;
		}		
		
/* Responsive design */
@media (max-width: 768px) {
	
	header {
	padding: 0.5rem 0 0.5rem 0;
	text-align: center;
	}

    /* Q image fills entire page on mobile */
.q-image {
    position: fixed;
    bottom: -50px;
    left: 0;
    right: 0;
    /* Remove top: 0 */
    width: 100%;
    height: 100vh;
    background-position: center bottom;
    background-size: contain;
    z-index: 1;
}
    /* Container sits on top of Q image - no background */
.container {
    position: relative;
    z-index: 2;
    background: none;
    padding-top: 2rem;
    min-height: 40vh; /* Takes up top 40% */
    padding-bottom: 2rem;
}
    /* Widget positioned 40px from bottom */
    .widget-container {
        position: fixed;
        bottom: 20px;
        left: 65%;
        transform: translateX(-50%);
        z-index: 3;
        width: 90%;
        max-width: 300px;
    }

    /* Text styling for mobile */
    h1 {
        font-size: 80px;
        text-align: center;
    }

    h2 {
        font-size: 32px;
        text-align: center;
    }

    .content {
        max-width: 100%;
        text-align: center;
        padding: 0;
    }

    .description,
    .availability {
        font-size: 18px;
        text-align: center;
    }

    .divider {
        margin: 1.5rem auto;
    }
}

@media (max-width: 480px) {
    h1 {
        font-size: 60px;
    }

    h2 {
        font-size: 24px;
    }

    .description,
    .availability {
        font-size: 16px;
    }
	
	elevenlabs-convai {
	margin-left: -20px !important;
	}

}