/**
 * Landing Pages - Dark Mode Contrast Fixes
 * WCAG AA compliant (4.5:1 for text, 3:1 for large text/UI)
 *
 * This file addresses contrast issues across ALL landing pages when
 * prefers-color-scheme: dark is active (before JavaScript adds .dark class).
 *
 * Coverage:
 * - /landing (Main Landing)
 * - /landing/keyboard (Keyboard Landing)
 *
 * Color Reference (WCAG AA on dark backgrounds):
 * - #F5F5F5: Primary text (11:1 contrast on #15181C)
 * - #E0E0E0: Secondary text (9.2:1 contrast)
 * - #CCCCCC: Tertiary text (7.8:1 contrast)
 * - #A6A6A6: Muted text (5.5:1 contrast) - minimum for small text
 * - #888888: Disabled/placeholder (4.5:1 contrast)
 */

@media (prefers-color-scheme: dark) {
	/* ============================================
	 * GLOBAL PAGE STYLES
	 * ============================================ */

	/* Override CSS variables at :root level for dark mode preference */
	:root {
		--text-primary: #F5F5F5;
		--text-secondary: #CCCCCC;
		--surface-card: #1F2429;
		--surface-interactive: #262C32;
		--surface-elevated: #2A3038;
		--border-color-default: #383E45;
		--border-color-strong: #4B5563;
	}

	/* Base page background */
	body,
	.landing-page,
	.keyboard-showcase {
		background-color: #15181C !important;
		color: #F5F5F5 !important;
	}

	/* Override CSS custom properties in keyboard-showcase */
	.keyboard-showcase {
		--color-primary: #26a69a;
		--color-primary-dark: #1e8a80;
		--color-accent: #f59e0b;
		--color-danger: #ef4444;
		--text-primary: #F5F5F5;
		--text-secondary: #CCCCCC;
		--surface-background: #15181C;
		--surface-alt: #1a1d21;
		--border-color: #383E45;
	}

	/* Force dark backgrounds on ALL keyboard landing sections */
	.keyboard-showcase .hero-section,
	.keyboard-showcase .problem-section,
	.keyboard-showcase .voice-section,
	.keyboard-showcase .smart-section,
	.keyboard-showcase .persona-section,
	.keyboard-showcase .accessibility-section,
	.keyboard-showcase .comparison-section,
	.keyboard-showcase .demo-section,
	.keyboard-showcase .social-section,
	.keyboard-showcase .final-cta-section,
	.keyboard-showcase .showcase-footer {
		background-color: #15181C !important;
	}

	/* Alternating section backgrounds for visual hierarchy */
	.keyboard-showcase .problem-section,
	.keyboard-showcase .smart-section,
	.keyboard-showcase .accessibility-section,
	.keyboard-showcase .social-section {
		background-color: #1a1d21 !important;
	}

	.keyboard-showcase .hero-section {
		background: linear-gradient(180deg, #15181C 0%, #1a1d21 100%) !important;
	}

	.keyboard-showcase .final-cta-section {
		background: linear-gradient(135deg, #1a2e22 0%, #243d2d 100%) !important;
	}

	/* Force text colors in keyboard showcase */
	.keyboard-showcase .section-title,
	.keyboard-showcase .section-subtitle,
	.keyboard-showcase h1,
	.keyboard-showcase h2,
	.keyboard-showcase h3 {
		color: #F5F5F5 !important;
	}

	.keyboard-showcase p,
	.keyboard-showcase .section-subtitle {
		color: #CCCCCC !important;
	}

	/* Cards in keyboard showcase */
	.keyboard-showcase .problem-card,
	.keyboard-showcase .class-card,
	.keyboard-showcase .persona-card,
	.keyboard-showcase .a11y-card,
	.keyboard-showcase .testimonial-card,
	.keyboard-showcase .comparison-table {
		background: #1F2429 !important;
		border-color: #383E45 !important;
	}

	.keyboard-showcase .problem-card h3,
	.keyboard-showcase .class-card h3,
	.keyboard-showcase .persona-card h3,
	.keyboard-showcase .a11y-card h3 {
		color: #F5F5F5 !important;
	}

	.keyboard-showcase .problem-card p,
	.keyboard-showcase .class-card p,
	.keyboard-showcase .persona-card p,
	.keyboard-showcase .a11y-card p,
	.keyboard-showcase .testimonial-card blockquote {
		color: #CCCCCC !important;
	}

	/* Emotional narrative box */
	.keyboard-showcase .emotional-narrative {
		background: #1F2429 !important;
		color: #CCCCCC !important;
		border-left-color: #26a69a !important;
	}

	/* Tone generation demo */
	.keyboard-showcase .tone-generation-demo {
		background: linear-gradient(135deg, rgba(38, 166, 154, 0.1), rgba(38, 166, 154, 0.05)) !important;
		border-color: rgba(38, 166, 154, 0.3) !important;
	}

	.keyboard-showcase .tone-demo-header {
		color: #26a69a !important;
	}

	.keyboard-showcase .tone-theme-chip {
		background: #262C32 !important;
		border-color: #383E45 !important;
		color: #CCCCCC !important;
	}

	.keyboard-showcase .theme-name {
		color: #F5F5F5 !important;
	}

	/* Tone chips */
	.keyboard-showcase .tone-chip {
		background: #262C32 !important;
		color: #CCCCCC !important;
	}

	/* Word chips - WCAG AA compliant on dark */
	.keyboard-showcase .word-chip,
	.keyboard-showcase .suggested-words .word-chip {
		background: #1e3a30 !important;
		color: #A7F3D0 !important;
	}

	/* Class cards in smart section */
	.keyboard-showcase .class-card,
	.class-card {
		background: #1F2429 !important;
		border-color: #383E45 !important;
	}

	.keyboard-showcase .class-header,
	.keyboard-showcase .class-header span,
	.class-header,
	.class-header span {
		color: #F5F5F5 !important;
	}

	/* Voice comparison player text */
	.keyboard-showcase .voice-comparison-player p,
	.keyboard-showcase .voice-comparison p,
	.keyboard-showcase #demo p,
	.keyboard-showcase [id="demo"] p,
	.keyboard-showcase .voice-section p {
		color: #F5F5F5 !important;
	}

	/* Demo section text */
	.keyboard-showcase .demo-section p,
	.keyboard-showcase .demo-section .section-subtitle,
	.keyboard-showcase .demo-upgrade {
		color: #CCCCCC !important;
	}

	/* Sample text in voice demos */
	.keyboard-showcase .sample-text,
	.keyboard-showcase .voice-sample-text,
	.keyboard-showcase [class*="sample"] {
		color: #F5F5F5 !important;
	}

	/* Voice comparison component */
	.keyboard-showcase .voice-comparison,
	.voice-comparison {
		background: #1F2429 !important;
		border-color: #383E45 !important;
	}

	/* Comparison phrase - the demo text */
	.keyboard-showcase .comparison-phrase,
	.comparison-phrase {
		background: #1F2429 !important;
		color: #F5F5F5 !important;
		border-color: #383E45 !important;
	}

	/* Voice buttons styling */
	.keyboard-showcase .voice-button,
	.voice-button {
		background: #262C32 !important;
		border-color: #383E45 !important;
	}

	.keyboard-showcase .button-label,
	.voice-button .button-label {
		color: #F5F5F5 !important;
	}

	.keyboard-showcase .button-desc,
	.voice-button .button-desc {
		color: #CCCCCC !important;
	}

	/* VS divider */
	.keyboard-showcase .vs-divider,
	.vs-divider {
		color: #A6A6A6 !important;
	}

	/* Keyboard demo lite component */
	.keyboard-showcase .keyboard-demo,
	.keyboard-demo {
		background: #1F2429 !important;
		border-color: #383E45 !important;
	}

	/* Demo callout - "Tap any word..." */
	.keyboard-showcase .demo-callout,
	.demo-callout {
		background: #262C32 !important;
		border-color: #383E45 !important;
	}

	.keyboard-showcase .demo-callout p,
	.keyboard-showcase .callout-content p,
	.demo-callout p,
	.callout-content p {
		color: #CCCCCC !important;
	}

	/* Voice selector */
	.keyboard-showcase .voice-selector,
	.voice-selector {
		background: #262C32 !important;
	}

	.keyboard-showcase .voice-label,
	.voice-label {
		color: #CCCCCC !important;
	}

	.keyboard-showcase .voice-option,
	.voice-option {
		background: #1F2429 !important;
		border-color: #383E45 !important;
		color: #CCCCCC !important;
	}

	.keyboard-showcase .voice-option:hover,
	.voice-option:hover {
		border-color: #26a69a !important;
	}

	/* Word grid buttons */
	.keyboard-showcase .word-button,
	.word-button {
		background: #262C32 !important;
		border-color: #383E45 !important;
		color: #F5F5F5 !important;
	}

	/* Category tabs */
	.keyboard-showcase .category-tab,
	.category-tab {
		background: #262C32 !important;
		color: #CCCCCC !important;
	}

	.keyboard-showcase .category-tab.active,
	.category-tab.active {
		background: #26a69a !important;
		color: #FFFFFF !important;
	}

	/* Comparison table */
	.keyboard-showcase .comparison-header {
		background: #262C32 !important;
	}

	.keyboard-showcase .comparison-header > div {
		color: #F5F5F5 !important;
	}

	.keyboard-showcase .comparison-row {
		border-color: #383E45 !important;
	}

	.keyboard-showcase .comparison-row .col-feature {
		color: #F5F5F5 !important;
	}

	.keyboard-showcase .comparison-row .col-cocovox {
		color: #26a69a !important;
	}

	.keyboard-showcase .comparison-row .col-others {
		color: #888888 !important;
	}

	/* Accessibility promise banner */
	.keyboard-showcase .a11y-promise {
		background: linear-gradient(135deg, #26a69a 0%, #2bb5a8 100%) !important;
		color: #FFFFFF !important;
	}

	/* ============================================
	 * MAIN LANDING - HERO SECTION
	 * ============================================ */

	.ms365-hero-title,
	.hero-refined .ms365-hero-title {
		color: #F5F5F5 !important;
	}

	.ms365-hero-subtitle,
	.hero-refined .ms365-hero-subtitle {
		color: #E0E0E0 !important;
	}

	.purpose-tagline {
		color: #CCCCCC !important;
	}

	.purpose-tagline strong {
		color: #F5F5F5 !important;
	}

	.hero-disclaimer {
		color: #A6A6A6 !important;
	}

	/* Audience toggle */
	.audience-toggle {
		border-color: #383E45 !important;
		background-color: rgba(31, 36, 41, 0.8) !important;
	}

	.audience-toggle-btn {
		color: #CCCCCC !important;
	}

	.audience-toggle-btn:hover {
		color: #F5F5F5 !important;
		background: #262C32 !important;
	}

	.audience-toggle-btn.active {
		background: #2D5B3E !important;
		color: #F5F5F5 !important;
	}

	/* ============================================
	 * MAIN LANDING - FEATURES SECTION
	 * ============================================ */

	#features,
	.ms365-section-alt {
		background-color: #1a1d21 !important;
	}

	/* Section headers */
	.ms365-section-title {
		color: #F5F5F5 !important;
	}

	.ms365-section-subtitle {
		color: #CCCCCC !important;
	}

	/* Feature cards */
	.ms365-card,
	.ms365-feature-card {
		background: #1F2429 !important;
		border-color: #383E45 !important;
	}

	.ms365-card-title {
		color: #F5F5F5 !important;
	}

	.ms365-card-description {
		color: #CCCCCC !important;
	}

	/* Pillar cards (parent audience) - keep light cards with dark text */
	.pillar-card {
		background: #ffffff !important;
		border-color: #e5e7eb !important;
	}

	.pillar-title {
		color: #1e293b !important;
	}

	.pillar-description,
	.pillar-features li,
	.pillar-features li span {
		color: #475569 !important;
	}

	/* ============================================
	 * MAIN LANDING - PRICING SECTION
	 * ============================================ */

	#pricing,
	.pricing-section {
		background-color: #15181C !important;
	}

	.pricing-title,
	.pricing-card-title {
		color: #F5F5F5 !important;
	}

	.pricing-subtitle,
	.pricing-card-subtitle {
		color: #CCCCCC !important;
	}

	/* Pricing toggle */
	.billing-toggle {
		background: #1F2429 !important;
		border-color: #383E45 !important;
	}

	.billing-toggle-btn {
		color: #CCCCCC !important;
	}

	.billing-toggle-btn.active {
		background: #2D5B3E !important;
		color: #F5F5F5 !important;
	}

	/* Save badge - high visibility */
	.save-badge,
	.pricing-save-badge,
	[class*="save"] {
		background: #2D5B3E !important;
		color: #A7F3D0 !important;
		border-color: #059669 !important;
	}

	/* Pricing cards */
	.pricing-card {
		background: #1F2429 !important;
		border-color: #383E45 !important;
	}

	.pricing-card.popular {
		border-color: #059669 !important;
	}

	.pricing-card-price,
	.pricing-card-amount {
		color: #F5F5F5 !important;
	}

	.pricing-card-period {
		color: #A6A6A6 !important;
	}

	.pricing-features li,
	.pricing-card-features li {
		color: #CCCCCC !important;
	}

	.pricing-cta-note {
		color: #888888 !important;
	}

	/* ============================================
	 * MAIN LANDING - FAQ SECTION
	 * ============================================ */

	#faq,
	.faq-section {
		background-color: #1a1d21 !important;
	}

	.faq-category {
		color: #A6A6A6 !important;
	}

	.faq-question,
	.faq-accordion-title {
		color: #F5F5F5 !important;
	}

	.faq-answer,
	.faq-accordion-content {
		color: #CCCCCC !important;
	}

	/* How It Works sections */
	.how-it-works-title,
	[class*="how-it-works"] h2,
	[class*="how-it-works"] h3 {
		color: #F5F5F5 !important;
	}

	[class*="how-it-works"] p {
		color: #CCCCCC !important;
	}

	/* ============================================
	 * MAIN LANDING - TRUST SECTION
	 * ============================================ */

	#trust,
	.trust-section,
	.social-proof-teaser {
		background-color: #15181C !important;
	}

	/* Trust section header */
	.trust-title,
	.trust-section h2 {
		color: #F5F5F5 !important;
	}

	.trust-subtitle,
	.trust-header p {
		color: #CCCCCC !important;
	}

	/* Trust badge header - "Built for Education" */
	.trust-badge-header {
		background: rgba(45, 91, 62, 0.3) !important;
		border-color: rgba(45, 91, 62, 0.5) !important;
	}

	.trust-badge-header span {
		color: #A7F3D0 !important;
	}

	/* Trust badge cards */
	.trust-badge-card {
		background: #1F2429 !important;
		border-color: #383E45 !important;
	}

	.trust-badge-title {
		color: #F5F5F5 !important;
	}

	.trust-badge-desc {
		color: #CCCCCC !important;
	}

	/* Stats/numbers - high contrast */
	.trust-stat-value,
	.trust-stat-number,
	.stat-number {
		color: #F5F5F5 !important;
	}

	.trust-stat-label,
	.stat-label {
		color: #CCCCCC !important;
	}

	.trust-stat-desc {
		color: #A6A6A6 !important;
	}

	/* Testimonials */
	.testimonial-highlight blockquote {
		color: #F5F5F5 !important;
	}

	.testimonial-highlight cite {
		color: #CCCCCC !important;
	}

	/* ============================================
	 * MAIN LANDING - LEARNING TOOLS SECTION
	 * ============================================ */

	#learning-tools,
	.learning-tools-section {
		background-color: #1a1d21 !important;
	}

	/* Toolkit categories - white cards with dark text (matches JS dark mode) */
	.toolkit-category {
		background: #ffffff !important;
		border-color: #e5e7eb !important;
	}

	.toolkit-category-title {
		color: #1e293b !important;
	}

	.toolkit-category-description {
		color: #475569 !important;
	}

	.toolkit-category-tools li {
		color: #475569 !important;
	}

	/* Learning tool cards (expanded view) */
	.learning-tool-card {
		background: #1F2429 !important;
		border-color: #383E45 !important;
	}

	.learning-tool-title {
		color: #F5F5F5 !important;
	}

	.learning-tool-description {
		color: #CCCCCC !important;
	}

	/* ============================================
	 * MAIN LANDING - TRY IT OUT SECTION
	 * ============================================ */

	#try-it-out,
	.try-it-section,
	.try-it-out-section {
		background: linear-gradient(135deg, #1a2e22 0%, #243d2d 100%) !important;
	}

	.try-it-title,
	.try-it-section h2,
	.try-it-out-section h2,
	#try-it-out h2 {
		color: #FFFFFF !important;
	}

	.try-it-subtitle,
	.try-it-section p,
	.try-it-out-section p,
	#try-it-out p {
		color: rgba(255, 255, 255, 0.9) !important;
	}

	.try-it-section h3,
	.try-it-out-section h3,
	#try-it-out h3 {
		color: #FFFFFF !important;
	}

	/* Process steps in try-it-out */
	.process-step-title,
	.try-it-section .process-step h3 {
		color: #FFFFFF !important;
	}

	.process-step-desc,
	.try-it-section .process-step p {
		color: rgba(255, 255, 255, 0.85) !important;
	}

	/* Specific try-it section classes */
	.try-it-title,
	.landing-page .try-it-title {
		color: #FFFFFF !important;
	}

	.try-it-subtitle,
	.landing-page .try-it-subtitle {
		color: rgba(255, 255, 255, 0.9) !important;
	}

	.try-it-step-title,
	.landing-page .try-it-step-title {
		color: #FFFFFF !important;
	}

	.try-it-step-desc,
	.landing-page .try-it-step-desc {
		color: rgba(255, 255, 255, 0.85) !important;
	}

	.try-it-note,
	.landing-page .try-it-note {
		color: rgba(255, 255, 255, 0.8) !important;
	}

	.try-it-button,
	.landing-page .try-it-button {
		background: #FFFFFF !important;
		color: #1a2e22 !important;
	}

	/* ============================================
	 * MAIN LANDING - UPDATES SECTION
	 * ============================================ */

	#updates,
	.updates-section {
		background-color: #15181C !important;
	}

	.updates-section h2,
	#updates h2 {
		color: #F5F5F5 !important;
	}

	.updates-section p,
	#updates p {
		color: #CCCCCC !important;
	}

	/* ============================================
	 * MAIN LANDING - ROADMAP SECTION
	 * ============================================ */

	#roadmap,
	.roadmap-section {
		background-color: #15181C !important;
	}

	.roadmap-title {
		color: #F5F5F5 !important;
	}

	.roadmap-subtitle {
		color: #CCCCCC !important;
	}

	.roadmap-card {
		background: #1F2429 !important;
		border-color: #383E45 !important;
	}

	.roadmap-card-title {
		color: #F5F5F5 !important;
	}

	.roadmap-card-desc {
		color: #CCCCCC !important;
	}

	/* "In Development" badge - CRITICAL FIX (was 1.0:1) */
	.roadmap-eta,
	.development-badge,
	[class*="development"],
	[class*="coming-soon"] {
		background: #2D5B3E !important;
		color: #A7F3D0 !important;
		border-color: rgba(45, 91, 62, 0.5) !important;
	}

	.roadmap-card-highlight .roadmap-eta {
		background: rgba(66, 201, 159, 0.2) !important;
		border-color: rgba(66, 201, 159, 0.4) !important;
		color: #42c99f !important;
	}

	/* ============================================
	 * KEYBOARD LANDING - HERO SECTION
	 * ============================================ */

	.keyboard-showcase .hero-section {
		background-color: #15181C !important;
	}

	/* Hero badge - CRITICAL FIX (was 1.0:1) */
	.hero-badge,
	.keyboard-showcase .hero-badge {
		background: rgba(45, 91, 62, 0.3) !important;
		border-color: rgba(45, 91, 62, 0.5) !important;
		color: #A7F3D0 !important;
	}

	.hero-badge span,
	.keyboard-showcase .hero-badge span {
		color: #A7F3D0 !important;
	}

	.hero-title,
	.keyboard-showcase .hero-title {
		color: #F5F5F5 !important;
	}

	.hero-subtitle,
	.keyboard-showcase .hero-subtitle {
		color: #E0E0E0 !important;
	}

	.hero-note,
	.keyboard-showcase .hero-note {
		color: #A6A6A6 !important;
	}

	.hero-breadcrumb {
		color: #A6A6A6 !important;
	}

	.hero-breadcrumb:hover {
		color: #CCCCCC !important;
	}

	/* ============================================
	 * KEYBOARD LANDING - PROBLEM SECTION
	 * ============================================ */

	.problem-section {
		background-color: #1a1d21 !important;
	}

	.problem-headline {
		color: #F5F5F5 !important;
	}

	.problem-card {
		background: #1F2429 !important;
		border-color: #383E45 !important;
	}

	.problem-card h3 {
		color: #F5F5F5 !important;
	}

	.problem-card p {
		color: #CCCCCC !important;
	}

	.problem-icon {
		color: #F87171 !important;
	}

	/* Emotional pitch text - CRITICAL FIX */
	.problem-content p,
	.problem-section p {
		color: #CCCCCC !important;
	}

	/* ============================================
	 * KEYBOARD LANDING - DEMO SECTION
	 * ============================================ */

	#demo,
	.demo-section {
		background-color: #15181C !important;
	}

	.demo-title {
		color: #F5F5F5 !important;
	}

	/* Comparison "vs" text - CRITICAL FIX */
	.vs-text,
	.comparison-vs,
	[class*="vs"] {
		color: #A6A6A6 !important;
	}

	/* Comparison table */
	.comparison-table {
		background: #1F2429 !important;
		border-color: #383E45 !important;
	}

	.comparison-table th {
		background: #262C32 !important;
		color: #F5F5F5 !important;
		border-color: #383E45 !important;
	}

	.comparison-table td {
		color: #CCCCCC !important;
		border-color: #383E45 !important;
	}

	/* ============================================
	 * KEYBOARD LANDING - SMART SECTION
	 * ============================================ */

	.smart-section,
	[id*="smart"] {
		background-color: #1a1d21 !important;
	}

	.smart-section h2 {
		color: #F5F5F5 !important;
	}

	.smart-section p {
		color: #CCCCCC !important;
	}

	/* AI-Powered badge - CRITICAL FIX (was 1.0:1) */
	.smart-badge,
	.ai-badge,
	[class*="ai-powered"],
	.smart-section .badge {
		background: rgba(45, 91, 62, 0.3) !important;
		border-color: rgba(45, 91, 62, 0.5) !important;
		color: #A7F3D0 !important;
	}

	/* ============================================
	 * KEYBOARD LANDING - PERSONA SECTION
	 * ============================================ */

	.persona-section,
	[id*="persona"] {
		background-color: #15181C !important;
	}

	.persona-section h2 {
		color: #F5F5F5 !important;
	}

	.persona-section p {
		color: #CCCCCC !important;
	}

	/* Tone theme cards - CRITICAL FIX (was 1.0:1) */
	.tone-theme,
	.persona-card,
	.theme-card {
		background: #1F2429 !important;
		border-color: #383E45 !important;
	}

	.tone-theme-name,
	.persona-card h3,
	.theme-card h3 {
		color: #F5F5F5 !important;
	}

	.tone-theme-desc,
	.persona-card p,
	.theme-card p {
		color: #CCCCCC !important;
	}

	/* Tone badges (Gaming, Social Media, Essay Writing, Creative) */
	.tone-badge,
	[class*="tone-theme"] span {
		color: #CCCCCC !important;
	}

	/* ============================================
	 * KEYBOARD LANDING - ACCESSIBILITY SECTION
	 * ============================================ */

	.accessibility-section,
	[id*="accessibility"] {
		background-color: #1a1d21 !important;
	}

	.accessibility-section h2 {
		color: #F5F5F5 !important;
	}

	.accessibility-section p {
		color: #CCCCCC !important;
	}

	/* WCAG AAA badge - CRITICAL FIX (was 1.0:1) */
	.accessibility-badge,
	.wcag-badge,
	[class*="wcag"] {
		background: rgba(45, 91, 62, 0.3) !important;
		border-color: rgba(45, 91, 62, 0.5) !important;
		color: #A7F3D0 !important;
	}

	.accessibility-badge span {
		color: #A7F3D0 !important;
	}

	/* Accessibility feature cards */
	.accessibility-feature,
	.accessibility-card {
		background: #1F2429 !important;
		border-color: #383E45 !important;
	}

	.accessibility-feature h3,
	.accessibility-card-title {
		color: #F5F5F5 !important;
	}

	.accessibility-feature p,
	.accessibility-card-description {
		color: #CCCCCC !important;
	}

	/* ============================================
	 * KEYBOARD LANDING - FINAL CTA SECTION
	 * ============================================ */

	.final-cta-section,
	[class*="final-cta"] {
		background: linear-gradient(135deg, #1a2e22 0%, #243d2d 100%) !important;
	}

	/* "Give Them Their Voice" headline - CRITICAL FIX (was 1.21:1) */
	.final-cta-title,
	.final-cta-section h2 {
		color: #F5F5F5 !important;
	}

	.final-cta-subtitle,
	.final-cta-section p {
		color: #E0E0E0 !important;
	}

	/* ============================================
	 * SHARED NAVIGATION STYLES
	 * ============================================ */

	/* Header */
	.showcase-header,
	.landing-header {
		background-color: rgba(21, 24, 28, 0.95) !important;
		border-bottom-color: #383E45 !important;
	}

	.showcase-header.scrolled,
	.landing-header.scrolled {
		background-color: rgba(21, 24, 28, 0.98) !important;
	}

	.header-nav a,
	.header-actions a {
		color: #CCCCCC !important;
	}

	.header-nav a:hover,
	.header-actions a:hover {
		color: #F5F5F5 !important;
	}

	.login-link {
		color: #CCCCCC !important;
	}

	/* Mobile navigation */
	.mobile-nav-backdrop {
		background-color: rgba(0, 0, 0, 0.6) !important;
	}

	.mobile-nav-drawer {
		background-color: #15181C !important;
		border-left-color: #383E45 !important;
	}

	.mobile-nav-header {
		background-color: #15181C !important;
		border-bottom-color: #383E45 !important;
	}

	.mobile-nav-links a {
		color: #CCCCCC !important;
	}

	.mobile-nav-links a:hover {
		color: #F5F5F5 !important;
		background: #262C32 !important;
	}

	/* ============================================
	 * SHARED FOOTER STYLES
	 * ============================================ */

	footer,
	.ms365-footer,
	.landing-footer {
		background-color: #15181C !important;
		border-top-color: #383E45 !important;
	}

	.footer-section-title,
	.ms365-footer-section-title {
		color: #F5F5F5 !important;
	}

	footer a,
	.ms365-footer a,
	.footer-link {
		color: #CCCCCC !important;
	}

	footer a:hover,
	.ms365-footer a:hover,
	.footer-link:hover {
		color: #F5F5F5 !important;
	}

	footer p,
	.ms365-footer p {
		color: #A6A6A6 !important;
	}

	/* ============================================
	 * SHARED BUTTON STYLES
	 * ============================================ */

	.cta-button.primary {
		background: #059669 !important;
		color: #F5F5F5 !important;
		border-color: #059669 !important;
	}

	.cta-button.primary:hover {
		background: #047857 !important;
	}

	.cta-button.secondary {
		background: transparent !important;
		color: #F5F5F5 !important;
		border-color: #383E45 !important;
	}

	.cta-button.secondary:hover {
		border-color: #059669 !important;
		color: #10B981 !important;
	}

	/* Button component - btn-secondary for FAQ tabs etc */
	.btn-secondary {
		background: #1F2429 !important;
		color: #F5F5F5 !important;
		border-color: #383E45 !important;
	}

	.btn-secondary:hover:not(:disabled) {
		background: #262C32 !important;
		color: #FFFFFF !important;
		border-color: #4B5563 !important;
	}

	.btn-secondary span {
		color: #F5F5F5 !important;
	}

	/* FAQ category tabs specifically - very aggressive targeting */
	.faq-category-tabs .btn-secondary,
	.faq-category-tabs button,
	.landing-page .faq-category-tabs button,
	#faq .faq-category-tabs button,
	section .faq-category-tabs button,
	[class*="btn-secondary"] {
		background: #1F2429 !important;
		color: #F5F5F5 !important;
		border-color: #383E45 !important;
	}

	.faq-category-tabs .btn-secondary span,
	.faq-category-tabs button span,
	.landing-page .faq-category-tabs button span,
	#faq .faq-category-tabs button span,
	section .faq-category-tabs button span,
	[class*="btn-secondary"] span,
	[class*="btn-secondary"] .btn-content {
		color: #F5F5F5 !important;
	}

	/* Target the button content wrapper */
	.btn .btn-content,
	.btn-secondary .btn-content {
		color: #F5F5F5 !important;
	}

	/* ============================================
	 * SHARED KEYBOARD PREVIEW STYLES
	 * ============================================ */

	.keyboard-preview {
		background: #1F2429 !important;
		border-color: #383E45 !important;
	}

	.keyboard-preview-header {
		background: #262C32 !important;
	}

	.preview-words .word-bubble,
	.keyboard-demo-word {
		background: #262C32 !important;
		color: #CCCCCC !important;
		border-color: #383E45 !important;
	}

	.preview-words .word-bubble.accent {
		background: rgba(45, 91, 62, 0.3) !important;
		color: #A7F3D0 !important;
		border-color: rgba(45, 91, 62, 0.5) !important;
	}

	.preview-output {
		background: #15181C !important;
		color: #F5F5F5 !important;
		border-color: #383E45 !important;
	}

	.speaking-icon {
		color: #10B981 !important;
	}

	/* ============================================
	 * ADDITIONAL SPECIFIC FIXES
	 * ============================================ */

	/* Main Landing - Savings badge (Save 33%) - CRITICAL FIX */
	.savings-badge {
		background: #059669 !important;
		color: #FFFFFF !important;
		border-radius: 4px !important;
		padding: 0.25rem 0.5rem !important;
		font-weight: 600 !important;
	}

	/* Billing options / toggle buttons */
	.billing-option {
		color: #CCCCCC !important;
	}

	.billing-option:hover,
	.billing-option.active {
		color: #F5F5F5 !important;
	}

	/* Main Landing - Trust section stats */
	.trust-stat-value {
		color: #F5F5F5 !important;
	}

	.trust-stat-label {
		color: #CCCCCC !important;
	}

	.trust-stat-desc {
		color: #A6A6A6 !important;
	}

	/* FAQ category headers */
	.faq-category {
		color: #A6A6A6 !important;
	}

	/* FAQ category tab buttons - "How It Works" etc */
	.faq-category-tabs button,
	.faq-category-tabs button span,
	.faq-category-tabs .btn,
	.faq-category-tabs .btn span,
	.faq-category-tabs .btn-secondary,
	.faq-category-tabs .btn-secondary span {
		color: #CCCCCC !important;
	}

	.faq-category-tabs button:hover,
	.faq-category-tabs button:hover span,
	.faq-category-tabs .btn:hover,
	.faq-category-tabs .btn:hover span {
		color: #F5F5F5 !important;
	}

	.faq-category-tabs button[aria-selected="true"],
	.faq-category-tabs button[aria-selected="true"] span,
	.faq-category-tabs .btn-primary,
	.faq-category-tabs .btn-primary span {
		color: #F5F5F5 !important;
	}

	/* Global button text fix for secondary buttons */
	.btn-secondary {
		background: #1F2429 !important;
		color: #CCCCCC !important;
		border-color: #383E45 !important;
	}

	.btn-secondary:hover {
		background: #262C32 !important;
		color: #F5F5F5 !important;
	}

	/* Roadmap ETA badge - force high contrast */
	.roadmap-eta {
		background: #2D5B3E !important;
		color: #A7F3D0 !important;
		border-color: rgba(45, 91, 62, 0.5) !important;
	}

	/* Keyboard Landing - Section badges (AI-Powered, WCAG AAA) - CRITICAL FIX */
	.section-badge,
	.hero-badge {
		background: rgba(45, 91, 62, 0.4) !important;
		border: 1px solid rgba(167, 243, 208, 0.4) !important;
		color: #A7F3D0 !important;
	}

	.section-badge span,
	.hero-badge span {
		color: #A7F3D0 !important;
	}

	.section-badge svg,
	.hero-badge svg {
		color: #A7F3D0 !important;
	}

	/* ============================================
	 * MISC ELEMENTS
	 * ============================================ */

	/* Scroll hint */
	.scroll-hint {
		color: #888888 !important;
	}

	/* Hamburger menu button */
	.hamburger-btn {
		color: #F5F5F5 !important;
	}

	/* Input fields */
	input,
	textarea {
		background: #1F2429 !important;
		border-color: #383E45 !important;
		color: #F5F5F5 !important;
	}

	input::placeholder,
	textarea::placeholder {
		color: #888888 !important;
	}
}