/* =================================================================
   LANDING PAGE STYLES
   Extracted from LandingContent.svelte during decomposition.
   Loaded via <svelte:head> only when landing page renders.
   All styles scoped to .ms365-landing parent class.
   ================================================================= */

	/* ===== LANDING PAGE LOCAL CSS VARIABLES ===== */
	/* Maps brand/marketing colors to design system tokens */
	:root {
		--landing-pill-purple-bg-start: color-mix(
			in srgb,
			var(--color-accent) 10%,
			var(--color-neutral-50)
		);
		--landing-pill-purple-bg-end: color-mix(
			in srgb,
			var(--color-accent) 10%,
			var(--color-neutral-100)
		);
		--landing-pill-purple-text: color-mix(
			in srgb,
			var(--color-accent) 80%,
			var(--color-neutral-900)
		);
		--landing-pill-purple-border: color-mix(
			in srgb,
			var(--color-accent) 30%,
			var(--color-neutral-200)
		);
		--landing-pill-blue-bg-start: color-mix(
			in srgb,
			var(--color-primary-300) 10%,
			var(--color-neutral-50)
		);
		--landing-pill-blue-bg-end: color-mix(
			in srgb,
			var(--color-primary-200) 10%,
			var(--color-neutral-50)
		);
		--landing-pill-blue-text: color-mix(
			in srgb,
			var(--color-primary-500) 80%,
			var(--color-neutral-900)
		);
		--landing-pill-blue-border: color-mix(
			in srgb,
			var(--color-primary-400) 30%,
			var(--color-neutral-200)
		);
		--landing-pill-green-bg-start: color-mix(
			in srgb,
			var(--color-success) 10%,
			var(--color-neutral-50)
		);
		--landing-pill-green-bg-end: color-mix(
			in srgb,
			var(--color-success) 8%,
			var(--color-neutral-50)
		);
		--landing-pill-green-text: color-mix(
			in srgb,
			var(--color-success) 60%,
			var(--color-neutral-900)
		);
		--landing-pill-green-border: color-mix(
			in srgb,
			var(--color-success) 30%,
			var(--color-neutral-200)
		);
		--landing-pink-badge-bg-start: var(
			--color-pink-100,
			color-mix(in srgb, var(--color-error) 15%, var(--color-neutral-50))
		);
		--landing-pink-badge-bg-end: var(
			--color-pink-50,
			color-mix(in srgb, var(--color-error) 8%, var(--color-neutral-50))
		);
		--landing-pink-badge-border: var(
			--color-pink-200,
			color-mix(in srgb, var(--color-error) 20%, var(--color-neutral-200))
		);
		--landing-pink-badge-text: var(
			--color-pink-700,
			color-mix(in srgb, var(--color-error) 70%, var(--color-neutral-900))
		);
		--landing-pink-badge-icon: var(--color-pink-500, var(--color-error));
		--landing-pink-dark: var(--color-pink-400, #f472b6);
		--landing-success-dark: var(--color-success-600, #16a34a);
		--landing-emerald-dark: var(--color-success-700, var(--color-success));
	}

	/* ===== CSS TRANSITION REPLACEMENTS (PERF: Avoids Svelte transition forced reflows) ===== */

	/* Fade in animation - replaces Svelte fade transition */
	@keyframes css-fade-in {
		from {
			opacity: 0;
		}
		to {
			opacity: 1;
		}
	}

	.css-fade-in {
		animation: css-fade-in 0.2s ease-out both;
	}

	/* Fade in for FAQ items - opacity only to avoid CLS */
	@keyframes css-fade-in-up {
		from {
			opacity: 0;
		}
		to {
			opacity: 1;
		}
	}

	.css-fade-in-up {
		animation: css-fade-in-up 0.3s ease-out both;
	}

	/* Slide in from left - for mobile drawer */
	@keyframes css-slide-in-left {
		from {
			transform: translateX(-100%);
		}
		to {
			transform: translateX(0);
		}
	}

	.css-slide-in-left {
		animation: css-slide-in-left 0.3s cubic-bezier(0.4, 0, 0.2, 1) both;
	}

	/* Respect reduced motion preference */
	@media (prefers-reduced-motion: reduce) {
		.css-fade-in,
		.css-fade-in-up,
		.css-slide-in-left {
			animation: none;
			opacity: 1;
			transform: none;
		}

		.hero-line-2 {
			animation: none !important;
			opacity: 1 !important;
			transform: none !important;
		}

	}

	/* ===== RESET GLOBAL LINK STYLES FOR BUTTON-STYLED ANCHORS ===== */
	/* Override global a tag styles from base.css for button elements */
	.ms365-landing a.ms365-button,
	.ms365-landing a.ms365-button-primary,
	.ms365-landing a.ms365-button-secondary,
	.ms365-landing a .btn,
	.ms365-landing .pricing-cta,
	.ms365-landing .landing-login-btn,
	.ms365-landing .landing-nav-link {
		text-decoration: none;
	}

	/* Nav link colors - override global link color */
	.ms365-landing .landing-nav-link {
		color: var(--color-neutral-600);
	}

	.ms365-landing .landing-nav-link:hover {
		color: var(--button-primary-background, var(--botanical-primary));
	}

	/* Login button text alignment fix - only show on desktop */
	@media (min-width: 900px) {
		.ms365-landing .landing-login-btn {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			line-height: 1;
			color: var(--text-on-primary, var(--color-white, hsl(0 0% 100%)));
			white-space: nowrap;
		}
	}

	/* Header and nav alignment fix */
	.ms365-landing .landing-header-container {
		display: flex;
		align-items: center;
	}

	@media (min-width: 900px) {
		.ms365-landing .landing-nav {
			display: flex;
			align-items: center;
		}
	}

	.ms365-landing .landing-nav-link {
		display: inline-flex;
		align-items: center;
		line-height: 1;
	}

	.ms365-landing .landing-logo {
		display: flex;
		align-items: center;
	}

	.ms365-landing a.ms365-button:hover,
	.ms365-landing a.ms365-button-primary:hover,
	.ms365-landing a.ms365-button-secondary:hover,
	.ms365-landing a .btn:hover,
	.ms365-landing .pricing-cta:hover,
	.ms365-landing .landing-login-btn:hover,
	.ms365-landing .landing-nav-link:hover {
		text-decoration: none;
	}

	/* Ensure primary buttons have white text */
	.ms365-landing a.ms365-button-primary,
	.ms365-landing .pricing-cta.primary {
		color: var(--color-white, hsl(0 0% 100%));
	}

	/* Ensure secondary buttons have proper theme text */
	.ms365-landing a.ms365-button-secondary {
		color: var(--button-primary-background, var(--botanical-primary));
	}

	.ms365-landing a.ms365-button-secondary:hover {
		color: var(--color-primary-600);
	}

	/* Override link color on anchor tags containing buttons */
	.ms365-landing a:has(.btn) {
		color: inherit;
		text-decoration: none;
	}

	.ms365-landing a:has(.btn:hover) {
		text-decoration: none;
	}

	/* Ensure Button component text colors are preserved inside anchor tags */
	.ms365-landing a .btn-primary,
	.ms365-landing a .btn-primary * {
		color: var(--text-on-primary, var(--color-white, hsl(0 0% 100%)));
	}

	.ms365-landing a .btn-secondary,
	.ms365-landing a .btn-secondary * {
		color: var(--text-primary);
	}

	/* Fix mobile nav CTA anchor tags */
	.ms365-landing .mobile-nav-cta a {
		color: inherit;
		text-decoration: none;
	}

	.ms365-landing .mobile-nav-cta a:hover {
		text-decoration: none;
	}

	/* ===== REFINED LANDING PAGE HEADER/NAVBAR ===== */

	.landing-header {
		background: var(--color-white-alpha-95);
		backdrop-filter: blur(20px) saturate(180%);
		-webkit-backdrop-filter: blur(20px) saturate(180%);
		border-bottom: 1px solid var(--color-black-alpha-5);
		transition:
			opacity 0.2s ease,
			transform 0.2s ease,
			background-color 0.2s ease,
			box-shadow 0.2s ease;
	}

	.landing-header.scrolled {
		box-shadow: var(--shadow-md);
		background: var(--color-white-alpha-95);
	}

	@supports not (backdrop-filter: blur(1px)) {
		.landing-header {
			background: var(--surface-background);
		}
	}

	.landing-header-container {
		max-width: 1280px;
		margin: 0 auto;
		padding: max(var(--space-2, 0.5rem), env(safe-area-inset-top, 0px))
			max(var(--space-6, 1.5rem), env(safe-area-inset-right, 0px)) var(--space-2, 0.5rem)
			max(var(--space-6, 1.5rem), env(safe-area-inset-left, 0px));
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-8, 2rem);
	}

	@media (max-width: 380px) {
		.landing-header-container {
			padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
			gap: var(--space-3, 0.75rem);
		}
	}

	.landing-logo {
		flex-shrink: 0;
		text-decoration: none;
		display: flex;
		align-items: center;
		min-width: 0; /* Allow shrinking if viewport is very narrow */
	}

	@media (max-width: 380px) {
		.landing-logo {
			flex-shrink: 1;
		}
	}

	.landing-logo-img {
		height: 40px;
		width: auto;
	}

	.landing-nav {
		display: none;
		align-items: center;
		gap: var(--space-2, 0.5rem);
	}

	@media (min-width: 900px) {
		.landing-nav {
			display: flex;
		}
	}

	.landing-nav-link {
		padding: var(--space-2, 0.5rem) 0.875rem;
		color: var(--text-secondary);
		text-decoration: none;
		font-weight: var(--font-medium, 500);
		font-size: 0.9375rem;
		border-radius: 6px;
		transition:
			opacity 0.15s ease,
			transform 0.15s ease,
			background-color 0.15s ease,
			box-shadow 0.15s ease;
		white-space: nowrap;
	}

	.landing-nav-link:hover {
		color: var(--color-primary);
		background: color-mix(in srgb, var(--botanical-primary) 8%, transparent);
		text-decoration: none;
	}

	.landing-header-actions {
		display: flex;
		align-items: center;
		gap: var(--space-3, 0.75rem);
		flex-shrink: 0;
	}

	.landing-login-btn {
		display: none;
		padding: var(--space-2-5) 24px;
		background: linear-gradient(
			135deg,
			var(--button-primary-background, var(--botanical-primary)) 0%,
			var(--button-primary-background-hover, var(--color-primary-700)) 100%
		);
		color: var(--button-primary-text, var(--color-white, hsl(0 0% 100%)));
		text-decoration: none;
		font-weight: var(--font-semibold, 600);
		font-size: 15px;
		line-height: 1;
		border-radius: 6px;
		transition:
			opacity 0.15s ease,
			transform 0.15s ease,
			background-color 0.15s ease,
			box-shadow 0.15s ease;
		box-shadow: 0 4px 12px
			color-mix(
				in srgb,
				var(--button-primary-background, var(--botanical-primary)) 25%,
				transparent
			);
		min-height: 40px;
	}

	@media (min-width: 900px) {
		.landing-login-btn {
			display: inline-flex;
			align-items: center;
			justify-content: center;
		}
	}

	.landing-login-btn:hover {
		background: linear-gradient(
			135deg,
			var(--button-primary-background-hover, var(--color-primary-700)) 0%,
			var(--button-primary-background, var(--botanical-primary)) 100%
		);
		box-shadow: 0 8px 20px
			color-mix(
				in srgb,
				var(--button-primary-background, var(--botanical-primary)) 35%,
				transparent
			);
		transform: translateY(-2px);
		text-decoration: none;
	}

	/* ===== REFINED HERO SECTION STYLES ===== */

	.hero-refined {
		padding-top: var(--space-8, 2rem);
		padding-bottom: var(--space-4, 1rem);
		min-height: auto;
	}

	/* Mission Statement — appears above audience toggle */
	.hero-mission {
		text-align: center;
		max-width: 800px;
		margin: 0 auto var(--space-6, 1.5rem);
	}

	.hero-mission-title {
		font-size: clamp(2.25rem, 1.75rem + 2.5vw, 3.5rem) !important;
		line-height: 1.15 !important;
		margin-bottom: var(--space-4, 1rem) !important;
		letter-spacing: -0.02em;
		display: flex;
		flex-direction: column;
		gap: 0.2em;
	}

	/* Two-line vision headline */
	.hero-line-1 {
		display: block;
	}

	@keyframes hero-line-reveal {
		from {
			opacity: 0;
			transform: translateY(10px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.hero-line-2 {
		display: block;
		font-size: clamp(1.6rem, 1.3rem + 2vw, 2.6rem);
		font-weight: var(--font-medium, 500);
		color: var(--botanical-primary, var(--color-primary));
		animation: hero-line-reveal 600ms ease-out both;
		animation-delay: 1s;
	}

	.hero-mission-subtitle {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: baseline;
		gap: var(--space-1, 0.25rem) var(--space-2, 0.5rem);
		margin: 0;
	}

	.problem-stat {
		font-weight: var(--font-bold, 700);
		font-size: var(--text-base, 1rem);
		color: var(--text-primary, var(--color-neutral-800));
	}

	.problem-source {
		font-size: 0.8rem;
		color: var(--text-tertiary, var(--color-neutral-500));
		font-style: italic;
	}

	.problem-response {
		font-size: 0.95rem;
		font-weight: var(--font-medium, 500);
		color: var(--botanical-primary, var(--color-primary));
		width: 100%;
	}

	/* Audience-specific sub-heading (h2 instead of h1) */
	.ms365-hero-audience-title {
		font-size: clamp(1.5rem, 1.25rem + 1.5vw, 2.25rem);
		line-height: 1.2;
		font-weight: var(--font-bold, 700);
		color: var(--text-primary, var(--color-neutral-800));
		margin-bottom: var(--space-4, 1rem);
	}

	.hero-audience-toggle {
		display: flex;
		justify-content: center;
		margin-bottom: var(--space-6, 1.5rem);
	}

	.hero-grid {
		display: grid;
		grid-template-columns: 1.1fr 0.9fr;
		gap: var(--space-12, 3rem);
		align-items: center;
		min-height: 360px;
	}

	.hero-text-column {
		position: relative;
		z-index: 2;
		max-width: 600px;
	}

	/*
	 * LCP OPTIMIZATION: Make hero content visible immediately
	 * The .animate-item class starts at opacity: 0 due to animation fill-mode.
	 * For LCP-critical content (hero title, subtitle, CTA), we override this
	 * to ensure content is painted immediately without waiting for JS.
	 * Animation enhancement can occur after hydration via :not(:only-child) trick.
	 */
	.hero-text-column > .animate-item,
	.hero-mascot-column.animate-item,
	.hero-mission.animate-item {
		opacity: 1 !important;
		transform: none !important;
		animation: none !important;
	}

	/*
	 * hero-line-2 intentionally inherits NO override from the parent .hero-mission.animate-item rule.
	 * CSS `opacity` and `animation` do not inherit, so the parent's `animation: none !important`
	 * and `opacity: 1 !important` do not affect .hero-line-2 — its own animation runs freely.
	 */

	/* Override default hero title for landing page */
	.hero-refined .ms365-hero-title {
		font-size: clamp(2rem, 1.5rem + 2vw, 3.25rem);
		line-height: 1.15;
		margin-bottom: var(--space-4, 1rem);
	}

	.hero-refined .ms365-hero-subtitle {
		font-size: var(--text-lg, 1.125rem);
		margin-bottom: var(--space-6, 1.5rem);
	}

	.hero-cta-group {
		display: flex;
		gap: var(--space-4, 1rem);
		flex-wrap: wrap;
		margin-bottom: var(--space-3, 0.75rem);
	}

	.hero-disclaimer {
		font-size: var(--text-sm, 0.875rem);
		color: var(--text-tertiary, var(--color-neutral-500));
		margin: 0;
	}



	.footer-newsletter-section {
		grid-column: 6 / 7;
		grid-row: 1 / 2;
	}

	.footer-newsletter-text {
		font-size: var(--text-sm, 0.875rem);
		color: var(--text-secondary);
		margin-bottom: var(--space-4, 1rem);
	}

	@media (max-width: 1024px) {
		.footer-newsletter-section {
			grid-column: span 1;
			grid-row: auto;
		}
	}

	@media (max-width: 768px) {
		.footer-newsletter-section {
			grid-column: span 2;
			grid-row: auto;
		}
	}

	@media (max-width: 480px) {
		.footer-newsletter-section {
			grid-column: span 1;
		}
	}

	.hero-mascot-column {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.hero-mascot-wrapper {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		/* Explicit dimensions for CLS prevention */
		width: min(340px, 100% - 2rem);
		height: auto;
		aspect-ratio: 1 / 1;
		/* Ensure stable layout even before image loads */
		contain: layout size;
	}

	/* SSR-friendly poster image - visible immediately for fast LCP */
	.hero-mascot-poster {
		width: 100%;
		height: 100%;
		object-fit: contain;
		filter: drop-shadow(0 16px 32px var(--color-black-alpha-10));
	}

	/* Video overlays the poster after hydration - positioned absolutely */
	/* LCP OPTIMIZATION: Video starts hidden (opacity: 0) to prevent 2.4s render delay */
	/* The poster image is the visible LCP element; video fades in when ready */
	.hero-mascot-video {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		object-fit: contain;
		cursor: pointer;
		filter: drop-shadow(0 16px 32px var(--color-black-alpha-10));
		transition:
			transform 0.3s ease,
			opacity 0.3s ease;
		z-index: 1;
		opacity: 0; /* Hidden until video is ready to play */
	}

	/* Video becomes visible when canplaythrough fires */
	.hero-mascot-video.video-ready {
		opacity: 1;
	}

	/* Hide poster once video is ready (no need to render both) */
	.hero-mascot-wrapper:has(.hero-mascot-video.video-ready) .hero-mascot-poster {
		opacity: 0;
		visibility: hidden;
	}

	.hero-mascot-video:hover {
		transform: scale(1.03);
	}

	.hero-mascot-video:active {
		transform: scale(0.98);
	}

	.hero-mascot-glow {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 280px;
		height: 280px;
		background: radial-gradient(
			circle,
			color-mix(in srgb, var(--botanical-primary) 12%, transparent) 0%,
			color-mix(in srgb, var(--color-success) 6%, transparent) 40%,
			transparent 70%
		);
		border-radius: var(--radius-full, 50%);
		filter: blur(40px);
		z-index: 0;
		pointer-events: none;
	}

	/* Tablet breakpoint */
	@media (max-width: 1024px) {
		.hero-grid {
			grid-template-columns: 1fr 1fr;
			gap: var(--space-8, 2rem);
		}

		.hero-mascot-wrapper {
			width: 280px;
			height: 280px;
		}

		.hero-mascot-poster,
		.hero-mascot-video {
			max-width: 280px;
		}

		.hero-mascot-glow {
			width: 220px;
			height: 220px;
		}
	}

	/* Mobile breakpoint - stack vertically but keep mascot visible */
	@media (max-width: 768px) {
		.hero-refined {
			padding-top: var(--space-6, 1.5rem);
			padding-bottom: var(--space-4, 1rem);
			padding-left: var(--space-4, 1rem);
			padding-right: var(--space-4, 1rem);
		}

		.hero-audience-toggle {
			margin-bottom: var(--space-6, 1.5rem);
		}

		.hero-grid {
			grid-template-columns: 1fr;
			gap: var(--space-6, 1.5rem);
			min-height: auto;
		}

		.hero-text-column {
			text-align: center;
			max-width: 100%;
			order: 1;
			padding: 0 var(--space-2, 0.5rem);
		}

		.hero-mascot-column {
			order: 0;
			display: flex;
			justify-content: center;
			padding: 0 var(--space-2, 0.5rem);
		}

		.hero-mascot-wrapper {
			width: 240px;
			height: 240px;
		}

		.hero-mascot-poster,
		.hero-mascot-video {
			max-width: 240px;
		}

		.hero-mascot-glow {
			width: 200px;
			height: 200px;
		}

		.hero-refined .ms365-hero-title {
			font-size: clamp(1.75rem, 1.5rem + 2vw, 2.5rem);
			margin-bottom: var(--space-4, 1rem);
		}

		.hero-refined .ms365-hero-subtitle {
			font-size: clamp(1rem, 0.875rem + 1.5vw, 1.125rem);
		}

		.hero-mission {
			margin-bottom: var(--space-4, 1rem);
		}

		.hero-mission-subtitle {
			font-size: var(--text-base, 1rem);
		}

		.hero-line-2 {
			font-size: clamp(1.3rem, 1.1rem + 2vw, 2rem);
			animation-delay: 0.7s;
		}

		.ms365-hero-audience-title {
			font-size: clamp(1.25rem, 1rem + 1.5vw, 1.75rem);
		}

		.hero-cta-group {
			justify-content: center;
			gap: var(--space-3, 0.75rem);
		}

		.hero-disclaimer {
			text-align: center;
			font-size: 0.8rem;
		}

	}

	/* Small mobile */
	@media (max-width: 480px) {
		.hero-refined {
			padding-top: var(--space-4, 1rem);
			padding-bottom: var(--space-3, 0.75rem);
			padding-left: var(--space-3, 0.75rem);
			padding-right: var(--space-3, 0.75rem);
		}

		.hero-grid {
			gap: var(--space-4, 1rem);
		}

		.hero-text-column {
			padding: 0;
		}

		.hero-mascot-column {
			padding: 0;
		}

		.hero-mascot-wrapper {
			width: 160px;
			height: 160px;
		}

		.hero-mascot-poster,
		.hero-mascot-video {
			max-width: 160px;
		}

		.hero-mascot-glow {
			width: 130px;
			height: 130px;
		}

		.hero-refined .ms365-hero-title {
			font-size: clamp(1.5rem, 1.25rem + 2.5vw, 2.25rem);
		}

		.hero-refined .ms365-hero-subtitle {
			font-size: clamp(0.875rem, 0.8rem + 1vw, 1rem);
			line-height: 1.4;
		}

		.hero-cta-group {
			flex-direction: column;
			width: 100%;
		}

		.hero-cta-group .ms365-button {
			width: 100%;
			justify-content: center;
		}
	}

	/* Extra small mobile */
	@media (max-width: 360px) {
		.hero-refined {
			padding-left: var(--space-2, 0.5rem);
			padding-right: var(--space-2, 0.5rem);
		}

		.hero-mascot-wrapper {
			width: 140px;
			height: 140px;
		}

		.hero-mascot-poster,
		.hero-mascot-video {
			max-width: 140px;
		}

		.hero-mascot-glow {
			width: 120px;
			height: 120px;
		}
	}

	/* Skip Link for Accessibility */
	/* Uses GPU-composited transform instead of top for smooth animation */
	.skip-link {
		position: absolute;
		top: 0;
		left: 50%;
		transform: translateX(-50%) translateY(-100%);
		background: var(--color-primary);
		color: var(--color-white);
		padding: var(--space-3, 0.75rem) var(--space-6, 1.5rem);
		border-radius: 0 0 0.5rem 0.5rem;
		text-decoration: none;
		font-weight: var(--font-medium, 500);
		z-index: 9999;
		transition: transform 0.2s ease;
	}

	.skip-link:focus {
		transform: translateX(-50%) translateY(0);
		outline: 2px solid var(--color-primary);
		outline-offset: 2px;
	}

	/* Hamburger Menu Button */
	.hamburger-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0;
		background: transparent;
		border: none;
		border-radius: 0.5rem;
		cursor: pointer;
		color: var(--text-primary);
		transition: background 0.2s ease;
	}

	.hamburger-btn:hover {
		background: var(--surface-hover, var(--color-neutral-100));
	}

	.hamburger-btn:focus-visible {
		outline: 2px solid var(--color-primary);
		outline-offset: 2px;
	}

	/* Mobile Navigation Drawer */
	.mobile-nav-backdrop {
		position: fixed;
		inset: 0;
		background: var(--color-black-alpha-50);
		z-index: 100;
		-webkit-backdrop-filter: blur(4px);
		backdrop-filter: blur(4px);
	}

	.mobile-nav-drawer {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		width: 320px; /* 40 × 8px = 320px - 8px grid compliant */
		max-width: 85vw;
		background: var(--surface-background, var(--color-white));
		z-index: 101;
		display: flex;
		flex-direction: column;
		box-shadow: 8px 0 24px var(--color-black-alpha-20); /* 8px grid compliant shadow */
		overflow: hidden;
		padding-top: env(safe-area-inset-top, 0px);
		padding-bottom: env(safe-area-inset-bottom, 0px);
		padding-left: env(safe-area-inset-left, 0px);
	}

	.mobile-nav-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: var(--space-4) 24px; /* 8px grid: 2×8 3×8 */
		border-bottom: 1px solid var(--border-color, var(--color-neutral-200));
		background: var(--surface-background, var(--color-white));
	}

	.mobile-nav-logo {
		display: flex;
		align-items: center;
		text-decoration: none;
	}

	.mobile-nav-logo:focus-visible {
		outline: 2px solid var(--color-primary);
		outline-offset: 4px;
		border-radius: var(--radius-sm, 4px);
	}

	.mobile-nav-close {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 48px; /* 6×8 = 48px - WCAG touch target */
		height: 48px;
		padding: 0;
		background: transparent;
		border: none;
		border-radius: var(--radius-base, 8px); /* 8px grid compliant */
		cursor: pointer;
		color: var(--text-primary);
		transition:
			background 0.15s ease,
			transform 0.15s ease;
	}

	.mobile-nav-close:hover {
		background: var(--surface-hover, var(--color-neutral-100));
	}

	.mobile-nav-close:focus-visible {
		outline: 2px solid var(--color-primary);
		outline-offset: 2px;
	}

	.mobile-nav-close:active {
		transform: scale(0.95);
	}

	.mobile-nav-links {
		flex: 1;
		padding: var(--space-4) 0; /* 2×8 = 16px */
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	.mobile-nav-link {
		display: flex;
		align-items: center;
		padding: var(--space-4) 24px; /* 8px grid: 2×8 3×8 */
		color: var(--text-primary);
		text-decoration: none;
		font-weight: var(--font-medium, 500);
		font-size: var(--text-lg, 1.125rem);
		transition:
			background 0.15s ease,
			color 0.15s ease;
		border-left: 3px solid transparent;
	}

	.mobile-nav-link:hover {
		background: var(--surface-hover, var(--color-neutral-100));
		color: var(--color-primary);
	}

	.mobile-nav-link:focus-visible {
		outline: 2px solid transparent;
		background: var(--surface-hover, var(--color-neutral-100));
		border-left-color: var(--color-primary);
	}

	.mobile-nav-link-text {
		position: relative;
	}

	.mobile-nav-cta {
		padding: var(--space-6); /* 3×8 = 24px */
		border-top: 1px solid var(--border-color, var(--color-neutral-200));
		display: flex;
		flex-direction: column;
		gap: var(--space-4); /* 2×8 = 16px - 8px grid compliant */
		background: var(--surface-alt);
	}

	/* Mobile nav button base styles */
	.mobile-nav-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: var(--space-2);
		width: 100%;
		height: 48px; /* 6×8 = 48px - WCAG touch target */
		padding: 0 var(--space-6, 1.5rem);
		border-radius: var(--radius-md, 12px);
		font-size: var(--text-base, 1rem);
		font-weight: var(--font-semibold, 600);
		text-decoration: none;
		transition:
			opacity 0.15s ease,
			transform 0.15s ease,
			background-color 0.15s ease,
			box-shadow 0.15s ease;
		cursor: pointer;
		border: 2px solid transparent;
	}

	.mobile-nav-btn:focus-visible {
		outline: 2px solid var(--color-primary, var(--botanical-primary));
		outline-offset: 2px;
	}

	/* Primary button - Botanical Primary color */
	.mobile-nav-btn-primary {
		background: var(--button-primary-background, var(--botanical-primary));
		color: var(--button-primary-text, var(--color-white));
		border-color: var(--button-primary-background, var(--botanical-primary));
	}

	.mobile-nav-btn-primary:hover {
		background: var(--color-primary-600, var(--color-primary-dark));
		border-color: var(--color-primary-600, var(--color-primary-dark));
		transform: translateY(-1px);
		box-shadow: 0 4px 12px color-mix(in srgb, var(--botanical-primary) 30%, transparent);
	}

	.mobile-nav-btn-primary:active {
		transform: translateY(0);
		box-shadow: none;
		background: var(--color-primary-500);
	}

	/* Secondary button - Outline style */
	.mobile-nav-btn-secondary {
		background: var(--botanical-surface, var(--color-white));
		color: var(--text-primary);
		border-color: var(--border-color-default, var(--cocovox-neutral-300));
	}

	.mobile-nav-btn-secondary:hover {
		background: var(--botanical-background);
		border-color: var(--cocovox-neutral-400);
		transform: translateY(-1px);
		box-shadow: var(--shadow-md);
	}

	.mobile-nav-btn-secondary:active {
		transform: translateY(0);
		box-shadow: none;
		background: var(--surface-hover, var(--cocovox-neutral-100));
	}

	/* FAQ Card Styles (replacing DaisyUI) */
	.faq-card {
		padding: var(--space-6, 1.5rem);
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.faq-question {
		font-size: var(--text-lg, 1.125rem);
		font-weight: var(--font-semibold, 600);
		color: var(--text-primary);
		margin-bottom: var(--space-3, 0.75rem);
		line-height: 1.4;
	}

	.faq-answer {
		font-size: 0.9375rem;
		color: var(--text-secondary);
		line-height: 1.6;
		flex: 1;
	}

	.faq-category {
		font-size: var(--text-xs, 0.75rem);
		color: var(--text-tertiary);
		margin-top: var(--space-3, 0.75rem);
		text-transform: capitalize;
	}

	/* Trust Bar Styles */
	.trust-bar-section {
		padding: var(--space-4, 1rem) 0;
		background: var(--surface-alt);
		border-bottom: 1px solid var(--border-color, var(--color-neutral-200));
	}

	.trust-bar {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: var(--space-8, 2rem);
		flex-wrap: wrap;
	}

	.trust-item {
		display: flex;
		align-items: center;
		gap: var(--space-2, 0.5rem);
		font-size: var(--text-sm, 0.875rem);
		font-weight: var(--font-medium, 500);
		color: var(--text-secondary);
	}

	.trust-item .trust-icon {
		width: 1.25rem;
		height: 1.25rem;
		color: var(--color-primary);
	}

	/* Social Proof Teaser */
	@media (max-width: 768px) {
		.trust-bar {
			gap: var(--space-4, 1rem);
		}

		.trust-item {
			font-size: var(--text-xs, 0.75rem);
		}
	}

	/* Prevent layout shift in containers */
	.ms365-container {
		contain: layout;
		width: 100%;
	}

	/* Audience Toggle Styles - Subtle tab design, NOT button-like */
	.audience-toggle {
		display: inline-flex;
		background-color: transparent;
		border: 1px solid var(--border-color, var(--color-neutral-200));
		border-radius: var(--radius-md, 12px);
		padding: 3px;
		gap: var(--space-0-5);
	}

	.audience-toggle-btn {
		min-height: 2.75rem;
		padding: var(--space-3, 0.75rem) 1.25rem;
		border-radius: var(--radius-base, 8px);
		font-weight: var(--font-medium, 500);
		font-size: var(--text-sm, 0.875rem);
		border: none;
		cursor: pointer;
		transition:
			opacity 0.2s ease,
			transform 0.2s ease,
			background-color 0.2s ease,
			box-shadow 0.2s ease;
		background: transparent;
		color: var(--text-secondary);
	}

	.audience-toggle-btn:hover {
		color: var(--text-primary);
		background: var(--surface-hover);
	}

	.audience-toggle-btn.active {
		background: var(--surface-card, var(--color-white));
		color: var(--text-primary);
		font-weight: var(--font-semibold, 600);
		box-shadow: var(--shadow-sm);
	}

	.faq-container {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-8, 2rem);
		justify-content: space-between;
	}

	.faq-item {
		flex-basis: calc(50% - 1rem);
		margin-bottom: var(--space-8, 2rem);
	}

	/* Enhanced MS365-style animations */
	/* Modern sibling-index() approach for staggered animations */
	/* NOTE: Animation disabled by default via .animate-item rule below */
	@supports (sibling-index()) {
		.animate-item {
			/* This will be overridden - kept for reference */
			animation: none;
		}
	}

	/* Fallback for browsers without sibling-index() support */
	@supports not (sibling-index()) {
		.animate-item {
			/* This will be overridden - kept for reference */
			animation: none;
		}
	}

	/* CLS FIX: Removed translateY/scale from animation to prevent layout shifts (0.35 CLS reduction)
	   Only opacity animation - elements are already positioned, no movement needed */
	@keyframes ms365FadeInUp {
		from {
			opacity: 0;
		}
		to {
			opacity: 1;
		}
	}

	/* CLS FIX: Removed translateY from animation to prevent layout shifts */
	@keyframes fadeInUp {
		from {
			opacity: 0;
		}
		to {
			opacity: 1;
		}
	}

	/* MS365 smooth scroll */
	html {
		scroll-behavior: smooth;
	}

	@media (prefers-reduced-motion: reduce) {
		html {
			scroll-behavior: auto;
		}
	}

	/* Enhanced focus states */
	:focus-visible {
		outline: 2px solid var(--color-primary);
		outline-offset: 2px;
		border-radius: var(--radius-sm, 4px);
	}

	/* Mobile responsiveness */
	@media (max-width: 768px) {
		.faq-item {
			flex-basis: 100%;
		}

		.ms365-container {
			padding: 0 var(--space-4, 1rem);
		}

		.ms365-section {
			padding: var(--space-12, 3rem) 0;
		}

		.ms365-hero-title {
			font-size: 2rem;
		}
	}

	@media (prefers-reduced-motion: reduce) {
		.animate-section,
		.animate-item,
		.ms365-animate-on-scroll {
			transition: none;
			opacity: 1;
			animation: none;
		}

		/* Disable hero floating gradient and pulse animations */
		.ms365-hero::before,
		.ms365-hero::after {
			animation: none;
		}

		/* Disable shimmer effects */
		.ms365-shimmer {
			animation: none;
		}

		/* Stop hero video autoplay for motion-sensitive users */
		.hero-video-element {
			display: none;
		}
		.hero-video-poster {
			display: block;
		}
	}

	/*
	 * CRITICAL CLS FIX: Override animation for ALL sections AFTER base rules
	 * The @supports rules above apply animation with fill-mode:both which starts at opacity:0
	 * and transform:translateY(30px), causing a 0.3 CLS score on page load.
	 *
	 * Solution: Disable animations by default, then re-enable ONLY after intersection
	 * via the .ms365-animating class added by handleIntersection()
	 * This ensures elements are visible immediately (no layout shift) but still animate
	 * smoothly when scrolled into view.
	 */
	.animate-item {
		opacity: 1 !important;
		transform: none !important;
		animation: none !important;
		will-change: auto;
	}

	/* Re-enable animations only after intersection observer triggers */
	/* CLS FIX: Removed transform from will-change since animation is opacity-only now */
	.ms365-section.ms365-animating .animate-item {
		opacity: 1;
		animation: ms365FadeInUp 0.4s cubic-bezier(0.42, 0, 0.58, 1) forwards;
		animation-delay: calc(var(--index, 0) * 100ms);
		will-change: opacity;
	}

	/* Ensure sections maintain dimensions during intersection */
	.ms365-section {
		min-height: min-content;
	}

	@keyframes ms365-shimmer {
		from {
			transform: translateX(-100%);
		}
		to {
			transform: translateX(100%);
		}
	}

	/* ==============================================
	   ACCESSIBILITY SECTION STYLES
	   ============================================== */

	.accessibility-section {
		background: linear-gradient(
			180deg,
			var(--surface-background, var(--color-white)) 0%,
			var(--color-primary-alpha-05, color-mix(in srgb, var(--color-primary) 5%, transparent)) 50%,
			var(--surface-background, var(--color-white)) 100%
		);
	}

	.accessibility-badge {
		display: inline-flex;
		align-items: center;
		gap: var(--space-2, 0.5rem);
		padding: var(--space-2, 0.5rem) var(--space-4, 1rem);
		background: linear-gradient(135deg, var(--color-success-100) 0%, var(--color-primary-100) 100%);
		border: 1px solid var(--color-success-300);
		border-radius: var(--radius-full, 9999px);
		font-size: var(--text-sm, 0.875rem);
		font-weight: var(--font-semibold, 600);
		color: var(--color-success-700);
		margin-bottom: var(--space-4, 1rem);
	}

	.accessibility-badge svg {
		color: var(--color-success-600);
	}

	/* Accessibility Badge Dark Mode */
	.dark .accessibility-badge {
		background: linear-gradient(
			135deg,
			color-mix(in srgb, var(--color-success) 15%, transparent) 0%,
			color-mix(in srgb, var(--color-primary) 15%, transparent) 100%
		);
		border-color: var(--color-success-500);
		color: var(--color-success-400);
	}

	.dark .accessibility-badge svg {
		color: var(--color-success-400);
	}

	/* CocovoxKeyboard Feature Highlight */
	.keyboard-feature-highlight {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--space-12, 3rem);
		align-items: center;
		background: var(--surface-card, var(--color-white));
		border-radius: 1.5rem;
		padding: var(--space-12, 3rem);
		margin: var(--space-8, 2rem) 0;
		box-shadow: var(--shadow-lg);
		border: 1px solid var(--border-color, var(--color-neutral-200));
	}

	.keyboard-feature-badge {
		display: inline-flex;
		align-items: center;
		gap: var(--space-1-5, 0.375rem);
		padding: var(--space-1-5, 0.375rem) var(--space-3, 0.75rem);
		background: linear-gradient(135deg, var(--color-pink-100) 0%, var(--color-pink-50) 100%);
		border: 1px solid var(--color-pink-200);
		border-radius: var(--radius-full, 9999px);
		font-size: var(--text-xs, 0.75rem);
		font-weight: var(--font-semibold, 600);
		color: var(--color-pink-700);
		margin-bottom: var(--space-4, 1rem);
	}

	.keyboard-feature-badge svg {
		color: var(--color-pink-500);
	}

	.keyboard-feature-title {
		display: flex;
		align-items: center;
		gap: var(--space-3, 0.75rem);
		font-size: 1.75rem;
		font-weight: var(--font-bold, 700);
		color: var(--text-primary);
		margin-bottom: var(--space-2, 0.5rem);
	}

	.keyboard-feature-title svg {
		color: var(--color-primary);
	}

	.keyboard-feature-tagline {
		font-size: var(--text-lg, 1.125rem);
		font-weight: var(--font-medium, 500);
		color: var(--color-primary);
		margin-bottom: var(--space-4, 1rem);
	}

	.keyboard-feature-description {
		font-size: var(--text-base, 1rem);
		line-height: 1.7;
		color: var(--text-secondary);
		margin-bottom: var(--space-6, 1.5rem);
	}

	.keyboard-feature-benefits {
		display: flex;
		flex-direction: column;
		gap: var(--space-3, 0.75rem);
	}

	.benefit-item {
		display: flex;
		align-items: flex-start;
		gap: var(--space-3, 0.75rem);
		font-size: 0.9375rem;
		color: var(--text-primary);
	}

	.benefit-item svg {
		flex-shrink: 0;
		margin-top: var(--space-0-5, 0.125rem);
		color: var(--color-success-500);
	}

	.keyboard-learn-more {
		display: inline-flex;
		align-items: center;
		gap: var(--space-1-5, 0.375rem);
		margin-top: 1.25rem;
		color: var(--color-primary);
		font-weight: var(--font-semibold, 600);
		font-size: 0.9375rem;
		text-decoration: none;
		transition:
			opacity 0.2s ease,
			transform 0.2s ease,
			background-color 0.2s ease,
			box-shadow 0.2s ease;
	}

	.keyboard-learn-more:hover {
		gap: 0.625rem;
		text-decoration: underline;
	}

	.keyboard-learn-more svg {
		transition: transform 0.2s ease;
	}

	.keyboard-learn-more:hover svg {
		transform: translateX(3px);
	}

	/* Keyboard Preview Visual */
	.keyboard-feature-visual {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.keyboard-preview {
		background: var(--surface-alt);
		border-radius: 1rem;
		overflow: hidden;
		box-shadow: var(--shadow-md);
		width: 100%;
		max-width: 400px;
		border: 1px solid var(--border-color, var(--color-neutral-200));
	}

	.keyboard-preview-header {
		display: flex;
		gap: var(--space-2, 0.5rem);
		padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
		background: var(--surface-card, var(--color-white));
		border-bottom: 1px solid var(--border-color, var(--color-neutral-200));
	}

	.keyboard-preview-dot {
		width: 10px;
		height: 10px;
		border-radius: var(--radius-full, 50%);
		background: var(--color-neutral-300, var(--color-neutral-300));
	}

	.keyboard-preview-dot:first-child {
		background: var(--color-error);
	}
	.keyboard-preview-dot:nth-child(2) {
		background: var(--color-warning);
	}
	.keyboard-preview-dot:nth-child(3) {
		background: var(--color-success);
	}

	.keyboard-preview-content {
		padding: 1.25rem;
	}

	.keyboard-preview-pills {
		display: flex;
		gap: var(--space-1-5, 0.375rem);
		margin-bottom: var(--space-2, 0.5rem);
		flex-wrap: wrap;
	}

	.keyboard-pill {
		display: inline-flex;
		align-items: center;
		gap: var(--space-1, 0.25rem);
		padding: var(--space-1, 0.25rem) var(--space-2, 0.5rem);
		font-size: 0.6875rem;
		font-weight: var(--font-medium, 500);
		border-radius: var(--radius-full, 9999px);
		white-space: nowrap;
	}

	.keyboard-pill-tone {
		background: linear-gradient(
			135deg,
			var(--landing-pill-purple-bg-start),
			var(--landing-pill-purple-bg-end)
		);
		color: var(--landing-pill-purple-text);
		border: 1px solid var(--landing-pill-purple-border);
	}

	.keyboard-pill-voice {
		background: linear-gradient(
			135deg,
			var(--landing-pill-blue-bg-start),
			var(--landing-pill-blue-bg-end)
		);
		color: var(--landing-pill-blue-text);
		border: 1px solid var(--landing-pill-blue-border);
	}

	.keyboard-pill-subject {
		background: linear-gradient(
			135deg,
			var(--landing-pill-green-bg-start),
			var(--landing-pill-green-bg-end)
		);
		color: var(--landing-pill-green-text);
		border: 1px solid var(--landing-pill-green-border);
	}

	/* Enhanced Interactive Keyboard Demo */
	.keyboard-preview-interactive {
		max-width: 420px;
	}

	.keyboard-demo-message-bar {
		display: flex;
		align-items: center;
		gap: var(--space-2, 0.5rem);
		background: var(--surface-card, var(--color-white));
		border: 2px solid var(--color-primary);
		border-radius: 0.625rem;
		padding: 0.625rem var(--space-3, 0.75rem);
		margin-bottom: var(--space-3, 0.75rem);
		min-height: 48px;
	}

	.keyboard-demo-message-text {
		flex: 1;
		font-size: 0.9375rem;
		color: var(--text-muted);
		font-style: italic;
	}

	.keyboard-demo-message-text.has-content {
		color: var(--text-primary);
		font-style: normal;
		font-weight: var(--font-medium, 500);
	}

	.keyboard-demo-speak-inline {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 32px;
		height: 32px;
		border-radius: var(--radius-full, 50%);
		border: none;
		background: var(--color-primary);
		color: var(--color-white);
		cursor: pointer;
		transition:
			opacity 0.15s ease,
			transform 0.15s ease,
			background-color 0.15s ease,
			box-shadow 0.15s ease;
	}

	.keyboard-demo-speak-inline:hover:not(:disabled) {
		background: var(--color-primary-600);
		transform: scale(1.05);
	}

	.keyboard-demo-speak-inline:disabled {
		opacity: 0.4;
		cursor: not-allowed;
	}

	.keyboard-demo-tabs {
		display: flex;
		gap: var(--space-1, 0.25rem);
		margin-bottom: var(--space-3, 0.75rem);
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.keyboard-demo-tabs::-webkit-scrollbar {
		display: none;
	}

	.keyboard-demo-tab {
		padding: var(--space-1-5, 0.375rem) var(--space-3, 0.75rem);
		font-size: var(--text-xs, 0.75rem);
		font-weight: var(--font-medium, 500);
		border-radius: var(--radius-full, 9999px);
		border: 1px solid var(--border-color, var(--color-neutral-200));
		background: transparent;
		color: var(--text-secondary, var(--color-neutral-500));
		cursor: pointer;
		white-space: nowrap;
		transition:
			opacity 0.15s ease,
			transform 0.15s ease,
			background-color 0.15s ease,
			box-shadow 0.15s ease;
	}

	.keyboard-demo-tab:hover {
		background: var(--surface-hover, var(--color-neutral-100));
		color: var(--text-primary);
	}

	.keyboard-demo-tab.active {
		background-color: var(--color-primary-700, oklch(0.48 0.13 228));
		color: var(--color-white, #ffffff);
		border-color: var(--color-primary-700, oklch(0.48 0.13 228));
	}

	.keyboard-demo-word-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: var(--space-2, 0.5rem);
		margin-bottom: var(--space-3, 0.75rem);
	}

	.keyboard-demo-word {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: var(--space-1, 0.25rem);
		min-height: 72px;
		padding: var(--space-2, 0.5rem);
		background: var(--surface-card, var(--color-white));
		border: 1px solid var(--border-color, var(--color-neutral-200));
		border-radius: 0.625rem;
		cursor: pointer;
		transition:
			opacity 0.15s ease,
			transform 0.15s ease,
			background-color 0.15s ease,
			box-shadow 0.15s ease;
	}

	.keyboard-demo-word:hover {
		transform: translateY(-4px);
		box-shadow: var(--shadow-lg);
		border-color: var(--color-primary);
	}

	.keyboard-demo-word:focus-visible {
		outline: 3px solid var(--color-primary);
		outline-offset: 2px;
	}

	.keyboard-demo-word.active {
		animation: demo-pulse 0.4s ease-out;
		background: var(
			--color-primary-alpha-10,
			color-mix(in srgb, var(--color-primary) 10%, transparent)
		);
		border-color: var(--color-primary);
	}

	@keyframes demo-pulse {
		0% {
			transform: scale(1);
			box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-primary) 40%, transparent);
		}
		50% {
			transform: scale(1.05);
			box-shadow: 0 0 0 8px color-mix(in srgb, var(--color-primary) 0%, transparent);
		}
		100% {
			transform: scale(1);
			box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-primary) 0%, transparent);
		}
	}

	.keyboard-demo-word-emoji {
		font-size: var(--text-2xl, 1.5rem);
		line-height: 1;
	}

	.keyboard-demo-word-text {
		font-size: 0.8125rem;
		font-weight: var(--font-semibold, 600);
		color: var(--text-primary);
	}

	.keyboard-demo-actions {
		display: flex;
		gap: var(--space-2, 0.5rem);
		justify-content: space-between;
	}

	.keyboard-demo-btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: var(--space-1-5, 0.375rem);
		padding: var(--space-2, 0.5rem) 0.875rem;
		font-size: 0.8125rem;
		font-weight: var(--font-medium, 500);
		border-radius: 0.5rem;
		border: 1px solid transparent;
		cursor: pointer;
		transition:
			opacity 0.15s ease,
			transform 0.15s ease,
			background-color 0.15s ease,
			box-shadow 0.15s ease;
	}

	.keyboard-demo-btn:disabled {
		opacity: 0.4;
		cursor: not-allowed;
	}

	.keyboard-demo-btn-secondary {
		background: var(--surface-hover, var(--color-neutral-100));
		color: var(--text-secondary, var(--color-neutral-500));
		border-color: var(--border-color, var(--color-neutral-200));
	}

	.keyboard-demo-btn-secondary:hover:not(:disabled) {
		background: var(--surface-card, var(--color-neutral-200));
	}

	.keyboard-demo-btn-primary {
		background: var(--color-primary);
		color: var(--color-white);
	}

	.keyboard-demo-btn-primary:hover:not(:disabled) {
		background: var(--color-primary-600);
	}

	.keyboard-demo-btn-accent {
		background-color: var(--color-success-700, oklch(0.50 0.14 155));
		color: var(--color-white, #ffffff);
		margin-left: auto;
	}

	.keyboard-demo-btn-accent:hover {
		background-color: var(--color-success-800, oklch(0.42 0.12 155));
	}

	@media (prefers-reduced-motion: reduce) {
		.keyboard-demo-word.active {
			animation: none;
		}
		.keyboard-demo-word:hover {
			transform: none;
		}
	}

	/* Accessibility Feature Grid */
	.accessibility-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
		gap: var(--space-6, 1.5rem);
		margin-top: 2.5rem;
	}

	.accessibility-card {
		background: var(--surface-card, var(--color-white));
		border-radius: 1rem;
		padding: var(--space-6, 1.5rem);
		border: 1px solid var(--border-color, var(--color-neutral-200));
		transition:
			opacity 0.2s ease,
			transform 0.2s ease,
			background-color 0.2s ease,
			box-shadow 0.2s ease;
	}

	.accessibility-card:hover {
		border-color: var(
			--color-primary-alpha-40,
			color-mix(in srgb, var(--color-primary) 40%, transparent)
		);
		box-shadow: 0 4px 16px color-mix(in srgb, var(--color-primary) 10%, transparent);
		transform: translateY(-2px);
	}

	.accessibility-card-icon {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 48px;
		height: 48px;
		border-radius: 0.75rem;
		background: linear-gradient(
			135deg,
			var(--color-primary-alpha-10, color-mix(in srgb, var(--color-primary) 10%, transparent)) 0%,
			var(--color-accent-alpha-10, color-mix(in srgb, var(--color-accent) 10%, transparent)) 100%
		);
		margin-bottom: var(--space-4, 1rem);
	}

	.accessibility-card-icon svg {
		color: var(--color-primary);
	}

	.accessibility-card-title {
		font-size: var(--text-lg, 1.125rem);
		font-weight: var(--font-semibold, 600);
		color: var(--text-primary);
		margin-bottom: var(--space-1, 0.25rem);
	}

	.accessibility-card-tagline {
		font-size: var(--text-sm, 0.875rem);
		font-weight: var(--font-medium, 500);
		color: var(--color-primary);
		margin-bottom: var(--space-3, 0.75rem);
	}

	.accessibility-card-description {
		font-size: 0.9375rem;
		line-height: 1.6;
		color: var(--text-secondary);
		margin: 0;
	}

	/* ===== PERSONALIZATION PILLARS ===== */
	.pillars-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: var(--space-6, 1.5rem);
		margin-top: 2.5rem;
		/* Prevent layout shift in grid */
		contain: layout;
	}

	.pillar-card {
		background: var(--surface-card, var(--color-white));
		border-radius: 1rem;
		padding: var(--space-8, 2rem);
		border: 1px solid var(--border-color, var(--color-neutral-200));
		transition:
			opacity 0.2s ease,
			transform 0.2s ease,
			background-color 0.2s ease,
			box-shadow 0.2s ease;
		display: flex;
		flex-direction: column;
		/* Isolate card layout calculations */
		contain: layout style;
	}

	.pillar-card:hover {
		border-color: var(
			--color-primary-alpha-40,
			color-mix(in srgb, var(--color-primary) 40%, transparent)
		);
		box-shadow: 0 4px 16px color-mix(in srgb, var(--color-primary) 10%, transparent);
		transform: translateY(-2px);
	}

	.pillar-icon {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 56px;
		height: 56px;
		border-radius: 0.875rem;
		background: linear-gradient(
			135deg,
			var(--color-primary-alpha-10, color-mix(in srgb, var(--color-primary) 10%, transparent)) 0%,
			var(--color-accent-alpha-10, color-mix(in srgb, var(--color-accent) 10%, transparent)) 100%
		);
		margin-bottom: 1.25rem;
	}

	.pillar-icon svg {
		color: var(--color-primary);
	}

	.pillar-title {
		font-size: var(--text-xl, 1.25rem);
		font-weight: var(--font-bold, 700);
		color: var(--text-primary);
		margin: 0 0 var(--space-2, 0.5rem);
	}

	.pillar-description {
		font-size: 0.9375rem;
		color: var(--text-secondary);
		margin: 0 0 1.25rem;
	}

	.pillar-features {
		list-style: none;
		padding: 0;
		margin: 0;
		display: flex;
		flex-direction: column;
		gap: var(--space-3, 0.75rem);
		flex-grow: 1;
	}

	.pillar-features li {
		display: flex;
		align-items: flex-start;
		gap: var(--space-2, 0.5rem);
		font-size: var(--text-sm, 0.875rem);
		color: var(--text-secondary);
		line-height: 1.5;
	}

	.pillar-features li svg {
		color: var(--color-success);
		flex-shrink: 0;
		margin-top: var(--space-0-5, 0.125rem);
	}

	/* Pillars Mobile Responsiveness */
	@media (max-width: 1024px) {
		.pillars-grid {
			grid-template-columns: repeat(3, 1fr);
			gap: var(--space-4, 1rem);
		}

		.pillar-card {
			padding: var(--space-6, 1.5rem);
		}
	}

	@media (max-width: 768px) {
		.pillars-grid {
			grid-template-columns: repeat(2, 1fr);
			gap: var(--space-4, 1rem);
		}

		.pillar-card {
			padding: var(--space-6, 1.5rem);
		}
	}

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

	/* Pillar Cards Dark Mode — hover shadow/border (non-trivial) */
	.dark .pillar-card:hover {
		border-color: var(
			--color-primary-alpha-40,
			color-mix(in srgb, var(--color-primary) 50%, transparent)
		);
		box-shadow: 0 4px 16px var(--color-black-alpha-30);
	}

	/* Accessibility CTA */
	.accessibility-cta {
		text-align: center;
		margin-top: var(--space-12, 3rem);
		padding: var(--space-8, 2rem);
		background: linear-gradient(
			135deg,
			var(--color-primary-alpha-05, color-mix(in srgb, var(--color-primary) 5%, transparent)) 0%,
			var(--color-accent-alpha-05, color-mix(in srgb, var(--color-accent) 5%, transparent)) 100%
		);
		border-radius: 1rem;
		border: 1px solid
			var(--color-primary-alpha-20, color-mix(in srgb, var(--color-primary) 20%, transparent));
	}

	.accessibility-cta-text {
		font-size: var(--text-lg, 1.125rem);
		font-weight: var(--font-medium, 500);
		color: var(--text-primary);
		margin-bottom: 1.25rem;
	}

	/* Mobile Responsiveness for Accessibility Section */
	@media (max-width: 768px) {
		.keyboard-feature-highlight {
			grid-template-columns: 1fr;
			gap: var(--space-8, 2rem);
			padding: var(--space-6, 1.5rem);
		}

		.keyboard-feature-visual {
			order: -1;
		}

		.keyboard-feature-title {
			font-size: var(--text-2xl, 1.5rem);
		}

		.keyboard-preview,
		.keyboard-preview-interactive {
			max-width: 100%;
		}

		.keyboard-demo-word-grid {
			grid-template-columns: repeat(2, 1fr);
		}

		.keyboard-demo-word {
			min-height: 64px;
		}

		.keyboard-demo-actions {
			flex-wrap: wrap;
		}

		.keyboard-demo-btn-accent {
			margin-left: 0;
			flex: 1 1 100%;
			margin-top: var(--space-2, 0.5rem);
		}

		.accessibility-grid {
			grid-template-columns: 1fr;
		}

		.accessibility-cta {
			padding: var(--space-6, 1.5rem);
		}
	}

	/* Extra small mobile screens - prevent horizontal overflow */
	@media (max-width: 480px) {
		.keyboard-feature-highlight {
			padding: var(--space-4, 1rem);
			margin: var(--space-4, 1rem) 0;
			max-width: 100%;
			overflow-x: hidden;
			box-sizing: border-box;
		}

		.keyboard-feature-content {
			max-width: 100%;
			overflow-x: hidden;
		}

		.keyboard-feature-title {
			font-size: var(--text-xl, 1.25rem);
			flex-wrap: wrap;
		}

		.keyboard-feature-tagline {
			font-size: var(--text-base, 1rem);
		}

		.keyboard-feature-description {
			font-size: var(--text-sm, 0.875rem);
		}

		.keyboard-feature-visual {
			max-width: 100%;
			overflow-x: hidden;
		}

		.keyboard-preview,
		.keyboard-preview-interactive {
			max-width: 100%;
			width: 100%;
			box-sizing: border-box;
		}

		.keyboard-preview-content {
			padding: var(--space-3, 0.75rem);
		}

		.keyboard-demo-word-grid {
			grid-template-columns: repeat(2, 1fr);
			gap: var(--space-1-5, 0.375rem);
		}

		.keyboard-demo-word {
			min-height: 56px;
			padding: var(--space-1-5, 0.375rem);
		}

		.keyboard-demo-word-emoji {
			font-size: var(--text-xl, 1.25rem);
		}

		.keyboard-demo-word-text {
			font-size: var(--text-xs, 0.75rem);
		}

		.keyboard-feature-badge {
			font-size: 0.6875rem;
		}

		.keyboard-feature-benefits {
			gap: var(--space-2, 0.5rem);
		}

		.benefit-item {
			font-size: var(--text-sm, 0.875rem);
		}
	}

	/* ==============================================
	   MID-PAGE CTA SECTION
	   ============================================== */

	.mid-page-cta-section {
		padding: var(--space-12, 3rem) 0;
		background: var(--surface-secondary, var(--color-neutral-50));
	}

	.mid-page-cta {
		text-align: center;
		max-width: 640px;
		margin: 0 auto;
	}

	.mid-page-cta-title {
		font-family: var(--font-family-heading, var(--font-display, inherit));
		font-size: var(--text-2xl, 1.5rem);
		font-weight: var(--font-bold, 700);
		color: var(--text-primary);
		margin-bottom: var(--space-2, 0.5rem);
	}

	.mid-page-cta-subtitle {
		font-size: var(--text-base, 1rem);
		color: var(--text-secondary);
		margin-bottom: var(--space-6, 1.5rem);
	}

	.mid-page-cta-actions {
		display: flex;
		gap: var(--space-3, 0.75rem);
		justify-content: center;
		flex-wrap: wrap;
	}

	.dark .mid-page-cta-section {
		background: var(--surface-secondary, var(--color-neutral-900));
	}

	/* ==============================================
	   ENHANCED PRICING SECTION STYLES
	   Following 2025 SaaS Best Practices
	   ============================================== */

	.pricing-section {
		padding: 5rem 0;
		background: linear-gradient(
			180deg,
			var(--surface-background, var(--color-white)) 0%,
			var(--surface-alt) 50%,
			var(--surface-background, var(--color-white)) 100%
		);
	}

	/* Pricing Header */
	.pricing-header {
		text-align: center;
		margin-bottom: var(--space-8, 2rem);
	}

	.pricing-badge {
		display: inline-flex;
		align-items: center;
		gap: var(--space-2, 0.5rem);
		padding: var(--space-2, 0.5rem) var(--space-4, 1rem);
		background: linear-gradient(
			135deg,
			var(--color-primary-alpha-10) 0%,
			var(--color-accent-alpha-10) 100%
		);
		border: 1px solid var(--color-primary-alpha-20);
		border-radius: var(--radius-full, 9999px);
		font-size: var(--text-sm, 0.875rem);
		font-weight: var(--font-semibold, 600);
		color: var(--color-primary);
		margin-bottom: var(--space-4, 1rem);
	}

	.pricing-badge svg {
		color: var(--color-primary);
	}

	.pricing-title {
		font-size: 2.5rem;
		font-weight: var(--font-bold, 700);
		color: var(--text-primary);
		margin: 0 0 var(--space-3, 0.75rem);
		line-height: 1.2;
	}

	.pricing-subtitle {
		font-size: var(--text-lg, 1.125rem);
		color: var(--text-secondary);
		margin: 0;
		max-width: 600px;
		margin-left: auto;
		margin-right: auto;
	}

	.pricing-subtitle-secondary {
		font-size: 0.9375rem;
		color: var(--text-muted, var(--color-neutral-500));
		opacity: 0.9;
	}

	/* Trust Signals Bar */
	.pricing-trust-bar {
		display: flex;
		justify-content: center;
		gap: var(--space-8, 2rem);
		flex-wrap: wrap;
		margin-bottom: var(--space-8, 2rem);
		padding: var(--space-4, 1rem) 0;
	}

	.trust-signal {
		display: flex;
		align-items: center;
		gap: var(--space-2, 0.5rem);
		font-size: var(--text-sm, 0.875rem);
		font-weight: var(--font-medium, 500);
		color: var(--text-secondary);
	}

	.trust-signal svg {
		color: var(--color-success-500);
	}

	/* Billing Toggle - Subtle tab design matching audience toggle */
	.billing-toggle-wrapper {
		display: flex;
		justify-content: center;
		gap: 0;
		margin-bottom: var(--space-12, 3rem);
		background: transparent;
		border: 1px solid var(--border-color, var(--color-neutral-200));
		border-radius: var(--radius-md, 12px);
		padding: 3px;
		width: fit-content;
		margin-left: auto;
		margin-right: auto;
	}

	.billing-option {
		position: relative;
		padding: var(--space-2, 0.5rem) 1.25rem;
		border-radius: var(--radius-base, 8px);
		font-weight: var(--font-medium, 500);
		font-size: 0.9375rem;
		border: none;
		cursor: pointer;
		transition:
			opacity 0.2s ease,
			transform 0.2s ease,
			background-color 0.2s ease,
			box-shadow 0.2s ease;
		background: transparent;
		color: var(--text-secondary);
		display: flex;
		align-items: center;
		gap: var(--space-2, 0.5rem);
	}

	.billing-option:hover {
		color: var(--text-primary);
		background: var(--surface-hover);
	}

	.billing-option.active {
		background: var(--surface-card, var(--color-white));
		color: var(--text-primary);
		font-weight: var(--font-semibold, 600);
		box-shadow: var(--shadow-sm);
	}

	.savings-badge {
		display: inline-flex;
		padding: var(--space-0-5, 0.125rem) var(--space-2, 0.5rem);
		background: var(--color-success-100);
		color: var(--color-success-800);
		font-size: var(--text-xs, 0.75rem);
		font-weight: var(--font-bold, 700);
		border-radius: var(--radius-full, 9999px);
	}

	.billing-option.active .savings-badge {
		background: var(--color-success-100);
		color: var(--color-success-800);
	}

	/* Pricing Cards Grid */
	.pricing-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: var(--space-6, 1.5rem);
		max-width: 1100px;
		margin: 0 auto 2.5rem;
		overflow: visible;
	}

	.pricing-card {
		position: relative;
		background: var(--surface-card, var(--color-white));
		border-radius: 1.25rem;
		padding: var(--space-8, 2rem);
		border: 2px solid var(--border-color, var(--color-neutral-200));
		transition:
			opacity 0.25s ease,
			transform 0.25s ease,
			background-color 0.25s ease,
			box-shadow 0.25s ease;
		display: flex;
		flex-direction: column;
	}

	.pricing-card:hover {
		transform: translateY(-4px);
		box-shadow: var(--shadow-xl);
		border-color: var(
			--color-primary-alpha-40,
			color-mix(in srgb, var(--botanical-primary) 40%, transparent)
		);
	}

	.pricing-card.popular {
		border-color: var(--color-primary);
		transform: scale(1.03);
		box-shadow: 0 8px 24px color-mix(in srgb, var(--botanical-primary) 15%, transparent);
		background: linear-gradient(
			180deg,
			var(--color-white) 0%,
			color-mix(in srgb, var(--botanical-primary) 2%, transparent) 100%
		);
		z-index: 1;
	}

	.pricing-card.popular:hover {
		transform: scale(1.03) translateY(-4px);
		box-shadow: 0 16px 40px color-mix(in srgb, var(--botanical-primary) 20%, transparent);
	}

	.popular-badge {
		position: absolute;
		top: -14px;
		left: 50%;
		transform: translateX(-50%);
		background: linear-gradient(
			135deg,
			var(--button-primary-background, var(--botanical-primary)),
			var(--button-primary-background-hover, var(--color-primary-700))
		);
		color: var(--button-primary-text, var(--color-white, hsl(0 0% 100%)));
		padding: var(--space-1-5, 0.375rem) var(--space-4, 1rem);
		border-radius: var(--radius-full, 9999px);
		font-size: var(--text-xs, 0.75rem);
		font-weight: var(--font-bold, 700);
		letter-spacing: 0.5px;
		text-transform: uppercase;
		white-space: nowrap;
	}

	/* Card Header */
	.pricing-card-header {
		text-align: center;
		margin-bottom: var(--space-6, 1.5rem);
	}

	.pricing-card-icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 48px;
		height: 48px;
		background: linear-gradient(
			135deg,
			var(--color-primary-alpha-10) 0%,
			var(--color-accent-alpha-10) 100%
		);
		border-radius: var(--radius-md, 12px);
		margin-bottom: var(--space-4, 1rem);
	}

	.pricing-card-icon svg {
		color: var(--color-primary);
	}

	.pricing-card.popular .pricing-card-icon {
		background: linear-gradient(
			135deg,
			var(--color-primary-alpha-15) 0%,
			var(--color-accent-alpha-10) 100%
		);
	}

	.pricing-card-title {
		font-size: var(--text-2xl, 1.5rem);
		font-weight: var(--font-bold, 700);
		color: var(--text-primary);
		margin: 0 0 var(--space-1, 0.25rem);
	}

	.pricing-card-subtitle {
		font-size: 0.9375rem;
		color: var(--text-secondary);
		margin: 0;
	}

	/* Price Display */
	.pricing-card-price {
		text-align: center;
		margin-bottom: var(--space-6, 1.5rem);
		position: relative;
	}

	.price-currency {
		font-size: var(--text-2xl, 1.5rem);
		font-weight: var(--font-semibold, 600);
		color: var(--color-primary);
		vertical-align: top;
		position: relative;
		top: 8px;
	}

	.price-amount {
		font-size: 3.5rem;
		font-weight: var(--font-bold, 700);
		color: var(--color-primary);
		line-height: 1;
	}

	.price-period {
		font-size: var(--text-base, 1rem);
		font-weight: var(--font-normal, 400);
		color: var(--text-secondary);
	}

	.price-savings {
		display: inline-block;
		margin-top: var(--space-2, 0.5rem);
		padding: var(--space-1, 0.25rem) var(--space-3, 0.75rem);
		background: var(--color-success-100);
		color: var(--color-success-700);
		font-size: 0.8125rem;
		font-weight: var(--font-semibold, 600);
		border-radius: var(--radius-full, 9999px);
	}

	/* CTA Button */
	.pricing-cta {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: var(--space-2, 0.5rem);
		width: 100%;
		padding: 0.875rem var(--space-6, 1.5rem);
		border-radius: 0.625rem;
		font-size: var(--text-base, 1rem);
		font-weight: var(--font-semibold, 600);
		cursor: pointer;
		transition:
			opacity 0.2s ease,
			transform 0.2s ease,
			background-color 0.2s ease,
			box-shadow 0.2s ease;
		border: none;
	}

	.pricing-cta.primary {
		background: linear-gradient(
			135deg,
			var(--button-primary-background, var(--botanical-primary)),
			var(--button-primary-background-hover, var(--color-primary-700))
		);
		color: var(--button-primary-text, var(--color-white, hsl(0 0% 100%)));
	}

	.pricing-cta.primary:hover {
		background: linear-gradient(
			135deg,
			var(--button-primary-background-hover, var(--color-primary-700)),
			var(--button-primary-background, var(--botanical-primary))
		);
		transform: translateY(-1px);
		box-shadow: 0 4px 12px
			color-mix(
				in srgb,
				var(--button-primary-background, var(--botanical-primary)) 30%,
				transparent
			);
	}

	.pricing-cta.secondary {
		background: var(--surface-card);
		color: var(--text-primary);
		border: 1px solid var(--border-color);
	}

	.pricing-cta.secondary:hover {
		background: var(--surface-hover);
		border-color: var(--color-primary);
	}

	.pricing-cta svg {
		transition: transform 0.2s ease;
	}

	.pricing-cta:hover svg {
		transform: translateX(2px);
	}

	.pricing-cta-note {
		font-size: 0.8125rem;
		color: var(--text-tertiary);
		text-align: center;
		margin: var(--space-3, 0.75rem) 0 0;
	}

	/* Features List */
	.pricing-features {
		list-style: none;
		padding: 0;
		margin: var(--space-6, 1.5rem) 0 0;
		flex: 1;
	}

	.pricing-feature {
		display: flex;
		align-items: flex-start;
		gap: var(--space-3, 0.75rem);
		padding: 0.625rem 0;
		font-size: 0.9375rem;
		color: var(--text-primary);
	}

	.pricing-feature.highlight {
		font-weight: var(--font-semibold, 600);
		color: var(--color-primary);
	}

	.feature-check {
		flex-shrink: 0;
		color: var(--color-success-500);
		margin-top: var(--space-0-5, 0.125rem);
	}

	.pricing-feature.highlight .feature-check {
		color: var(--color-primary);
	}

	/* Enterprise Card */
	.enterprise-card {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-8, 2rem);
		max-width: 1100px;
		margin: 0 auto 2.5rem;
		padding: var(--space-8, 2rem) 2.5rem;
		background: linear-gradient(
			135deg,
			var(--surface-card, var(--color-white)) 0%,
			var(--surface-alt) 100%
		);
		border: 2px solid var(--border-color, var(--color-neutral-200));
		border-radius: 1.25rem;
		transition:
			opacity 0.2s ease,
			transform 0.2s ease,
			background-color 0.2s ease,
			box-shadow 0.2s ease;
	}

	.enterprise-card:hover {
		border-color: var(--color-primary-alpha-40);
		box-shadow: var(--shadow-sm);
	}

	.enterprise-content {
		flex: 1;
	}

	.enterprise-header {
		display: flex;
		align-items: center;
		gap: var(--space-4, 1rem);
		margin-bottom: var(--space-4, 1rem);
	}

	.enterprise-icon {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 56px;
		height: 56px;
		background: linear-gradient(
			135deg,
			var(--color-primary-alpha-10) 0%,
			var(--color-accent-alpha-10) 100%
		);
		border-radius: var(--radius-md, 12px);
	}

	.enterprise-icon svg {
		color: var(--color-primary);
	}

	.enterprise-title {
		font-size: 1.375rem;
		font-weight: var(--font-bold, 700);
		color: var(--text-primary);
		margin: 0;
	}

	.enterprise-subtitle {
		font-size: 0.9375rem;
		color: var(--text-secondary);
		margin: var(--space-1, 0.25rem) 0 0;
	}

	.enterprise-features {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-2, 0.5rem) var(--space-6, 1.5rem);
		list-style: none;
		padding: 0;
		margin: 0;
	}

	.enterprise-features li {
		display: flex;
		align-items: center;
		gap: var(--space-2, 0.5rem);
		font-size: 0.9375rem;
		color: var(--text-secondary);
	}

	.enterprise-features svg {
		color: var(--color-success-500);
		flex-shrink: 0;
	}

	.enterprise-cta {
		text-align: center;
	}

	.enterprise-cta .pricing-cta {
		width: auto;
		min-width: 160px;
	}

	.enterprise-note {
		font-size: 0.8125rem;
		color: var(--text-tertiary);
		margin: var(--space-3, 0.75rem) 0 0;
	}

	/* Guarantee Banner */
	.guarantee-banner {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: var(--space-3, 0.75rem);
		max-width: 700px;
		margin: 0 auto;
		padding: 1.25rem var(--space-8, 2rem);
		background: linear-gradient(135deg, var(--color-success-50) 0%, var(--color-success-100) 100%);
		border: 1px solid var(--color-success-200);
		border-radius: 1rem;
		text-align: center;
	}

	.guarantee-banner svg {
		color: var(--color-success-600);
		flex-shrink: 0;
	}

	.guarantee-banner p {
		font-size: 0.9375rem;
		color: var(--color-success-800);
		margin: 0;
		text-align: left;
	}

	.guarantee-banner strong {
		font-weight: var(--font-bold, 700);
	}

	/* Accessibility Promise */
	.accessibility-promise {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: var(--space-2, 0.5rem);
		margin: var(--space-6, 1.5rem) auto 0;
		font-size: 0.9375rem;
		color: var(--text-secondary, var(--color-neutral-500));
		font-weight: var(--font-medium, 500);
	}

	.accessibility-promise svg {
		color: var(--color-primary);
		flex-shrink: 0;
	}

	/* Pricing Section Mobile Responsiveness */
	@media (max-width: 1024px) {
		.pricing-grid {
			grid-template-columns: repeat(3, 1fr);
			gap: var(--space-4, 1rem);
		}

		.pricing-card {
			padding: var(--space-6, 1.5rem);
		}

		.pricing-card.popular {
			transform: scale(1.02);
		}

		.enterprise-card {
			flex-direction: column;
			text-align: center;
		}

		.enterprise-header {
			justify-content: center;
			flex-direction: column;
		}

		.enterprise-features {
			justify-content: center;
		}
	}

	@media (max-width: 768px) {
		.pricing-section {
			padding: var(--space-12, 3rem) 0;
		}

		.pricing-title {
			font-size: var(--text-3xl, 1.875rem);
		}

		.pricing-trust-bar {
			gap: var(--space-4, 1rem);
		}

		.trust-signal {
			font-size: 0.8125rem;
		}

		.pricing-grid {
			grid-template-columns: 1fr;
			max-width: 400px;
			padding-top: var(--space-4, 1rem); /* Room for popular badge above first card */
		}

		.pricing-card.popular {
			transform: none;
			order: -1; /* Put popular first on mobile */
		}

		.pricing-card.popular:hover {
			transform: translateY(-4px);
		}

		.enterprise-card {
			padding: var(--space-6, 1.5rem);
		}

		.enterprise-features {
			flex-direction: column;
			align-items: center;
			gap: var(--space-2, 0.5rem);
		}

		.guarantee-banner {
			flex-direction: column;
			text-align: center;
			padding: var(--space-6, 1.5rem);
		}

		.guarantee-banner p {
			text-align: center;
		}
	}

	@media (max-width: 480px) {
		.billing-toggle-wrapper {
			width: 100%;
			max-width: 340px;
		}

		.billing-option {
			flex: 1;
			justify-content: center;
			padding: 0.625rem var(--space-3, 0.75rem);
			font-size: var(--text-sm, 0.875rem);
			white-space: nowrap;
			flex-wrap: wrap;
			gap: var(--space-1, 0.25rem);
		}

		.savings-badge {
			font-size: var(--text-xs, 0.75rem);
			padding: var(--space-0-5, 0.125rem) var(--space-1-5, 0.375rem);
		}

		.price-amount {
			font-size: 2.75rem;
		}
	}

	@media (max-width: 360px) {
		.billing-toggle-wrapper {
			max-width: 100%;
			padding: var(--space-0-5);
		}

		.billing-option {
			padding: var(--space-2, 0.5rem) var(--space-2, 0.5rem);
			font-size: 0.8125rem;
		}

		.savings-badge {
			font-size: var(--text-xs, 0.75rem);
			padding: 0.0625rem var(--space-1, 0.25rem);
		}
	}

	/* ==============================================
	   LEARNING TOOLS SECTION STYLES
	   ============================================== */

	/* Toolkit Categories (Use-case grouping) */
	.toolkit-categories {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: var(--space-6, 1.5rem);
		margin-top: 2.5rem;
	}

	.toolkit-category {
		background: var(--surface-card, var(--color-white));
		border-radius: 1rem;
		padding: var(--space-8, 2rem);
		border: 1px solid var(--border-color, var(--color-neutral-200));
		transition:
			opacity 0.2s ease,
			transform 0.2s ease,
			background-color 0.2s ease,
			box-shadow 0.2s ease;
		display: flex;
		flex-direction: column;
	}

	.toolkit-category:hover {
		border-color: var(--category-color, var(--color-primary));
		box-shadow: var(--shadow-md);
		transform: translateY(-2px);
	}

	.toolkit-category-icon {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 56px;
		height: 56px;
		border-radius: 0.875rem;
		background: color-mix(in srgb, var(--category-color, var(--color-primary)) 10%, transparent);
		margin-bottom: 1.25rem;
	}

	.toolkit-category-icon svg {
		color: var(--category-color, var(--color-primary));
	}

	.toolkit-category-title {
		font-size: var(--text-xl, 1.25rem);
		font-weight: var(--font-bold, 700);
		color: var(--text-primary);
		margin: 0 0 var(--space-2, 0.5rem);
	}

	.toolkit-category-description {
		font-size: 0.9375rem;
		color: var(--text-secondary);
		margin: 0 0 1.25rem;
	}

	.toolkit-category-tools {
		list-style: none;
		padding: 0;
		margin: 0;
		display: flex;
		flex-direction: column;
		gap: 0.625rem;
		flex-grow: 1;
	}

	.toolkit-category-tools li {
		display: flex;
		align-items: center;
		gap: var(--space-2, 0.5rem);
		font-size: var(--text-sm, 0.875rem);
		color: var(--text-secondary);
	}

	.toolkit-category-tools li svg {
		color: var(--color-success);
		flex-shrink: 0;
	}

	@media (max-width: 1024px) {
		.toolkit-categories {
			grid-template-columns: repeat(3, 1fr);
			gap: var(--space-4, 1rem);
		}

		.toolkit-category {
			padding: var(--space-6, 1.5rem);
		}
	}

	@media (max-width: 768px) {
		.toolkit-categories {
			grid-template-columns: repeat(2, 1fr);
			gap: var(--space-4, 1rem);
		}
	}

	@media (max-width: 480px) {
		.toolkit-categories {
			grid-template-columns: 1fr;
		}
	}

	.learning-tools-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
		gap: var(--space-6, 1.5rem);
		padding: var(--space-12, 3rem) 0;
		transition:
			opacity 0.3s cubic-bezier(0.42, 0, 0.58, 1),
			transform 0.3s cubic-bezier(0.42, 0, 0.58, 1),
			background-color 0.3s cubic-bezier(0.42, 0, 0.58, 1);
	}

	.learning-tool-card {
		position: relative;
		text-align: center;
		padding: var(--space-8, 2rem);
		transition:
			opacity 0.3s cubic-bezier(0.42, 0, 0.58, 1),
			transform 0.3s cubic-bezier(0.42, 0, 0.58, 1),
			background-color 0.3s cubic-bezier(0.42, 0, 0.58, 1);
		background: var(--surface-card, var(--color-white));
		border: 2px solid transparent;
	}

	.learning-tool-card::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 4px;
		background: var(--tool-color, var(--color-primary));
		opacity: 0;
		transition: opacity 0.3s ease;
	}

	.learning-tool-card:hover {
		transform: translateY(-8px) scale(1.02);
		border-color: var(--tool-color, var(--color-primary));
		box-shadow:
			0 16px 32px var(--color-black-alpha-10),
			0 4px 16px var(--color-black-alpha-5);
	}

	.learning-tool-card:hover::before {
		opacity: 1;
	}

	.learning-tool-icon {
		width: 72px;
		height: 72px;
		margin: 0 auto var(--space-6, 1.5rem);
		padding: var(--space-4, 1rem);
		border-radius: var(--radius-xl, 1rem);
		background: linear-gradient(
			135deg,
			color-mix(in srgb, var(--tool-color, var(--color-primary)) 15%, transparent),
			color-mix(in srgb, var(--tool-color, var(--color-primary)) 8%, transparent)
		);
		color: var(--tool-color, var(--color-primary));
		display: flex;
		align-items: center;
		justify-content: center;
		transition: transform 0.3s ease;
	}

	.learning-tool-card:hover .learning-tool-icon {
		transform: scale(1.1) rotate(5deg);
	}

	.learning-tool-title {
		font-size: var(--text-xl, 1.25rem);
		font-weight: var(--font-semibold, 600);
		margin-bottom: var(--space-3, 0.75rem);
		color: var(--text-primary);
	}

	.learning-tool-description {
		font-size: var(--text-base, 0.9375rem);
		color: var(--text-secondary);
		line-height: 1.6;
		margin: 0;
	}

	/* Tools Toggle Button */
	.tools-toggle-container {
		display: flex;
		justify-content: center;
		padding-top: var(--space-8, 2rem);
		padding-bottom: var(--space-4, 1rem);
	}

	.tools-toggle-button {
		display: flex;
		align-items: center;
		gap: var(--space-3, 0.75rem);
		padding: var(--space-4, 1rem) var(--space-8, 2rem);
		background: var(--surface-card, var(--color-white));
		border: 2px solid var(--border-color, var(--color-neutral-200));
		border-radius: var(--radius-full, 9999px);
		font-size: var(--text-base, 0.9375rem);
		font-weight: var(--font-semibold, 600);
		color: var(--text-primary);
		cursor: pointer;
		transition:
			opacity 0.3s cubic-bezier(0.42, 0, 0.58, 1),
			transform 0.3s cubic-bezier(0.42, 0, 0.58, 1),
			background-color 0.3s cubic-bezier(0.42, 0, 0.58, 1);
		box-shadow: var(--shadow-md);
	}

	.tools-toggle-button:hover {
		background: var(--color-primary-50);
		border-color: var(--color-primary);
		color: var(--color-primary);
		transform: translateY(-2px);
		box-shadow: var(--shadow-lg);
	}

	.tools-toggle-button:active {
		transform: translateY(0);
		box-shadow: var(--shadow-sm);
	}

	.tools-toggle-button:focus-visible {
		outline: 3px solid var(--color-primary);
		outline-offset: 2px;
	}

	.tools-toggle-text {
		font-weight: var(--font-semibold, 600);
	}

	.tools-toggle-icon {
		width: 20px;
		height: 20px;
		transition: transform 0.3s cubic-bezier(0.42, 0, 0.58, 1);
	}

	.tools-toggle-icon.rotate-180 {
		transform: rotate(180deg);
	}

	/* Responsive adjustments for learning tools */
	@media (max-width: 768px) {
		.learning-tools-grid {
			grid-template-columns: 1fr;
			gap: var(--space-4, 1rem);
			padding: var(--space-8, 2rem) 0;
		}

		.learning-tool-card {
			padding: var(--space-6, 1.5rem);
		}

		.learning-tool-icon {
			width: 64px;
			height: 64px;
		}
	}

	@media (max-width: 480px) {
		.learning-tool-icon {
			width: 56px;
			height: 56px;
		}

		.learning-tool-title {
			font-size: var(--text-lg, 1.125rem);
		}

		.learning-tool-description {
			font-size: var(--text-sm, 0.875rem);
		}
	}

	/* Founder touch — single line inside trust section */
	.founder-touch {
		text-align: center;
		margin-top: var(--space-8, 2rem);
		font-size: 0.9rem;
		color: var(--text-tertiary, var(--color-neutral-500));
	}

	.founder-touch p {
		margin: 0;
	}

	.founder-touch a {
		color: var(--color-primary);
		text-decoration: none;
		font-weight: var(--font-medium, 500);
		margin-left: var(--space-1, 0.25rem);
	}

	.founder-touch a:hover {
		text-decoration: underline;
	}

	/* ==============================================
	   TRUST SECTION STYLES
	   Replacing testimonials with trust-building elements
	   ============================================== */

	.trust-section {
		padding: 5rem 0;
		background: linear-gradient(
			180deg,
			var(--surface-background, var(--color-white)) 0%,
			var(--color-primary-alpha-05, color-mix(in srgb, var(--botanical-primary) 3%, transparent))
				50%,
			var(--surface-background, var(--color-white)) 100%
		);
	}

	/* Trust Header */
	.trust-header {
		text-align: center;
		margin-bottom: var(--space-12, 3rem);
	}

	.trust-badge-header {
		display: inline-flex;
		align-items: center;
		gap: var(--space-2, 0.5rem);
		padding: var(--space-2, 0.5rem) var(--space-4, 1rem);
		background: linear-gradient(135deg, var(--color-success-100) 0%, var(--color-success-50) 100%);
		border: 1px solid var(--color-success-200);
		border-radius: var(--radius-full, 9999px);
		font-size: var(--text-sm, 0.875rem);
		font-weight: var(--font-semibold, 600);
		color: var(--color-success-700);
		margin-bottom: var(--space-4, 1rem);
	}

	.trust-badge-header svg {
		color: var(--color-success-600);
	}

	.trust-title {
		font-size: 2.5rem;
		font-weight: var(--font-bold, 700);
		color: var(--text-primary);
		margin: 0 0 var(--space-3, 0.75rem);
		line-height: 1.2;
	}

	.trust-subtitle {
		font-size: var(--text-lg, 1.125rem);
		color: var(--text-secondary);
		margin: 0;
		max-width: 600px;
		margin-left: auto;
		margin-right: auto;
	}

	/* Platform Stats Grid */
	.trust-stats-grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: var(--space-6, 1.5rem);
		max-width: 900px;
		margin: 0 auto var(--space-12, 3rem);
	}

	.trust-stat {
		text-align: center;
		padding: var(--space-6, 1.5rem) var(--space-4, 1rem);
		background: var(--surface-card, var(--color-white));
		border-radius: 1rem;
		border: 1px solid var(--border-color, var(--color-neutral-200));
		transition:
			opacity 0.2s ease,
			transform 0.2s ease,
			background-color 0.2s ease,
			box-shadow 0.2s ease;
	}

	.trust-stat:hover {
		transform: translateY(-2px);
		box-shadow: var(--shadow-md);
		border-color: var(--color-primary-alpha-40);
	}

	.trust-stat-value {
		display: block;
		font-size: 2.5rem;
		font-weight: var(--font-bold, 700);
		color: var(--color-primary);
		line-height: 1;
		margin-bottom: var(--space-2, 0.5rem);
	}

	.trust-stat-label {
		display: block;
		font-size: var(--text-base, 1rem);
		font-weight: var(--font-semibold, 600);
		color: var(--text-primary);
		margin-bottom: var(--space-1, 0.25rem);
	}

	.trust-stat-desc {
		display: block;
		font-size: 0.8125rem;
		color: var(--text-tertiary);
	}

	/* Trust Badges Grid */
	.trust-badges-grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: var(--space-6, 1.5rem);
		max-width: 900px;
		margin: 0 auto var(--space-12, 3rem);
	}

	.trust-badge-card {
		text-align: center;
		padding: var(--space-6, 1.5rem);
		background: var(--surface-card, var(--color-white));
		border-radius: 1rem;
		border: 1px solid var(--border-color, var(--color-neutral-200));
		transition:
			opacity 0.2s ease,
			transform 0.2s ease,
			background-color 0.2s ease,
			box-shadow 0.2s ease;
	}

	.trust-badge-card:hover {
		transform: translateY(-2px);
		box-shadow: var(--shadow-md);
	}

	.trust-badge-icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 48px;
		height: 48px;
		background: linear-gradient(
			135deg,
			var(--color-primary-alpha-10) 0%,
			var(--color-accent-alpha-10) 100%
		);
		border-radius: var(--radius-md, 12px);
		margin-bottom: var(--space-4, 1rem);
	}

	.trust-badge-icon svg {
		color: var(--color-primary);
	}

	.trust-badge-title {
		font-size: var(--text-base, 1rem);
		font-weight: var(--font-semibold, 600);
		color: var(--text-primary);
		margin: 0 0 var(--space-1, 0.25rem);
	}

	.trust-badge-desc {
		font-size: var(--text-sm, 0.875rem);
		color: var(--text-secondary);
		margin: 0;
	}

	/* Commitments Section */
	.commitments-section {
		max-width: 900px;
		margin: 0 auto 2.5rem;
		padding: var(--space-8, 2rem);
		background: var(--surface-card, var(--color-white));
		border-radius: 1.25rem;
		border: 1px solid var(--border-color, var(--color-neutral-200));
	}

	.commitments-title {
		font-size: var(--text-xl, 1.25rem);
		font-weight: var(--font-bold, 700);
		color: var(--text-primary);
		text-align: center;
		margin: 0 0 var(--space-6, 1.5rem);
	}

	.commitments-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: var(--space-6, 1.5rem);
	}

	.commitment-card {
		display: flex;
		gap: var(--space-3, 0.75rem);
		align-items: flex-start;
	}

	.commitment-check {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 28px;
		height: 28px;
		background: var(--color-success-100);
		border-radius: var(--radius-full, 50%);
		flex-shrink: 0;
	}

	.commitment-check svg {
		color: var(--color-success-600);
	}

	.commitment-heading {
		font-size: var(--text-base, 1rem);
		font-weight: var(--font-semibold, 600);
		color: var(--text-primary);
		margin: 0 0 var(--space-1, 0.25rem);
	}

	.commitment-text {
		font-size: var(--text-sm, 0.875rem);
		color: var(--text-secondary);
		margin: 0;
		line-height: 1.5;
	}

	/* Technology Note */
	.tech-note {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: var(--space-3, 0.75rem);
		max-width: 700px;
		margin: var(--space-8, 2rem) auto 0;
		padding: var(--space-4, 1rem) var(--space-6, 1.5rem);
		background: linear-gradient(
			135deg,
			var(--color-primary-alpha-05) 0%,
			var(--color-accent-alpha-05) 100%
		);
		border: 1px solid var(--color-primary-alpha-20);
		border-radius: 0.75rem;
	}

	.tech-note svg {
		color: var(--color-primary);
		flex-shrink: 0;
	}

	.tech-note p {
		font-size: 0.9375rem;
		color: var(--text-secondary);
		margin: 0;
		text-align: center;
	}

	/* Trust Section Responsive */
	@media (max-width: 1024px) {
		.trust-stats-grid,
		.trust-badges-grid {
			grid-template-columns: repeat(2, 1fr);
		}

		.commitments-grid {
			grid-template-columns: 1fr;
			gap: var(--space-4, 1rem);
		}
	}

	@media (max-width: 768px) {
		.trust-section {
			padding: var(--space-12, 3rem) 0;
		}

		.trust-title {
			font-size: var(--text-3xl, 1.875rem);
		}

		.trust-stats-grid {
			grid-template-columns: repeat(2, 1fr);
			gap: var(--space-4, 1rem);
		}

		.trust-stat-value {
			font-size: 2rem;
		}

		.trust-badges-grid {
			grid-template-columns: repeat(2, 1fr);
			gap: var(--space-4, 1rem);
		}

		.commitments-section {
			padding: var(--space-6, 1.5rem);
		}

		.tech-note {
			flex-direction: column;
			text-align: center;
		}
	}

	@media (max-width: 480px) {
		.trust-stats-grid,
		.trust-badges-grid {
			grid-template-columns: 1fr;
		}
	}

	/* ==============================================
	   HOMESCHOOL FAMILIES SECTION
	   ============================================== */

	.homeschool-section {
		padding: 5rem 0;
		background: linear-gradient(
			180deg,
			var(--surface-background, var(--color-white)) 0%,
			color-mix(in srgb, var(--botanical-primary, var(--color-primary-500)) 4%, var(--surface-background, white)) 50%,
			var(--surface-background, var(--color-white)) 100%
		);
	}

	.homeschool-badge {
		display: inline-flex;
		align-items: center;
		gap: var(--space-2, 0.5rem);
		padding: var(--space-2, 0.5rem) var(--space-4, 1rem);
		background: linear-gradient(135deg, var(--color-accent-100, #fef3c7) 0%, var(--color-accent-50, #fffbeb) 100%);
		border: 1px solid var(--color-accent-200, #fde68a);
		border-radius: var(--radius-full, 9999px);
		font-size: var(--text-sm, 0.875rem);
		font-weight: var(--font-semibold, 600);
		color: var(--color-accent-700, #b45309);
		margin-bottom: var(--space-4, 1rem);
	}

	.homeschool-badge svg {
		color: var(--color-accent-600, #d97706);
	}

	.homeschool-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
		gap: var(--space-6, 1.5rem);
		margin-bottom: var(--space-8, 2rem);
	}

	.homeschool-card {
		padding: var(--space-6, 1.5rem);
		border-radius: var(--radius-lg, 12px);
		background: var(--surface-background, white);
		border: 1px solid var(--color-border-light, #e5e7eb);
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
		animation: stat-enter 0.4s ease calc(var(--index, 0) * 80ms) both;
	}

	.homeschool-card-icon {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 48px;
		height: 48px;
		border-radius: var(--radius-md, 8px);
		background: color-mix(in srgb, var(--botanical-primary, var(--color-primary-500)) 8%, transparent);
		color: var(--botanical-primary, var(--color-primary-600));
		margin-bottom: var(--space-4, 1rem);
	}

	.homeschool-card-title {
		font-size: var(--text-lg, 1.125rem);
		font-weight: var(--font-bold, 700);
		color: var(--text-primary);
		margin: 0 0 var(--space-2, 0.5rem);
	}

	.homeschool-card-pain {
		font-size: var(--text-sm, 0.875rem);
		color: var(--text-secondary);
		margin: 0 0 var(--space-3, 0.75rem);
		line-height: 1.5;
	}

	.homeschool-card-solution {
		font-size: var(--text-sm, 0.875rem);
		color: var(--text-primary);
		margin: 0;
		line-height: 1.6;
	}

	/* Honesty callout */
	.homeschool-honesty {
		display: flex;
		gap: var(--space-4, 1rem);
		padding: var(--space-6, 1.5rem);
		border-radius: var(--radius-lg, 12px);
		background: color-mix(in srgb, var(--color-success-500, #16a34a) 5%, var(--surface-background, white));
		border: 1px solid var(--color-success-200, #bbf7d0);
		margin-bottom: var(--space-8, 2rem);
	}

	.homeschool-honesty > svg {
		flex-shrink: 0;
		color: var(--color-success-600, #16a34a);
		margin-top: 2px;
	}

	.homeschool-honesty-title {
		font-weight: var(--font-semibold, 600);
		color: var(--text-primary);
		margin: 0 0 var(--space-2, 0.5rem);
	}

	.homeschool-honesty-text {
		font-size: var(--text-sm, 0.875rem);
		color: var(--text-secondary);
		margin: 0;
		line-height: 1.6;
	}

	/* CTA */
	.homeschool-cta {
		text-align: center;
	}

	.homeschool-cta-note {
		font-size: var(--text-sm, 0.875rem);
		color: var(--text-secondary);
		margin: var(--space-3, 0.75rem) 0 0;
	}

	@media (max-width: 768px) {
		.homeschool-section {
			padding: var(--space-12, 3rem) 0;
		}

		.homeschool-grid {
			grid-template-columns: 1fr;
		}

		.homeschool-honesty {
			flex-direction: column;
		}
	}

	/* ==============================================
	   ROADMAP SECTION STYLES
	   ============================================== */

	.roadmap-section {
		padding: 5rem 0;
		background: var(--surface-background, var(--color-white));
	}

	.roadmap-header {
		text-align: center;
		margin-bottom: var(--space-12, 3rem);
	}

	.roadmap-badge {
		display: inline-flex;
		align-items: center;
		gap: var(--space-2, 0.5rem);
		padding: var(--space-2, 0.5rem) var(--space-4, 1rem);
		background: linear-gradient(
			135deg,
			var(--color-primary-alpha-10) 0%,
			var(--color-accent-alpha-10) 100%
		);
		border: 1px solid var(--color-primary-alpha-20);
		border-radius: var(--radius-full, 9999px);
		font-size: var(--text-sm, 0.875rem);
		font-weight: var(--font-semibold, 600);
		color: var(--color-primary);
		margin-bottom: var(--space-4, 1rem);
	}

	.roadmap-badge svg {
		color: var(--color-primary);
	}

	.roadmap-title {
		font-size: 2.5rem;
		font-weight: var(--font-bold, 700);
		color: var(--text-primary);
		margin: 0 0 var(--space-3, 0.75rem);
	}

	.roadmap-subtitle {
		font-size: var(--text-lg, 1.125rem);
		color: var(--text-secondary);
		margin: 0;
	}

	.roadmap-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: var(--space-6, 1.5rem);
		max-width: 1000px;
		margin: 0 auto var(--space-8, 2rem);
	}

	.roadmap-card {
		position: relative;
		background: var(--surface-card, var(--color-white));
		border-radius: 1rem;
		padding: var(--space-8, 2rem);
		border: 1px solid var(--border-color, var(--color-neutral-200));
		text-align: center;
		transition:
			opacity 0.25s ease,
			transform 0.25s ease,
			background-color 0.25s ease,
			box-shadow 0.25s ease;
	}

	.roadmap-card:hover {
		transform: translateY(-4px);
		box-shadow: var(--shadow-lg);
		border-color: var(--card-color, var(--color-primary));
	}

	.roadmap-card-icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 56px;
		height: 56px;
		border-radius: 14px;
		margin-bottom: 1.25rem;
	}

	.roadmap-card-title {
		font-size: var(--text-xl, 1.25rem);
		font-weight: var(--font-bold, 700);
		color: var(--text-primary);
		margin: 0 0 var(--space-2, 0.5rem);
	}

	.roadmap-card-desc {
		font-size: 0.9375rem;
		color: var(--text-secondary);
		margin: 0 0 var(--space-4, 1rem);
		line-height: 1.5;
	}

	.roadmap-eta {
		display: inline-block;
		padding: var(--space-1-5, 0.375rem) var(--space-3, 0.75rem);
		background: var(--surface-alt);
		border: 1px solid var(--border-color, var(--color-neutral-200));
		border-radius: var(--radius-full, 9999px);
		font-size: 0.8125rem;
		font-weight: var(--font-semibold, 600);
		color: var(--text-secondary);
	}

	/* Highlighted Roadmap Card (Mobile Apps) */
	.roadmap-card-highlight {
		border: 2px solid var(--color-primary);
		position: relative;
	}

	.roadmap-card-highlight::before {
		content: 'Active Development';
		position: absolute;
		top: -0.75rem;
		left: 50%;
		transform: translateX(-50%);
		padding: var(--space-1, 0.25rem) var(--space-3, 0.75rem);
		background: var(--color-primary);
		color: var(--color-white);
		font-size: var(--text-xs, 0.75rem);
		font-weight: var(--font-semibold, 600);
		text-transform: uppercase;
		letter-spacing: 0.05em;
		border-radius: var(--radius-full, 9999px);
		white-space: nowrap;
	}

	.roadmap-card-highlight .roadmap-eta {
		background: var(
			--color-primary-alpha-10,
			color-mix(in srgb, var(--botanical-primary) 10%, transparent)
		);
		border-color: var(
			--color-primary-alpha-30,
			color-mix(in srgb, var(--botanical-primary) 30%, transparent)
		);
		color: var(--color-primary);
	}

	.roadmap-app-badges {
		display: flex;
		gap: var(--space-2, 0.5rem);
		margin-top: var(--space-3, 0.75rem);
		justify-content: center;
	}

	.roadmap-app-badge {
		display: flex;
		align-items: center;
		gap: var(--space-1-5, 0.375rem);
		padding: var(--space-1-5, 0.375rem) 0.625rem;
		background: var(--surface-alt);
		border-radius: 0.375rem;
		font-size: var(--text-xs, 0.75rem);
		font-weight: var(--font-medium, 500);
		color: var(--text-secondary);
	}

	.roadmap-app-badge svg {
		color: var(--text-tertiary);
	}

	.roadmap-note {
		text-align: center;
		font-size: 0.9375rem;
		color: var(--text-secondary);
		margin: 0;
	}

	.roadmap-note a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		padding: 0 var(--space-2, 0.5rem);
		color: var(--color-primary);
		font-weight: var(--font-semibold, 600);
		text-decoration: none;
	}

	.roadmap-note a:hover {
		text-decoration: underline;
	}

	@media (max-width: 768px) {
		.roadmap-section {
			padding: var(--space-12, 3rem) 0;
		}

		.roadmap-title {
			font-size: var(--text-3xl, 1.875rem);
		}

		.roadmap-grid {
			grid-template-columns: 1fr;
			max-width: 400px;
		}
	}

	/* ==============================================
	   TRY IT OUT SECTION STYLES
	   ============================================== */

	.try-it-section {
		padding: 5rem 0;
		background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
	}

	.try-it-content {
		max-width: 800px;
		margin: 0 auto;
		text-align: center;
	}

	.try-it-title {
		font-size: 2.5rem;
		font-weight: var(--font-bold, 700);
		color: var(--color-white);
		margin: 0 0 var(--space-3, 0.75rem);
	}

	.try-it-subtitle {
		font-size: var(--text-xl, 1.25rem);
		color: var(--color-white-alpha-90);
		margin: 0 0 2.5rem;
		max-width: 600px;
		margin-left: auto;
		margin-right: auto;
	}

	.try-it-steps {
		display: flex;
		justify-content: center;
		gap: var(--space-8, 2rem);
		margin-bottom: 2.5rem;
	}

	.try-it-step {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--space-3, 0.75rem);
		max-width: 180px;
	}

	.try-it-step-icon {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 56px;
		height: 56px;
		background: var(--color-white-alpha-20);
		border-radius: var(--radius-full, 50%);
		-webkit-backdrop-filter: blur(10px);
		backdrop-filter: blur(10px);
	}

	.try-it-step-icon svg {
		color: var(--color-white);
	}

	.try-it-step-content {
		text-align: center;
	}

	.try-it-step-title {
		font-size: var(--text-base, 1rem);
		font-weight: var(--font-semibold, 600);
		color: var(--color-white);
		margin: 0 0 var(--space-1, 0.25rem);
	}

	.try-it-step-desc {
		font-size: var(--text-sm, 0.875rem);
		color: var(--color-white-alpha-80);
		margin: 0;
		line-height: 1.4;
	}

	.try-it-cta {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--space-3, 0.75rem);
	}

	.try-it-button {
		display: inline-flex;
		align-items: center;
		gap: var(--space-2, 0.5rem);
		padding: var(--space-4, 1rem) var(--space-8, 2rem);
		background: var(--surface-card, var(--color-white, hsl(0 0% 100%)));
		color: var(--button-primary-background, var(--color-primary));
		font-size: var(--text-lg, 1.125rem);
		font-weight: var(--font-bold, 700);
		border: 1px solid var(--border-color-default, transparent);
		border-radius: 0.75rem;
		cursor: pointer;
		transition:
			opacity 0.2s ease,
			transform 0.2s ease,
			background-color 0.2s ease,
			box-shadow 0.2s ease;
		box-shadow: var(--shadow-md);
	}

	.try-it-button:hover {
		transform: translateY(-2px);
		box-shadow: var(--shadow-lg);
	}

	.try-it-button svg {
		transition: transform 0.2s ease;
	}

	.try-it-button:hover svg {
		transform: translateX(3px);
	}

	.try-it-note {
		font-size: var(--text-sm, 0.875rem);
		color: var(--color-white-alpha-80);
		margin: 0;
	}

	@media (max-width: 768px) {
		.try-it-section {
			padding: var(--space-12, 3rem) 0;
		}

		.try-it-title {
			font-size: var(--text-3xl, 1.875rem);
		}

		.try-it-subtitle {
			font-size: 1.0625rem;
		}

		.try-it-steps {
			flex-direction: column;
			align-items: center;
			gap: var(--space-6, 1.5rem);
		}

		.try-it-step {
			flex-direction: row;
			max-width: 100%;
			gap: var(--space-4, 1rem);
		}

		.try-it-step-icon {
			width: 48px;
			height: 48px;
			flex-shrink: 0;
		}

		.try-it-step-content {
			text-align: left;
		}
	}

	/* ==============================================
	   ICON SIZING SYSTEM
	   Replaces Tailwind w-X h-X classes with semantic names
	   Following 8px grid: 12px, 16px, 20px, 24px, 32px
	   ============================================== */

	.icon-xxs {
		width: 12px;
		height: 12px;
		flex-shrink: 0;
	}

	.icon-xs {
		width: 16px;
		height: 16px;
		flex-shrink: 0;
	}

	.icon-sm {
		width: 20px;
		height: 20px;
		flex-shrink: 0;
	}

	.icon-md {
		width: 24px;
		height: 24px;
		flex-shrink: 0;
	}

	.icon-lg {
		width: 32px;
		height: 32px;
		flex-shrink: 0;
	}

	.icon-xl {
		width: 40px;
		height: 40px;
		flex-shrink: 0;
	}

	/* Icon with inline-end margin (replaces ml-2) */
	.icon-inline-end {
		margin-inline-start: var(--space-2, 0.5rem);
	}

	/* ==============================================
	   FAQ SECTION UTILITIES
	   Replaces Tailwind flex/gap/margin classes
	   ============================================== */

	.faq-heading {
		text-align: center;
		margin-bottom: var(--space-12, 3rem); /* 6 x 8px */
	}

	.faq-category-tabs {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: var(--space-4); /* 2 x 8px */
		margin-bottom: var(--space-8, 2rem); /* 4 x 8px */
	}

	/* M12: FAQ filter buttons - horizontal scroll on narrow screens */
	@media (max-width: 480px) {
		.faq-category-tabs {
			flex-wrap: nowrap;
			overflow-x: auto;
			justify-content: flex-start;
			gap: var(--space-2);
			padding-bottom: var(--space-2);
			-webkit-overflow-scrolling: touch;
			scrollbar-width: none; /* Firefox */
		}
		.faq-category-tabs::-webkit-scrollbar {
			display: none;
		}
	}

	.faq-pagination {
		display: flex;
		justify-content: center;
		margin-top: var(--space-8, 2rem); /* 4 x 8px */
		gap: var(--space-2); /* 1 x 8px */
	}

	/* ==============================================
	   HAMBURGER BUTTON VISIBILITY
	   Replaces Tailwind md:hidden responsive class
	   ============================================== */

	.hamburger-btn {
		display: flex;
	}

	@media (min-width: 900px) {
		.hamburger-btn {
			display: none;
		}
	}

	/* ==============================================
	   MOBILE NAV LOGO IMAGE
	   Replaces Tailwind h-8 class
	   ============================================== */

	.mobile-nav-logo-img {
		height: 32px; /* 4 x 8px grid */
		width: auto;
	}

	/* ==============================================
	   FOOTER LOGO
	   Replaces Tailwind h-8 mb-4 classes
	   ============================================== */

	.footer-logo {
		height: 32px; /* 4 x 8px grid */
		width: auto;
		margin-bottom: var(--space-4, 1rem); /* 2 x 8px grid */
	}

	/* ==============================================
	   FOOTER MASCOT
	   Sleeping mascot accent beside copyright
	   ============================================== */

	.footer-mascot-container {
		display: flex;
		align-items: center;
		gap: var(--space-3); /* 1.5 x 8px grid */
		flex-wrap: wrap;
	}

	.footer-mascot {
		height: 40px; /* 5 x 8px grid */
		width: auto;
		opacity: 0.85;
		transition: opacity 0.2s ease;
	}

	.footer-mascot:hover {
		opacity: 1;
	}

	/* ==============================================
	   FOOTER GRID & LINKS
	   Styles for footer navigation columns
	   ============================================== */

	.ms365-footer-grid {
		display: grid;
		grid-template-columns: 1.5fr repeat(4, 1fr) 1.25fr;
		gap: var(--space-8, 2rem);
		padding: var(--space-12, 3rem) 0 var(--space-8, 2rem);
	}

	.ms365-footer-section-title {
		font-size: var(--text-sm, 0.875rem);
		font-weight: var(--font-bold, 700);
		text-transform: uppercase;
		letter-spacing: 0.05em;
		color: var(--text-primary);
		margin: 0 0 var(--space-4, 1rem);
	}

	.ms365-footer-list {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		flex-direction: column;
		gap: var(--space-2, 0.5rem);
	}

	.ms365-footer-link {
		color: var(--text-secondary);
		text-decoration: none;
		font-size: var(--text-sm, 0.875rem);
		transition: color 0.2s ease;
	}

	.ms365-footer-link:hover {
		color: var(--color-primary);
	}

	.ms365-footer-link:focus-visible {
		outline: 2px solid var(--color-primary);
		outline-offset: 2px;
		border-radius: 2px;
	}

	@media (max-width: 1024px) {
		.ms365-footer-grid {
			grid-template-columns: repeat(3, 1fr);
		}
	}

	@media (max-width: 768px) {
		.ms365-footer-grid {
			grid-template-columns: repeat(2, 1fr);
			gap: var(--space-6, 1.5rem);
		}
	}

	@media (max-width: 480px) {
		.ms365-footer-grid {
			grid-template-columns: 1fr;
			gap: var(--space-4, 1rem);
			padding: var(--space-6, 1.5rem) 0 var(--space-4, 1rem);
		}
	}

	/* ==============================================
	   DARK MODE SUPPORT - Class-based (.dark)
	   Only non-trivial overrides that can't be handled by CSS variable auto-switching.
	   Simple color/background swaps are now automatic via canonical variables.
	   ============================================== */

	/* ===== HERO SECTION — gradient overlay ===== */
	.dark .ms365-hero::before {
		background: linear-gradient(
			135deg,
			color-mix(in srgb, var(--botanical-primary) 15%, transparent) 0%,
			color-mix(in srgb, var(--botanical-primary) 8%, transparent) 50%,
			color-mix(in srgb, var(--botanical-primary) 3%, transparent) 100%
		);
	}

	/* ===== HERO — mission & vision headline dark mode ===== */
	.dark .hero-mission-subtitle {
		color: var(--color-text-secondary);
	}

	.dark .hero-line-2 {
		color: var(--botanical-primary, var(--color-primary));
	}

	.dark .problem-stat {
		color: var(--color-text-primary);
	}

	.dark .problem-source {
		color: var(--color-text-tertiary, var(--color-text-secondary));
	}

	.dark .ms365-hero-audience-title {
		color: var(--color-text-primary);
	}

	/* ===== FOUNDER TOUCH — dark mode ===== */
	.dark .founder-touch {
		color: var(--color-text-tertiary, var(--color-text-secondary));
	}

	/* ===== POPULAR PRICING CARD — gradient background ===== */
	.dark .pricing-card.popular {
		background: linear-gradient(
			180deg,
			var(--surface-card) 0%,
			color-mix(in srgb, var(--botanical-primary) 8%, transparent) 100%
		);
		border-color: var(--botanical-primary);
	}

	/* ===== PRICING SECTION — gradient background ===== */
	.dark .pricing-section {
		background: linear-gradient(
			180deg,
			var(--surface-background) 0%,
			var(--surface-alt) 50%,
			var(--surface-background) 100%
		);
	}

	/* ===== PRICING BADGE — gradient + brand colors ===== */
	.dark .pricing-badge {
		background: linear-gradient(
			135deg,
			color-mix(in srgb, var(--botanical-primary) 20%, transparent) 0%,
			color-mix(in srgb, var(--botanical-primary) 10%, transparent) 100%
		);
		border-color: color-mix(in srgb, var(--botanical-primary) 40%, transparent);
		color: var(--color-success-400);
	}

	.dark .pricing-badge svg {
		color: var(--color-success-400);
	}

	/* ===== SAVINGS BADGE — special high-contrast treatment ===== */
	.dark .savings-badge {
		background: var(--color-success-700, oklch(0.50 0.14 155));
		color: var(--color-white, #ffffff);
	}

	.dark .billing-option .savings-badge,
	.dark .billing-option.active .savings-badge {
		background: var(--color-success-700, oklch(0.50 0.14 155));
		color: var(--color-white, #ffffff);
	}

	/* ===== PRICE SAVINGS — accent color ===== */
	.dark .price-savings {
		color: var(--color-success-400);
	}

	/* ===== BILLING TOGGLE — alpha background ===== */
	.dark .billing-toggle-wrapper {
		background: color-mix(in srgb, var(--surface-card) 50%, transparent);
	}

	/* ===== TRUST BADGE HEADER — gradient + brand colors ===== */
	.dark .trust-badge-header {
		background: linear-gradient(
			135deg,
			color-mix(in srgb, var(--color-success) 15%, transparent) 0%,
			color-mix(in srgb, var(--color-success) 8%, transparent) 100%
		);
		border-color: var(--color-success-500);
		color: var(--color-success-400);
	}

	.dark .trust-badge-header svg {
		color: var(--color-success-400);
	}

	/* ===== KEYBOARD FEATURE BADGE — gradient + brand colors ===== */
	.dark .keyboard-feature-badge {
		background: linear-gradient(
			135deg,
			color-mix(in srgb, var(--landing-pink-dark) 15%, transparent) 0%,
			color-mix(in srgb, var(--landing-pink-dark) 8%, transparent) 100%
		);
		border-color: color-mix(in srgb, var(--landing-pink-dark) 30%, transparent);
		color: var(--landing-pink-dark);
	}

	.dark .keyboard-feature-badge svg {
		color: var(--landing-pink-dark);
	}

	/* ===== KEYBOARD FEATURE HIGHLIGHT — enhanced shadow ===== */
	.dark .keyboard-feature-highlight {
		box-shadow: 0 4px 24px var(--color-black-alpha-30);
	}

	/* ===== KEYBOARD PILL COLORS — brand color mix ===== */
	.dark .keyboard-pill-tone,
	.dark .keyboard-pill-voice,
	.dark .keyboard-pill-subject {
		background: color-mix(in srgb, var(--botanical-primary) 20%, transparent);
		border-color: color-mix(in srgb, var(--botanical-primary) 40%, transparent);
	}

	/* ===== TRY IT SECTION — gradient background ===== */
	.dark .try-it-section {
		background: linear-gradient(
			135deg,
			color-mix(in srgb, var(--botanical-primary) 80%, var(--surface-background)) 0%,
			color-mix(in srgb, var(--color-accent) 80%, var(--surface-background)) 100%
		);
	}

	/* ===== ROADMAP HIGHLIGHT — special border + pseudo-element ===== */
	.dark .roadmap-card-highlight {
		border-color: var(--color-primary);
	}

	.dark .roadmap-card-highlight::before {
		background: var(--color-primary);
		color: var(--surface-background);
	}

	/* ===== ROADMAP ETA BADGE — high contrast (WCAG AA) ===== */
	.dark .roadmap-eta,
	.dark .roadmap-section .roadmap-eta,
	.dark .roadmap-card .roadmap-eta {
		background: var(--color-success-700, oklch(0.50 0.14 155));
		border-color: var(--color-success-700, oklch(0.50 0.14 155));
		color: var(--color-white, #ffffff);
	}

	.dark .roadmap-card-highlight .roadmap-eta {
		background: var(--color-success-700, oklch(0.50 0.14 155));
		border-color: var(--color-success-700, oklch(0.50 0.14 155));
		color: var(--color-white, #ffffff);
	}

	/* ===== TOOLKIT SVG ICONS — brand color ===== */
	.dark .toolkit-category-tools li svg {
		color: var(--landing-success-dark);
	}

	/* ===== AUDIENCE TOGGLE — active state with box-shadow ===== */
	.dark .audience-toggle-btn.active {
		background: var(--botanical-primary);
		box-shadow: 0 2px 8px color-mix(in srgb, var(--botanical-primary) 30%, transparent);
	}

	/* ===== POPULAR BADGE — filter adjustment ===== */
	.dark .pricing-card.popular .popular-badge {
		filter: brightness(0.9);
	}

	/* ===== TECH NOTE — brand color mix background ===== */
	.dark .tech-note {
		background: color-mix(in srgb, var(--botanical-primary) 15%, transparent);
		border-color: color-mix(in srgb, var(--botanical-primary) 30%, transparent);
	}

	/* ===== SCROLLBAR ===== */
	.dark ::-webkit-scrollbar-track {
		background: var(--surface-alt);
	}

	.dark ::-webkit-scrollbar-thumb {
		background: var(--border-color-default);
	}

	/* ===== MOBILE NAV DRAWER — dark mode ===== */
	.dark .mobile-nav-drawer {
		background: var(--surface-background);
		box-shadow: 8px 0 24px var(--color-black-alpha-30);
	}

	.dark .mobile-nav-header {
		background: var(--surface-background);
		border-bottom-color: var(--border-color-default, var(--color-neutral-700));
	}

	.dark .mobile-nav-link {
		color: var(--text-primary);
	}

	.dark .mobile-nav-link:hover {
		background: var(--surface-card);
	}

	.dark .mobile-nav-close {
		color: var(--text-primary);
	}

	.dark .mobile-nav-close:hover {
		background: var(--surface-card);
	}

	.dark .mobile-nav-cta {
		background: var(--surface-card);
		border-top-color: var(--border-color-default, var(--color-neutral-700));
	}

	.dark .mobile-nav-btn-secondary {
		background: var(--surface-background);
		color: var(--text-primary);
		border-color: var(--border-color-default, var(--color-neutral-700));
	}

	.dark .mobile-nav-btn-secondary:hover {
		background: var(--surface-card);
	}

	/* ===== CARD & SECTION BACKGROUNDS — dark mode ===== */
	/* Override white fallbacks for all landing page cards */
	.dark .faq-card,
	.dark .accessibility-card-content,
	.dark .pillar-card,
	.dark .toolkit-card,
	.dark .testimonial-card,
	.dark .family-story-card,
	.dark .audience-card,
	.dark .roadmap-card,
	.dark .pricing-card,
	.dark .course-card,
	.dark .trust-badge-card,
	.dark .trust-stat-card,
	.dark .update-card {
		background: var(--surface-card);
	}

	/* ===== SECTION GRADIENTS — dark mode ===== */
	.dark .accessibility-section {
		background: linear-gradient(
			180deg,
			var(--surface-background) 0%,
			color-mix(in srgb, var(--botanical-primary) 5%, var(--surface-background)) 50%,
			var(--surface-background) 100%
		);
	}

	.dark .trust-section {
		background: linear-gradient(
			180deg,
			var(--surface-background) 0%,
			color-mix(in srgb, var(--botanical-primary) 3%, var(--surface-background)) 50%,
			var(--surface-background) 100%
		);
	}

	.dark .homeschool-section {
		background: linear-gradient(
			180deg,
			var(--surface-background) 0%,
			color-mix(in srgb, var(--botanical-primary) 4%, var(--surface-background)) 50%,
			var(--surface-background) 100%
		);
	}

	.dark .homeschool-card {
		background: var(--surface-card, #1f2937);
		border-color: var(--color-border-dark, #374151);
	}

	.dark .homeschool-honesty {
		background: color-mix(in srgb, var(--color-success-500) 8%, var(--surface-card, #1f2937));
		border-color: color-mix(in srgb, var(--color-success-500) 20%, transparent);
	}

	.dark .homeschool-badge {
		background: color-mix(in srgb, var(--color-accent-500) 15%, transparent);
		border-color: color-mix(in srgb, var(--color-accent-500) 30%, transparent);
		color: var(--color-accent-300, oklch(0.80 0.10 85));
	}

	.dark .enterprise-card {
		background: linear-gradient(135deg, var(--surface-card) 0%, var(--surface-alt) 100%);
	}

	/* ==============================================
	   PERSONA GATE
	   ============================================== */

	.persona-gate {
		position: fixed;
		inset: 0;
		z-index: 100;
		display: flex;
		align-items: center;
		justify-content: center;
		background: radial-gradient(
				ellipse at 30% 20%,
				color-mix(in srgb, var(--botanical-primary, #2d5b3e) 8%, transparent) 0%,
				transparent 50%
			),
			radial-gradient(
				ellipse at 70% 80%,
				color-mix(in srgb, var(--color-warning, #e4a853) 6%, transparent) 0%,
				transparent 50%
			),
			var(--surface-background, var(--color-white, hsl(0 0% 100%)));
		transition:
			opacity 0.6s ease-out,
			transform 0.6s ease-out;
		overflow-y: auto;
		padding: var(--space-8, 2rem) var(--space-4, 1rem);
	}

	.persona-gate-fadeout {
		opacity: 0;
		transform: translateY(-30px) scale(0.98);
		pointer-events: none;
	}

	/* --- Selection choreography --- */
	/* Stage 1: Selected card highlights, siblings fade */
	.persona-card-selected {
		border-color: var(--persona-accent, var(--color-primary)) !important;
		transform: scale(1.05);
		box-shadow:
			0 0 0 3px color-mix(in srgb, var(--persona-accent) 30%, transparent),
			0 20px 50px color-mix(in srgb, var(--persona-accent) 25%, transparent);
		z-index: 2;
	}

	.persona-card-selected .persona-card-icon {
		transform: scale(1.15);
		background: color-mix(in srgb, var(--persona-accent) 25%, transparent);
	}

	.persona-card-dismissed {
		opacity: 0.25;
		transform: scale(0.92);
		filter: grayscale(0.5);
		pointer-events: none;
	}

	/* Tab landing pulse — draws the eye to the active tab */
	.tab-landing {
		animation: tab-land-pulse 1.2s cubic-bezier(0.4, 0, 0.2, 1);
	}

	@keyframes tab-land-pulse {
		0% {
			box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-primary, #3B82F6) 50%, transparent);
			transform: scale(1.08);
		}
		40% {
			box-shadow: 0 0 0 8px color-mix(in srgb, var(--color-primary, #3B82F6) 0%, transparent);
			transform: scale(1);
		}
		70% {
			box-shadow: 0 0 0 0 transparent;
			transform: scale(1.03);
		}
		100% {
			box-shadow: none;
			transform: scale(1);
		}
	}

	.persona-gate-inner {
		text-align: center;
		max-width: 900px;
		width: 100%;
	}

	.persona-gate-mascot {
		margin-bottom: var(--space-6, 1.5rem);
		display: flex;
		justify-content: center;
		position: relative;
	}

	.persona-gate-poster,
	.persona-gate-video {
		width: 140px;
		height: 140px;
		object-fit: contain;
		filter: drop-shadow(0 8px 24px oklch(0 0 0 / 0.15));
	}

	.persona-gate-poster-hidden {
		display: none;
	}

	/* No bounce keyframe — static image stays still, video has its own animation */
	@keyframes persona-mascot-bounce {
		0%,
		100% {
			transform: translateY(0);
		}
		50% {
			transform: translateY(-10px);
		}
	}

	.persona-gate-title {
		font-size: clamp(1.75rem, 1.25rem + 2.5vw, 3rem);
		font-weight: 700;
		line-height: 1.15;
		color: var(--text-primary);
		margin: 0 0 var(--space-3, 0.75rem);
		font-family: var(--font-family-heading, var(--font-display, 'DM Serif Display', serif));
	}

	.persona-gate-subtitle {
		font-size: var(--text-lg, 1.125rem);
		color: var(--text-secondary);
		margin: 0 auto var(--space-3, 0.75rem);
		max-width: 420px;
	}

	.persona-gate-hint {
		font-size: var(--text-sm, 0.875rem);
		color: var(--text-secondary);
		opacity: 0.6;
		margin: 0 auto var(--space-8, 2rem);
		max-width: 420px;
	}

	.persona-gate-cards {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: var(--space-6, 1.5rem);
	}

	/* --- Per-persona accent colors --- */
	.persona-card-student {
		--persona-accent: #3b82f6;
	} /* Blue — learning */
	.persona-card-parent {
		--persona-accent: #ec4899;
	} /* Pink — heart/care */
	.persona-card-teacher {
		--persona-accent: #10b981;
	} /* Green — growth */
	.persona-card-clinician {
		--persona-accent: #8b5cf6;
	} /* Purple — clinical */

	/* Educator sub-choice: 2-column layout */
	.persona-gate-subchoice {
		grid-template-columns: repeat(2, 1fr);
		max-width: 600px;
		margin: 0 auto;
		animation: subchoice-enter 0.3s ease-out;
	}

	@keyframes subchoice-enter {
		from {
			opacity: 0;
			transform: translateY(8px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	/* Trust badges + skip link footer */
	.persona-gate-footer {
		margin-top: var(--space-8, 2rem);
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--space-4, 1rem);
	}

	.persona-gate-badges {
		display: flex;
		gap: var(--space-4, 1rem);
		flex-wrap: wrap;
		justify-content: center;
	}

	.persona-gate-badge {
		display: inline-flex;
		align-items: center;
		gap: var(--space-1, 0.25rem);
		font-size: var(--text-xs, 0.75rem);
		color: var(--text-secondary);
		opacity: 0.7;
	}

	.persona-gate-skip {
		display: inline-flex;
		align-items: center;
		gap: var(--space-1, 0.25rem);
		background: none;
		border: none;
		color: var(--text-secondary);
		font-size: var(--text-sm, 0.875rem);
		cursor: pointer;
		padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
		border-radius: var(--radius-md, 8px);
		transition: color 0.2s, background 0.2s;
		opacity: 0.6;
	}

	.persona-gate-skip:hover {
		color: var(--text-primary);
		background: color-mix(in srgb, var(--text-primary) 8%, transparent);
		opacity: 1;
	}

	.persona-gate-skip:focus-visible {
		outline: 2px solid var(--color-primary);
		outline-offset: 2px;
		opacity: 1;
	}

	.persona-gate-back {
		background: none;
		border: none;
		color: var(--text-secondary);
		font-size: var(--text-sm, 0.875rem);
		cursor: pointer;
		padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
		margin-bottom: var(--space-3, 0.75rem);
		border-radius: var(--radius-md, 8px);
		transition: color 0.2s, background 0.2s;
	}

	.persona-gate-back:hover {
		color: var(--text-primary);
		background: color-mix(in srgb, var(--text-primary) 8%, transparent);
	}

	.persona-gate-back:focus-visible {
		outline: 2px solid var(--color-primary);
		outline-offset: 2px;
	}

	.persona-card {
		background: var(--surface-card, var(--color-white, hsl(0 0% 100%)));
		border: 2px solid
			color-mix(
				in srgb,
				var(--persona-accent, var(--color-primary)) 30%,
				var(--border-color-default, var(--color-neutral-200))
			);
		border-radius: var(--radius-xl, 16px);
		padding: var(--space-8, 2rem) var(--space-6, 1.5rem);
		cursor: pointer;
		transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--space-4, 1rem);
		text-align: center;
	}

	.persona-card:hover {
		border-color: var(--persona-accent, var(--color-primary));
		transform: translateY(-6px);
		box-shadow:
			0 16px 40px color-mix(in srgb, var(--persona-accent) 15%, transparent),
			0 4px 12px oklch(0 0 0 / 0.08);
	}

	.persona-card:active {
		transform: translateY(-2px) scale(0.97);
		transition-duration: 0.08s;
	}

	.persona-card:focus-visible {
		outline: 3px solid var(--persona-accent, var(--color-primary));
		outline-offset: 2px;
	}

	.persona-card-icon {
		width: 72px;
		height: 72px;
		border-radius: var(--radius-full, 50%);
		background: color-mix(in srgb, var(--persona-accent, var(--color-primary)) 12%, transparent);
		display: flex;
		align-items: center;
		justify-content: center;
		color: var(--persona-accent, var(--color-primary));
		transition:
			transform 0.25s,
			background 0.25s;
	}

	.persona-card:hover .persona-card-icon {
		transform: scale(1.1);
		background: color-mix(in srgb, var(--persona-accent, var(--color-primary)) 20%, transparent);
	}

	/* P1 Delight: per-persona icon micro-animations on hover */
	.persona-card-student:hover .persona-card-icon {
		animation: icon-book-open 0.5s ease-out;
	}

	.persona-card-parent:hover .persona-card-icon {
		animation: icon-heart-beat 0.6s ease-in-out;
	}

	.persona-card-teacher:hover .persona-card-icon,
	.persona-card-clinician:hover .persona-card-icon {
		animation: icon-wave 0.5s ease-in-out;
	}

	@keyframes icon-book-open {
		0% { transform: scale(1.1) rotateY(0deg); }
		40% { transform: scale(1.15) rotateY(-20deg); }
		100% { transform: scale(1.1) rotateY(0deg); }
	}

	@keyframes icon-heart-beat {
		0% { transform: scale(1.1); }
		15% { transform: scale(1.25); }
		30% { transform: scale(1.08); }
		45% { transform: scale(1.2); }
		100% { transform: scale(1.1); }
	}

	@keyframes icon-wave {
		0% { transform: scale(1.1) rotate(0deg); }
		25% { transform: scale(1.1) rotate(8deg); }
		50% { transform: scale(1.1) rotate(-6deg); }
		75% { transform: scale(1.1) rotate(4deg); }
		100% { transform: scale(1.1) rotate(0deg); }
	}

	.persona-card-title {
		font-size: var(--text-lg, 1.125rem);
		font-weight: 700;
		color: var(--text-primary);
		margin: 0;
	}

	.persona-card-desc {
		font-size: var(--text-sm, 0.875rem);
		color: var(--text-secondary);
		line-height: 1.6;
		margin: 0;
	}

	.persona-card-text {
		display: contents;
	}

	/* Dark mode */
	.dark .persona-card {
		background: var(--surface-card);
		border-color: color-mix(
			in srgb,
			var(--persona-accent, var(--color-primary)) 25%,
			var(--border-color, #333)
		);
	}

	.dark .persona-card:hover {
		border-color: var(--persona-accent, var(--color-primary));
		box-shadow:
			0 16px 40px color-mix(in srgb, var(--persona-accent) 20%, transparent),
			0 4px 12px oklch(0 0 0 / 0.3);
	}

	/* Mobile: stack cards, compact vertical layout */
	@media (max-width: 640px) {
		.persona-gate {
			padding: var(--space-4, 1rem) var(--space-3, 0.75rem);
		}

		.persona-gate-mascot {
			margin-bottom: var(--space-3, 0.75rem);
		}

		.persona-gate-poster,
		.persona-gate-video {
			width: 80px;
			height: 80px;
		}

		.persona-gate-title {
			font-size: clamp(1.5rem, 1.1rem + 2vw, 2rem);
			margin-bottom: var(--space-2, 0.5rem);
		}

		.persona-gate-subtitle {
			font-size: var(--text-base, 1rem);
			margin-bottom: var(--space-2, 0.5rem);
		}

		.persona-gate-hint {
			font-size: var(--text-xs, 0.75rem);
			margin-bottom: var(--space-4, 1rem);
		}

		.persona-gate-cards {
			grid-template-columns: 1fr;
			gap: var(--space-3, 0.75rem);
			max-width: 340px;
			margin: 0 auto;
		}

		.persona-card {
			padding: var(--space-4, 1rem) var(--space-5, 1.25rem);
			flex-direction: row;
			text-align: left;
			gap: var(--space-3, 0.75rem);
			align-items: center;
		}

		.persona-card-icon {
			width: 40px;
			height: 40px;
			flex-shrink: 0;
		}

		.persona-card-text {
			display: flex;
			flex-direction: column;
			gap: var(--space-1, 0.25rem);
			min-width: 0;
		}

		.persona-card-title {
			font-size: var(--text-sm, 0.875rem);
		}

		.persona-card-desc {
			font-size: var(--text-xs, 0.75rem);
			line-height: 1.4;
		}

		.persona-gate-subchoice {
			grid-template-columns: 1fr;
			max-width: 340px;
		}

		.persona-gate-footer {
			margin-top: var(--space-4, 1rem);
		}

		.persona-gate-badges {
			gap: var(--space-3, 0.75rem);
		}
	}

	/* Tablet: tighter 3-col */
	@media (min-width: 641px) and (max-width: 768px) {
		.persona-gate-cards {
			gap: var(--space-4, 1rem);
		}

		.persona-card {
			padding: var(--space-6, 1.5rem) var(--space-4, 1rem);
		}
	}

	/* Reduced motion */
	@media (prefers-reduced-motion: reduce) {
		.persona-gate {
			transition: opacity 0.2s;
		}

		.persona-gate-fadeout {
			transform: none;
		}

		.persona-gate-poster {
			display: block !important;
		}

		.persona-gate-video {
			display: none;
		}

		.persona-card {
			transition: border-color 0.2s;
		}

		.persona-card:hover {
			transform: none;
		}

		.persona-card:hover .persona-card-icon {
			transform: none;
			animation: none;
		}

		.persona-card-selected {
			transform: none;
		}

		.persona-card-selected .persona-card-icon {
			transform: none;
		}

		.persona-card-dismissed {
			transform: none;
		}

		.tab-landing {
			animation: none;
		}

		.persona-gate-subchoice {
			animation: none;
		}
	}

	/* ==============================================
	   DELIGHT PASS ENHANCEMENTS
	   ============================================== */

	/* --- 1. Social Proof Numbers (Mid-page CTA) --- */
	.mid-page-social-proof {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: var(--space-6, 1.5rem);
		margin-bottom: var(--space-4, 1rem);
	}

	.social-proof-stat {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--space-1, 0.25rem);
	}

	.social-proof-number {
		font-size: var(--text-2xl, 1.5rem);
		font-weight: 700;
		color: var(--color-primary, var(--botanical-primary));
		font-family: var(--font-family-heading, var(--font-display, 'DM Serif Display', serif));
	}

	.social-proof-label {
		font-size: var(--text-xs, 0.75rem);
		color: var(--text-secondary);
		text-transform: uppercase;
		letter-spacing: 0.05em;
		font-weight: 500;
	}

	.social-proof-divider {
		width: 1px;
		height: 40px;
		background: var(--border-color-default, var(--color-neutral-200));
	}

	/* --- 3. Accessibility Live Demo --- */
	.a11y-live-demo {
		margin-top: var(--space-12, 3rem);
		padding: var(--space-8, 2rem);
		background: var(--surface-card, var(--color-white, hsl(0 0% 100%)));
		border-radius: var(--radius-xl, 16px);
		border: 1px solid var(--border-color-default, var(--color-neutral-200));
		max-width: 640px;
		margin-left: auto;
		margin-right: auto;
	}

	.a11y-demo-title {
		font-size: var(--text-lg, 1.125rem);
		font-weight: 700;
		text-align: center;
		margin: 0 0 var(--space-1, 0.25rem);
		color: var(--text-primary);
	}

	.a11y-demo-subtitle {
		font-size: var(--text-sm, 0.875rem);
		color: var(--text-secondary);
		text-align: center;
		margin: 0 0 var(--space-6, 1.5rem);
	}

	.a11y-demo-controls {
		display: flex;
		gap: var(--space-3, 0.75rem);
		justify-content: center;
		flex-wrap: wrap;
		margin-bottom: var(--space-6, 1.5rem);
	}

	.a11y-demo-toggle {
		display: flex;
		align-items: center;
		gap: var(--space-2, 0.5rem);
		padding: var(--space-2, 0.5rem) var(--space-4, 1rem);
		border-radius: var(--radius-full, 999px);
		border: 2px solid var(--border-color-default, var(--color-neutral-200));
		background: transparent;
		color: var(--text-secondary);
		font-size: var(--text-sm, 0.875rem);
		font-weight: 500;
		cursor: pointer;
		transition: all 0.2s;
	}

	.a11y-demo-toggle:hover {
		border-color: var(--color-primary, var(--botanical-primary));
		color: var(--text-primary);
	}

	.a11y-demo-toggle.active {
		background: var(--color-primary, var(--botanical-primary));
		border-color: var(--color-primary, var(--botanical-primary));
		color: var(--color-white, hsl(0 0% 100%));
	}

	.a11y-demo-toggle:focus-visible {
		outline: 2px solid var(--color-primary, var(--botanical-primary));
		outline-offset: 2px;
	}

	.a11y-demo-preview {
		padding: var(--space-6, 1.5rem);
		background: var(--surface-background, var(--color-neutral-50));
		border-radius: var(--radius-lg, 12px);
		transition: all 0.3s ease;
	}

	.a11y-demo-sample-title {
		font-size: var(--text-lg, 1.125rem);
		font-weight: 700;
		margin: 0 0 var(--space-3, 0.75rem);
		color: var(--text-primary);
		transition: all 0.3s;
	}

	.a11y-demo-sample-text {
		font-size: var(--text-base, 1rem);
		line-height: 1.6;
		margin: 0;
		color: var(--text-secondary);
		transition: all 0.3s;
	}

	/* Dyslexia font mode */
	.a11y-demo-preview.a11y-dyslexia .a11y-demo-sample-title,
	.a11y-demo-preview.a11y-dyslexia .a11y-demo-sample-text {
		font-family: 'OpenDyslexic', 'Comic Sans MS', sans-serif;
		letter-spacing: 0.05em;
	}

	/* High contrast mode */
	.a11y-demo-preview.a11y-contrast {
		background: var(--color-black, hsl(0 0% 0%));
	}

	.a11y-demo-preview.a11y-contrast .a11y-demo-sample-title {
		color: var(--color-white, hsl(0 0% 100%));
	}

	.a11y-demo-preview.a11y-contrast .a11y-demo-sample-text {
		color: #ffd700;
	}

	/* Extra spacing mode */
	.a11y-demo-preview.a11y-spacing .a11y-demo-sample-text {
		line-height: 2.2;
		letter-spacing: 0.08em;
		word-spacing: 0.25em;
	}

	.a11y-demo-preview.a11y-spacing .a11y-demo-sample-title {
		letter-spacing: 0.06em;
	}

	/* Combined modes */
	.a11y-demo-preview.a11y-dyslexia.a11y-spacing .a11y-demo-sample-text {
		line-height: 2.4;
	}

	/* --- 4. Family Stories / Parent Testimonials --- */
	.family-stories {
		margin-top: var(--space-12, 3rem);
	}

	.family-stories-title {
		font-size: var(--text-xl, 1.25rem);
		font-weight: 700;
		text-align: center;
		margin: 0 0 var(--space-8, 2rem);
		color: var(--text-primary);
	}

	.family-stories-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: var(--space-6, 1.5rem);
	}

	.family-story-card {
		background: var(--surface-card, var(--color-white, hsl(0 0% 100%)));
		border-radius: var(--radius-xl, 16px);
		padding: var(--space-6, 1.5rem);
		border: 1px solid var(--border-color-default, var(--color-neutral-200));
		display: flex;
		flex-direction: column;
		gap: var(--space-4, 1rem);
		transition:
			transform 0.2s,
			box-shadow 0.2s;
	}

	.family-story-card:hover {
		transform: translateY(-2px);
		box-shadow: var(--shadow-md, 0 4px 12px oklch(0 0 0 / 0.08));
	}

	.family-story-icon {
		width: 40px;
		height: 40px;
		border-radius: var(--radius-full, 50%);
		background: color-mix(in srgb, var(--color-primary, var(--botanical-primary)) 10%, transparent);
		display: flex;
		align-items: center;
		justify-content: center;
		color: var(--color-primary, var(--botanical-primary));
	}

	.family-story-quote {
		font-size: var(--text-sm, 0.875rem);
		line-height: 1.6;
		color: var(--text-primary);
		margin: 0;
		font-style: italic;
		flex: 1;
	}

	.family-story-attribution {
		display: flex;
		flex-direction: column;
		gap: 2px;
	}

	.family-story-name {
		font-weight: 600;
		font-size: var(--text-sm, 0.875rem);
		color: var(--text-primary);
		margin: 0;
	}

	.family-story-detail {
		font-size: var(--text-xs, 0.75rem);
		color: var(--text-muted, var(--color-neutral-500));
	}

	/* --- 5. Teacher Dashboard Preview --- */
	.dashboard-preview-wrapper {
		margin-top: var(--space-12, 3rem);
		text-align: center;
	}

	.dashboard-preview-title {
		font-size: var(--text-lg, 1.125rem);
		font-weight: 700;
		margin: 0 0 var(--space-6, 1.5rem);
		color: var(--text-primary);
	}

	.dashboard-preview {
		max-width: 700px;
		margin: 0 auto;
		border-radius: var(--radius-xl, 16px);
		overflow: hidden;
		border: 1px solid var(--border-color-default, var(--color-neutral-200));
		box-shadow: var(--shadow-lg, 0 8px 24px oklch(0 0 0 / 0.1));
	}

	.dashboard-preview-header {
		display: flex;
		align-items: center;
		gap: var(--space-2, 0.5rem);
		padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
		background: var(--color-neutral-100, #f3f4f6);
		border-bottom: 1px solid var(--border-color-default, var(--color-neutral-200));
	}

	.dashboard-dot {
		width: 10px;
		height: 10px;
		border-radius: var(--radius-full, 50%);
		background: var(--color-neutral-300, #d1d5db);
	}

	.dashboard-dot:first-child {
		background: #ff5f57;
	}
	.dashboard-dot:nth-child(2) {
		background: #febc2e;
	}
	.dashboard-dot:nth-child(3) {
		background: #28c840;
	}

	.dashboard-title-bar {
		flex: 1;
		text-align: center;
		font-size: var(--text-xs, 0.75rem);
		color: var(--text-muted, var(--color-neutral-500));
		font-weight: 500;
	}

	.dashboard-preview-body {
		display: flex;
		min-height: 200px;
	}

	.dashboard-sidebar {
		width: 130px;
		background: var(--color-neutral-50, #f9fafb);
		border-right: 1px solid var(--border-color-default, var(--color-neutral-200));
		padding: var(--space-3, 0.75rem);
		display: flex;
		flex-direction: column;
		gap: var(--space-1, 0.25rem);
	}

	.dash-nav-item {
		padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
		border-radius: var(--radius-md, 8px);
		font-size: var(--text-xs, 0.75rem);
		color: var(--text-secondary);
		text-align: left;
	}

	.dash-nav-item.active {
		background: color-mix(in srgb, var(--color-primary, var(--botanical-primary)) 12%, transparent);
		color: var(--color-primary, var(--botanical-primary));
		font-weight: 600;
	}

	.dashboard-main {
		flex: 1;
		padding: var(--space-4, 1rem);
		background: var(--surface-card, var(--color-white, hsl(0 0% 100%)));
	}

	.dash-stats-row {
		display: flex;
		gap: var(--space-3, 0.75rem);
		margin-bottom: var(--space-4, 1rem);
	}

	.dash-stat-card {
		flex: 1;
		padding: var(--space-3, 0.75rem);
		background: var(--color-neutral-50, #f9fafb);
		border-radius: var(--radius-md, 8px);
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 2px;
	}

	.dash-stat-num {
		font-size: var(--text-xl, 1.25rem);
		font-weight: 700;
		color: var(--text-primary);
	}

	.dash-stat-label {
		font-size: 0.625rem;
		color: var(--text-muted, var(--color-neutral-500));
		text-transform: uppercase;
		letter-spacing: 0.05em;
	}

	.dash-stat-alert .dash-stat-num {
		color: var(--color-warning, #e4a853);
	}

	.dash-chart-placeholder {
		display: flex;
		align-items: flex-end;
		gap: var(--space-3, 0.75rem);
		height: 80px;
		padding: var(--space-2, 0.5rem);
	}

	.dash-bar {
		flex: 1;
		background: linear-gradient(
			to top,
			var(--color-primary, var(--botanical-primary)),
			color-mix(in srgb, var(--color-primary, var(--botanical-primary)) 60%, transparent)
		);
		border-radius: var(--radius-sm, 4px) var(--radius-sm, 4px) 0 0;
		min-height: 8px;
		animation: dash-bar-grow 1s ease-out both;
	}

	@keyframes dash-bar-grow {
		from {
			transform: scaleY(0);
			transform-origin: bottom;
		}
		to {
			transform: scaleY(1);
			transform-origin: bottom;
		}
	}

	/* --- 6. Social Proof Responsive --- */
	@media (max-width: 640px) {
		.mid-page-social-proof {
			flex-direction: column;
			gap: var(--space-3, 0.75rem);
		}

		.social-proof-divider {
			width: 60px;
			height: 1px;
		}

		.family-stories-grid {
			grid-template-columns: 1fr;
		}

		.a11y-demo-controls {
			flex-direction: column;
			align-items: stretch;
		}

		.a11y-demo-toggle {
			justify-content: center;
		}

		.dashboard-sidebar {
			display: none;
		}

		.dash-stats-row {
			flex-direction: column;
		}
	}

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

	@media (min-width: 641px) and (max-width: 1024px) {
		.family-stories-grid {
			grid-template-columns: repeat(2, 1fr);
		}

		.family-story-card:last-child {
			grid-column: 1 / -1;
			max-width: 50%;
			justify-self: center;
		}
	}

	/* Dark mode for delight enhancements */
	.dark .a11y-live-demo {
		background: var(--surface-card);
		border-color: var(--border-color);
	}

	.dark .a11y-demo-preview {
		background: var(--surface-alt, var(--color-neutral-800));
	}

	.dark .a11y-demo-preview.a11y-contrast {
		background: var(--color-black, hsl(0 0% 0%));
	}

	.dark .family-story-card {
		background: var(--surface-card);
		border-color: var(--border-color);
	}

	.dark .dashboard-preview-header {
		background: var(--surface-alt);
		border-color: var(--border-color);
	}

	.dark .dashboard-preview {
		border-color: var(--border-color);
	}

	.dark .dashboard-sidebar {
		background: var(--surface-alt);
		border-color: var(--border-color);
	}

	.dark .dashboard-main {
		background: var(--surface-card);
	}

	.dark .dash-stat-card {
		background: var(--surface-alt);
	}

	.dark .social-proof-divider {
		background: var(--border-color);
	}

	/* ==============================================
	   PERFORMANCE OPTIMIZATIONS
	   ============================================== */

	/*
	 * content-visibility: auto - Skip rendering of below-the-fold sections
	 * This dramatically reduces initial style recalculations by only rendering
	 * sections when they're about to enter the viewport.
	 * contain-intrinsic-size prevents layout shift when content becomes visible.
	 */
	.trust-bar-section,
	.accessibility-section,
	.pricing-section,
	.trust-section,
	.roadmap-section,
	.try-it-section {
		content-visibility: auto;
		contain-intrinsic-size: auto 600px; /* Estimate section height */
	}

	/* Smaller sections need less reserved space */
	.trust-bar-section {
		contain-intrinsic-size: auto 80px;
	}

	/* FAQ section */
	.ms365-section.ms365-section-alt:has(.faq-heading) {
		content-visibility: auto;
		contain-intrinsic-size: auto 800px;
	}

	/*
	 * CSS Containment - Isolate layout/paint calculations to subtrees
	 * Prevents style changes in one section from triggering recalc in others
	 */
	.ms365-section,
	.ms365-section-alt {
		contain: layout style;
	}

	/* Hero section needs paint containment but NOT content-visibility
	   since it contains the LCP element */
	.ms365-hero.hero-refined {
		contain: layout style paint;
	}

	/* Feature cards and pricing cards - isolate their rendering */
	/* Note: pricing-card uses layout+style only (not paint) because
	   .popular-badge is position:absolute top:-14px outside the card bounds */
	.pricing-card {
		contain: layout style;
	}

	.accessibility-card {
		contain: layout style paint;
	}

	/* Footer sections */
	.ms365-footer {
		content-visibility: auto;
		contain-intrinsic-size: auto 400px;
		contain: layout;
		background: var(--surface-alt, var(--color-neutral-50));
		border-top: 1px solid var(--border-color, var(--color-neutral-200));
		padding-bottom: env(safe-area-inset-bottom, 0px);
		padding-left: env(safe-area-inset-left, 0px);
		padding-right: env(safe-area-inset-right, 0px);
	}

	.footer-brand-column {
		grid-row: 1 / -1;
	}

	.dark .ms365-footer {
		background: var(--surface-background);
		border-top-color: var(--border-color);
	}

	.dark .ms365-footer-section-title {
		color: var(--text-primary);
	}

	.dark .ms365-footer-link {
		color: var(--text-secondary);
	}

	.dark .ms365-footer-link:hover {
		color: var(--color-primary);
	}
</style>