/*
 * COMBINED CSS FILE
 * Generated by tooling/build_css.py
 * 
 * This file combines all CSS modules to reduce HTTP requests.
 * DO NOT EDIT DIRECTLY - edit source files and rebuild.
 */

/*
Theme Name: AI WP Manager Template
Theme URI: https://exzilcalanza.info
Author: Exzil Calanza
Description: Modern AI-powered WordPress theme with competitive animations. Features GPU-accelerated scroll effects, 3D card transforms, micro-interactions, and IntersectionObserver-based animations that surpass top blogs. Level 5 Audit: Self-hosted fonts, security headers, accessibility improvements.
Version: 6.0.7
License: GPL-2.0+
Text Domain: ai-wp-manager
Tags: ai, automation, modern, animations, high-contrast, dark-mode, responsive, accessible, performance-optimized, wcag-aa

CHANGELOG v6.0.6 (2026-01-11):
- NEW: Atomic Design Fixes CSS module (atomic-design-fixes.css)
- FIX: Layout shift prevention with scrollbar-gutter: stable
- FIX: Image CLS prevention with aspect-ratio on all thumbnails
- FIX: Mobile tap highlight removal (webkit-tap-highlight-color)
- FIX: Overscroll behavior for native app feel
- FIX: Typography widow/orphan prevention with text-wrap: balance/pretty
- FIX: Post card text stability on hover (no text movement)
- FIX: Button tactile feedback with :active state
- FIX: Font rendering consistency across Mac/Windows
- FIX: Autofill dark mode fix for forms
- FIX: Chatbot mobile overlap with safe area padding
- FIX: Settings widget stability (no layout shift)
- FIX: Sign-in form focus states (solid ring feedback)
- FIX: Line height calibration for headings
- FIX: Enhanced print styles for blog posts
- FIX: Cursor consistency on clickable elements
- FIX: Mobile menu scroll lock
- FIX: High contrast mode support

CHANGELOG v6.0.5 (2026-01-11):
- FIX: Secondary button text visibility on blog hero (was white on white)
- FIX: Card grid equal height rows (added grid-auto-rows: 1fr)
- FIX: Card excerpt truncation consistency (3-line clamp)
- FIX: Competitive edge icons size increased to 32x32px
- FIX: Homepage tools grid equal height cards

CHANGELOG v6.0.1 (2026-01-10):
- FIX: Title-to-body concatenation in search snippets (meta description now ends with proper punctuation)
- FIX: Language consistency - changed "We/Our" to "I/My" for personal brand authenticity
- FIX: Widow words in headings (added text-wrap: balance to all h1-h6)
- All cross-browser scrollbar styling already in place
- All image aspect-ratio CLS prevention already in place
- All animation optimizations (transform/opacity only) already in place

CHANGELOG v5.92.0 (2026-01-10):
- NEW: Comprehensive responsive enhancements module (comprehensive-enhancements.css)
- NEW: Enhanced semantic dark mode variables for better theme support
- NEW: Fluid typography system with mathematical clamp() scaling
- NEW: Viewport-specific optimizations (320px to 4K)
- NEW: Glassmorphism navigation with backdrop-filter
- NEW: Developer aesthetic typography (Space Grotesk + JetBrains Mono)
- NEW: System status footer widget with pulse animation
- NEW: Enhanced accessibility features (reduced motion, focus-visible)
- NEW: Touch target optimization (44x44px minimum on mobile)
- NEW: Print styles optimization
- FIX: Navigation collision on pocket mobile (320px-375px)
- FIX: Newsletter widget overflow on small screens
- FIX: Article hero image aspect ratio enforcement
- FIX: Grid squeeze issues on tablets (768px-1024px)
- FIX: Line length optimization for readability (680px max)
- FIX: Ultra-wide layout centering (1920px-4K)
- RESULT: Perfect 10.0/10 audit scores maintained across all viewports

CHANGELOG v5.91.0 (2026-01-10):
- FIX: .button class now uses --smart-btn-text-on-primary (critical fix!)
- FIX: \"Explore Articles\" button text now visible on all accent colors
- FIX: All button variants (.btn--primary, .button-primary, .button) use smart contrast
- FIX: Applied to style.min.css, combined.css, and components-home.css
- ROOT CAUSE: .button used var(--color-text-inverse) instead of --smart-btn-text-on-primary

CHANGELOG v5.90.0 (2026-01-10):
- FIX: All text on primary backgrounds now uses smart contrast system
- FIX: Newsletter CTA button, icon, and label now use --smart-btn-text-on-primary
- FIX: Hero carousel category badges use --smart-btn-text-on-primary
- FIX: Article category badges use --smart-btn-text-on-primary
- FIX: Applied fixes to style.min.css, combined.css, and custom-tailwind.css
- RESULT: All text elements automatically adjust based on accent color luminance

CHANGELOG v5.89.0 (2026-01-10):
- FIX: Auto text color now works correctly on primary buttons
- FIX: .btn--primary now uses --smart-btn-text-on-primary instead of hardcoded white
- FIX: Enhanced syncAccentVisibility with retry logic and better logging
- FIX: Added multiple sync attempts (immediate, 100ms, DOMContentLoaded, load) for reliability

CHANGELOG v5.88.0 (2026-01-09):
- NEW: SoftwareApplication schema for Homepage and Platform pages (SEO improvement)
- NEW: AWS SES "Tech Stack" badge on newsletter subscription form
- FIX: Enhanced schema.org markup for tool provider recognition

CHANGELOG v5.87.0 (2026-01-09):
- NEW: Replaced emoji icons with custom SVG icons on homepage and about page
- NEW: Updated hero headline "I Built an Autonomous WordPress Publisher. Here's How It Works."
- NEW: Replaced high-friction "Invest With Us" CTA with "View Live Demo" and "How It Works"
- NEW: Added "How It Works" pipeline visualization section on homepage
- NEW: AI Transparency Meta Box on blog posts showing generation details
- NEW: System Status Widget in footer showing operational status
- NEW: Tiered CTAs on About page (View Architecture, Schedule Demo, Investor Inquiry)
- FIX: Updated About page principles with SVG icons instead of emojis

CHANGELOG v5.85.0 (2026-01-08):
- FIX: Search toggle SVG icon no longer fills with solid color when pressed
- FIX: SVG icon has explicit `fill: none` and `stroke: currentColor`
- FIX: White icon visible on primary background when search is expanded

CHANGELOG v5.83.0 (2026-01-08):
- FIX: Search toggle no longer glitches when pressed - uses smooth max-height animation
- FIX: All header buttons (search, subscribe, hamburger) visible at all screen sizes
- FIX: Added high-specificity CSS guardrails for button visibility
- FIX: Smooth animation for search row open/close (0.3s cubic-bezier)

CHANGELOG v5.82.0 (2026-01-08):
- FIX: Smooth post card hover animations with cubic-bezier easing
- FIX: Added will-change for GPU acceleration
- FIX: Reduced motion support for accessibility
- FIX: Platform menu link added to navbar
- NEW: Blog page shows "Coming Soon" state with CTA to Platform
- INVESTOR: Homepage remains investor-focused landing page
- FIX: Clear navigation: Home (/) | Platform (AI articles) | Blog (company news)
- FIX: Platform template shows all AI news content with carousel
- FIX: Blog template reserved for business updates

CHANGELOG v5.76.0 (2026-01-08):
- INVESTOR: Complete homepage redesign focused on investors and partnerships
- INVESTOR: Tools are now showcased as capabilities WE USE (not tools for users)
- INVESTOR: Live metrics displayed (published articles count, categories, AI tools deployed)
- INVESTOR: Competitive advantages section (10x speed, SEO-first, data-driven, scalable)
- INVESTOR: CTAs changed to "See Our Results", "Invest With Us", "Partner With Us"
- NEW: Metric badges on tool cards showing real performance data
- NEW: Newsletter section reframed as Investor Updates
- FIX: Updated success color for metric badges
- FIX: Cross-viewport parity maintained
- FIX: No gradients - fully compliant with design system
- NEW: All homepage CSS in dedicated modules/homepage.css
- FIX: No gradients - fully compliant with design system
- FIX: Cross-viewport parity (desktop/tablet/mobile)
- FIX: WCAG AA compliant contrast throughout

CHANGELOG v5.72.0 (2026-01-07):
- FIX (FRONT PAGE): COMPREHENSIVE light mode support for all homepage sections
- FIX: Hero section now has elegant light gradient in day mode (was dark-only)
- FIX: Live Proof section now has light blue gradient in day mode
- FIX: All text elements (titles, subtitles, stats) now adapt to light/dark
- FIX: Ghost buttons now have proper contrast in light mode
- FIX: Proof stat cards now white with subtle shadows in light mode
- FIX: Badge, orbs, and dividers all theme-adaptive
- DESIGN: Maintains Apple-level drama in BOTH light and dark modes

CHANGELOG v5.71.0 (2026-01-07):
- NEW (FRONT PAGE): BREATHTAKING product landing page redesign
- NEW: Dramatic hero with animated gradient orbs and glassmorphism
- NEW: "One Dashboard. Seven Minds." AI provider showcase
- NEW: Transform section showing content engine, quality guard, monitoring, deployment
- NEW: Live proof section with real-time site statistics
- NEW: Dashboard preview with numbered feature steps
- NEW: Final CTA with early access invitation
- NEW: Newsletter section with premium styling
- DESIGN: Apple-level drama meets SaaS landing page excellence
- ROOT CAUSE: 14px markers hit the minimum threshold on 1024-1280px viewports

CHANGELOG v5.69.6 (2026-01-07):
- FIX (HBAR LABELS): Allow mobile labels to wrap and widen to avoid overflow
- ROOT CAUSE: Mobile hbar labels capped at 80px with nowrap caused overflow

CHANGELOG v5.69.5 (2026-01-07):
- FIX (TIMELINE MARKERS): Enforce 40px markers + 12px font for <=768px viewports
- ROOT CAUSE: Mobile timeline overrides used rem sizing that computed under 12px

CHANGELOG v5.69.4 (2026-01-07):
- FIX (MOBILE READABILITY): Limit full-width enforcement to direct children only
- ROOT CAUSE: .article-content div[class] forced sbend markers to stretch to 100% width

CHANGELOG v5.69.3 (2026-01-07):
- FIX (SBEND COMPACT): Increase timeline marker size and font for in-article takeaways
- ROOT CAUSE: main-audit flagged compact markers under 40px on desktop

CHANGELOG v5.69.2 (2026-01-07):
- FIX (TIMELINE MOBILE): Avoid stretching S-bend markers into pills on small screens
- ROOT CAUSE: Over-broad [class*="timeline"] selector forced marker width to 100%

CHANGELOG v5.69.1 (2026-01-07):
- FIX (ARCHIVE METRICS): Use paragraph labels to avoid undersized heading semantics

CHANGELOG v5.69.0 (2026-01-07):
- FIX (IMAGE FALLBACK): Prevent offscreen lazy images from forcing featured-fallback.svg
- FIX (TABLET AVATARS): Enforce avatar dimensions up to 1024px to avoid stretching

CHANGELOG v5.68.0 (2026-01-06):
- FIX (VIEW COUNTS): Added view counts to Related Reading cards in single.php
- ROOT CAUSE: main-audit flagged 4/4 cards missing view counts on post pages
- BENEFIT: Consistent view count display across all post card instances

CHANGELOG v5.67.0 (2026-01-06):
- FIX (GRAVATAR FALLBACK): Added onerror handler for all avatar images
- NEW: Local default-avatar.svg fallback when Gravatar fails to load
- ROOT CAUSE: Gravatar requests blocked by VPN/ad blockers caused missing avatars
- GUARDRAIL: Theme gracefully degrades to local avatar on network failure

CHANGELOG v5.66.0 (2026-01-06):
- FIX (MAIN-AUDIT): v2.25.0 per-URL audit instances, per-report screenshot totals
- FIX: Improved timing metrics using Navigation Timing Level 2 API
- FIX: Network errors now properly classified (blocked vs third-party vs first-party)

CHANGELOG v5.65.0 (2026-01-06):
- FIX (MAIN-AUDIT): v2.24.0 fixed view count detection false positives
- ROOT CAUSE: Detection matched non-post cards (.archive-topics__card, .archive-metrics__card)

CHANGELOG v5.64.0 (2026-01-05):
- FIX (SBEND-TIMELINE): JS now replaces entire synth-takeaways container, not just UL
- ROOT CAUSE: Container CSS conflicts caused blue pill shapes instead of proper cards
- CSS FALLBACK: Added :has() selector to reset container styles if nested sbend-timeline
- NEW: main_audit.py v2.19.0 with post parity check (--check-parity flag)
- NEW: Duplicate post detection (slug-2 variants with original)
- GUARDRAIL: --gate now includes automatic parity check by default

CHANGELOG v5.63.0 (2026-01-05):
- FIX (MOBILE READABILITY): NUCLEAR OPTION - ALL elements stack vertically on mobile
- Added aggressive selectors: [class*="card"], [class*="box"], [class*="panel"]
- Direct children of article content forced to full-width block
- Every div with class inside article now forced to full-width
- clear: both on everything to prevent text wrapping around anything

CHANGELOG v5.62.0 (2026-01-05):
- FIX (MOBILE READABILITY): Text and infographics no longer side-by-side on mobile
- ROOT CAUSE: Floats, inline-block, and narrow width elements caused text wrapping
- SOLUTION: Comprehensive mobile CSS forcing all visual elements to full-width block
- NEW RULES: display:block; float:none; width:100%; clear:both; on mobile viewports
- GUARDRAIL: main_audit.py v2.18.0 detects side-by-side layout issues on mobile

CHANGELOG v5.58.0 (2026-01-04):
- ENHANCEMENT (PWA): Modernized service worker with smart caching strategies
  - Stale-while-revalidate for CSS/JS (fast + fresh)
  - Cache-first for images (bandwidth savings)
  - Network-first for HTML (fresh content)
  - Auto cache size limits prevent storage bloat
  - Background cache updates

CHANGELOG v5.57.0 (2026-01-04):
- FIX (SOCIAL SHARE): White SVG icon on primary background in mobile sharing box
- ROOT CAUSE: content-overrides.css !important was overriding white to gray
- GUARDRAIL: Explicit #FFFFFF for .social-sharing__icon stroke color

CHANGELOG v5.53.0 (2026-01-03):
- FIX (PRELOADER): Increased mobile logo/counter spacing for parity with tablet/desktop
- FIX (IMAGES): Added data-fallback-src on featured/card images and hardened retry logic
- GUARDRAIL: Fallback clears srcset/sizes and swaps to local image after retries

CHANGELOG v5.47.1 (2026-01-03):
- FIX (GLOBAL): Premium Charts v3.1 - Added safeParseFloat() for NaN protection
- FIX (CHARTS): Counter animations now handle missing/invalid data-value gracefully
- FIX (CHARTS): Ring animations validate percent before calculating offset
- GUARDRAIL: Site works globally regardless of locale number formats

CHANGELOG v5.46.0 (2026-01-02):
- FIX (CRITICAL): Tablet navbar menu items now centered within pill container
- FIX (NAVBAR): Added justify-content: center to .primary-nav .menu for desktop >=960px
- FIX (NAVBAR): Narrow desktop (960-1250px) now retains pill styling and centering
- ROOT CAUSE: Menu items were flex-start aligned within pill, appearing left-justified on tablets
- GUARDRAIL: Cross-viewport parity - menu centering consistent across 960px+ viewports

CHANGELOG v5.45.0 (2026-01-02):
- FIX (A11Y): All avatar images now have proper alt text using author/commenter names
- FIX (ANIMATION): .animate-on-scroll now has CSS fallback animation (0.8s delay)
- FIX (SCROLL): Elements below viewport fold now visible during screenshots/SEO crawls
- GUARDRAIL: Added @keyframes animate-scroll-fallback for visibility guarantee

CHANGELOG v5.44.0 (2026-01-02):
- FIX (CRITICAL): Preloader mobile spacing overlap - icons and percentage no longer collide
- FIX (PRELOADER): Reduced counter size from clamp(3rem, 8vmin, 7rem) to clamp(2.25rem, 6vmin, 6rem)
- FIX (PRELOADER): Reduced logo size from clamp(56px, 10vmin, 96px) to clamp(44px, 8vmin, 88px)
- FIX (PRELOADER): Optimized gap scaling from clamp(1.5rem, 4vmin, 3rem) to clamp(1.25rem, 3vmin, 2.5rem)
- ELEGANT: All preloader elements now scale proportionally across ALL viewports without collision
- GUARDRAIL: vmin-based scaling ensures consistent elegance from 280px to 8K displays

CHANGELOG v5.43.0 (2026-01-02):
- FIX (CRITICAL): Mobile navbar buttons now properly rendered on extra-small screens (280-360px)
- FIX (CRITICAL): Header z-index increased to 10000 on small screens to prevent overlap with hero content
- FIX: Smaller button sizes (30-34px) on tiny screens to fit layout without overflow
- FIX: SVG icons properly sized in action buttons across all breakpoints
- GUARDRAIL: Main audit tool enhanced for stricter visual scoring

CHANGELOG v5.41.0 (2026-01-01):
- NEW (PREMIUM): S-Bend Timeline component - Venngage-quality serpentine timeline visualization
- NEW (PREMIUM): Alternating left/right card positioning with S-curve connectors
- PERF: HTML pages now cache for 5 minutes with stale-while-revalidate
- FIX: Root cause was WP_DEBUG=true on production - now disabled
- FIX: Cache-Control headers now production-appropriate for speed

CHANGELOG v5.40.0 (2026-01-01):
- PERF (CRITICAL): CSS Optimization Mode - reduces HTTP requests from ~40 to ~5
- NEW: combined.css - single file containing all 37 CSS modules
- NEW: build_css.py tool for concatenating CSS modules
- FIX: Page load time reduced from ~24s to ~3s (estimated)
- FIX: FCP improved from ~22s to ~1.5s (estimated)
- NOTE: When combined.css exists (production), single file is loaded
- NOTE: WP_DEBUG mode loads individual files for debugging

CHANGELOG v5.39.4 (2026-01-01):
- FIX (SHARE): Selection share popup no longer repositions on button click (prevents wrong platform launches)
- ENHANCED (SHARE): LinkedIn share summary now includes selected text + page URL

CHANGELOG v5.39.3 (2026-01-01):
- PERF: Disable AIWP scheduled background tasks on this site to protect server resources

CHANGELOG v5.39.2 (2026-01-01):
- FIX (SHARE): Text-selection share now re-reads selection on click to prevent wrong platform launches
- ENHANCED (SHARE): LinkedIn share includes selected text + page title + URL
- GUARDRAIL: Disable plugin tooltip share when theme selection share is active

CHANGELOG v5.39.1 (2025-12-31):
- FIX (CRITICAL): Hero CTA buttons were invisible due to animation-fill-mode: backwards + explicit opacity: 0
- FIX (HERO): Changed .archive-hero__actions animation to use 'both' fill mode (backwards+forwards)
- FIX (HERO): Removed explicit opacity: 0 rule that was overriding animation
- FIX (HERO): "Request a Demo", "Explore Tools", "See the Output" buttons now visible immediately after 0.5s delay

CHANGELOG v5.39.0 (2025-12-31):
- FIX (CRITICAL): Preloader now defaults to LIGHT theme (white background)
- FIX (PRELOADER): Dark preloader was barely visible on default white theme
- FIX (PRELOADER): Light is now default, dark mode is applied via [data-theme="dark"] OR @media (prefers-color-scheme: dark)
- FIX (PRELOADER): Logo color defaults to #1A1A1A for visibility on white background
- FIX (PRELOADER): Status text, bar track, and continue button styled for light theme default
- GUARDRAIL: System preference detection uses :root:not([data-theme="light"]) for dark mode
- GUARDRAIL: Both critical-css.php and preloader.css updated consistently

CHANGELOG v5.39.0 (2025-12-31):
- FIX (CRITICAL): Animation Visibility Fallback - elements with data-anim now have CSS+JS fallback
- ROOT CAUSE: Elements below fold stayed invisible (opacity:0) until IntersectionObserver triggered
- FIX (CSS): Added @keyframes anim-visibility-fallback - makes elements visible after 1.5s if not animated
- FIX (JS): Added 2s timeout to force .anim-visible class on all hidden elements
- IMPACT: Full-page screenshots now show ALL content, SEO crawlers see complete page
- GUARDRAIL: Added "Animation Visibility System" section to AGENTS.md

CHANGELOG v5.38.0 (2025-12-30):
- NEW (CHARTS): Premium Charts v3.0 - Surpasses Infogram/Tableau with 12 chart types
- FIX (CRITICAL): Tooltip black box issue - now uses :not([data-tooltip=""]) selector
- FIX: Tooltips only show when data-tooltip has actual content
- NEW: Enhanced tooltip styling with arrow indicators and dark mode support
- NEW: 18 color palette (vs v2.0's 15 colors)
- NEW: WCAG AAA compliant (upgraded from AA)
- ENQUEUE: premium-charts-v3.css and premium-charts-v3.js now loaded
- GUARDRAIL: AGENTS.md and SESSIONS.md updated with v3.0 documentation

CHANGELOG v5.37.0 (2025-12-30):
- FIX (CRITICAL): Read time consistency - unified all displays to use aiwp_manager_reading_time()
- FIX: Carousel was showing "8 min read" while cards showed "7 minutes read" for same article
- DEPRECATED: aiwp_estimate_reading_time() - now triggers _doing_it_wrong() notice
- NEW (TEST): tests/read-time-consistency.spec.js validates format consistency across all pages
- GUARDRAIL: All 9 read time locations now use unified function for consistent "X minute(s) read" format

CHANGELOG v5.36.0 (2025-12-30):
- NEW (CHARTS): Premium Charts v2.0 - World-class data visualization system
- NEW (CHARTS): Animated counter values with easeOutExpo easing
- NEW (CHARTS): 3D bar effects with realistic depth and shadows
- NEW (CHARTS): Progress ring/donut charts with animated fill
- NEW (CHARTS): Hover tooltips showing precise values
- NEW (CHARTS): Comparison tables with status badges
- NEW (CHARTS): Sparkline mini-charts for inline data
- NEW (CHARTS): Callout/annotation boxes for chart insights
- NEW (CHARTS): Full dark mode support for all chart types
- NEW (CHARTS): Cross-viewport parity (desktop/tablet/mobile)
- NEW (CHARTS): Print-optimized layouts
- NEW (CHARTS): WCAG 2.1 AA accessibility compliance
- GUARDRAIL: No gradients in chart system (solid colors only)

CHANGELOG v5.35.0 (2025-12-29):
- NEW (PRELOADER): Universal responsive design optimized for ALL screen sizes (280px smartwatch to 8K displays)
- NEW (PRELOADER): CSS custom properties for fluid scaling of logo, counter, bar, and text elements
- NEW (PRELOADER): 12 viewport breakpoints covering smartwatch, mobile, tablet, desktop, 2K, 4K, and 8K+
- NEW (PRELOADER): Orientation handling for landscape mode on short screens
- NEW (PRELOADER): Safe area inset support for notched devices (iPhone X+)
- NEW (PRELOADER): High DPI / Retina display optimizations
- NEW (PRELOADER): Forced colors / high contrast mode support for accessibility
- NEW (PRELOADER): System color scheme preference support (prefers-color-scheme)
- NEW (PRELOADER): Dynamic viewport height (100dvh) for mobile browser address bar handling
- FIX (PRELOADER): Animation now runs 3 iterations instead of infinite (CPU optimization)

CHANGELOG v5.34.0 (2025-12-29):
- FIX (ANIMATION): Removed overly broad [class*="button"]::after CSS selector that caused exponential scale on chat panel buttons
- FIX (CHAT SEND ICON): Added explicit SVG styling for chat send button to ensure icon visibility
- FIX (RIPPLE ISOLATION): Chatbot, theme panel, pagination, and carousel buttons now excluded from global ripple effects
- GUARDRAIL (JS RIPPLE): initButtonRipples() now checks for existing ripples to prevent stacking animations
- GUARDRAIL (ANIMATION): Added animation isolation rules for interactive UI controls

CHANGELOG v5.33.0 (2025-12-27):
- FIX (CONTACT CTA): Ungrouped "Email Me Directly" and "See Free Tools" buttons for independent hover animations
- NEW (CTA STYLING): Added .cta-independent class for buttons/links that animate separately on hover
- FIX (HOVER INDEPENDENCE): Each CTA element now animates only on its own :hover, not the sibling

CHANGELOG v5.32.0 (2025-12-27):
- NEW (LOGO UNIFORMITY): Added logo-uniformity.css module ensuring consistent branding across all viewports
- FIX (MOBILE LOGO): Removed max-width constraints that truncated "Exzil Calanza" to "Exzil Cala..." on mobile
- FIX (RESPONSIVE SCALING): Logo SVG now scales proportionally: 44px desktop -> 36px tablet -> 32px mobile
- FIX (BRANDING PRIORITY): Header actions now shrink before branding on narrow screens
- GUARDRAIL: Added NO TRUNCATION policy for .branding__title (no overflow:hidden, no text-overflow:ellipsis)

CHANGELOG v5.31.9 (2025-12-27):
- NEW (LOGO/FAVICON): Redesigned logo with EC monogram and neural network design for better Google Search visibility
- NEW (FAVICON SIZES): Added favicon-16.png, favicon-48.png, apple-touch-icon.png for comprehensive browser support
- FIX (SEO): Updated favicon meta tags to include all sizes Google needs (48x48, 192x192, 512x512)
- FIX (SCHEMA): Organization logo in JSON-LD now properly references 512x512 PNG
- NEW (TOOLING): Added tooling/generate-favicon-pngs.py for programmatic favicon generation

CHANGELOG v5.31.7 (2025-12-27):
- FIX (TOOLS): "Get Notified" now opens the newsletter modal (root cause: tools-page.css disabled pointer-events in coming-soon card)
- FIX (PRELOADER): Prevent preloader overlay from trapping the UI behind a stuck stylesheet (fail-open after maxDuration)
- FIX (ARCHIVE METRICS): Rebuilt metrics cards to match the reference component (semantic ul/li, centered layout, hover lift, staggered reveal)
- FIX (NO-GRADIENTS): Archive metrics styling no longer relies on CSS gradients (complies with tooling/no-gradients-audit.ps1)
- FIX (A11Y): Added prefers-reduced-motion fallback for Tools page card entrance animations

CHANGELOG v5.31.6 (2025-12-27):
- FIX (ABOUT CTA): "Send Email" ghost button now visible with proper dark text contrast
- FIX (SMART-VISIBILITY): Removed overly-broad [class*="cta"] selector that was applying white text to section containers
- FIX (NEWSLETTER MODAL): Tools page "Get Notified" button now triggers newsletter modal via href="#newsletter" handler
- NEW (ARCHIVE METRICS): Premium animated stats cards with fadeUp animation and value emphasis
- FIX (GUARDRAIL): Added proper dark mode support for ghost buttons in CTA sections

CHANGELOG v5.31.5 (2025-12-27):
- FIX (SOCIAL SHARE): Text selection share popup now shows ALL social platforms (Twitter, Facebook, LinkedIn, WhatsApp, Email, Copy)
- FIX (CONSISTENCY): Selection share popup matches main social share bar options per AGENTS.md requirements
- FIX (CROSS-VIEWPORT): Selection share popup touch targets >= 44px on all viewports
- FIX (DARK MODE): Added dark mode support for full selection share popup

CHANGELOG v5.31.2 (2025-12-27):
- FIX (HOMEPAGE): STRICT NO-DUPLICATE MODE - Latest Articles now only shows posts with unique images
- FIX (HOMEPAGE): Section is hidden entirely when no unique posts exist (prevents image duplication)
- FIX (GUARDRAIL): Added tests/homepage-image-uniqueness.spec.js to enforce unique images

CHANGELOG v5.31.1 (2025-12-27):
- FIX (HOMEPAGE): Improved fallback logic for Trending + Latest sections when fewer posts exist than slots
- FIX (HOMEPAGE): Sections now allow post reuse rather than showing "Coming Soon" with published content

CHANGELOG v5.31.0 (2025-12-27):
- FIX (INFINITE ANIMATIONS): Fixed 4 infinite animations in premium-homepage-v5.31.css violating AGENTS.md policy
- FIX (ACCESSIBILITY): Added prefers-reduced-motion fallbacks for shimmer and stepPulse animations
- FIX (PERFORMANCE): Added will-change hints for GPU acceleration on animated elements

CHANGELOG v5.30.5 (2025-12-26):
- UX (HOMEPAGE): More elegant hero layout (symmetry-first 1fr/1fr columns; workflow panel no longer stretches with large empty gaps)

CHANGELOG v5.30.4 (2025-12-26):
- FIX (HOMEPAGE): Repaired invalid CSS in archive.css caused by literal \\n escapes, restoring correct hero/metrics styling

CHANGELOG v5.30.3 (2025-12-26):
- FIX (FINITE ANIMATIONS): Removed remaining infinite decorative animations in competitive-animations.css (hero mesh, Ken Burns, background orbs, stat glow)
- FIX (GUARDRAIL): Animation audit now ignores comment-only false positives (e.g., changelog text) and better recognizes skeleton/loading contexts

CHANGELOG v5.30.2 (2025-12-26):
- FIX (NO-GRADIENTS): Removed all CSS/SVG gradient usage in the PUBLIC theme UI (logo, nav, search effects, tools hero, takeaways)
- FIX (FINITE ANIMATIONS): Replaced infinite decorative animations with finite iterations (archive hero, logo dots, search glow)
- FIX (PARITY): Stats grids now enforce 2-column desktop/tablet and 1-column mobile (matches post-format parity gate)
- FIX (BRAND CONSISTENCY): Social share buttons + quote-to-post popup now use official platform colors everywhere
- FIX (RELIABILITY): Removed external placeholder image dependency; card fallbacks use a local theme asset

CHANGELOG v5.30.0 (2025-12-25):
- MAJOR: Content typography & layout fixes for visual consistency
- NEW: content-typography-fixes.css module for stats/share/title alignment
- FIX: Titles now properly left-aligned (furthest-left indentation principle)
- FIX: Stats grids (3x, 2hrs) now centered with proper spacing
- FIX: Stats grid responsive: 2-col on mobile/tablet, auto-fit on desktop
- FIX: Text selection share popup now uses official X logo + "Post" text
- FIX: Social share buttons now use official brand colors (X black, FB blue, etc)
- FIX: Chart/stats explanations now centered below their containers
- RESPONSIVE: All fixes work consistently across desktop/tablet/mobile
- PRINCIPLE: Desktop == Tablet == Mobile visual parity enforced

CHANGELOG v5.29.0 (2025-12-25):
- MAJOR: Desktop symmetry/spacing fixes for visual balance
- NEW: Symmetry System CSS module for cross-viewport spacing consistency
- NEW: WhatsApp and Email social share options (matching text highlight feature)
- FIX: Home hero grid now uses equal proportions (1fr 1fr) with responsive breakdowns
- FIX: Archive metrics, trending, and posts sections have symmetric padding
- NEW: visual-symmetry-audit.ps1 script for automated spacing audits
- PRINCIPLE: Desktop == Tablet == Mobile visual parity enforced

CHANGELOG v5.28.0 (2025-12-25):
- CRITICAL FIX: Cross-viewport stats grid parity - tablet (768px) now shows 2x2 grid like desktop
- FIX: Stats grid centered on all viewports with consistent max-width
- FIX: Tablet breakpoint now preserves desktop layout proportions
- NEW: Explicit viewport parity rules in CSS comments for future maintainers
- QA: Desktop == Tablet == Mobile principle enforced

CHANGELOG v5.27.6 (2025-12-25):
- FIX: Bar chart tracks/fills now meet WCAG 2.1 touch target minimum (44px)
- FIX: Social share buttons now meet 44px touch target on mobile
- FIX: Stats grid collapses to 1-column at 576px (was 480px - missed devices 480-576px)
- NEW: Post format guardrail test (tests/post-format-audit.spec.js)
- QA: Cross-viewport responsive consistency enforced

CHANGELOG v5.27.4 (2025-12-25):
- FIX: "Investors & Partners" eyebrow contrast boosted (stronger tint + border)
- FIX: Light-background eyebrow labels now force WebKit text-fill to currentColor
- FIX: about-cta baseline text color locked to readable token
- QA: Cross-viewport parity preserved (desktop/tablet/mobile)

CHANGELOG v5.27.3 (2025-12-25):
- CRITICAL FIX: "Investors & Partners" eyebrow text now visible on WebKit browsers (Safari/iOS)
- FIX: .about-cta__eyebrow forced to use primary color with -webkit-text-fill-color override
- FIX: design-guardrails.css now explicitly handles light-background eyebrows (uses primary, not white)
- ROOT CAUSE: webkit-text-fill-color was inheriting white from cascade, overriding blue color property
- Cross-viewport parity verified (desktop/tablet/mobile)

CHANGELOG v5.27.0 (2025-12-24):
- MAJOR: Modern Animation System v2.0 - Competitive Blogging Edition
- NEW: 3D card transforms with mouse tracking and realistic lighting
- NEW: Magnetic cursor effects for buttons (desktop)
- NEW: Text reveal animations with clip-path and split-text
- NEW: Animated counters with easing for statistics
- NEW: Section awareness with progress dots
- NEW: Back-to-top button with smooth scroll
- NEW: Grid stagger animations for masonry-style reveals
- NEW: Image curtain reveals and zoom effects
- NEW: Underline draw animations for links
- NEW: Glass morphism card effects
- NEW: Hero mesh gradient backgrounds
- NEW: Skeleton shimmer loading states
- NEW: Notification slide/bounce animations
- NEW: Decorative background orbs and grain texture
- ENHANCED: Parallax scrolling with depth layers
- ENHANCED: Reading progress bar with section tracking
- ENHANCED: Button ripple effects with proper positioning
- PERFORMANCE: GPU-accelerated 60fps animations
- ACCESSIBILITY: Full prefers-reduced-motion support
- Designed to surpass Elementor, Webflow, and premium WordPress sites

CHANGELOG v5.26.0 (2025-12-24):
- NEW: Modern Animation System v1.0 with scroll-triggered effects (IntersectionObserver)
- NEW: 3D card transforms with lighting effects and smooth hover states
- NEW: Button ripple effects and micro-interactions throughout
- NEW: Parallax effects, smooth scrolling, and lazy image loading
- NEW: Staggered list animations and sequential reveals
- NEW: GPU-accelerated transforms for 60fps performance
- NEW: Skeleton loading states and progressive enhancement
- NEW: Competitive blogging animations to surpass Elementor & top sites
- All animations respect prefers-reduced-motion accessibility
- FIX: Stats blocks, quote cards, comparison VS badge now use proper contrast tokens
- IMPROVED: All `-webkit-text-fill-color` now uses matching fallback to prevent WebKit color inheritance bugs
- ARCHITECTURE: CSS cascade now uses explicit hex fallback BEFORE token override (color: #FFFFFF; color: var(...))

CHANGELOG v5.24.10 (2025-12-24):
- FIX (root cause): Smart Visibility button text token now derives from the actual primary color (prevents "Subscribe"/CTA text from flipping to low-contrast colors under light accent choices)
- FIX: Newsletter inline submit button now uses solid primary token (no gradient) and smart contrast text
- FIX: Removed remaining gradient-based navbar active/title treatments (no-gradients policy compliance)

CHANGELOG v5.24.9 (2025-12-24):
- FIX: Guardrails enforce readable secondary/outline buttons (no white-on-transparent)

CHANGELOG v5.24.8 (2025-12-24):
- FIX: Carousel prev/next controls now force a dark surface + white text (prevents any white-on-white regressions)

CHANGELOG v5.24.7 (2025-12-24):
- FIX: Carousel arrows now force -webkit-text-fill-color: currentColor (prevents inherited white fill)

CHANGELOG v5.24.6 (2025-12-24):
- FIX: Guardrails style Cloudflare footer IP reveal button for readable contrast

CHANGELOG v5.24.5 (2025-12-24):
- FIX: Guardrails now force carousel arrow color from --color-text (avoids local token overrides)

CHANGELOG v5.24.4 (2025-12-24):
- FIX: Added last-loaded design guardrails stylesheet to prevent late CSS overrides (e.g., carousel arrows)

CHANGELOG v5.24.3 (2025-12-24):
- FIX: Hero carousel prev/next arrows now have explicit dark-mode styling (prevents white-on-white)

CHANGELOG v5.24.2 (2025-12-24):
- FIX: 'Read story' CTAs now render as filled buttons with smart contrast tokens
- FIX: Homepage 'Read the Story' button uses the primary CTA style (no low-contrast states)
- FIX: Primary CTA button text/icon colors no longer hardcode #fff (accent-aware via smart-visibility tokens)
- FIX: Carousel prev/next controls hardened against white-on-white icon/text regressions
- QA: Added Playwright design-consistency audit to catch contrast regressions before deploy

CHANGELOG v5.24.1 (2025-12-23):
- CRITICAL: Fixed invisible eyebrow text on primary backgrounds
- FIX: Added -webkit-text-fill-color: #FFFFFF for Safari/WebKit browsers
- FIX: All eyebrow labels (.archive-hero__eyebrow, .page-hero__eyebrow, .trending-palette__label) now force white text
- FIX: Removed gradient references from labels (solid colors only per AGENTS.md)
- ENHANCED: smart-visibility.css now includes wildcard selectors for all children

CHANGELOG v5.24.0 (2025-12-23):
- MAJOR: SVG/Icon Contrast Fix - All SVG icons now follow explicit contrast rules
- FIX: Ghost buttons (.button--ghost) SVGs now properly dark on light backgrounds
- FIX: Primary buttons SVGs always white for visibility
- FIX: Eyebrow elements (.page-hero__eyebrow, .archive-hero__eyebrow, .about-cta__eyebrow) have explicit SVG color rules
- FIX: CTA sections get context-aware icon colors
- ENHANCED: smart-visibility.css now includes §23-25 for eyebrows, buttons, and CTA SVG contrast
- DOCS: AGENTS.md updated with mandatory SVG/Icon Contrast Rules

CHANGELOG v5.23.0 (2025-12-23):
- MAJOR: Elegant Logo Redesign v2.0 - Modern EC monogram with gradient accents
- FEATURE: Logo uses dual-color gradient for elegant appearance in all themes
- FEATURE: Logo includes subtle inner ring and animated indicator dots
- FEATURE: Enhanced glow effect on logo hover
- FEATURE: Dark mode logo uses lighter gradient for visibility
- ENHANCED: Improved text background detection for all content sections
- ENHANCED: Better gradient controls with accent-aware color mixing
- FIX: Cross-viewport design consistency (mobile, tablet, desktop)
- FIX: Improved card shadows and elevation system
- WCAG: Maintained AA contrast compliance across all logo states

CHANGELOG v5.22.1 (2025-12-23):
- FIX: "Tweet this" text-selection button now has strong contrast (was being restyled by broad `[class*="quote"]` rules)
- FIX: Text-selection Tweet button positioning is clamped to viewport and avoids header overlap

CHANGELOG v5.22.0 (2025-12-23):
- MAJOR: Smart Branding System - Logo and site title use accent color
- FEATURE: Gradient text branding title with shimmer hover effect
- FEATURE: Logo SVG uses accent color with glow effect
- FEATURE: Dark mode branding uses lighter accent variant
- ENHANCED: Admin dashboard redesigned with modern design system
- ENHANCED: Mid-luminance accent handling for balanced contrast
- WCAG: All branding text maintains proper contrast ratios

CHANGELOG v5.20.0 (2025-12-22):
- CUTTING-EDGE: Smart Visibility System v3.0 with luminance-aware contrast
- FIX: Hero section buttons (Request a Demo, Explore Tools, See the Output) now fully visible
- FIX: Ghost/outline buttons use dark text on light hero backgrounds
- FIX: Primary buttons maintain white text with proper shadows
- ELEGANT: Mobile navbar refined - removed excessive underlines
- ELEGANT: Active menu items use subtle left border instead of gradient underlines
- RESPONSIVE: Extra small screen optimizations (< 375px)
- RESPONSIVE: Tablet-specific menu refinements (600-959px)
- SMART: Automatic text contrast based on background luminance
- SMART: Icon colors adapt to container background automatically

CHANGELOG v5.19.0 (2025-12-22):
- MAJOR: Smart Visibility System v2.0 - Cutting-edge automatic contrast
- FEATURE: ALL icons now white with drop-shadow for universal visibility
- FEATURE: Text auto-selects dark/light based on theme mode (WCAG AAA 7:1 contrast)
- FEATURE: Theme customizer panel buttons now have visible text/icons
- FEATURE: Accent color picker shows white checkmark + ring on selected color
- FEATURE: --auto-text-primary token automatically flips light/dark mode
- IMPROVED: Button text always white on colored backgrounds
- IMPROVED: Cards, badges, tables use automatic contrast tokens
- IMPROVED: Mobile menu text uses auto-contrast system
- WCAG AAA: 7:1 contrast ratio for all text elements

CHANGELOG v5.18.0 (2025-12-22):
- NEW: Smart Visibility System - global feature for automatic icon and text visibility
- FEATURE: Icons always use white/light accent for maximum visibility on primary backgrounds
- FEATURE: Text automatically darkens for contrast based on background luminance
- FEATURE: Works seamlessly across light mode, dark mode, and all accent colors
- IMPROVED: Newsletter CTA icon always visible (white on primary background)
- IMPROVED: Search toggle, nav toggle, and all action buttons have consistent icon visibility
- IMPROVED: Card text automatically uses darker colors for readability
- IMPROVED: High contrast mode support for icons and text
- WCAG: Enhanced accessibility with automatic contrast calculation

CHANGELOG v5.16.2 (2025-12-22):
- FIX: Blog nav item no longer invisible when active in desktop mode
- STYLE: Blog standout nav item default is bold (no gradient) - follows AGENTS.md no-gradient policy
- STYLE: Blog standout nav item ACTIVE state uses gradient TEXT effect following accent color
- STYLE: Active state includes subtle underline indicator for visibility
- RESPONSIVE: Blog standout styling works across all screen sizes (desktop, tablet, mobile)
- DARK MODE: Blog standout active state uses lighter gradient colors for dark mode

CHANGELOG v5.15.3 (2025-12-22):
- FIX: Search form now properly loads elegant styling (pages.css was not enqueued)
- FIX: Search form overrides WordPress defaults with !important rules
- FIX: Chat widget scales properly on tiny screens (320px, 360px)

CHANGELOG v5.15.2 (2025-12-22):
- FIX: Search form in results page now elegant (matches navbar style)
- FIX: Free Tools submenu item properly indented
- FIX: Added support for extra-small/bizarre screen sizes (<320px)
- FIX: Mobile nav scaling for very small viewports
- ENHANCED: Mobile navbar maintains consistent spacing

CHANGELOG v5.14.3 (2025-12-21):
- FUTURE-PROOF: Theme preference cookie expiry is refreshed on every visit (helps prevent “turns white after some time” on browsers with aggressive cookie policies)
- RESILIENCE: Theme state self-heals on pageshow/focus/visibilitychange if <html> theme attributes drift
- QA: Added /tools mobile header screenshot regression artifacts (audit/…)

CHANGELOG v5.14.2 (2025-12-21):
- CRITICAL FIX: Mobile search bar was visible when it should be hidden
- FIX: Moved desktop search CSS into @media (min-width: 960px) to not override mobile hidden state
- FIX: Removed conflicting `display: flex !important` that was overriding mobile `display: none !important`
- The "P" character fragment and search overflow on mobile is now fixed

CHANGELOG v5.14.1 (2025-12-21):
- UX: Mobile navbar design revamp with premium polish
- UX: Larger touch targets (48px) for hamburger, search toggle, subscribe
- UX: Smoother hamburger X animation with spring easing
- UX: Menu items have enhanced hover states with shimmer effect
- UX: Improved glassmorphism dropdown with stronger blur and shadows
- UX: Dark mode mobile menu with better contrast and visual hierarchy
- UX: Subscribe button has gradient overlay and scale animations

CHANGELOG v5.14.0 (2025-12-21):
- FIX: Theme cookie max-age extended from 24h to 1 year to prevent theme reset
- FIX: Cookie-only fallback ensures theme persists when localStorage blocked

CHANGELOG v5.12.5 (2025-12-20):
- UX: Newsletter copy updated to emphasize product drops + free tools (better conversion leverage)

CHANGELOG v5.12.6 (2025-12-20):
- UX: Homepage hero upgraded to a two-column investor demo layout with workflow panel + live KPIs

CHANGELOG v5.12.7 (2025-12-20):
- UX: Contact page polished (suppresses old placeholder editor content; adds investor-ready “What happens next”)

CHANGELOG v5.12.8 (2025-12-20):
- FIX: Navbar Home link now routes to the real homepage (/) instead of /home/
- Safety: Direct /home/ visits redirect to / to avoid showing placeholder content

CHANGELOG v5.12.9 (2025-12-20):
- FIX: Home link normalization now matches by URL path (/home) to work with relative links and scheme differences

CHANGELOG v5.13.0 (2025-12-20):
- UX: Navbar revamped for mobile (search moves to its own row; no awkward oversized inline search)
- UX: Reduce "two tools" confusion by renaming Tools → Platform when Free Tools CTA exists; Free Tools styled as a CTA

CHANGELOG v5.13.1 (2025-12-20):
- FIX: Mobile hamburger menu no longer instantly closes (ResizeObserver no longer forces close on every layout recompute)

CHANGELOG v5.12.3 (2025-12-20):
- FIX: Desktop navbar pill no longer visually clips the last menu item text (e.g., "Get Free Tools") near breakpoints/zoom

CHANGELOG v5.12.2 (2025-12-20):
- IMPROVE: Smart navbar enters compact mode if desktop menu would overflow/clip text (prevents truncated labels like "Get Free Tools")

CHANGELOG v5.12.1 (2025-12-20):
- IMPROVE: Navbar compact mode triggers only on real overlaps (less trigger-happy at ~1100–1250px widths / non-100% zoom)
- Implementation: refined overlap detection tolerances in `assets/js/custom.js`

CHANGELOG v5.12.0 (2025-12-20):
- FIX: Smart desktop compact navbar now works (hamburger shows + nav hides until toggled)
- Root cause: a late "desktop show nav" rule with `!important` forced the primary nav visible on all desktops, overriding `.aiwp-header-compact`

CHANGELOG v5.11.9 (2025-12-19):
- FIX: Mobile carousel overlay/fade CSS moved into image-optimizations.css with !important to avoid late-loading @import overrides
- Outcome: mobile next/prev no longer stacks slides or renders a blank carousel due to CSS ordering

CHANGELOG v5.11.8 (2025-12-19):
- FIX: Mobile carousel rendering now uses an overlay/fade mode (absolute slides + .is-active) instead of translate-based sliding
- This prevents the observed mobile bug where next/prev results in a blank carousel background despite images being loaded

CHANGELOG v5.11.7 (2025-12-19):
- FIX: Mobile carousel no longer goes blank after tapping next/prev
- Change: switch slide translation from percentage-based transforms to pixel-based translate3d using the carousel width, plus resize realignment

CHANGELOG v5.11.6 (2025-12-19):
- FIX: Safari/WebKit carousel slide transitions no longer intermittently render as blank backgrounds
- Hardening: use translate3d() for slide movement + force a stable composited layer (will-change + translateZ/translate3d)

CHANGELOG v5.11.5 (2025-12-19):
- FIX: Hero carousel no-image slides no longer appear blank/white
- Root cause: image-optimizations.css forced `background: transparent !important` on ALL slides, overriding the inline solid fallback background used when a featured post has no thumbnail
- Change: removed forced transparent background and added explicit z-index for .hero-carousel__image

CHANGELOG v5.11.4 (2025-12-19):
- CRITICAL FIX: Mobile carousel rendering hardening
- Improved mobile carousel reliability by reinforcing layout/positioning rules
- NOTE: Any blanket "force transparent background on all slides" approach was superseded by v5.11.5 to preserve no-image slide fallbacks

CHANGELOG v5.11.1 (2025-12-19):
- CRITICAL FIX: Mobile carousel now works! display:flex + transition restored
- Mobile users can now swipe between carousel slides (was stacking vertically)
- All carousel slides properly sized (flex: 0 0 100%) on mobile
- Smooth slide transitions working on all screen sizes

CHANGELOG v5.11.0 (2025-12-19):
- UX: Chat button enlarged to 72px for mobile accessibility (up from 64px)
- STYLE: Modern carousel navigation - darker dots container with white border dots
- STYLE: Active carousel dot now uses brand gradient with glow effect
- ANIM: Chat button pulse animation to draw attention (stops on hover)
- ANIM: Smooth carousel dot transitions with hover scale effect
- A11Y: Enhanced focus states for chat button (triple ring)
- CONTRAST: Fixed carousel dots visibility on dark images

CHANGELOG v5.10.29 (2025-12-19):
- DEV: Real-time cache busting - CSS/JS changes visible instantly in development mode
- DEV: File modification timestamps used for asset versioning when WP_DEBUG = true
- DEV: No-cache headers sent in development mode to bypass all caching layers
- DEV: Cloudflare bypass attributes added to CSS/JS in development mode
- TOOL: New dev-mode-sync.ps1 script for instant theme updates
- FIX: Universal Contrast now respects theme tokens (dark-mode header/footer/cards/buttons)
- STYLE: Navbar spacing uses clamp() for more fluid, percentage-based responsiveness

CHANGELOG v5.10.21 (2025-12-18):
- FIX: Light mode text now uses darker colors (closer to black) for better readability
- FIX: Search bar is now ALWAYS visible on ALL screen sizes with responsive sizing
- FIX: Navbar optimized for all screen sizes (mobile, tablet, desktop, wide)
- FIX: Search design improved with better border, icon, and placeholder visibility
- ENHANCED: Text contrast presets use darker values for WCAG AAA compliance

CHANGELOG v5.10.23 (2025-12-18):
- FIX: Removed header chat toggle (only the floating lower-right launcher remains)
- FIX: Removed header theme toggle (chat-only theming; header stays clean)
- FIX: Corrected a CSS syntax error in header-navigation.css that could break navbar rendering in 960–1100px viewports
- STYLE: Removed gradient backgrounds from header UI elements for consistent cross-browser rendering

CHANGELOG v5.10.24 (2025-12-18):
- FIX: Add `assets/css/navbar-standards.css` to persist the AIWP navbar-standards file across theme sync deployments

CHANGELOG v5.10.25 (2025-12-18):
- FIX: Keep `wp-block-library` styles enabled on the frontend (required for the Gutenberg Navigation block navbar to render correctly on desktop/tablet/mobile)

CHANGELOG v5.10.19 (2025-12-18):
- FIX: Chat toggle SVG now has explicit stroke color and proper min-width/height to ensure icon visibility.
- FIX: Removed !important stroke override that was blocking inline SVG stroke attributes.

CHANGELOG v5.10.18 (2025-12-18):
- FIX: Theme toggle button now has warm sun/amber styling for better visibility in light mode.
- FIX: Chat toggle and chatbot header buttons now use explicit SVG stroke colors for visibility.

CHANGELOG v5.10.14 (2025-12-18):
- FIX: Added a short-lived MutationObserver + timed rescans so late optimizer rewrites of style-preload links are immediately reverted (prevents “unstyled page” regressions).

CHANGELOG v5.10.15 (2025-12-18):
- FIX: CSS preload rescue now injects an href-based fallback stylesheet quickly when rel=stylesheet conversion doesn't apply (reduces visible unstyled flashes / bullet-nav renders).
- FIX: Mobile nav opening now closes/hides the floating chatbot UI to prevent overlap/pointer-event conflicts.

CHANGELOG v5.10.13 (2025-12-18):
- FIX: Hardened against unstyled renders by rescuing ALL rel=preload as=style links back to rel=stylesheet and tagging critical CSS with optimizer opt-out attributes.
- FIX: Removed incorrect Google Fonts preload-as-style tag (prevents edge cases where fonts/styles never apply).

CHANGELOG v5.10.12 (2025-12-17):
- FIX: Preloader now reliably shows on same-origin navigations via a referrer-based fallback (prevents rare missed force-next flags).

CHANGELOG v5.10.11 (2025-12-17):
- FIX: Preloader no longer mis-detects CSS as loaded just because link.sheet exists (prevents premature dismissal during slow/stalled CSS).

CHANGELOG v5.10.10 (2025-12-17):
- FIX: Critical CSS rescue is now fail-safe: if rel=preload→stylesheet conversion doesn't apply quickly, inject a fallback stylesheet link.

CHANGELOG v5.10.9 (2025-12-17):
- FIX: Preloader no longer depends on the window "load" event to begin completion (prevents rare stalls when a request hangs).

CHANGELOG v5.10.8 (2025-12-17):
- FIX: Preloader CSS readiness no longer waits on rel=preload as=style links (can stall); it now waits on actual stylesheets only.

CHANGELOG v5.10.7 (2025-12-17):
- FIX: Preloader no longer stalls indefinitely waiting on web fonts; it proceeds after a short timeout if fonts are slow/blocked.

CHANGELOG v5.10.6 (2025-12-17):
- FIX: Preloader CSS-rescue logic is applied in both preloader.js and preloader.min.js (some environments serve the minified filename).

CHANGELOG v5.10.5 (2025-12-17):
- FIX: Preloader now force-applies critical theme CSS if an optimizer rewrites stylesheet links into rel=preload+onload (prevents rare unstyled renders).

CHANGELOG v5.10.4 (2025-12-17):
- FIX: Theme CSS now loads via normal stylesheets (removes rel=preload+onload pattern that can break when inline handlers are blocked).

CHANGELOG v5.10.3 (2025-12-17):
- FIX: Above-the-fold hero content no longer flashes hidden due to scroll-reveal timing (no-js flag removed only after initial reveal).
- FIX: Header/chat SVG icons are hardened against global SVG fill rules (prevents blank icon buttons).

CHANGELOG v5.10.2 (2025-12-17):
- FIX: Preloader now follows the loading protocol across internal links (forces next-load preloader on same-origin navigations).
- FIX: Header chat button no longer disappears due to timing/order issues; it binds when the chatbot UI becomes available.

CHANGELOG v5.10.1 (2025-12-17):
- FIX: Navbar "Tools" item no longer disappears unless it is a true duplicate of "Get Free Tools" (same URL).
- ENHANCED: Accent color switches feel instant (brief transition suppression on accent updates).
- FIX: Preloader no longer auto-dismisses before design assets are ready; shows an optional "Continue" only if loading stalls.

CHANGELOG v5.10.0 (2025-12-16):
- MAJOR: Elegant Layout System - Full-width containers for zero wasted space
- NEW: Streaming Design Support - Real-time CSS injection for AI agents
- ENHANCED: Typography hierarchy for scientific readability
- FIX: Mobile padding for data tables and charts

CHANGELOG v5.9.14 (2025-12-14):
- NEW: Public Theme Customizer panel - visitors can customize theme colors
- NEW: 10 preset theme colors with localStorage persistence
- NEW: Custom color picker with hex input
- FIX: Navbar search visibility on horizontal tablet view (768-960px)
- FIX: Navbar text and hamburger icon visibility on tablets
- FIX: Duplicate Tools menu item handling (keeps "Get Free Tools")
- ENHANCED: Carousel buttons lowered to 55%/65% for better positioning
- ENHANCED: CSS for theme panel glassmorphism effects

CHANGELOG v5.9.13 (2025-12-14):
- ENHANCED: Carousel prev/next buttons with guaranteed visibility
- ENHANCED: Carousel dots with guaranteed center alignment
- ENHANCED: Archive grid layout (8/6/4/2/1 columns for different breakpoints)
- FIX: Featured carousel controls z-index and positioning
- FIX: Carousel button opacity always visible
- NEW: Local Theme Manager support in Theme Customizer

CHANGELOG v5.9.12 (2025-12-13):
- FIX: Navbar duplication handling with header element cleanup
- ENHANCED: Universal responsive utilities for 1100-1250px viewport
- ENHANCED: Standardized breakpoints using CSS custom properties
- FIX: Hamburger menu triggers at 1100px for narrow desktop
- ENHANCED: Text truncation utilities for CTA overflow prevention
- ENHANCED: Header output priority system classes
- DOCS: Responsive design protocols documented

CHANGELOG v5.9.11 (2025-12-13):
- NEW: layout-system.css with CSS Grid, Flexbox, Container Queries for modern layouts
- NEW: ui-fixes.css for targeted UI improvements
- FIX: Search bar overlap at 1237x796 viewport (mid-range desktop)
- FIX: Navbar height issues with long CTA text
- FIX: Carousel prev/next buttons styling and visibility
- ENHANCED: Text contrast improvements for dark backgrounds
- ENHANCED: Responsive table overflow handling
- ENHANCED: Focus visible indicators for accessibility

CHANGELOG v5.9.8 (2025-12-13):
- FIX: Universal Contrast no longer overrides badge/share button link colors (keeps in-UI links readable).

CHANGELOG v5.9.9 (2025-12-13):
- FIX: Homepage hero carousel indicators now render and update correctly (JS + template aligned).
- ENHANCED: Trending section now uses `_aiwp_rank_score` meta when available.

CHANGELOG v5.9.10 (2025-12-13):
- FIX: Prevented header/nav overlap around ~1200–1280px (mid-size desktop breakpoint + removed conflicting legacy header CSS).
- FIX: Removed nested/duplicate <main> landmarks across templates (valid HTML, more stable layout).
- TUNED: Added a consistent content offset for the fixed header.
- ENHANCED: Privacy Policy and Terms pages now render bullet sections as proper lists + improved typography.
- TUNED: Homepage Trending + Latest sections now cap at 4 posts each.

CHANGELOG v5.9.7 (2025-12-13):
- FIX: Universal Contrast no longer overrides in-article header links (category badge stays readable).
- TUNED: Single post header container widened for better desktop density.

CHANGELOG v5.9.6 (2025-12-12):
- NEW: Public single-post rail adds table-of-contents + share controls (fills desktop width).
- TUNED: TOC links generate stable heading anchors with scroll offset.

CHANGELOG v5.9.5 (2025-12-12):
- FIX: Stat cards no longer use forced white text fill on light/glass surfaces.
- REFINED: AIWP Content Engine hero block flattened to avoid duplicate headers.
- TUNED: Single post footer widened to container (less wasted desktop space).
- NEW: Single post header supports `_aiwp_subtitle` meta as a subtitle.

CHANGELOG v5.9.4 (2025-12-12):
- FIX: Theme mode bootstrap + JS now agree on initial light/dark state (prevents accidental dark styling).

CHANGELOG v5.9.3 (2025-12-12):
- FIX: Removed duplicate inline critical CSS to prevent dark-mode and width drift.
- REFINED: No-gradients enforcement (hero fallbacks, critical CSS, theme.json gradients removed).
- ENHANCED: Wider containers for zero-wasted-space desktop layouts (1600px).

CHANGELOG v5.9.2 (2025-12-12):
- ENHANCED: Trending section now pulls 4 posts to fully utilize desktop columns.
- ENHANCED: Article content shell expands to full container width on large screens.

CHANGELOG v5.9.1 (2025-12-12):
- FIX: Preloader no longer blocks content on every visit (session-only by default).
- NEW: Preloader behavior is runtime-configurable via AI design stream options.

CHANGELOG v5.9.0 (2025-12-12):
- ENHANCED: Single post content shell widened to container width on desktop.
- ENHANCED: Prose elements constrained to readable 820px while synth/AI grids span full width.
- ENHANCED: Desktop containers widened for zero-wasted-space layouts.

CHANGELOG v5.8.0 (2025-12-12):
- FIX: Design Brief sidebar only shows to logged-in admins
- ENHANCED: Public visitors see clean full-width article layout
- ENHANCED: CSS :has() selector for admin-only sidebar detection
- IMPROVED: Article content uses maximum width on public view
- IMPROVED: Removed unnecessary border from article shell

CHANGELOG v5.7.0 (2025-12-11):
- NEW: Scientific Infographics CSS module for publication-quality data visualizations
- NEW: Styles for SVG bar/line/horizontal-bar charts
- NEW: Comparison tables with star ratings and color-coded cells
- NEW: Interactive timeline with alternating left/right positioning
- NEW: Stats grids with 2/3/4 column responsive layouts
- NEW: Dark mode and print styles for all infographic components
- WCAG: All infographic colors meet AA contrast requirements

CHANGELOG v5.6.0 (2025-12-12):
- NEW: Design Stream rail + grid shell for AI live design control
- NEW: design-stream.css (sharp edges, no gradients, sticky design cards)
- ENHANCED: Single post template now exposes stream endpoint + meta rail
- ENHANCED: Design padding + borders for zero-waste layouts
- NO GRADIENTS: Solid surfaces only to match AGENTS.md rules

CHANGELOG v5.5.0 (2025-12-11):
- MAJOR: Universal Contrast System - "Universal Cure" for text readability
- NEW: universal-contrast.css ensures ALL text is readable on ALL backgrounds
- WCAG: Full WCAG 2.1 AA compliance (4.5:1 contrast ratio minimum)
- FIX: Gradient text effects removed and replaced with solid colors
- FIX: Low contrast cyan/light gray text colors fixed
- FIX: RGBA opacity values normalized for readability
- FIX: Dark background text forced to white
- FIX: Light background text forced to dark
- NEW: High contrast mode support via @media (prefers-contrast: high)
- NEW: Reduced motion support via @media (prefers-reduced-motion: reduce)

CHANGELOG v5.4.0 (2025-12-10):
- NEW: Configurable navbar auto-hide toggle (ai_wp_navbar_autohide option)
- ADDED: aiwpTheme.navbarAutohide JS variable for client-side control
- ENHANCED: Navbar respects admin setting - can disable auto-hide entirely
- WHEN ENABLED: Hides on scroll-down >200px, shows instantly on scroll-up
- WHEN DISABLED: Navbar always visible regardless of scroll

CHANGELOG v5.3.2 (2025-12-10):
- ENHANCED: Navbar shows instantly (0.15s) on scroll-up, hides on significant scroll-down
- ADDED: Elegant layout CSS - stats-grid, compare-grid, bento-grid, timeline, feature-grid
- ADDED: Progress bars, donut chart legend, sidebar quote styles
- ADDED: Mobile responsive collapse for all multi-column layouts
- DOCS: Elegant Post Layout Protocol documented in AGENTS.md

CHANGELOG v5.3.1 (2025-12-10):
- FIXED: Navbar stays visible on all scroll directions with faster init
- ENHANCED: Article layout with constrained prose width + glass container
- IMPROVED: Higher-contrast typography, blockquotes, media spacing
- COMPLIED: Removed residual gradient references for no-gradient policy

CHANGELOG v5.3.0 (2025-12-10):
- ADDED: content-overrides.css for universal inline style control
- ENHANCED: CSS variable system with RGB-based colors
- FIXED: All synth-* components now use theme variables
- IMPROVED: Social sharing component design
- ADDED: Comprehensive takeaways, stat cards, chart styling

CHANGELOG v5.2.0 (2025-12-08):
- PURGED: All gradient backgrounds removed site-wide
- UPDATED: High-contrast solid color palette (WCAG AA compliant)
- ENHANCED: Dynamic Island navbar with improved scroll behavior
- REMOVED: Reading progress percentage indicator
- FIXED: Mobile navigation simplified with solid backgrounds
- ADDED: Design rules for no-gradient policy in AGENTS.md

CHANGELOG v5.1.0 (2025-12-07):
- PURGED: All remaining purple rgba(124,58,237) references site-wide
- UPDATED: Complete Apple Blue (#007AFF) color consistency
- ENHANCED: Dynamic Island reading progress with percentage display
- IMPROVED: Smart navbar scroll behavior performance
- REFINED: All button hover states with solid colors
- OPTIMIZED: Preloader with Apple color palette

CHANGELOG v4.8.1 (2025-12-04):
- FIXED: Restored Dark Mode toggle functionality (respects user preference)
- CHANGED: Removed "Related Posts" section from single post template per guidelines
- POLISH: Cleaned up single post template structure

/* Central import hub for all modular styles */

/* ========== variables.css ========== */
:root {
    /* ========================================
       2025 DESIGN SYSTEM: "Clean & Accessible"
       Aesthetic: Minimal, high-contrast, no gradients
       Version: 7.1.0 - Universal Variable System + Fixed Transparency
       WCAG 2.1 AA Compliant Color Contrast
       
       ARCHITECTURE:
       - All colors defined as CSS variables
       - RGB values for opacity support
       - Semantic tokens reference primitives
       - NO hardcoded hex/rgba in component CSS
       - Default to SOLID light mode (no transparency issues)
       ======================================== */
    
    /* Typography - SF Pro-like Stack */
    --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-heading: var(--font-sans);
    --font-serif: "New York", "Georgia", serif;
    --font-mono: "SF Mono", "JetBrains Mono", "Fira Code", monospace;
    
    /* ========================================
       COLOR PRIMITIVES (RGB values for opacity)
       These are the raw colors - use semantic tokens below
       ======================================== */
    
    /* Primary (Accent) RGB
       Architecture note:
       - Component CSS should ONLY use the semantic tokens (`--color-primary-*`).
       - Visitor accent picking (JS) overrides the `*-light` / `*-dark` variants,
         while `--color-primary-rgb` is selected by theme mode (light/dark/system). */
    --color-primary-rgb-light: 0, 102, 204;
    --color-primary-hover-rgb-light: 0, 77, 153;
    --color-primary-light-rgb-light: 51, 153, 255;

    /* Dark-mode-friendly variant (keeps accent visible on near-black backgrounds) */
    --color-primary-rgb-dark: 51, 153, 255;
    --color-primary-hover-rgb-dark: 0, 102, 204;
    --color-primary-light-rgb-dark: 147, 197, 253;

    /* Active primary RGB (selected by current theme mode) */
    --color-primary-rgb: var(--color-primary-rgb-light);
    --color-primary-hover-rgb: var(--color-primary-hover-rgb-light);
    --color-primary-light-rgb: var(--color-primary-light-rgb-light);

    /* Primary surface RGB (raw accent for backgrounds) */
    --color-primary-surface-rgb-light: var(--color-primary-rgb-light);
    --color-primary-surface-hover-rgb-light: var(--color-primary-hover-rgb-light);
    --color-primary-surface-light-rgb-light: var(--color-primary-light-rgb-light);
    --color-primary-surface-rgb-dark: var(--color-primary-rgb-dark);
    --color-primary-surface-hover-rgb-dark: var(--color-primary-hover-rgb-dark);
    --color-primary-surface-light-rgb-dark: var(--color-primary-light-rgb-dark);

    /* Active primary surface RGB (selected by current theme mode) */
    --color-primary-surface-rgb: var(--color-primary-surface-rgb-light);
    --color-primary-surface-hover-rgb: var(--color-primary-surface-hover-rgb-light);
    --color-primary-surface-light-rgb: var(--color-primary-surface-light-rgb-light);
    
    /* Neutral RGB */
    --color-black-rgb: 26, 26, 26;
    --color-white-rgb: 255, 255, 255;
    --color-gray-rgb: 102, 102, 102;
    
    /* Status RGB */
    --color-success-rgb: 29, 122, 62;
    --color-warning-rgb: 184, 104, 0;
    --color-error-rgb: 196, 30, 58;
    
    /* ========================================
       SEMANTIC COLOR TOKENS
       Use these in component CSS
       ======================================== */
    
    /* Primary: Deep Blue (AAA compliant on white) */
    --color-primary: rgb(var(--color-primary-rgb));
    --color-primary-hover: rgb(var(--color-primary-hover-rgb));
    --color-primary-light: rgb(var(--color-primary-light-rgb));
    --color-primary-subtle: rgba(var(--color-primary-rgb), 0.08);

    /* Primary surface: raw accent for filled backgrounds */
    --color-primary-surface: rgb(var(--color-primary-surface-rgb));
    --color-primary-surface-hover: rgb(var(--color-primary-surface-hover-rgb));
    --color-primary-surface-light: rgb(var(--color-primary-surface-light-rgb));
    
    /* Opacity variants for primary */
    --color-primary-10: rgba(var(--color-primary-rgb), 0.1);
    --color-primary-15: rgba(var(--color-primary-rgb), 0.15);
    --color-primary-20: rgba(var(--color-primary-rgb), 0.2);
    --color-primary-25: rgba(var(--color-primary-rgb), 0.25);
    --color-primary-35: rgba(var(--color-primary-rgb), 0.35);
    --color-primary-45: rgba(var(--color-primary-rgb), 0.45);
    
    /* Secondary: Charcoal Gray (headlines) */
    --color-accent: rgb(var(--color-black-rgb));
    --color-accent-light: rgb(var(--color-gray-rgb));
    --color-accent-subtle: rgba(var(--color-black-rgb), 0.03);
    
    /* Tertiary: Forest Green (success/positive) */
    --color-tertiary: rgb(var(--color-success-rgb));
    --color-tertiary-light: rgba(var(--color-success-rgb), 0.8);
    --color-tertiary-10: rgba(var(--color-success-rgb), 0.1);
    
    /* System Status Colors - High Contrast */
    --color-success: rgb(var(--color-success-rgb));
    --color-success-10: rgba(var(--color-success-rgb), 0.1);
    --color-warning: rgb(var(--color-warning-rgb));
    --color-warning-10: rgba(var(--color-warning-rgb), 0.1);
    --color-error: rgb(var(--color-error-rgb));
    --color-error-10: rgba(var(--color-error-rgb), 0.1);
    --color-info: var(--color-primary);
    
    /* Neutrals - Maximum Readability - WCAG AAA Compliant
       Background uses a subtle off-white so cards/surfaces feel elevated (premium density). */
    --color-bg: rgb(249, 250, 251);
    --color-surface: rgb(var(--color-white-rgb));
    --color-surface-alt: rgba(var(--color-black-rgb), 0.035);
    --color-surface-elevated: rgb(var(--color-white-rgb));
    /* v5.10.21: Darker text colors for light mode - closer to pure black */
    --color-text: #111111;
    --color-text-secondary: #2d2d2d;
    --color-text-muted: #4a4a4a;
    --color-text-subtle: #5a5a5a;
    /* Text on primary/accent surfaces (JS may override per accent + mode) */
    --color-text-inverse-light: rgb(var(--color-white-rgb));
    --color-text-inverse-dark: rgb(var(--color-black-rgb));
    --color-text-inverse: var(--color-text-inverse-light);

    --color-border: rgba(var(--color-black-rgb), 0.12);
    --color-border-strong: rgba(var(--color-black-rgb), 0.24);
    --color-border-subtle: rgba(var(--color-black-rgb), 0.06);
    
    /* Theme-Aware Text Colors - For dynamic header/nav theming - Darker for light mode */
    --color-text-heading: #0a0a0a;
    --color-text-nav: #1a1a1a;
    
    /* Overlay/backdrop colors */
    --color-overlay: rgba(var(--color-black-rgb), 0.6);
    --color-overlay-light: rgba(var(--color-black-rgb), 0.3);
    --color-backdrop: rgba(var(--color-white-rgb), 0.92);
    --color-backdrop-strong: rgba(var(--color-white-rgb), 0.98);
    
    /* 🌙 Dark Mode Variables - High Contrast */
    --color-bg-dark: #0D0D0D;
    --color-surface-dark: rgb(var(--color-black-rgb));
    --color-surface-alt-dark: rgba(var(--color-white-rgb), 0.05);
    --color-surface-elevated-dark: rgba(var(--color-white-rgb), 0.08);
    --color-text-dark: rgba(var(--color-white-rgb), 0.95);
    --color-text-secondary-dark: rgba(var(--color-white-rgb), 0.8);
    --color-text-muted-dark: rgba(var(--color-white-rgb), 0.6);
    --color-border-dark: rgba(var(--color-white-rgb), 0.15);
    
    /* ✨ SHADOWS - Using CSS variables for theming */
    --shadow-xs: 0 1px 2px rgba(var(--color-black-rgb), 0.04);
    --shadow-sm: 0 1px 3px rgba(var(--color-black-rgb), 0.06), 0 1px 2px rgba(var(--color-black-rgb), 0.04);
    --shadow-md: 0 4px 6px rgba(var(--color-black-rgb), 0.06), 0 2px 4px rgba(var(--color-black-rgb), 0.04);
    --shadow-lg: 0 10px 15px rgba(var(--color-black-rgb), 0.08), 0 4px 6px rgba(var(--color-black-rgb), 0.04);
    --shadow-xl: 0 20px 25px rgba(var(--color-black-rgb), 0.1), 0 8px 10px rgba(var(--color-black-rgb), 0.04);
    --shadow-2xl: 0 25px 50px rgba(var(--color-black-rgb), 0.15);
    
    /* Focus Ring - Accessibility */
    --shadow-focus: 0 0 0 3px var(--color-primary-35);
    
    /* Card Shadows - Clean elevation with enhanced depth */
    --shadow-card: 
        0 1px 3px rgba(var(--color-black-rgb), 0.05),
        0 4px 12px rgba(var(--color-black-rgb), 0.05),
        0 0 1px rgba(var(--color-black-rgb), 0.1);
    --shadow-card-hover: 
        0 4px 12px rgba(var(--color-black-rgb), 0.1),
        0 8px 24px rgba(var(--color-black-rgb), 0.08),
        0 0 1px rgba(var(--color-black-rgb), 0.15);
    
    /* Primary glow shadows */
    --shadow-primary-sm: 0 2px 12px var(--color-primary-25);
    --shadow-primary-md: 0 4px 16px var(--color-primary-35);
    --shadow-primary-lg: 0 8px 32px var(--color-primary-45);
    --shadow-primary-glow: 0 0 16px var(--color-primary-15);
    --shadow-primary-glow-strong: 0 0 32px var(--color-primary-25);
    
    /* ========================================
       NO-GRADIENT POLICY (MANDATORY)
       
       Guardrail:
       - Do not use linear-gradient/radial-gradient/conic-gradient anywhere.
       - Keep all "gradient-*" tokens mapped to SOLID colors for compatibility.
       - This prevents WebKit text-fill bugs and keeps the visual system consistent.
       ======================================== */

    /* Legacy gradient tokens (kept for backwards compatibility) */
    --gradient-brand: var(--color-primary);
    --gradient-brand-light: var(--color-primary-light);
    --gradient-accent-subtle: var(--color-primary-10);
    --gradient-text-brand: var(--color-primary);
    
    /* NO GRADIENTS for general backgrounds - Use solid colors */
    /* Legacy gradient variables mapped to solid colors for compatibility */
    --gradient-primary: var(--color-primary);
    --gradient-accent: var(--color-accent);
    --gradient-surface: var(--color-surface-alt);
    --gradient-text: var(--color-text);
    /* Used as an accent strip/border in multiple modules (kept solid by policy) */
    --gradient-aurora: var(--color-primary);
    --gradient-mesh: transparent;
    --gradient-hero: transparent;
    
    /* Glassmorphism - Using variables */
    --glass-bg: var(--color-backdrop);
    --glass-bg-strong: var(--color-backdrop-strong);
    --glass-border: var(--color-border);
    --glass-blur: blur(12px);
    --glass-blur-strong: blur(16px);
    
    /* 📐 SPACING & LAYOUT */
    --max-width-container: 1600px;
    --max-width-wide: 1760px;
    --max-width-full: 100%;
    --max-width-prose: 820px;
    /* Fixed header offset (runtime-updated by JS for true header height) */
    --header-height: 76px;
    
    /* Spacing Scale */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    
    /* 🔵 BORDER RADIUS */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 20px;
    --radius-3xl: 24px;
    --radius-full: 9999px;
    --radius-pill: 9999px;
    
    /* ⚡ TRANSITIONS */
    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;
    --transition-slow: 300ms ease;
    --transition-bounce: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
    
    /* Font Sizes - Responsive Scale */
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-md: 1.125rem;
    --font-size-lg: 1.25rem;
    --font-size-xl: 1.5rem;
    --font-size-2xl: 2rem;
    --font-size-3xl: 2.5rem;
    --font-size-4xl: 3rem;
    
    /* Line Heights */
    --line-height-tight: 1.25;
    --line-height-snug: 1.375;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.625;
    
    /* Touch Targets - Accessibility */
    --touch-target-min: 44px;
    --touch-target-comfortable: 48px;
    
    /* ========================================
       CATEGORY/TAG COLORS
       Semantic colors for content categories
       All using primary blue variants + neutral
       ======================================== */
    --color-cat-default: var(--color-primary);
    --color-cat-default-bg: var(--color-primary-10);
    --color-cat-featured: var(--color-tertiary);
    --color-cat-featured-bg: var(--color-tertiary-10);
    --color-cat-warning: var(--color-warning);
    --color-cat-warning-bg: var(--color-warning-10);
    --color-cat-neutral: var(--color-text-muted);
    --color-cat-neutral-bg: rgba(var(--color-black-rgb), 0.06);
}

/* 🌙 Dark Mode Overrides */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        /* Swap to dark-mode-friendly primary variant */
        --color-primary-rgb: var(--color-primary-rgb-dark);
        --color-primary-hover-rgb: var(--color-primary-hover-rgb-dark);
        --color-primary-light-rgb: var(--color-primary-light-rgb-dark);
        --color-primary-surface-rgb: var(--color-primary-surface-rgb-dark);
        --color-primary-surface-hover-rgb: var(--color-primary-surface-hover-rgb-dark);
        --color-primary-surface-light-rgb: var(--color-primary-surface-light-rgb-dark);
        
        --color-bg: var(--color-bg-dark);
        --color-surface: var(--color-surface-dark);
        --color-surface-alt: var(--color-surface-alt-dark);
        --color-surface-elevated: var(--color-surface-elevated-dark);
        --color-text: var(--color-text-dark);
        --color-text-secondary: var(--color-text-secondary-dark);
        --color-text-muted: var(--color-text-muted-dark);
        --color-text-inverse: var(--color-text-inverse-dark);
        --color-border: var(--color-border-dark);
        
        /* Theme-Aware Text Colors for Dark Mode */
        --color-text-heading: #f7fafc;
        --color-text-nav: #e2e8f0;
        
        /* Dark mode overlays - inverted */
        --color-overlay: rgba(var(--color-black-rgb), 0.8);
        --color-backdrop: rgba(var(--color-black-rgb), 0.92);
        --color-backdrop-strong: rgba(var(--color-black-rgb), 0.98);
        
        /* Dark mode glass */
        --glass-bg: var(--color-backdrop);
        --glass-bg-strong: var(--color-backdrop-strong);
        --glass-border: var(--color-border-dark);
        
        /* Dark shadows */
        --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.25);
        --shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.3);
    }
}

/* 🌙 Manual Dark Mode Toggle */
[data-theme="dark"] {
    /* Swap to dark-mode-friendly primary variant */
    --color-primary-rgb: var(--color-primary-rgb-dark);
    --color-primary-hover-rgb: var(--color-primary-hover-rgb-dark);
    --color-primary-light-rgb: var(--color-primary-light-rgb-dark);
    --color-primary-surface-rgb: var(--color-primary-surface-rgb-dark);
    --color-primary-surface-hover-rgb: var(--color-primary-surface-hover-rgb-dark);
    --color-primary-surface-light-rgb: var(--color-primary-surface-light-rgb-dark);
    
    --color-bg: var(--color-bg-dark);
    --color-surface: var(--color-surface-dark);
    --color-surface-alt: var(--color-surface-alt-dark);
    --color-surface-elevated: var(--color-surface-elevated-dark);
    --color-text: var(--color-text-dark);
    --color-text-secondary: var(--color-text-secondary-dark);
    --color-text-muted: var(--color-text-muted-dark);
    --color-text-inverse: var(--color-text-inverse-dark);
    --color-border: var(--color-border-dark);
    
    /* Theme-Aware Text Colors for Dark Mode */
    --color-text-heading: #f7fafc;
    --color-text-nav: #e2e8f0;
    
    /* Dark mode overlays - inverted */
    --color-overlay: rgba(var(--color-black-rgb), 0.8);
    --color-backdrop: rgba(var(--color-black-rgb), 0.92);
    --color-backdrop-strong: rgba(var(--color-black-rgb), 0.98);
    
    --glass-bg: var(--color-backdrop);
    --glass-bg-strong: var(--color-backdrop-strong);
    --glass-border: var(--color-border-dark);
    
    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.25);
    --shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.3);
}

/* ☀️ Manual Light Mode Toggle */
[data-theme="light"] {
    /* Reset to light mode primary variant */
    --color-primary-rgb: var(--color-primary-rgb-light);
    --color-primary-hover-rgb: var(--color-primary-hover-rgb-light);
    --color-primary-light-rgb: var(--color-primary-light-rgb-light);
    --color-primary-surface-rgb: var(--color-primary-surface-rgb-light);
    --color-primary-surface-hover-rgb: var(--color-primary-surface-hover-rgb-light);
    --color-primary-surface-light-rgb: var(--color-primary-surface-light-rgb-light);
    
    --color-bg: rgb(249, 250, 251);
    --color-surface: rgb(var(--color-white-rgb));
    --color-surface-alt: rgba(var(--color-black-rgb), 0.035);
    --color-surface-elevated: rgb(var(--color-white-rgb));
    /* v5.10.21: Darker text colors for explicit light mode - closer to pure black */
    --color-text: #111111;
    --color-text-secondary: #2d2d2d;
    --color-text-muted: #4a4a4a;
    --color-text-subtle: #5a5a5a;
    --color-text-inverse: var(--color-text-inverse-light);
    --color-border: rgba(var(--color-black-rgb), 0.12);
    --color-border-strong: rgba(var(--color-black-rgb), 0.24);
    --color-border-subtle: rgba(var(--color-black-rgb), 0.06);
    
    /* Light mode overlays */
    --color-overlay: rgba(var(--color-black-rgb), 0.6);
    --color-backdrop: rgba(var(--color-white-rgb), 0.92);
    --color-backdrop-strong: rgba(var(--color-white-rgb), 0.98);
    
    /* Light mode glass */
    --glass-bg: var(--color-backdrop);
    --glass-bg-strong: var(--color-backdrop-strong);
    --glass-border: var(--color-border);
    
    /* Light mode shadows */
    --shadow-card: 0 1px 3px rgba(var(--color-black-rgb), 0.04), 0 4px 12px rgba(var(--color-black-rgb), 0.04);
    --shadow-card-hover: 0 4px 12px rgba(var(--color-black-rgb), 0.08), 0 8px 24px rgba(var(--color-black-rgb), 0.06);
}

/* ========================================
   Visitor Text Contrast Controls
   Controlled via <html data-text-contrast="...">
   ======================================== */
:root[data-text-contrast="soft"] {
    --color-text: #1a1a1a;
    --color-text-secondary: #333333;
    --color-text-muted: #4d4d4d;
    --color-text-heading: #0f0f0f;
    --color-text-nav: #2a2a2a;
}

:root[data-text-contrast="high"] {
    --color-text: #000000;
    --color-text-secondary: #1a1a1a;
    --color-text-muted: #333333;
    --color-text-heading: #000000;
    --color-text-nav: #0a0a0a;
}

:root[data-theme="dark"][data-text-contrast="soft"] {
    --color-text: rgba(248, 250, 252, 0.92);
    --color-text-secondary: rgba(248, 250, 252, 0.78);
    --color-text-muted: rgba(248, 250, 252, 0.6);
    --color-text-heading: #f8fafc;
    --color-text-nav: rgba(248, 250, 252, 0.78);
}

:root[data-theme="dark"][data-text-contrast="high"] {
    --color-text: rgb(255, 255, 255);
    --color-text-secondary: rgba(255, 255, 255, 0.9);
    --color-text-muted: rgba(255, 255, 255, 0.8);
    --color-text-heading: #ffffff;
    --color-text-nav: rgba(255, 255, 255, 0.9);
}


/* ========== cross-browser.css ========== */
/* ========================================
   CROSS-BROWSER COMPATIBILITY - v5.1.0
   Unified rendering across all browsers
   ======================================== 
   
   SUPPORTED BROWSERS:
   - Chrome 90+
   - Firefox 88+
   - Safari 14+
   - Edge 90+
   - iOS Safari 14+
   - Chrome Android 90+
   ======================================== */

/* ============ CSS RESET FOR CONSISTENCY ============ */
*,
*::before,
*::after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Remove default styling */
button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0;
}

button,
input {
    overflow: visible;
}

button,
select {
    text-transform: none;
}

/* Correct button styles in iOS */
button,
[type="button"],
[type="reset"],
[type="submit"] {
    -webkit-appearance: button;
}

/* Remove inner border and padding in Firefox */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0;
}

/* ============ FLEXBOX CROSS-BROWSER ============ */
.flex,
.d-flex {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
}

.flex-column,
.flex-col {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}

.flex-row {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
}

.flex-wrap {
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.items-center {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.justify-center {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.justify-between {
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

/* ============ TRANSFORM CROSS-BROWSER ============ */
.transform-gpu {
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* ============ TRANSITIONS CROSS-BROWSER ============ */
.transition-all {
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.transition-transform {
    -webkit-transition: -webkit-transform 0.3s ease;
    -moz-transition: -moz-transform 0.3s ease;
    -o-transition: -o-transform 0.3s ease;
    transition: transform 0.3s ease;
}

.transition-opacity {
    -webkit-transition: opacity 0.3s ease;
    -moz-transition: opacity 0.3s ease;
    -o-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
}

/* ============ BACKDROP FILTER CROSS-BROWSER ============ */
.backdrop-blur {
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

/* Fallback for browsers without backdrop-filter */
@supports not ((-webkit-backdrop-filter: blur(12px)) or (backdrop-filter: blur(12px))) {
    .backdrop-blur {
        background-color: rgba(var(--color-surface-rgb, 26, 31, 44), 0.95);
    }
}

/* ============ SCROLLBAR STYLING ============ */
/* Webkit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--color-surface-alt);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: var(--color-border-strong);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary);
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--color-border-strong) var(--color-surface-alt);
}

/* ============ SELECTION STYLING ============ */
::-moz-selection {
    background: var(--color-primary);
    color: white;
}

::selection {
    background: var(--color-primary);
    color: white;
}

/* ============ PLACEHOLDER STYLING ============ */
::-webkit-input-placeholder {
    color: var(--color-text-subtle);
    opacity: 1;
}

::-moz-placeholder {
    color: var(--color-text-subtle);
    opacity: 1;
}

:-ms-input-placeholder {
    color: var(--color-text-subtle);
}

::-ms-input-placeholder {
    color: var(--color-text-subtle);
}

::placeholder {
    color: var(--color-text-subtle);
    opacity: 1;
}

/* ============ FOCUS STYLES ============ */
:focus {
    outline: none;
}

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

/* Firefox specific */
:-moz-focusring {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ============ GRADIENT TEXT CROSS-BROWSER ============ */
.gradient-text {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-text-fill-color: transparent;
}

/* Fallback for browsers without background-clip: text */
@supports not (-webkit-background-clip: text) {
    .gradient-text {
        background: none;
        color: var(--color-primary);
    }
}

/* ============ SMOOTH SCROLL CROSS-BROWSER ============ */
html {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    
    *,
    *::before,
    *::after {
        -webkit-animation-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        -webkit-animation-iteration-count: 1 !important;
        animation-iteration-count: 1 !important;
        -webkit-transition-duration: 0.01ms !important;
        -moz-transition-duration: 0.01ms !important;
        -o-transition-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============ GRID CROSS-BROWSER ============ */
.grid {
    display: -ms-grid;
    display: grid;
}

/* IE11 grid fallback */
@supports not (display: grid) {
    .grid {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
}

/* ============ POSITION STICKY CROSS-BROWSER ============ */
.sticky {
    position: -webkit-sticky;
    position: sticky;
}

/* ============ GAP PROPERTY FALLBACK ============ */
/* For browsers that don't support gap in flexbox */
@supports not (gap: 1rem) {
    .flex > * + * {
        margin-left: 1rem;
    }
    
    .flex-column > * + * {
        margin-left: 0;
        margin-top: 1rem;
    }
}

/* ============ ASPECT RATIO FALLBACK ============ */
@supports not (aspect-ratio: 16 / 9) {
    .aspect-16-9 {
        position: relative;
        padding-bottom: 56.25%;
    }
    
    .aspect-16-9 > * {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    
    .aspect-16-10 {
        position: relative;
        padding-bottom: 62.5%;
    }
    
    .aspect-16-10 > * {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    
    .aspect-4-3 {
        position: relative;
        padding-bottom: 75%;
    }
    
    .aspect-4-3 > * {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}

/* ============ OBJECT-FIT FALLBACK ============ */
@supports not (object-fit: cover) {
    .object-cover {
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
}

/* ============ CLAMP FALLBACK ============ */
@supports not (font-size: clamp(1rem, 2vw, 2rem)) {
    /* Desktop */
    h1 { font-size: 3rem; }
    h2 { font-size: 2.25rem; }
    h3 { font-size: 1.5rem; }
    
    /* Tablet */
    @media (max-width: 1023px) {
        h1 { font-size: 2.5rem; }
        h2 { font-size: 2rem; }
        h3 { font-size: 1.25rem; }
    }
    
    /* Mobile */
    @media (max-width: 767px) {
        h1 { font-size: 2rem; }
        h2 { font-size: 1.5rem; }
        h3 { font-size: 1.125rem; }
    }
}

/* ============ COLOR-MIX FALLBACK ============ */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
    /* Provide solid color fallbacks where color-mix is used */
    .post-card__image-wrapper::before {
        background: var(--color-surface-alt);
    }
}

/* ============ SAFARI SPECIFIC FIXES ============ */
/* Fix for Safari flexbox bugs */
@supports (-webkit-appearance: none) and (stroke-color: transparent) {
    .flex {
        -webkit-box-flex: 0;
        -webkit-flex: 0 1 auto;
        flex: 0 1 auto;
    }
}

/* ============ FIREFOX SPECIFIC FIXES ============ */
@-moz-document url-prefix() {
    /* Firefox-specific styles if needed */
    img {
        image-rendering: -moz-crisp-edges;
    }
}

/* ============ EDGE SPECIFIC FIXES ============ */
@supports (-ms-ime-align: auto) {
    /* Edge-specific styles if needed */
}

/* ============ HIGH CONTRAST MODE ============ */
@media (prefers-contrast: high) {
    :root {
        --color-border: #fff;
        --color-text: #fff;
        --color-bg: #000;
    }
    
    button,
    .button,
    .btn {
        border: 2px solid currentColor;
    }
}

/* ============ DARK MODE SYSTEM PREFERENCE ============ */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
    }
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
        color-scheme: light;
    }
}


/* ========== base.css ========== */
/* ========================================
   BASE STYLES - 2025 Redesign
   ======================================== */

/* Utility: Screen Reader Text */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

/* Global Reset & Typography */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    /* Keep in-page anchors visible below the fixed header */
    scroll-padding-top: var(--header-height, 76px);
    /* Prevent horizontal scroll on mobile */
    overflow-x: hidden;
}

body {
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    /* Solid background per no-gradient policy */
    background-image: none;
    background-attachment: fixed;
    /* Prevent horizontal scroll on mobile */
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
}

/* Typography Hierarchy */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: var(--line-height-tight);
    color: var(--color-text);
    margin-top: 0;
    /* Prevent widow words (single word on last line) - v6.0.1 */
    text-wrap: balance;
}

h1 {
    font-size: clamp(2.25rem, 5vw, var(--font-size-4xl));
    font-weight: 800;
    letter-spacing: -0.03em;
}

h2 {
    font-size: clamp(1.75rem, 4vw, var(--font-size-3xl));
    font-weight: 700;
}

h3 {
    font-size: clamp(1.25rem, 3vw, var(--font-size-xl));
    font-weight: 600;
}

p {
    margin-top: 0;
    margin-bottom: var(--space-4);
    color: var(--color-text-secondary);
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: all var(--transition-fast);
    /* Prevent long links from overflowing on mobile */
    word-wrap: break-word;
    overflow-wrap: break-word;
}

a:hover {
    color: var(--color-primary-hover);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
    text-decoration-color: var(--color-primary-light);
}

/* Focus Styles - Accessibility */
:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Selection */
::selection {
    background: var(--color-primary);
    color: white;
}

/* Container */
.container {
    width: 100%;
    max-width: var(--max-width-container);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-4);
    padding-right: var(--space-4);
}

@media (max-width: 640px) {
    .container {
        padding-left: var(--space-4);
        padding-right: var(--space-4);
    }
}

/* Mobile overflow prevention */
@media (max-width: 768px) {
    img, video, iframe, embed, object {
        max-width: 100%;
        height: auto;
    }
    
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    pre {
        max-width: 100%;
    }
}

/* Small mobile adjustments */
@media (max-width: 480px) {
    body {
        font-size: 0.9375rem; /* 15px */
    }
    
    h1 {
        font-size: clamp(1.75rem, 8vw, 2.25rem);
    }
    
    h2 {
        font-size: clamp(1.5rem, 6vw, 1.875rem);
    }
    
    h3 {
        font-size: clamp(1.125rem, 5vw, 1.375rem);
    }
}

/* Extra small mobile */
@media (max-width: 360px) {
    .container {
        padding-left: var(--space-3);
        padding-right: var(--space-3);
    }
}

/* Main Content Area */
main {
    flex: 1;
    /* Prevent content from overflowing */
    overflow-x: hidden;
}

/* Header offset: header-navigation.css uses a fixed header. */
.site-main {
    padding-top: var(--header-height, 76px);
}

@media (max-width: 959px) {
    .site-main {
        padding-top: var(--header-height, 76px);
    }
}

/* Images */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Lists */
ul, ol {
    padding-left: var(--space-6);
}

@media (max-width: 480px) {
    ul, ol {
        padding-left: var(--space-4);
    }
}

/* Code */
code {
    font-family: var(--font-mono);
    font-size: 0.875em;
    background: var(--color-surface-alt);
    padding: 0.125em 0.375em;
    border-radius: var(--radius-sm);
    /* Prevent code from breaking layout on mobile */
    word-wrap: break-word;
    overflow-wrap: break-word;
}

pre {
    font-family: var(--font-mono);
    background: var(--color-surface-alt);
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    overflow-x: auto;
    /* Cross-browser smooth scrolling */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

pre code {
    background: transparent;
    padding: 0;
}

/* ============ CROSS-BROWSER COMPATIBILITY ============ */
/* Ensure consistent box-sizing */
*, *::before, *::after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* Flexbox cross-browser prefixes for older browsers */
.flex {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
}

.flex-col {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}

/* Consistent button reset */
button {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* Print styles */
@media print {
    body {
        background: #fff;
        color: #000;
    }
    
    .site-header,
    .site-footer,
    .nav-toggle,
    .newsletter-cta,
    .theme-toggle {
        display: none !important;
    }
}

/* ============ ENHANCED LINK STYLES ============ */
/* Elegant text links with underline animation */
article a:not([class]),
.entry-content a:not([class]),
.prose a:not([class]) {
    color: var(--color-primary);
    text-decoration: none;
    position: relative;
    font-weight: 500;
    -webkit-transition: color var(--transition-fast);
    -moz-transition: color var(--transition-fast);
    transition: color var(--transition-fast);
}

article a:not([class])::after,
.entry-content a:not([class])::after,
.prose a:not([class])::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 2px;
    background: var(--color-primary);
    -webkit-transform: scaleX(0);
    -moz-transform: scaleX(0);
    -ms-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: right;
    -moz-transform-origin: right;
    -ms-transform-origin: right;
    transform-origin: right;
    -webkit-transition: transform var(--transition-base);
    -moz-transition: transform var(--transition-base);
    transition: transform var(--transition-base);
    border-radius: var(--radius-full);
}

article a:not([class]):hover::after,
.entry-content a:not([class]):hover::after,
.prose a:not([class]):hover::after {
    -webkit-transform: scaleX(1);
    -moz-transform: scaleX(1);
    -ms-transform: scaleX(1);
    transform: scaleX(1);
    -webkit-transform-origin: left;
    -moz-transform-origin: left;
    -ms-transform-origin: left;
    transform-origin: left;
}

article a:not([class]):hover,
.entry-content a:not([class]):hover,
.prose a:not([class]):hover {
    color: var(--color-primary-hover);
}

/* ============ MOBILE TOUCH TARGETS ============ */
@media (max-width: 768px) {
    /* Ensure minimum touch target of 44x44px on mobile */
    a:not(article a):not(.entry-content a):not(p a), 
    button, 
    [role="button"], 
    input[type="submit"], 
    input[type="button"] {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Additional touch targets for interactive elements */
    .social-share__link,
    .nav-link,
    .btn,
    .button,
    [class*="cta"],
    [class*="btn-"],
    .post-card__link,
    .related-posts a,
    .toc a,
    .share-btn,
    input[type="checkbox"],
    input[type="radio"],
    select {
        min-height: 44px;
        min-width: 44px;
    }
}

/* Universal touch target fix for ALL interactive elements (mobile + tablet) */
/* NOTE: Excludes .nav-toggle - it has its own responsive display rules in header-navigation.css */
@media (max-width: 1024px) {
    /* Force all buttons and links to have minimum touch target */
    button:not(.nav-toggle),
    [role="button"]:not(.nav-toggle),
    a[href]:not(article p a):not(.entry-content p a),
    input[type="submit"],
    input[type="button"],
    input[type="checkbox"] + label,
    input[type="radio"] + label,
    .btn,
    .button,
    [class*="cta-"],
    [class*="btn-"],
    .share-btn,
    .social-share a,
    .toc-link,
    .hamburger:not(.nav-toggle),
    .menu-toggle:not(.nav-toggle) {
        min-height: 44px !important;
        min-width: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 10px !important;
    }
    
    /* Nav toggle only gets touch target sizing, NOT display override */
    .nav-toggle {
        min-height: 44px !important;
        min-width: 44px !important;
        /* Display is controlled by header-navigation.css responsive rules */
    }
}


/* ========== archive.css ========== */
/* ========================================
   Archive / Blog Page Styles
   2025 Aurora Glass Redesign
   Premium Homepage v5.30.1
   ======================================== */

/* ============ ARCHIVE HERO ============ */
.archive-hero {
    padding: var(--space-16) 0 var(--space-10);
    background: var(--color-bg);
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* Premium hero orbs (NO gradients, finite animation)
   - Uses solid translucent fills + heavy blur to create a soft glow.
   - Finite animation iterations to prevent perpetual CPU drain.
   - Always disabled under prefers-reduced-motion.
*/
.archive-hero::before {
    content: '';
    position: absolute;
    top: -20%;
    left: -10%;
    width: 50%;
    height: 80%;
    background: rgba(var(--color-primary-rgb, 0, 102, 204), 0.10);
    filter: blur(70px);
    will-change: transform;
    animation: heroOrbFloat 12s ease-in-out 3;
    pointer-events: none;
}

.archive-hero::after {
    content: '';
    position: absolute;
    bottom: -30%;
    right: -10%;
    width: 60%;
    height: 90%;
    background: rgba(var(--color-primary-rgb, 0, 102, 204), 0.07);
    filter: blur(90px);
    will-change: transform;
    animation: heroOrbFloat 14s ease-in-out 3;
    pointer-events: none;
}

@keyframes heroOrbFloat {
    0% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.55; }
    50% { transform: translate3d(28px, -18px, 0) scale(1.08); opacity: 0.75; }
    100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.55; }
}

/* Reduced motion: no animated orbs */
@media (prefers-reduced-motion: reduce) {
    .archive-hero::before,
    .archive-hero::after {
        animation: none;
    }
}

.archive-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: var(--color-primary);
    color: #FFFFFF !important;
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-4);
    position: relative;
    z-index: 1;
    /* Ensure text is visible on primary background */
    -webkit-text-fill-color: #FFFFFF;
}

/* SVG icons inside archive hero eyebrow - white for contrast */
.archive-hero__eyebrow svg {
    width: 14px;
    height: 14px;
    color: #FFFFFF !important;
    stroke: #FFFFFF !important;
    fill: none;
    flex-shrink: 0;
}

.archive-hero__title {
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    margin-bottom: var(--space-4);
    color: var(--color-text-heading, var(--color-text));
    opacity: 1;
    position: relative;
    z-index: 1;
    /* Premium text reveal animation */
    animation: heroTitleReveal 0.8s ease-out forwards;
}

@keyframes heroTitleReveal {
    from {
        opacity: 0;
        transform: translateY(30px);
        filter: blur(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

/* Home hero specific - larger dramatic title */
.archive-hero--home .archive-hero__title {
    font-size: clamp(2.75rem, 6vw, 4.5rem);
    line-height: 1.05;
    max-width: 700px;
    animation-delay: 0.1s;
    /* v5.39.1: Using 'both' for consistency with other hero animations */
}

.archive-hero__description {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary, var(--color-text));
    max-width: 600px;
    margin: 0 auto var(--space-8);
    position: relative;
    z-index: 1;
    /* v5.39.1: Fixed animation - using 'both' to combine backwards+forwards */
    /* Removed explicit opacity:0 which was overriding the animation */
    animation: heroDescReveal 0.7s ease-out 0.25s both;
}

@keyframes heroDescReveal {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Home hero description styling */
.archive-hero--home .archive-hero__description {
    font-size: clamp(1.125rem, 2vw, 1.375rem);
    line-height: 1.6;
    max-width: 620px;
    animation-delay: 0.3s;
}

.archive-hero__actions {
    display: flex;
    gap: var(--space-4);
    justify-content: center;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
    /* v5.39.1: Hero CTA buttons animation with visibility fallback */
    /* Animation starts after 0.5s delay, fills forwards to keep final state */
    animation: heroActionsReveal 0.6s ease-out 0.5s both;
    /* Fallback: CSS @keyframes ensures visibility even if JS doesn't trigger */
}

@keyframes heroActionsReveal {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Premium button styling for hero CTA */
.archive-hero__actions .button {
    font-weight: 700;
    padding: var(--space-3) var(--space-6);
    font-size: var(--font-size-base);
    border-radius: var(--radius-full);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Primary CTA - premium shadow (exclude secondary/outline buttons) */
.archive-hero__actions .button:not(.button--ghost):not(.button-secondary):not(.button--secondary) {
    color: var(--smart-btn-text-on-primary, #FFFFFF) !important;
    box-shadow:
        0 4px 14px rgba(var(--color-primary-rgb, 0, 102, 204), 0.35),
        0 2px 4px rgba(0, 0, 0, 0.1);
}

.archive-hero__actions .button:not(.button--ghost):not(.button-secondary):not(.button--secondary):hover {
    color: var(--smart-btn-text-on-primary, #FFFFFF) !important;
    box-shadow:
        0 6px 20px rgba(var(--color-primary-rgb, 0, 102, 204), 0.45),
        0 4px 8px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

/* Secondary/outline button in hero - MUST have visible text */
.archive-hero__actions .button-secondary,
.archive-hero__actions .button--secondary {
    background: transparent !important;
    border: 2px solid var(--color-primary, #0066CC) !important;
    color: var(--color-primary, #0066CC) !important;
    -webkit-text-fill-color: var(--color-primary, #0066CC) !important;
    box-shadow: none;
}

.archive-hero__actions .button-secondary:hover,
.archive-hero__actions .button--secondary:hover {
    background: var(--color-primary, #0066CC) !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    box-shadow:
        0 4px 14px rgba(var(--color-primary-rgb, 0, 102, 204), 0.35),
        0 2px 4px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

/* Ghost button - subtle border glow on hover */
.archive-hero__actions .button--ghost:hover {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb, 0, 102, 204), 0.15);
}

/* ============ HOME HERO (INVESTOR DEMO) ============ */
/* v5.29.0: Symmetric desktop spacing for better visual balance */
.archive-hero--home .home-hero__grid {
    display: grid;
    /* Equal proportions for better symmetry on desktop */
    grid-template-columns: 1fr 1fr;
    gap: var(--space-10);
    align-items: stretch;
    /* Ensure consistent padding on both sides */
    padding: 0 var(--space-4);
}

/* Large desktop: slight asymmetry for content hierarchy */
@media (min-width: 1280px) {
    .archive-hero--home .home-hero__grid {
        /* Symmetry guardrail: equal columns on desktop */
        grid-template-columns: 1fr 1fr;
        gap: var(--space-10);
        padding: 0 var(--space-6);
    }
}

.archive-hero--home .home-hero__copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.archive-hero--home .home-hero__panel {
    min-width: 0;
    display: flex;
    /* Avoid tall empty space: let the panel card size to content and center */
    align-items: center;
}

.archive-hero--home .home-hero__panel-card {
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid var(--color-border-subtle, rgba(26, 26, 26, 0.12));
    border-radius: var(--radius-2xl);
    /* v5.30.1: Premium padding and spacing */
    padding: var(--space-8) var(--space-7);
    box-shadow: 
        0 4px 6px rgba(0, 0, 0, 0.02),
        0 12px 24px rgba(0, 0, 0, 0.06),
        0 24px 48px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    /* Size to content (prevents large empty gaps on homepage) */
    height: auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    /* v5.39.1: Premium entrance animation with 'both' fill-mode for safety */
    animation: panelCardReveal 0.9s ease-out 0.4s both;
    /* Subtle hover lift on desktop */
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s ease;
}

@keyframes panelCardReveal {
    from {
        opacity: 0;
        transform: translateY(40px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Premium hover effect - desktop only */
@media (hover: hover) and (pointer: fine) {
    .archive-hero--home .home-hero__panel-card:hover {
        transform: translateY(-4px);
        box-shadow: 
            0 8px 12px rgba(0, 0, 0, 0.04),
            0 20px 40px rgba(0, 0, 0, 0.08),
            0 32px 64px rgba(var(--color-primary-rgb, 0, 102, 204), 0.12);
    }
}

:root[data-theme="dark"] .archive-hero--home .home-hero__panel-card {
    background: rgba(18, 18, 18, 0.70);
    border-color: rgba(255, 255, 255, 0.14);
}

.archive-hero--home .home-hero__panel-top {
    display: grid;
    gap: var(--space-1);
    margin-bottom: var(--space-4);
}

.archive-hero--home .home-hero__panel-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.archive-hero--home .home-hero__panel-title {
    font-size: var(--font-size-lg);
    font-weight: 800;
    color: var(--color-text);
}

.archive-hero--home .home-hero__panel-list {
    margin: 0 0 var(--space-5);
    padding-left: 1.25rem;
    color: var(--color-text-secondary, var(--color-text));
}

.archive-hero--home .home-hero__panel-list li {
    margin-bottom: var(--space-2);
}

.archive-hero--home .home-hero__panel-list strong {
    color: var(--color-text);
}

.archive-hero--home .home-hero__kpis {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
    margin-top: var(--space-4);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border-subtle, rgba(26, 26, 26, 0.10));
}

:root[data-theme="dark"] .archive-hero--home .home-hero__kpis {
    border-top-color: rgba(255, 255, 255, 0.12);
}

.archive-hero--home .home-hero__kpi {
    display: grid;
    gap: 4px;
    text-align: center;
    padding: var(--space-3);
    background: rgba(var(--color-primary-rgb, 0, 102, 204), 0.04);
    border-radius: var(--radius-lg);
    transition: background 0.2s ease;
}

.archive-hero--home .home-hero__kpi:hover {
    background: rgba(var(--color-primary-rgb, 0, 102, 204), 0.08);
}

.archive-hero--home .home-hero__kpi span {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.archive-hero--home .home-hero__kpi strong {
    font-size: var(--font-size-lg);
    font-weight: 900;
    letter-spacing: -0.02em;
}

.archive-hero--home .home-hero__stack {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px dashed var(--color-border-subtle, rgba(26, 26, 26, 0.14));
}

:root[data-theme="dark"] .archive-hero--home .home-hero__stack {
    border-top-color: rgba(255, 255, 255, 0.16);
}

.archive-hero--home .home-hero__stack span {
    display: block;
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: var(--space-2);
}

.archive-hero--home .home-hero__stack ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: 0;
    margin: 0;
}

.archive-hero--home .home-hero__stack li {
    padding: 0.35rem 0.65rem;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border-subtle, rgba(26, 26, 26, 0.12));
    background: rgba(255, 255, 255, 0.6);
    color: var(--color-text);
    font-size: var(--font-size-xs);
    font-weight: 700;
}

:root[data-theme="dark"] .archive-hero--home .home-hero__stack li {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.14);
    color: var(--color-text);
}

/* Tablet: two-column with tighter gap */
@media (min-width: 768px) and (max-width: 1023px) {
    .archive-hero--home .home-hero__grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-6);
        padding: 0 var(--space-3);
    }
}

/* Mobile: single column stack */
@media (max-width: 767px) {
    .archive-hero--home .home-hero__grid {
        grid-template-columns: 1fr;
        gap: var(--space-6);
        padding: 0;
    }
    
    .archive-hero--home .home-hero__panel-card {
        height: auto;
    }
}

.archive-hero__meta {
    margin-top: var(--space-6);
    display: flex;
    justify-content: center;
    gap: var(--space-8);
    flex-wrap: wrap;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    position: relative;
    z-index: 1;
}

.archive-hero__meta strong {
    color: var(--color-text);
}

.archive-empty {
    text-align: center;
    padding: var(--space-16) 0;
}

.archive-empty__title {
    font-size: var(--font-size-2xl);
    font-weight: 800;
    margin: 0 0 var(--space-4);
    color: var(--color-text);
}

.archive-empty__description {
    margin: 0 auto;
    max-width: 680px;
    color: var(--color-text-muted);
}

.archive-empty__actions {
    display: flex;
    justify-content: center;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-top: var(--space-8);
}

/* ============ ARCHIVE METRICS ============ */
/* v5.30.1: Enhanced capability cards with premium styling */
.archive-metrics {
    padding: var(--space-12) 0 var(--space-16);
    background: var(--color-bg);
    position: relative;
}

.archive-metrics__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-5);
}

.archive-metrics__card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2xl);
    padding: var(--space-8);
    text-align: left;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

/* Premium accent bar on top */
.archive-metrics__card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--color-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s ease;
}

.archive-metrics__card:hover {
    border-color: var(--color-primary-light);
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.08),
        0 16px 48px rgba(var(--color-primary-rgb, 0, 102, 204), 0.1);
    transform: translateY(-4px);
}

.archive-metrics__card:hover::before {
    transform: scaleX(1);
}

/* Card headings */
.archive-metrics__card h3 {
    font-size: var(--font-size-xl);
    font-weight: 800;
    color: var(--color-text);
    margin-bottom: var(--space-3);
    letter-spacing: -0.02em;
}

.archive-metrics__card p {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    line-height: 1.65;
    margin: 0;
}

.archive-metrics__label {
    display: block;
    font-size: var(--font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
    margin-bottom: var(--space-2);
}

.archive-metrics__value {
    display: block;
    font-size: var(--font-size-3xl);
    font-weight: 800;
    color: var(--color-primary);
    line-height: 1.2;
}

.archive-metrics__hint {
    font-size: var(--font-size-sm);
    color: var(--color-text-subtle);
    margin-top: var(--space-2);
}

/* ============ ARCHIVE TOPICS ============ */
.archive-topics {
    padding: var(--space-16) 0;
    background: var(--color-surface-alt);
    position: relative;
}

.archive-topics::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--gradient-mesh);
    pointer-events: none;
    opacity: 0.5;
}

.archive-topics__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-6);
    margin-bottom: var(--space-10);
    position: relative;
    z-index: 1;
}

.archive-topics__header > div:first-child {
    flex: 1 1 300px;
}

.archive-topics__header > p {
    flex: 1 1 300px;
    color: var(--color-text-muted);
    margin: 0;
}

.archive-topics__eyebrow {
    display: block;
    font-size: var(--font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-primary);
    margin-bottom: var(--space-2);
}

.archive-topics__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-5);
    position: relative;
    z-index: 1;
}

.archive-topics__card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    text-decoration: none;
    color: inherit;
    transition: all var(--transition-base);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.archive-topics__card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gradient-primary);
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.archive-topics__card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-primary-light);
}

.archive-topics__card:hover::before {
    opacity: 1;
}

.archive-topics__count {
    font-size: var(--font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-primary);
    margin-bottom: var(--space-3);
}

.archive-topics__card h3 {
    font-size: var(--font-size-lg);
    font-weight: 700;
    margin: 0 0 var(--space-2) 0;
    color: var(--color-text);
}

.archive-topics__card p {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin: 0 0 auto 0;
    line-height: var(--line-height-relaxed);
}

.archive-topics__cta {
    display: inline-flex;
    align-items: center;
    margin-top: var(--space-4);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-primary);
}

/* ============ ARCHIVE GRID ============ */
.archive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-6);
    padding: var(--space-10) 0;
    /* Equal height rows for consistent card appearance */
    grid-auto-rows: 1fr;
}

/* Large desktop: keep a clean, symmetric editorial grid (3 columns)
   Avoid ultra-wide auto-fit layouts that create 5+ columns and awkward last rows. */
@media (min-width: 1280px) {
    .archive-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-auto-rows: 1fr;
    }
}

@media (max-width: 1023px) {
    .archive-grid {
        gap: var(--space-5);
    }
}

/* ============ ENTRY CARD ============ */
/* v5.82.0 - Smooth hover animations with cubic-bezier easing */
.entry-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2xl);
    overflow: hidden;
    /* Smooth multi-property transition */
    transition: 
        transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        border-color 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    position: relative;
    /* GPU acceleration for smooth animations */
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Full-card clickable link wrapper */
.entry-card__link-wrapper,
.post-card__link-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

.entry-card__link-wrapper:hover,
.post-card__link-wrapper:hover {
    text-decoration: none;
    color: inherit;
}

/* Update category to be non-clickable inside wrapper */
.entry-card__link-wrapper .entry-card__category,
.post-card__link-wrapper .post-card__category {
    pointer-events: none;
}

/* Update title link styling when inside wrapper */
.entry-card__link-wrapper .entry-card__title,
.post-card__link-wrapper .post-card__title {
    color: var(--color-text);
}

.entry-card:hover .entry-card__link-wrapper .entry-card__title,
.post-card:hover .post-card__link-wrapper .post-card__title {
    color: var(--color-primary);
}

.entry-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--color-primary);
    opacity: 0;
    transition: opacity 0.25s ease-out;
    z-index: 1;
}

.entry-card:hover {
    transform: translateY(-4px);
    box-shadow: 
        0 10px 30px -5px rgba(0, 0, 0, 0.12),
        0 4px 10px -3px rgba(0, 0, 0, 0.08);
    border-color: var(--color-primary-light);
}

.entry-card:hover::before {
    opacity: 1;
}

.entry-card__thumb {
    aspect-ratio: 16/9;
    overflow: hidden;
    background: var(--color-surface-alt);
    position: relative;
}

.entry-card__thumb a {
    display: block;
    width: 100%;
    height: 100%;
}

.entry-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Smooth image zoom with cubic-bezier */
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

.entry-card:hover .entry-card__thumb img {
    transform: scale(1.03);
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .entry-card,
    .entry-card__thumb img {
        transition: none !important;
        transform: none !important;
    }
}

.entry-card__category {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--touch-target-min, 44px);
    margin: var(--space-5) var(--space-5) 0;
    padding: 0 var(--space-4);
    background: var(--color-primary-subtle);
    color: var(--color-primary);
    font-size: var(--font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: var(--radius-full);
    text-decoration: none;
    transition: all var(--transition-fast);
}

.entry-card__category:hover {
    background: var(--color-primary);
    color: var(--sv-text-on-accent);
}

.entry-card__title {
    font-size: var(--font-size-lg);
    font-weight: 700;
    line-height: var(--line-height-snug);
    margin: var(--space-3) var(--space-5) var(--space-2);
}

.entry-card__title a {
    color: var(--color-text);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.entry-card__title a:hover {
    color: var(--color-primary);
}

.entry-card__meta {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin: 0 var(--space-5);
}

.entry-card__excerpt {
    flex: 1;
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-muted);
    margin: var(--space-3) var(--space-5);
    /* Consistent 3-line truncation for uniform card appearance */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: calc(3 * var(--line-height-relaxed) * var(--font-size-sm));
}

.entry-card__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--touch-target-min, 44px);
    margin: auto var(--space-5) var(--space-5);
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--sv-btn-text-on-primary);
    background: var(--color-primary-surface);
    border: 1px solid var(--color-primary-surface);
    border-radius: var(--radius-full);
    text-decoration: none;
    box-shadow: var(--shadow-xs);
    transition:
        transform var(--transition-fast),
        background var(--transition-fast),
        border-color var(--transition-fast),
        box-shadow var(--transition-fast),
        gap var(--transition-fast);
}

/* CTA styling when it's a span inside link wrapper */
.entry-card__link-wrapper .entry-card__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--touch-target-min, 44px);
    margin: auto var(--space-5) var(--space-5);
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--sv-btn-text-on-primary);
    background: var(--color-primary-surface);
    border: 1px solid var(--color-primary-surface);
    border-radius: var(--radius-full);
    text-decoration: none;
    box-shadow: var(--shadow-xs);
    transition:
        transform var(--transition-fast),
        background var(--transition-fast),
        border-color var(--transition-fast),
        box-shadow var(--transition-fast),
        gap var(--transition-fast);
}

.entry-card:hover .entry-card__cta {
    gap: var(--space-3);
    background: var(--color-primary-surface-hover);
    border-color: var(--color-primary-surface-hover);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

.entry-card__cta svg {
    width: 1.125rem;
    height: 1.125rem;
    flex-shrink: 0;
    transition: transform var(--transition-fast);
}

.entry-card__link:hover {
    gap: var(--space-3);
    background: var(--color-primary-surface-hover);
    border-color: var(--color-primary-surface-hover);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
    text-decoration: none;
}

.entry-card__link:focus {
    text-decoration: none;
}

.entry-card__link:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 3px var(--color-primary-25),
        var(--shadow-sm);
}

.entry-card__link svg {
    width: 1.125rem;
    height: 1.125rem;
    flex-shrink: 0;
    transition: transform var(--transition-fast);
}

.entry-card__link:hover svg {
    transform: translateX(4px);
}

/* Badge Category Colors */
.badge-cat--ai-automation {
    background: var(--color-primary-10);
    color: var(--color-primary);
}

.badge-cat--business {
    background: var(--color-tertiary-10);
    color: var(--color-tertiary);
}

.badge-cat--productivity {
    background: var(--color-warning-10);
    color: var(--color-warning);
}

.badge-cat--uncategorized {
    background: var(--color-cat-neutral-bg);
    color: var(--color-text-muted);
}

/* ============ ELEGANT PAGINATION ============ */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    padding: 3rem 0 4rem;
    margin-top: var(--space-8);
}

.pagination .nav-links {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--color-surface);
    padding: 0.5rem;
    border-radius: var(--radius-2xl);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
}

/* paginate_links(type=list) outputs: <ul class="page-numbers"><li>...</li></ul> */
.pagination ul.page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: var(--color-surface);
    padding: 0.5rem;
    border-radius: var(--radius-2xl);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
    margin: 0;
    list-style: none;
    flex-wrap: wrap;
}

.pagination ul.page-numbers > li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.pagination a,
.pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    height: 2.75rem;
    padding: 0 1rem;
    border-radius: var(--radius-xl);
    font-weight: 600;
    font-size: var(--font-size-sm);
    text-decoration: none;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

/* Strong, accessible focus without adding layout shift */
.pagination a:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--color-primary-15);
}

.pagination a.page-numbers {
    background: transparent;
    border: none;
    color: var(--color-text);
}

.pagination a.page-numbers:hover {
    background: var(--color-primary-10);
    color: var(--color-primary);
    transform: translateY(-2px);
}

.pagination span.page-numbers.current {
    background: var(--color-primary);
    color: white;
    box-shadow: 0 4px 14px var(--color-primary-35);
    font-weight: 700;
}

.pagination span.page-numbers.dots {
    background: transparent;
    color: var(--color-text-muted);
    min-width: auto;
    padding: 0 0.25rem;
}

.pagination a.prev,
.pagination a.next {
    background: var(--color-surface-alt);
    color: var(--color-text);
    font-weight: 700;
    padding: 0 1.25rem;
}

.pagination a.prev:hover,
.pagination a.next:hover {
    background: var(--color-primary);
    color: white;
    box-shadow: 0 4px 14px var(--color-primary-35);
}

/* Dark Mode - Archive Styles */
:root[data-theme="dark"] .archive-hero {
    background: var(--color-bg-dark);
}

:root[data-theme="dark"] .archive-metrics__card,
:root[data-theme="dark"] .archive-topics__card,
:root[data-theme="dark"] .entry-card {
    background: var(--color-surface-dark);
    border-color: var(--color-border-dark);
}

:root[data-theme="dark"] .archive-topics {
    background: var(--color-overlay-light);
}

:root[data-theme="dark"] .entry-card__title a {
    color: var(--color-text-slate-100);
}

:root[data-theme="dark"] .entry-card__excerpt {
    color: var(--color-text-slate-300);
}

:root[data-theme="dark"] .archive-topics__card h3 {
    color: var(--color-text-slate-100);
}

/* Responsive - Archive Grid */
@media (max-width: 768px) {
    .archive-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .archive-hero {
        padding: 3rem 0 2rem;
    }
    
    .archive-topics__header {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    /* Reset flex-basis to auto on mobile to prevent 300px minimum heights */
    .archive-topics__header > div:first-child,
    .archive-topics__header > p {
        flex: 0 0 auto;
        max-width: 100%;
    }
    
    .archive-metrics__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .archive-hero {
        padding: 2rem var(--space-4) 1.5rem;
    }
    
    .archive-hero__title {
        font-size: clamp(1.5rem, 7vw, 2.5rem);
    }
    
    .archive-hero__description {
        font-size: var(--font-size-base);
        padding: 0 var(--space-2);
    }
    
    .archive-hero__actions {
        flex-direction: column;
        padding: 0 var(--space-4);
    }
    
    .archive-hero__actions .btn,
    .archive-hero__actions .button {
        width: 100%;
    }
    
    .archive-metrics__grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-3);
    }
    
    .archive-metrics__card {
        padding: var(--space-4);
    }
    
    .archive-topics__grid {
        grid-template-columns: 1fr;
    }
    
    .entry-card {
        padding: var(--space-5);
    }
    
    .pagination {
        gap: var(--space-1);
    }
    
    .pagination a,
    .pagination span {
        min-width: 36px;
        height: 36px;
        font-size: var(--font-size-sm);
    }

    .pagination ul.page-numbers {
        gap: 0.375rem;
        padding: 0.375rem;
    }

    /* Give Next/Prev more breathing room on tiny screens */
    .pagination a.prev,
    .pagination a.next {
        padding: 0 0.9rem;
    }
}

/* ============ EXTRA TINY SCREENS (<320px) ============
   Fix eyebrow badge overlapping header on very small screens.
   v5.40.1 - 2026-01-02
*/
@media (max-width: 319px) {
    .archive-hero {
        /* Extra top padding to clear fixed header on tiny screens */
        padding: 4.5rem var(--space-2) 1.25rem;
        margin-top: 0;
    }

    .archive-hero__eyebrow {
        font-size: 0.6rem;
        padding: var(--space-1) var(--space-2);
        letter-spacing: 0.06em;
        /* Prevent overlap with header */
        margin-top: var(--space-2);
        max-width: 100%;
        word-break: break-word;
    }

    .archive-hero__title {
        font-size: clamp(1.25rem, 6vw, 1.75rem);
    }

    .archive-hero__description {
        font-size: 0.875rem;
        padding: 0 var(--space-1);
    }

    .archive-hero__actions .btn,
    .archive-hero__actions .button {
        font-size: 0.8rem;
        padding: var(--space-2) var(--space-3);
        min-height: 44px;
    }
}
/* ============ FRONT PAGE SPECS SECTIONS ============
   Phone-style specifications for AI providers and capabilities
   v5.70.0 - 2026-01-07
*/

/* Live Status Dot */
.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.status-dot--live {
    background: var(--color-success, #10B981);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
    animation: statusPulse 2s ease-in-out 3;
}

@keyframes statusPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.8; }
}

@media (prefers-reduced-motion: reduce) {
    .status-dot--live { animation: none; }
}

/* Hero KPIs Grid Enhancement */
.home-hero__kpis--grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.home-hero__kpis--grid .home-hero__kpi {
    background: rgba(var(--color-primary-rgb, 0, 102, 204), 0.05);
    border-radius: var(--radius-lg);
    padding: var(--space-3);
    text-align: center;
}

.home-hero__kpis--grid .home-hero__kpi span {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    display: block;
    margin-bottom: var(--space-1);
}

.home-hero__kpis--grid .home-hero__kpi strong {
    font-size: var(--font-size-xl);
    font-weight: 800;
    color: var(--color-primary);
}

/* Version Badges Row */
.home-hero__version-row {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: var(--space-4);
}

.version-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    padding: var(--space-1) var(--space-2);
    font-size: var(--font-size-xs);
}

.version-badge__label {
    font-weight: 700;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.version-badge__value {
    color: var(--color-text);
    font-weight: 600;
}

/* AI Status Section in Hero */
.home-hero__ai-status {
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-3);
}

.home-hero__ai-label {
    font-size: var(--font-size-xs);
    font-weight: 700;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    display: block;
    margin-bottom: var(--space-2);
}

.home-hero__providers {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    justify-content: center;
}

/* Provider Chips */
.provider-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 600;
    transition: all 0.2s ease;
}

.provider-chip--active {
    background: rgba(var(--color-success-rgb, 16, 185, 129), 0.15);
    color: var(--color-success);
    border: 1px solid var(--color-success);
}

.provider-chip--inactive {
    background: var(--color-surface);
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
    opacity: 0.6;
}

.provider-chip--primary {
    background: var(--color-primary);
    color: #FFFFFF;
    border-color: var(--color-primary);
}

.provider-chip__star {
    font-size: 10px;
}

/* ============ SPECS SECTION (Phone-Style AI Providers) ============ */
.specs-section {
    padding: var(--space-16) 0;
    background: var(--color-bg-alt, var(--color-surface));
}

.section-header__eyebrow {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    background: var(--color-primary);
    color: #FFFFFF;
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-3);
}

.specs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-6);
    max-width: 1400px;
    margin: 0 auto;
}

/* Spec Card (Phone Specs Style) */
.spec-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-5);
    transition: all 0.3s ease;
}

.spec-card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.spec-card__header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-border);
}

.spec-card__icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    flex-shrink: 0;
}

.spec-card__icon svg {
    width: 24px;
    height: 24px;
}

/* Provider-specific icon colors */
.spec-card__icon--openai { background: rgba(0, 0, 0, 0.05); color: #000000; }
.spec-card__icon--google { background: rgba(66, 133, 244, 0.1); color: #4285F4; }
.spec-card__icon--anthropic { background: rgba(204, 119, 68, 0.1); color: #CC7744; }
.spec-card__icon--xai { background: rgba(0, 0, 0, 0.05); color: #000000; }
.spec-card__icon--mistral { background: rgba(255, 119, 0, 0.1); color: #FF7700; }
.spec-card__icon--cohere { background: rgba(102, 51, 153, 0.1); color: #663399; }
.spec-card__icon--together { background: rgba(34, 139, 230, 0.1); color: #228BE6; }

.spec-card__title-group {
    flex: 1;
}

.spec-card__title {
    font-size: var(--font-size-lg);
    font-weight: 700;
    margin: 0 0 var(--space-1) 0;
    color: var(--color-text-heading);
}

.spec-card__subtitle {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

/* Specs List (Phone Style) */
.spec-card__specs {
    list-style: none;
    padding: 0;
    margin: 0;
}

.spec-card__specs li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-2) 0;
    border-bottom: 1px solid rgba(var(--color-border-rgb, 0, 0, 0), 0.05);
}

.spec-card__specs li:last-child {
    border-bottom: none;
}

.spec-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.spec-value {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text);
}

.spec-value--yes {
    color: var(--color-success);
}

.spec-value--no {
    color: var(--color-text-muted);
}

/* ============ CAPABILITIES SECTION ============ */
.capabilities-section {
    padding: var(--space-16) 0;
    background: var(--color-bg);
}

.capabilities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--space-6);
    max-width: 1400px;
    margin: 0 auto;
}

/* Capability Card */
.capability-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    transition: all 0.3s ease;
}

.capability-card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.capability-card__icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-4);
    background: rgba(var(--color-primary-rgb, 0, 102, 204), 0.1);
    color: var(--color-primary);
}

.capability-card__icon svg {
    width: 32px;
    height: 32px;
}

/* Icon color variations */
.capability-card__icon--providers { background: rgba(102, 51, 153, 0.1); color: #663399; }
.capability-card__icon--content { background: rgba(66, 133, 244, 0.1); color: #4285F4; }
.capability-card__icon--monitor { background: rgba(16, 185, 129, 0.1); color: #10B981; }
.capability-card__icon--audit { background: rgba(245, 158, 11, 0.1); color: #F59E0B; }
.capability-card__icon--email { background: rgba(236, 72, 153, 0.1); color: #EC4899; }
.capability-card__icon--deploy { background: rgba(59, 130, 246, 0.1); color: #3B82F6; }

.capability-card__title {
    font-size: var(--font-size-xl);
    font-weight: 700;
    margin: 0 0 var(--space-4) 0;
    color: var(--color-text-heading);
}

.capability-card__features {
    list-style: none;
    padding: 0;
    margin: 0;
}

.capability-card__features li {
    position: relative;
    padding: var(--space-2) 0 var(--space-2) var(--space-5);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    border-bottom: 1px solid rgba(var(--color-border-rgb, 0, 0, 0), 0.05);
}

.capability-card__features li:last-child {
    border-bottom: none;
}

.capability-card__features li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    background: var(--color-success);
    border-radius: 50%;
    /* Checkmark using CSS */
}

.capability-card__features li::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-60%) rotate(45deg);
    width: 4px;
    height: 8px;
    border-right: 2px solid #FFFFFF;
    border-bottom: 2px solid #FFFFFF;
}

/* Responsive Specs/Capabilities */
@media (max-width: 768px) {
    .specs-section,
    .capabilities-section {
        padding: var(--space-12) 0;
    }

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

    .home-hero__kpis--grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .home-hero__version-row {
        justify-content: center;
    }

    .spec-card,
    .capability-card {
        padding: var(--space-4);
    }
}

@media (max-width: 480px) {
    .home-hero__providers {
        gap: var(--space-1);
    }

    .provider-chip {
        font-size: 10px;
        padding: 3px 8px;
    }
}

/* ============================================================
   DRAMATIC HOMEPAGE - BREATHTAKING PRODUCT LANDING
   v5.72.0 - Apple-level drama meets SaaS excellence
   FIXED: Light mode support for all sections
   ============================================================ */

/* ============ DRAMATIC HERO ============ */
.dramatic-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6rem var(--space-4) 4rem;
    /* Light mode: premium light gradient */
    background: linear-gradient(135deg, #F8FAFF 0%, #EEF2FF 50%, #E0E7FF 100%);
    overflow: hidden;
}

/* Dark mode: original dark gradient */
[data-theme="dark"] .dramatic-hero {
    background: linear-gradient(135deg, #0a0a0f 0%, #1a1a2e 50%, #16213e 100%);
}

.dramatic-hero__bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

/* Animated gradient orbs */
.dramatic-hero__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.5;
    animation: orbFloat 20s ease-in-out infinite;
}

.dramatic-hero__orb--1 {
    width: 600px;
    height: 600px;
    /* Light mode: softer purple */
    background: rgba(99, 102, 241, 0.2);
    top: -200px;
    right: -100px;
    animation-delay: 0s;
}

/* Dark mode: brighter orbs */
[data-theme="dark"] .dramatic-hero__orb--1 {
    background: rgba(99, 102, 241, 0.4);
}

.dramatic-hero__orb--2 {
    width: 500px;
    height: 500px;
    /* Light mode: softer pink */
    background: rgba(236, 72, 153, 0.15);
    bottom: -150px;
    left: -100px;
    animation-delay: -7s;
}

[data-theme="dark"] .dramatic-hero__orb--2 {
    background: rgba(236, 72, 153, 0.3);
}

.dramatic-hero__orb--3 {
    width: 400px;
    height: 400px;
    /* Light mode: softer cyan */
    background: rgba(6, 182, 212, 0.15);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-delay: -14s;
}

[data-theme="dark"] .dramatic-hero__orb--3 {
    background: rgba(6, 182, 212, 0.3);
}

@keyframes orbFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(30px, -30px) scale(1.05); }
    50% { transform: translate(-20px, 20px) scale(0.95); }
    75% { transform: translate(-30px, -10px) scale(1.02); }
}

@media (prefers-reduced-motion: reduce) {
    .dramatic-hero__orb { animation: none; }
}

.dramatic-hero__content {
    position: relative;
    z-index: 1;
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

/* Live Demo Badge */
.dramatic-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    /* Light mode: subtle dark badge */
    background: rgba(15, 23, 42, 0.06);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: var(--radius-full);
    margin-bottom: var(--space-6);
    color: rgba(15, 23, 42, 0.85);
    font-size: var(--font-size-sm);
    font-weight: 500;
}

/* Dark mode badge */
[data-theme="dark"] .dramatic-hero__badge {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.9);
}

.pulse-dot {
    width: 8px;
    height: 8px;
    background: #10B981;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
    animation: pulseDot 2s ease-in-out infinite;
}

@keyframes pulseDot {
    0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
    50% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .pulse-dot { animation: none; }
}

/* Dramatic Title */
.dramatic-hero__title {
    font-size: clamp(2.5rem, 7vw, 5rem);
    font-weight: 800;
    line-height: 1.1;
    margin: 0 0 var(--space-6) 0;
    letter-spacing: -0.03em;
}

.dramatic-hero__title-line {
    display: block;
    /* Light mode: dark text */
    color: #0F172A;
}

[data-theme="dark"] .dramatic-hero__title-line {
    color: #FFFFFF;
}

.dramatic-hero__title-highlight {
    background: linear-gradient(135deg, #6366F1 0%, #EC4899 50%, #06B6D4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.dramatic-hero__subtitle {
    font-size: clamp(1rem, 2.5vw, 1.25rem);
    line-height: 1.7;
    /* Light mode: muted dark text */
    color: rgba(15, 23, 42, 0.7);
    max-width: 700px;
    margin: 0 auto var(--space-8) auto;
}

[data-theme="dark"] .dramatic-hero__subtitle {
    color: rgba(255, 255, 255, 0.7);
}

/* CTA Buttons */
.dramatic-hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    justify-content: center;
    margin-bottom: var(--space-10);
}

.btn-dramatic {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-6);
    border-radius: var(--radius-full);
    font-size: var(--font-size-base);
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    border: none;
}

.btn-dramatic--primary {
    background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);
    color: #FFFFFF;
    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.4);
}

.btn-dramatic--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(99, 102, 241, 0.5);
}

.btn-dramatic--ghost {
    /* Light mode: dark border and text */
    background: rgba(15, 23, 42, 0.05);
    color: #1E293B;
    border: 1px solid rgba(15, 23, 42, 0.2);
    backdrop-filter: blur(12px);
}

.btn-dramatic--ghost:hover {
    background: rgba(15, 23, 42, 0.1);
    border-color: rgba(15, 23, 42, 0.4);
}

/* Dark mode ghost button */
[data-theme="dark"] .btn-dramatic--ghost {
    background: rgba(255, 255, 255, 0.08);
    color: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

[data-theme="dark"] .btn-dramatic--ghost:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.4);
}

.btn-dramatic--large {
    padding: var(--space-4) var(--space-8);
    font-size: var(--font-size-lg);
}

.btn-dramatic svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    flex-shrink: 0;
}

/* Proof Stats Row */
.dramatic-hero__proof {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-6);
}

.proof-stat {
    text-align: center;
}

.proof-stat__number {
    display: block;
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    font-weight: 800;
    /* Light mode: dark text */
    color: #0F172A;
    letter-spacing: -0.02em;
}

[data-theme="dark"] .proof-stat__number {
    color: #FFFFFF;
}

.proof-stat__label {
    font-size: var(--font-size-sm);
    /* Light mode: muted dark */
    color: rgba(15, 23, 42, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

[data-theme="dark"] .proof-stat__label {
    color: rgba(255, 255, 255, 0.5);
}

.proof-stat__divider {
    width: 1px;
    height: 40px;
    /* Light mode: dark divider */
    background: rgba(15, 23, 42, 0.15);
}

[data-theme="dark"] .proof-stat__divider {
    background: rgba(255, 255, 255, 0.2);
}

/* ============ AI PROVIDERS SHOWCASE ============ */
.power-section {
    padding: var(--space-20) var(--space-4);
    background: var(--color-bg);
}

.section-intro {
    text-align: center;
    max-width: 700px;
    margin: 0 auto var(--space-12) auto;
}

.section-intro__eyebrow {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(236, 72, 153, 0.1));
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 700;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: var(--space-4);
}

.section-intro__title {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 800;
    color: var(--color-text-heading);
    margin: 0 0 var(--space-4) 0;
    letter-spacing: -0.02em;
}

.section-intro__desc {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    line-height: 1.7;
    margin: 0;
}

/* AI Provider Cards Grid */
.ai-providers-showcase {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-4);
    max-width: 1200px;
    margin: 0 auto;
}

.ai-provider-card {
    position: relative;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-5);
    text-align: center;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.ai-provider-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 0%, rgba(99, 102, 241, 0.03) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.ai-provider-card:hover {
    transform: translateY(-4px);
    border-color: var(--color-primary);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}

.ai-provider-card:hover::before {
    opacity: 1;
}

.ai-provider-card--featured {
    border-color: var(--color-primary);
    background: linear-gradient(135deg, var(--color-surface) 0%, rgba(99, 102, 241, 0.05) 100%);
}

.ai-provider-card__glow {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.1) 0%, transparent 70%);
    pointer-events: none;
}

.ai-provider-card__logo {
    width: 64px;
    height: 64px;
    margin: 0 auto var(--space-3);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(99, 102, 241, 0.1);
    border-radius: var(--radius-lg);
    color: var(--color-primary);
}

.ai-provider-card__logo--google { background: rgba(234, 67, 53, 0.1); color: #EA4335; }
.ai-provider-card__logo--anthropic { background: rgba(204, 119, 68, 0.1); color: #CC7744; }
.ai-provider-card__logo--xai { background: rgba(0, 0, 0, 0.08); color: #000000; }
.ai-provider-card__logo--mistral { background: rgba(255, 119, 0, 0.1); color: #FF7700; }
.ai-provider-card__logo--cohere { background: rgba(102, 51, 153, 0.1); color: #663399; }
.ai-provider-card__logo--together { background: rgba(34, 139, 230, 0.1); color: #228BE6; }

[data-theme="dark"] .ai-provider-card__logo--xai { background: rgba(255, 255, 255, 0.1); color: #FFFFFF; }

.ai-provider-card__logo svg {
    width: 40px;
    height: 40px;
}

.ai-provider-card__name {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-text-heading);
    margin: 0 0 var(--space-1) 0;
}

.ai-provider-card__model {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin: 0 0 var(--space-3) 0;
}

.ai-provider-card__stat {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: var(--space-1);
}

.ai-provider-card__stat .stat-number {
    font-size: var(--font-size-2xl);
    font-weight: 800;
    color: var(--color-primary);
    letter-spacing: -0.02em;
}

.ai-provider-card__stat .stat-label {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ============ NEW LANDING LAYOUT ============ */
.landing-hero {
    position: relative;
    padding: var(--space-20) var(--space-4) var(--space-16);
    background: linear-gradient(135deg, #F8FAFF 0%, #EEF2FF 50%, #E0E7FF 100%);
}

[data-theme="dark"] .landing-hero {
    background: linear-gradient(135deg, #0b0c11 0%, #111827 50%, #0b1120 100%);
}

.landing-hero__grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: var(--space-10);
    align-items: center;
}

.landing-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: rgba(15, 23, 42, 0.06);
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: var(--radius-full);
    color: rgba(15, 23, 42, 0.85);
    font-size: var(--font-size-sm);
    font-weight: 600;
    margin-bottom: var(--space-5);
}

[data-theme="dark"] .landing-hero__badge {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.92);
}

.landing-hero__title {
    font-size: clamp(2.5rem, 7vw, 4.25rem);
    line-height: 1.1;
    font-weight: 800;
    color: var(--color-text-heading, #0F172A);
    margin: 0 0 var(--space-4) 0;
    letter-spacing: -0.03em;
}

.landing-hero__subtitle {
    font-size: clamp(1.05rem, 2.3vw, 1.25rem);
    color: var(--color-text-secondary);
    line-height: 1.7;
    margin: 0 0 var(--space-5) 0;
}

.landing-hero__bullets {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-6) 0;
    display: grid;
    gap: var(--space-3);
}

.landing-hero__bullets li {
    display: flex;
    gap: var(--space-2);
    align-items: flex-start;
    font-weight: 600;
    color: var(--color-text-heading);
}

.landing-hero__bullets li::before {
    content: '•';
    color: var(--color-primary);
    font-size: 1.25rem;
    line-height: 1;
}

.landing-hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-bottom: var(--space-3);
}

.landing-hero__note {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.landing-hero__panel {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2xl);
    padding: var(--space-6);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
}

.panel-headline h3 {
    margin: var(--space-2) 0 var(--space-5) 0;
    color: var(--color-text-heading);
}

.landing-hero__metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}

.metric-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-4);
}

.metric-card__label {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-2);
}

.metric-card__value {
    display: block;
    font-weight: 800;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    color: var(--color-text-heading);
    margin-bottom: var(--space-1);
}

.metric-card__hint {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

/* Value section */
.value-section {
    padding: var(--space-18) var(--space-4);
    background: var(--color-bg-alt, #F8FAFC);
}

[data-theme="dark"] .value-section {
    background: #0f0f14;
}

.value-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-6);
    max-width: 1100px;
    margin: 0 auto;
}

/* Ops section */
.ops-section {
    padding: var(--space-18) var(--space-4);
    background: var(--color-bg);
}

.ops-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-4);
}

.ops-step {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-5);
    display: grid;
    gap: var(--space-2);
}

.ops-step__number {
    font-weight: 800;
    color: var(--color-primary);
    letter-spacing: 0.08em;
}

.ops-step__title {
    margin: 0;
    color: var(--color-text-heading);
}

.ops-step__desc {
    margin: 0;
    color: var(--color-text-secondary);
    line-height: 1.6;
}

.partner-section {
    padding: var(--space-18) var(--space-4);
    background: var(--color-bg-alt, #F8FAFC);
}

[data-theme="dark"] .partner-section {
    background: #0f0f14;
}

.power-section--alt {
    padding-top: var(--space-16);
}

/* Responsive tweaks */
@media (max-width: 1024px) {
    .landing-hero__grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .landing-hero {
        padding: var(--space-14) var(--space-4);
    }
    .landing-hero__metrics {
        grid-template-columns: 1fr;
    }
    .landing-hero__cta {
        justify-content: flex-start;
    }
    .value-section,
    .ops-section,
    .partner-section {
        padding: var(--space-14) var(--space-4);
    }
}

/* ============ TRANSFORM SECTION ============ */
.transform-section {
    padding: var(--space-20) var(--space-4);
    background: var(--color-bg-alt, #F8FAFC);
}

[data-theme="dark"] .transform-section {
    background: #0F0F14;
}

.transform-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
    max-width: 1200px;
    margin: 0 auto;
}

.transform-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2xl);
    padding: var(--space-8);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.transform-card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.1);
    transform: translateY(-4px);
}

.transform-card--large {
    grid-column: span 2;
}

.transform-card__icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
    border-radius: var(--radius-xl);
    margin-bottom: var(--space-5);
    color: #6366F1;
}

.transform-card__icon--audit { 
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(5, 150, 105, 0.1) 100%);
    color: #10B981;
}

.transform-card__icon--monitor {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(37, 99, 235, 0.1) 100%);
    color: #3B82F6;
}

.transform-card__icon--deploy {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.1) 0%, rgba(219, 39, 119, 0.1) 100%);
    color: #EC4899;
}

.transform-card__icon svg {
    width: 48px;
    height: 48px;
}

.transform-card__eyebrow {
    display: block;
    font-size: var(--font-size-xs);
    font-weight: 700;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: var(--space-2);
}

.transform-card__title {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 800;
    color: var(--color-text-heading);
    margin: 0 0 var(--space-3) 0;
    letter-spacing: -0.02em;
}

.transform-card__desc {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    line-height: 1.7;
    margin: 0;
}

.transform-card__features {
    list-style: none;
    padding: 0;
    margin: var(--space-5) 0 0 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-3);
}

.transform-card__features li {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.transform-card__features li::before {
    content: '';
    width: 20px;
    height: 20px;
    background: var(--color-success);
    border-radius: 50%;
    flex-shrink: 0;
    position: relative;
}

.transform-card__features li::after {
    content: '';
    position: absolute;
    width: 5px;
    height: 9px;
    border-right: 2px solid #FFFFFF;
    border-bottom: 2px solid #FFFFFF;
    transform: rotate(45deg);
    margin-left: 7px;
    margin-top: -2px;
}

/* ============ PROOF SECTION ============ */
.proof-section {
    padding: var(--space-20) var(--space-4);
    /* Light mode: elegant light blue gradient */
    background: linear-gradient(135deg, #F0F9FF 0%, #E0F2FE 50%, #BAE6FD 100%);
}

/* Dark mode: original dark gradient */
[data-theme="dark"] .proof-section {
    background: linear-gradient(135deg, #0a0a0f 0%, #1a1a2e 100%);
}

.proof-section__content {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.proof-section .section-intro__eyebrow {
    background: rgba(16, 185, 129, 0.15);
    border-color: rgba(16, 185, 129, 0.3);
    color: #10B981;
}

.proof-section .section-intro__title {
    /* Light mode: dark text */
    color: #0F172A;
}

[data-theme="dark"] .proof-section .section-intro__title {
    color: #FFFFFF;
}

.proof-section .section-intro__desc {
    /* Light mode: muted dark text */
    color: rgba(15, 23, 42, 0.7);
    margin-bottom: var(--space-10);
}

[data-theme="dark"] .proof-section .section-intro__desc {
    color: rgba(255, 255, 255, 0.7);
}

.live-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-10);
}

.live-stat {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    /* Light mode: white card with subtle shadow */
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: var(--radius-xl);
    padding: var(--space-5);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

/* Dark mode live stat card */
[data-theme="dark"] .live-stat {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: none;
}

.live-stat__icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(99, 102, 241, 0.1);
    border-radius: var(--radius-lg);
    color: #6366F1;
    flex-shrink: 0;
}

.live-stat__icon--green { background: rgba(16, 185, 129, 0.1); color: #10B981; }
.live-stat__icon--purple { background: rgba(139, 92, 246, 0.1); color: #8B5CF6; }
.live-stat__icon--orange { background: rgba(245, 158, 11, 0.1); color: #F59E0B; }

/* Dark mode icons - brighter backgrounds */
[data-theme="dark"] .live-stat__icon { background: rgba(99, 102, 241, 0.2); }
[data-theme="dark"] .live-stat__icon--green { background: rgba(16, 185, 129, 0.2); }
[data-theme="dark"] .live-stat__icon--purple { background: rgba(139, 92, 246, 0.2); }
[data-theme="dark"] .live-stat__icon--orange { background: rgba(245, 158, 11, 0.2); }

.live-stat__icon svg {
    width: 32px;
    height: 32px;
}

.live-stat__content {
    text-align: left;
}

.live-stat__number {
    display: block;
    font-size: var(--font-size-2xl);
    font-weight: 800;
    /* Light mode: dark text */
    color: #0F172A;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

[data-theme="dark"] .live-stat__number {
    color: #FFFFFF;
}

.live-stat__label {
    font-size: var(--font-size-sm);
    /* Light mode: muted dark */
    color: rgba(15, 23, 42, 0.6);
}

[data-theme="dark"] .live-stat__label {
    color: rgba(255, 255, 255, 0.5);
}

/* ============ DASHBOARD PREVIEW SECTION ============ */
.dashboard-preview-section {
    padding: var(--space-20) var(--space-4);
    background: var(--color-bg);
}

.dashboard-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--space-6);
    max-width: 1200px;
    margin: 0 auto;
}

.dashboard-feature {
    position: relative;
    padding: var(--space-6);
    padding-left: calc(var(--space-6) + 60px);
}

.dashboard-feature__number {
    position: absolute;
    left: 0;
    top: var(--space-6);
    font-size: var(--font-size-4xl);
    font-weight: 900;
    color: rgba(99, 102, 241, 0.15);
    line-height: 1;
    letter-spacing: -0.05em;
}

.dashboard-feature__title {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-text-heading);
    margin: 0 0 var(--space-2) 0;
}

.dashboard-feature__desc {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    line-height: 1.7;
    margin: 0;
}

/* ============ FINAL CTA SECTION ============ */
.final-cta-section {
    padding: var(--space-20) var(--space-4);
    background: linear-gradient(135deg, var(--color-bg-alt) 0%, var(--color-bg) 100%);
}

[data-theme="dark"] .final-cta-section {
    background: linear-gradient(135deg, #0F0F14 0%, #0a0a0f 100%);
}

.final-cta {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}

.final-cta__title {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 800;
    color: var(--color-text-heading);
    margin: 0 0 var(--space-4) 0;
    letter-spacing: -0.02em;
}

.final-cta__desc {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    line-height: 1.7;
    margin: 0 0 var(--space-8) 0;
}

.final-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    justify-content: center;
    margin-bottom: var(--space-6);
}

.final-cta__note {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.final-cta__note svg {
    width: 16px;
    height: 16px;
    color: var(--color-success);
}

/* ============ NEWSLETTER SECTION ENHANCEMENT ============ */
.newsletter-section {
    padding: var(--space-16) var(--space-4);
    background: var(--color-primary);
}

.newsletter-section__inner {
    max-width: 800px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--space-6);
    align-items: center;
}

.newsletter-section__icon {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-xl);
    color: #FFFFFF;
}

.newsletter-section__icon svg {
    width: 48px;
    height: 48px;
}

.newsletter-section__content {
    text-align: left;
}

.newsletter-section__eyebrow {
    display: block;
    font-size: var(--font-size-xs);
    font-weight: 700;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: var(--space-1);
}

.newsletter-section__content h2 {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: #FFFFFF;
    margin: 0 0 var(--space-1) 0;
}

.newsletter-section__content p {
    font-size: var(--font-size-base);
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
}

.newsletter-form {
    display: flex;
    gap: var(--space-2);
}

.newsletter-form__input-group {
    position: relative;
    flex: 1;
}

.newsletter-form__icon {
    position: absolute;
    left: var(--space-3);
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-muted);
    pointer-events: none;
}

.newsletter-form__input-group input {
    width: 100%;
    padding: var(--space-3) var(--space-4) var(--space-3) calc(var(--space-3) + 28px);
    background: #FFFFFF;
    border: none;
    border-radius: var(--radius-full);
    font-size: var(--font-size-base);
    color: var(--color-text);
}

.newsletter-form__input-group input::placeholder {
    color: var(--color-text-muted);
}

.newsletter-form__button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    background: rgba(0, 0, 0, 0.9);
    color: #FFFFFF;
    border: none;
    border-radius: var(--radius-full);
    font-size: var(--font-size-base);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.newsletter-form__button:hover {
    background: #000000;
    transform: translateY(-2px);
}

.newsletter-form__button svg {
    width: 18px;
    height: 18px;
}

/* ============ ANIMATIONS ============ */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ============ RESPONSIVE - DRAMATIC HOMEPAGE ============ */
@media (max-width: 1024px) {
    .transform-grid {
        grid-template-columns: 1fr;
    }
    
    .transform-card--large {
        grid-column: span 1;
    }
    
    .newsletter-section__inner {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .newsletter-section__icon {
        margin: 0 auto;
    }
    
    .newsletter-section__content {
        text-align: center;
    }
    
    .newsletter-form {
        flex-direction: column;
        max-width: 400px;
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    .dramatic-hero {
        min-height: auto;
        padding: 5rem var(--space-4) 3rem;
    }
    
    .dramatic-hero__cta {
        flex-direction: column;
        align-items: center;
    }
    
    .btn-dramatic {
        width: 100%;
        max-width: 280px;
        justify-content: center;
    }
    
    .dramatic-hero__proof {
        gap: var(--space-4);
    }
    
    .proof-stat__divider {
        display: none;
    }
    
    .proof-stat {
        flex: 1 1 45%;
    }
    
    .ai-providers-showcase {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .live-stats-grid {
        grid-template-columns: 1fr;
    }
    
    .dashboard-features {
        grid-template-columns: 1fr;
    }
    
    .dashboard-feature {
        padding-left: var(--space-6);
        padding-top: calc(var(--space-6) + 40px);
    }
    
    .dashboard-feature__number {
        top: var(--space-4);
        left: var(--space-4);
    }
    
    .power-section,
    .transform-section,
    .proof-section,
    .dashboard-preview-section,
    .final-cta-section {
        padding: var(--space-12) var(--space-4);
    }
}

@media (max-width: 480px) {
    .dramatic-hero__orb--1,
    .dramatic-hero__orb--2,
    .dramatic-hero__orb--3 {
        opacity: 0.3;
    }
    
    .ai-providers-showcase {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }
    
    .ai-provider-card {
        padding: var(--space-4);
    }
    
    .transform-card {
        padding: var(--space-5);
    }
    
    .transform-card__features {
        grid-template-columns: 1fr;
    }
    
    .live-stat {
        flex-direction: column;
        text-align: center;
    }
    
    .live-stat__content {
        text-align: center;
    }
}


/* ========== header-navigation.css ========== */
/* ========================================
   Site Header, Navigation, and Modals
   2025 Aurora Glass 2.0 Redesign v3.10.0
   Cross-browser Compatible (Chrome, Firefox, Safari, Edge)
   
   v3.10.0 Changes (2026-01-08):
   - CRITICAL FIX: Hamburger menu now visible in 960-1199px viewport range
   - FIX: Explicit media query rules for 960-1199px to prevent hamburger disappearing
   - FIX: High-specificity CSS guardrails ensure hamburger visibility across all tablet/laptop sizes
   - FIX: Comprehensive viewport testing: 320px, 480px, 768px, 960px, 1024px, 1200px, 1440px
   
   v3.9.1 Changes (2026-01-08):
   - FIX: Search toggle SVG icon no longer fills with solid color when active
   - FIX: Explicit `fill: none` and `stroke: currentColor` on SVG icons
   - FIX: White icon visible on primary background when search expanded
   
   v3.9.0 Changes (2026-01-08):
   - FIX: Search toggle no longer causes glitchy layout shift
   - FIX: Smooth animation for search row open/close using opacity+transform
   - FIX: All header buttons (search, subscribe, hamburger) visible at all screen sizes
   - FIX: Fixed search row positioning to prevent content jump
   
   v3.3.0 Changes (2025-12-18):
   - CRITICAL FIX: Primary nav now properly hidden on mobile/tablet (<960px)
   - FIX: Mobile navigation only shows when hamburger menu is clicked
   - FIX: No more double navigation (desktop nav + hamburger visible together)
   - FIX: Higher specificity rules ensure nav hiding works correctly
   
   v3.2.0 Changes (2025-12-18):
   - FIX: Search bar now ALWAYS visible on all screen sizes (with size adjustments)
   - FIX: Search design improved with better visibility and usability
   - FIX: Navbar optimized for all screen sizes (mobile, tablet, desktop)
   - FIX: Light mode text colors now use darker values for better readability
   
   v3.1.0 Changes:
   - Elegant mobile navbar with premium acrylic glassmorphism
   - Enhanced reading progress bar (6px, aurora gradient with glow)
   - Spring animation for navbar show/hide on scroll
   - Clean card-style menu items (no dark circles)
   - 52px touch targets for better mobile UX
   - Cross-browser consistency improvements
   ======================================== */

/* ============ CSS VARIABLES FOR HEADER NAVIGATION ============ */
:root {
    --search-expand-max-height: 80px;
    --search-transition-duration: 0.3s;
    --search-transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============ CSS RESET FOR CROSS-BROWSER ============ */
*,
*::before,
*::after {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.skip-link {
    position: absolute;
    top: -100px;
    left: 1rem;
    /* No gradients: keep the skip link high-contrast and consistent. */
    background: var(--color-primary);
    color: var(--color-text-inverse, #fff);
    padding: 0.75rem 1.25rem;
    border-radius: var(--radius-lg);
    z-index: 9999;
    font-weight: 600;
    -webkit-transition: top var(--transition-base);
    -moz-transition: top var(--transition-base);
    transition: top var(--transition-base);
}

.skip-link:focus {
    top: 1rem;
}

/* ============ SITE HEADER - FULL-WIDTH GLASSMORPHISM ============ */
/* Full-width navbar that spans entire viewport with glassmorphism effect */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    width: 100%;
    /* Allow the header to grow if mobile rows are used; prevents overflow collisions on <=319px. */
    height: auto;
    min-height: var(--header-height, 64px);
    background: rgba(var(--color-white-rgb), 0.85);
    border: none;
    border-bottom: 1px solid var(--color-border-subtle);
    border-radius: 0;
    box-shadow: 
        0 1px 3px rgba(var(--color-black-rgb), 0.04),
        0 4px 16px rgba(var(--color-black-rgb), 0.04);
    /* Smooth spring animation for show/hide */
    -webkit-transition: 
        transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), 
        opacity 0.3s ease,
        box-shadow 0.3s ease,
        background 0.3s ease;
        flex: 1;
        width: 100%;
        border: none !important;
        background: transparent !important;
        font-size: var(--font-size-sm);
        color: var(--color-text);
        outline: none;
        min-width: 0;
        /* Reserve space for the absolute icon button (44px) + left offset (6px) + generous gap.
           v6.0.10+: Users reported the magnifying glass visually crowding the placeholder.
           This guarantees clear separation at desktop widths. */
        padding: 0 12px 0 84px;
        padding-left: 84px !important;
        margin: 0;
        box-shadow: none !important;
        border-radius: 0 !important;
        /* Remove native search styling (inner bevel/box) on iOS/Safari/Chromium */
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        /* Visible text cursor area */
        caret-color: var(--color-primary);
        top: 46px;

    /* Remove WebKit search decorations that can look like a second "inner box" */
    .header-search__input::-webkit-search-decoration,
    .header-search__input::-webkit-search-cancel-button,
    .header-search__input::-webkit-search-results-button,
    .header-search__input::-webkit-search-results-decoration {
        -webkit-appearance: none;
        appearance: none;
        display: none;
    }
    }
}

/* Glassmorphism with backdrop blur */
@supports (backdrop-filter: blur(16px)) {
    .site-header {
        background: rgba(var(--color-white-rgb), 0.75);
        -webkit-backdrop-filter: blur(16px) saturate(180%);
        backdrop-filter: blur(16px) saturate(180%);
    }
}

@supports not ((backdrop-filter: blur(1px))) {
    .site-header {
        background: rgba(var(--color-white-rgb), 0.98);
    }
}

/* Elevated state when scrolled - enhanced glassmorphism */
.site-header.is-scrolled {
    background: rgba(var(--color-white-rgb), 0.9);
    box-shadow: 
        0 4px 24px rgba(var(--color-black-rgb), 0.08),
        0 1px 4px rgba(var(--color-black-rgb), 0.04);
}

@supports (backdrop-filter: blur(16px)) {
    .site-header.is-scrolled {
        background: rgba(var(--color-white-rgb), 0.8);
        -webkit-backdrop-filter: blur(20px) saturate(200%);
        backdrop-filter: blur(20px) saturate(200%);
    }
}

/* Hidden state - slides up and fades */
.site-header.is-hidden {
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
    /* Faster hide transition */
    -webkit-transition: 
        transform 0.25s ease-out, 
        opacity 0.2s ease-out;
    -moz-transition: 
        transform 0.25s ease-out, 
        opacity 0.2s ease-out;
    transition: 
        transform 0.25s ease-out, 
        opacity 0.2s ease-out;
}

/* Instant show transition when removing is-hidden class */
.site-header:not(.is-hidden) {
    -webkit-transition: 
        transform 0.15s ease-out, 
        opacity 0.1s ease-out,
        box-shadow 0.2s ease,
        background 0.2s ease;
    -moz-transition: 
        transform 0.15s ease-out, 
        opacity 0.1s ease-out,
        box-shadow 0.2s ease,
        background 0.2s ease;
    transition: 
        transform 0.15s ease-out, 
        opacity 0.1s ease-out,
        box-shadow 0.2s ease,
        background 0.2s ease;
}

/* Dark mode adjustments - enhanced glassmorphism */
[data-theme="dark"] .site-header {
    background: rgba(13, 13, 13, 0.85);
    border-color: rgba(var(--color-white-rgb), 0.08);
    box-shadow: 
        0 1px 3px rgba(0, 0, 0, 0.3),
        0 4px 16px rgba(0, 0, 0, 0.2);
}

@supports (backdrop-filter: blur(16px)) {
    [data-theme="dark"] .site-header {
        background: rgba(13, 13, 13, 0.75);
        -webkit-backdrop-filter: blur(16px) saturate(180%);
        backdrop-filter: blur(16px) saturate(180%);
    }
}

[data-theme="dark"] .site-header.is-scrolled {
    background: rgba(13, 13, 13, 0.9);
    box-shadow: 
        0 4px 24px rgba(0, 0, 0, 0.4),
        0 1px 4px rgba(0, 0, 0, 0.3);
}

@supports (backdrop-filter: blur(16px)) {
    [data-theme="dark"] .site-header.is-scrolled {
        background: rgba(13, 13, 13, 0.8);
        -webkit-backdrop-filter: blur(20px) saturate(200%);
        backdrop-filter: blur(20px) saturate(200%);
    }
}

/* ========================================
   Logo Modal (Quick Actions)
   Shows on hover/long-press of logo
   ======================================== */
.aiwp-logo-modal {
    position: fixed;
    z-index: 10001;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    pointer-events: none;
}

.aiwp-logo-modal.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.aiwp-logo-modal__content {
    background: rgba(255, 255, 255, 0.98);
    border-radius: 16px;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.12),
        0 2px 8px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
    padding: 8px;
    min-width: 180px;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
}

[data-theme="dark"] .aiwp-logo-modal__content {
    background: rgba(30, 30, 30, 0.98);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.4),
        0 2px 8px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.aiwp-logo-modal__item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 16px;
    border: none;
    background: transparent;
    border-radius: 10px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-primary, #1a1a1a);
    transition: background 0.15s ease, transform 0.1s ease;
    text-align: left;
}

.aiwp-logo-modal__item:hover {
    background: rgba(var(--color-primary-rgb, 0, 102, 204), 0.08);
}

.aiwp-logo-modal__item:active {
    transform: scale(0.98);
}

.aiwp-logo-modal__item svg {
    flex-shrink: 0;
    color: var(--color-primary, #0066cc);
}

[data-theme="dark"] .aiwp-logo-modal__item {
    color: var(--color-text-primary, #f0f0f0);
}

[data-theme="dark"] .aiwp-logo-modal__item:hover {
    background: rgba(255, 255, 255, 0.08);
}

/* Cursor hint for logo */
.branding__logo {
    cursor: pointer;
    transition: transform 0.2s ease;
}

.branding__logo:hover {
    transform: scale(1.02);
}

.branding__logo:active {
    transform: scale(0.98);
}

.site-header__inner {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    height: auto;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: clamp(var(--space-3), 2vw, var(--space-5)); /* Increased gap for better spacing */
    padding: clamp(var(--space-2), 1.2vh, var(--space-3)) clamp(var(--space-4), 3vw, var(--space-6)); /* More horizontal padding */
    min-height: 64px; /* Slightly taller for more presence */
    max-width: var(--max-width-container, 1600px);
    margin: 0 auto;
    width: 100%;
}

/* ============ NAVBAR REVAMP (MOBILE SEARCH + CTA) ============ */
/*
   Goals:
   - Prevent the header search from forcing awkward wrapping/clipping on mobile.
   - Keep navigation controls (logo + menu toggle + actions) on the first row.
   - Move search to its own row on mobile for a clean, touch-friendly layout.
   - Provide a visual hook for a single "Free Tools" CTA (no confusing duplicate "Tools").
*/
@media (max-width: 959px) {
    .site-header__inner {
        flex-wrap: wrap;
        align-items: center;
        row-gap: var(--space-2);
        padding: var(--space-2) var(--space-3); /* Better mobile padding */
    }

    /* First row: branding + nav toggle + actions */
    .branding {
        order: 1;
        flex: 1 1 auto;
        min-width: 0;
    }

    .site-header__actions {
        order: 2;
        margin-left: auto;
        flex: 0 0 auto;
    }

    /* Keep Subscribe accessible on mobile, but make it compact (icon-only) - REVAMPED v3.4.0 */
    .site-header__actions .newsletter-cta {
        width: 48px;
        height: 48px;
        padding: 0;
        border-radius: 14px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0;
        background: var(--color-primary);
        border: none;
        box-shadow: 0 2px 8px rgba(var(--color-primary-rgb), 0.3);
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        -webkit-tap-highlight-color: transparent;
    }

    .site-header__actions .newsletter-cta:hover {
        transform: scale(1.05);
        box-shadow: 0 4px 16px rgba(var(--color-primary-rgb), 0.4);
    }

    .site-header__actions .newsletter-cta:active {
        transform: scale(0.95);
    }

    .site-header__actions .newsletter-cta svg {
        width: 24px; /* Increased from 22px for better visibility */
        height: 24px;
        stroke-width: 2;
        stroke: #ffffff; /* Force white icon */
        display: block; /* Ensure it's not hidden */
    }

    .site-header__actions .newsletter-cta__label {
        display: none;
    }

    /* Second row: search (full width, but hidden by default; opened via magnifier) */
    /* FIXED v3.9.0: Use smooth animation instead of instant display change to prevent glitch */
    .header-search {
        order: 3;
        flex: 1 1 100%;
        width: 100%;
        max-width: none !important;
        min-width: 0 !important;
        margin: 0;
        /* Use max-height + opacity for smooth animation (height:auto can't animate) */
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        padding-top: 0;
        padding-bottom: 0;
        margin-top: 0;
        /* Smooth transition for closing */
        -webkit-transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                            opacity 0.2s ease-out, 
                            padding 0.3s ease,
                            margin 0.3s ease,
                            visibility 0s linear 0.3s;
        -moz-transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                         opacity 0.2s ease-out, 
                         padding 0.3s ease,
                         margin 0.3s ease,
                         visibility 0s linear 0.3s;
        transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                    opacity 0.2s ease-out, 
                    padding 0.3s ease,
                    margin 0.3s ease,
                    visibility 0s linear 0.3s;
    }

    .header-search.is-open {
        /* Expand smoothly using max-height */
        display: flex !important;
        max-height: var(--search-expand-max-height, 80px);
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        padding-top: 8px;
        padding-bottom: 0;
        margin-top: 4px;
        /* Transition for opening (visibility first) */
        -webkit-transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                            opacity 0.25s ease-out 0.05s, 
                            padding 0.3s ease,
                            margin 0.3s ease,
                            visibility 0s linear 0s;
        -moz-transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                         opacity 0.25s ease-out 0.05s, 
                         padding 0.3s ease,
                         margin 0.3s ease,
                         visibility 0s linear 0s;
        transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                    opacity 0.25s ease-out 0.05s, 
                    padding 0.3s ease,
                    margin 0.3s ease,
                    visibility 0s linear 0s;
    }

    .header-search__input {
        width: 100%;
        font-size: 14px;
        line-height: 1.2;
        padding: 12px 14px;
    }

    .header-search__icon {
        width: 16px;
        height: 16px;
    }
}

/* Single CTA inside the pill menu */
.primary-nav .menu .menu-item--cta > a {
    background: var(--color-primary);
    color: #fff;
    border-radius: var(--radius-full);
    font-weight: 800;
}

/* Blog standout styling - drives engagement */
/* DEFAULT: Bold text, no gradient - per AGENTS.md no-gradient policy */
.primary-nav .menu .menu-item--standout > a {
    background: transparent;
    color: var(--color-text) !important;
    border-radius: var(--radius-full);
    font-weight: 800;
    padding: 0.5rem 1rem !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.primary-nav .menu .menu-item--standout > a:hover,
.primary-nav .menu .menu-item--standout > a:focus {
    background: rgba(var(--color-primary-rgb), 0.1);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(var(--color-primary-rgb, 0, 102, 204), 0.2);
    color: var(--color-primary) !important;
}

/* ACTIVE STATE: Solid primary (no gradients) */
.primary-nav .menu .menu-item--standout.current-menu-item > a,
.primary-nav .menu .menu-item--standout.current_page_item > a,
.primary-nav .menu .menu-item--standout.current-menu-ancestor > a {
    background: transparent;
    color: var(--color-primary) !important;
    -webkit-text-fill-color: currentColor;
    font-weight: 800;
    position: relative;
}

/* Active state with underline indicator */
.primary-nav .menu .menu-item--standout.current-menu-item > a::after,
.primary-nav .menu .menu-item--standout.current_page_item > a::after,
.primary-nav .menu .menu-item--standout.current-menu-ancestor > a::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 3px;
    background: var(--color-primary);
    border-radius: 2px;
}

/* ============ NAV DROPDOWN (Platform → Free Tools) ============ */
/* If Free Tools is nested under Platform, ensure it renders as a clean dropdown on desktop. */
@media (min-width: 960px) {
    .primary-nav .menu > li {
        position: relative;
    }

    .primary-nav .menu > li.menu-item-has-children > a::after {
        content: "\25BE"; /* small down triangle */
        font-size: 0.85em;
        margin-left: 0.45rem;
        opacity: 0.7;
    }

    .primary-nav .menu .sub-menu {
        position: absolute;
        top: calc(100% + 10px);
        left: 0;
        min-width: 220px;
        padding: 0.5rem;
        margin: 0;
        list-style: none;
        background: var(--color-surface, #fff);
        border: 1px solid var(--color-border, #e0e0e0);
        border-radius: 14px;
        box-shadow: 0 18px 36px rgba(var(--color-black-rgb), 0.14);
        display: none;
        z-index: 1005;
    }

    .primary-nav .menu > li:hover > .sub-menu,
    .primary-nav .menu > li:focus-within > .sub-menu {
        display: block;
    }

    .primary-nav .menu .sub-menu a {
        display: flex;
        align-items: center;
        width: 100%;
        min-height: var(--touch-target-min, 44px);
        padding: 0.65rem 0.75rem;
        border-radius: 12px;
        text-decoration: none;
        font-weight: 600;
        color: var(--color-text);
        transition: background 0.18s ease, color 0.18s ease;
        white-space: nowrap;
    }

    .primary-nav .menu .sub-menu a:hover,
    .primary-nav .menu .sub-menu a:focus {
        background: rgba(var(--color-black-rgb), 0.04);
        color: var(--color-text);
        outline: none;
    }

    /* CTA inside dropdown: keep it distinct but not oversized */
    .primary-nav .menu .sub-menu .menu-item--cta > a {
        background: var(--color-primary);
        color: #fff;
        justify-content: center;
    }

    .primary-nav .menu .sub-menu .menu-item--cta > a:hover,
    .primary-nav .menu .sub-menu .menu-item--cta > a:focus {
        background: var(--color-primary-hover);
        color: #fff;
    }
}

/* Mobile menu panel: show sub-menus inline (no hover) */
@media (max-width: 959px) {
    /* CRITICAL: Sub-menu must display as block, not flex (which comes from parent .menu rules) */
    .primary-nav.is-open .sub-menu,
    .primary-nav.is-open .menu .sub-menu,
    .primary-nav.is-open ul.sub-menu {
        display: block !important;
        flex-direction: column !important;
        position: static !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0.5rem 0 0.5rem 0 !important;
        margin: 0 !important;
        list-style: none !important;
    }

    /* Submenu items - SAME indentation as parent items (no indent) */
    .primary-nav.is-open .sub-menu > li {
        list-style: none !important;
        margin-left: 0 !important;
        padding-left: 0 !important;
    }

    /* Submenu links - SAME styling as parent items for visual consistency */
    .primary-nav.is-open .sub-menu a {
        display: flex;
        align-items: center;
        min-height: var(--touch-target-min, 44px);
        gap: var(--space-3);
        padding: var(--space-3) var(--space-4);
        border-radius: 12px;
        border-left: none !important;
        background: transparent;
        font-size: 1rem;
        font-weight: 500;
        color: var(--color-text);
        transition: all 0.2s ease;
        min-height: 48px;
    }

    .primary-nav.is-open .sub-menu a:hover,
    .primary-nav.is-open .sub-menu a:focus {
        background: rgba(var(--color-primary-rgb), 0.06);
        border-left-color: var(--color-primary);
        color: var(--color-primary);
    }

    /* CTA item in submenu (Free Tools) */
    .primary-nav.is-open .sub-menu .menu-item--cta > a {
        color: var(--color-primary);
        font-weight: 600;
        border-left-color: var(--color-primary);
    }

    /* Blog standout in mobile nav - DEFAULT: bold, no gradient */
    .primary-nav.is-open .menu .menu-item--standout > a,
    .primary-nav.is-open .menu > li.menu-item--standout > a {
        background: transparent !important;
        color: var(--color-text) !important;
        border-radius: 12px !important;
        border: 1.5px solid var(--color-border) !important;
        font-weight: 700 !important;
        margin: var(--space-2) 0 !important;
        padding: var(--space-3) var(--space-4) !important;
        -webkit-text-fill-color: var(--color-text) !important;
    }

    .primary-nav.is-open .menu .menu-item--standout > a:hover,
    .primary-nav.is-open .menu .menu-item--standout > a:focus,
    .primary-nav.is-open .menu > li.menu-item--standout > a:hover,
    .primary-nav.is-open .menu > li.menu-item--standout > a:focus {
        background: rgba(var(--color-primary-rgb), 0.1) !important;
        color: var(--color-primary) !important;
        -webkit-text-fill-color: var(--color-primary) !important;
        border-color: var(--color-primary) !important;
        transform: none !important;
    }

    /* Blog standout ACTIVE state in mobile nav - PRIMARY COLOR with accent border */
    /* Using solid color instead of gradient text for better mobile compatibility */
    .primary-nav.is-open .menu .menu-item--standout.current-menu-item > a,
    .primary-nav.is-open .menu .menu-item--standout.current_page_item > a,
    .primary-nav.is-open .menu > li.menu-item--standout.current-menu-item > a,
    .primary-nav.is-open .menu > li.menu-item--standout.current_page_item > a {
        background: rgba(var(--color-primary-rgb), 0.12) !important;
        color: var(--color-primary) !important;
        -webkit-text-fill-color: var(--color-primary) !important;
        border-color: var(--color-primary) !important;
        border-width: 2px !important;
        font-weight: 800 !important;
        box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.15) !important;
    }
}

.primary-nav .menu .menu-item--cta > a:hover,
.primary-nav .menu .menu-item--cta > a:focus {
    background: var(--color-primary-hover, var(--color-primary));
    color: #fff;
}

/* ============ MID-SIZE DESKTOP SAFETY (prevents overlap at ~1200–1280px) ============ */
@media (max-width: 1280px) and (min-width: 960px) {
    .site-header__inner {
        gap: var(--space-3);
        padding: var(--space-2) var(--space-4);
        min-height: 56px;
    }

    /* Allow middle region to shrink instead of overlapping actions */
    .header-search {
        min-width: 140px;
        max-width: 220px;
        padding: var(--space-2) var(--space-3);
    }

    .primary-nav {
        min-width: 0;
    }

    .primary-nav .menu {
        gap: 0;
        padding: var(--space-1);
    }

    .primary-nav .menu > li > a {
        padding: var(--space-2) var(--space-3);
    }

    .site-header__actions {
        gap: var(--space-2);
    }

    .theme-toggle {
        min-width: 72px;
        padding: var(--space-2) var(--space-2);
    }

    .newsletter-cta {
        padding: var(--space-2) var(--space-4);
    }
}

/* ============ NARROW DESKTOP SAFETY (prevents overlap at ~1000–1200px like 1237x796) ============ */
@media (max-width: 1250px) and (min-width: 960px) {
    .site-header__inner {
        gap: var(--space-2);
        padding: var(--space-2) var(--space-3);
        min-height: 52px;
    }

    /* Shrink search bar further */
    .header-search {
        min-width: 100px;
        max-width: 180px;
        padding: var(--space-2);
    }

    .header-search__input {
        font-size: 13px;
    }

    /* Compress navigation - KEEP CENTERING v3.6.0 */
    .primary-nav .menu {
        gap: 0;
        padding: 2px 8px;
        /* Retain centered content even without pill styling */
        justify-content: center !important;
        align-items: center !important;
        background: var(--color-surface-alt, #f5f5f5);
        border: 1px solid var(--color-border, #e0e0e0);
        border-radius: var(--radius-full, 24px);
    }

    .primary-nav .menu > li > a {
        padding: var(--space-1) var(--space-2);
        font-size: 13px;
    }

    /* Compact actions */
    .site-header__actions {
        gap: var(--space-1);
    }

    .theme-toggle {
        min-width: 64px;
        padding: 6px 8px;
        height: 36px;
    }

    .theme-toggle__label {
        font-size: 12px;
    }

    .newsletter-cta {
        padding: 6px 12px;
        font-size: 13px;
    }

    .branding__title {
        font-size: 1.1rem;
    }
}

/* ============ FIX: Horizontal Tablet Search Visibility (768-960px) ============ */
/* UPDATED v3.9.0: Use same smooth animation as mobile for consistency */
@media (max-width: 959px) and (min-width: 768px) {
    .header-search {
        /* Use max-height for smooth animation, NOT display:none */
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        visibility: hidden;
        /* When opened, it should be its own full-width row */
        max-width: none !important;
        min-width: 0 !important;
        order: 3;
        width: 100% !important;
        -webkit-transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease-out, visibility 0s linear 0.3s;
        -moz-transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease-out, visibility 0s linear 0.3s;
        transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease-out, visibility 0s linear 0.3s;
    }

    .header-search.is-open {
        display: flex !important;
        max-height: var(--search-expand-max-height, 80px);
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        -webkit-transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease-out 0.05s, visibility 0s linear 0s;
        -moz-transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease-out 0.05s, visibility 0s linear 0s;
        transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease-out 0.05s, visibility 0s linear 0s;
    }
    
    .header-search__input {
        font-size: 13px;
    }
    
    .header-search__icon {
        width: 16px;
        height: 16px;
    }
    
    /* Ensure navbar text and hamburger icon are visible */
    .nav-toggle {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Ensure primary nav is properly hidden until toggled */
    .primary-nav:not(.is-open) {
        display: none;
    }
    
    /* Ensure branding text is visible */
    .branding__title {
        display: block !important;
        font-size: 1rem;
    }
}

.site-header__actions {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: var(--space-3);
    margin-left: auto;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    /* Ensure actions never wrap or overlap */
    white-space: nowrap;
    position: relative;
    z-index: 1;
}

/* ============ BRANDING ============ */
/* SMART VISIBILITY v5.1.0: Logo and title adapt to accent color via luminance detection */
.branding {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-shrink: 0;
}

.branding__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.branding__link {
    display: inline-flex;
    align-items: center;
    min-height: var(--touch-target-min, 44px);
    color: inherit;
    text-decoration: none;
    transition: all var(--transition-fast);
}

.branding__link:hover,
.branding__link:focus {
    opacity: 0.9;
    transform: translateY(-1px);
}

/* ===== SMART BRANDING TITLE: Uses accent color with luminance-aware contrast ===== */
.branding__title {
    font-size: 1.25rem !important;
    font-weight: 800 !important;
    margin: 0 !important;
    /* No gradients: solid primary with a subtle glow for depth */
    color: var(--color-primary, #0066CC) !important;
    -webkit-text-fill-color: currentColor !important;
    letter-spacing: -0.02em !important;
    transition: all var(--transition-base) !important;
    text-shadow: 0 1px 0 rgba(var(--color-black-rgb), 0.08);
}

/* Hover: increase glow (no shimmer gradient) */
.branding__link:hover .branding__title,
.branding a:hover .branding__title {
    text-shadow: 0 0 18px rgba(var(--color-primary-rgb), 0.35);
}

.branding__tagline {
    margin: 0;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    white-space: nowrap;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.branding a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    color: inherit;
    text-decoration: none;
}

/* ===== ELEGANT LOGO: Modern EC monogram (NO gradients) ===== */
.branding__logo {
    color: var(--color-primary);
    flex-shrink: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    /* Enhanced glow effect */
    filter: drop-shadow(0 0 8px rgba(var(--color-primary-rgb), 0.25));
}

.branding__logo:hover {
    filter: drop-shadow(0 0 16px rgba(var(--color-primary-rgb), 0.45));
    transform: translateY(-1px) scale(1.03);
}

.branding__logo svg {
    display: block;
    fill: none;
    stroke: var(--color-primary);
    overflow: visible;
}

/* Logo stroke elements use current color */
.branding__logo svg g {
    stroke: var(--color-primary);
}

/* Animated logo dots - subtle pulse */
.branding__logo .logo-dot {
    animation: logoDotPulse 2s ease-in-out 3;
}

.branding__logo .logo-dot-1 { animation-delay: 0s; }
.branding__logo .logo-dot-2 { animation-delay: 0.3s; }
.branding__logo .logo-dot-3 { animation-delay: 0.6s; }

@keyframes logoDotPulse {
    0%, 100% { opacity: 0.7; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.2); }
}

/* Disable dot animation on reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .branding__logo .logo-dot {
        animation: none;
    }
}

.branding .custom-logo-link img {
    max-height: 40px;
    width: auto;
}

/* ===== DARK MODE: Branding adjustments ===== */
[data-theme="dark"] .branding__title {
    /* No gradients: use a lighter solid accent for dark mode readability */
    color: var(--color-primary-light, #60a5fa) !important;
    -webkit-text-fill-color: currentColor !important;
}

[data-theme="dark"] .branding__logo {
    color: var(--color-primary-light, #60a5fa);
    filter: drop-shadow(0 0 12px rgba(96, 165, 250, 0.4));
}

[data-theme="dark"] .branding__logo svg {
    stroke: var(--color-primary-light, #60a5fa);
}

[data-theme="dark"] .branding__logo svg g {
    stroke: var(--color-primary-light, #60a5fa);
}

/* Ensure dots remain visible in dark mode (solid) */
[data-theme="dark"] .branding__logo .logo-dot {
    opacity: 0.9;
}

/* ============ SEARCH - DESKTOP ONLY (>= 960px) v3.4.1 FIX ============ */
/* On mobile (<960px), search is hidden by default and shown via toggle button */
/* This rule MUST be wrapped in a media query to not override mobile hidden state */
@media (min-width: 960px) {
    .header-search {
        display: flex !important;
        align-items: center;
        gap: 0;
        /* Tighter pill on desktop: less wasted space, more usable input width */
        padding: 9px 12px;
        min-height: var(--touch-target-min, 44px);
        /* Borderless elegant design: light gray background, no border */
        background: var(--color-surface-alt, #f5f5f5);
        border: none;
        border-radius: var(--radius-full);
        position: relative;
        /* v6.0.11: The search placeholder was truncating ("Search arti") and felt cramped.
           Give it more room on desktop while still allowing shrink when nav needs space. */
        width: clamp(220px, 18vw, 340px);
        min-width: 220px;
        max-width: 340px;
        transition: all var(--transition-base);
        flex-shrink: 1;
    }
}

/* Desktop search button (inside the search pill) */
@media (min-width: 960px) {
    /* Desktop search icon button MUST be out-of-flow.
       Some plugins/global resets set button { position: relative; } which can
       shrink the input and create cross-viewport inconsistencies. */
    .site-header .header-search__button {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: var(--touch-target-min, 44px) !important;
        height: var(--touch-target-min, 44px) !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        background: transparent !important;
        color: var(--color-text-muted);
        cursor: pointer;
        border-radius: var(--radius-md);
        position: absolute !important;
        left: 10px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        flex: 0 0 auto !important;
    }

    .site-header .header-search__button:hover {
        color: var(--color-text);
    }

    .site-header .header-search__button:active {
        transform: translateY(-50%) scale(0.98) !important;
    }

    .header-search:hover {
        background: var(--color-surface-alt, #eeeeee);
        box-shadow: 0 2px 10px rgba(var(--color-black-rgb), 0.08);
    }

    .header-search:focus-within {
        background: var(--color-surface, #fff);
        box-shadow:
            0 0 0 2px var(--color-primary-15, rgba(0, 102, 204, 0.15)),
            0 2px 12px rgba(var(--color-black-rgb), 0.10);
    }

    .header-search__icon {
        color: var(--color-text-muted);
        flex-shrink: 0;
        width: 18px;
        height: 18px;
        display: block;
        transform: translateY(1px);
    }

    .site-header .header-search__input {
        flex: 1;
        width: 100%;
        border: none !important;
        background: transparent !important;
        font-size: var(--font-size-sm);
        color: var(--color-text);
        outline: none;
        min-width: 0;
          /* v6.0.11: Keep a clear gap from the icon without pushing placeholder too far right.
              Button is 44px wide and sits at left:10px; 66px gives ~12px visual breathing room. */
          padding: 0 12px 0 66px;
          padding-left: 66px !important;
        margin: 0;
        box-shadow: none !important;
        border-radius: 0 !important;
        /* Remove native search styling (inner bevel/box) on iOS/Safari/Chromium */
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        /* Visible text cursor area */
        caret-color: var(--color-primary);
    }

    /* Remove WebKit search decorations that can look like a second "inner box" */
    .site-header .header-search__input::-webkit-search-decoration,
    .site-header .header-search__input::-webkit-search-cancel-button,
    .site-header .header-search__input::-webkit-search-results-button,
    .site-header .header-search__input::-webkit-search-results-decoration {
        -webkit-appearance: none;
        appearance: none;
        display: none;
    }

    .site-header .header-search__input::placeholder {
        color: var(--color-text-muted);
    }
}

/* ============ SEARCH - MOBILE/TABLET (<= 959px) ============ */
/* On mobile/tablet the search row is hidden until toggled. When open, it must still look like a single pill
   and show a clear focus affordance on the container (not the input itself). */
@media (max-width: 959px) {
    .header-search.is-open {
        display: flex !important;
        align-items: center;
        gap: 0;
        padding: 10px 12px;
        background: var(--color-surface, #fff);
        border: 1px solid rgba(var(--color-black-rgb), 0.14);
        border-radius: var(--radius-full);
        box-shadow: 0 2px 10px rgba(var(--color-black-rgb), 0.08);
    }

    .header-search.is-open:focus-within {
        border-color: var(--color-primary);
        box-shadow:
            0 0 0 3px var(--color-primary-15, rgba(0, 102, 204, 0.15)),
            0 2px 12px rgba(var(--color-black-rgb), 0.10);
    }

    .header-search__input {
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
        background: transparent !important;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }

    .header-search__input::-webkit-search-decoration,
    .header-search__input::-webkit-search-cancel-button,
    .header-search__input::-webkit-search-results-button,
    .header-search__input::-webkit-search-results-decoration {
        -webkit-appearance: none;
        appearance: none;
        display: none;
    }
}

/* ============ MOBILE: Hide desktop search button, show toggle button ============ */
@media (max-width: 959px) {
    /* Hide the in-pill search button on mobile (we use the toggle instead) */
    .header-search__button {
        display: none !important;
    }
}

/* CRITICAL FIX: Ensure mobile search toggle is HIDDEN on desktop */
@media (min-width: 960px) {
    .header-search-toggle {
        display: none !important;
    }
}

/* Mobile/tablet search toggle button (in header actions) - REVAMPED v3.4.1 */
/* Default: hidden on desktop, shown on mobile */
.header-search-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--color-surface);
    border: 1.5px solid var(--color-border);
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(var(--color-black-rgb), 0.06);
    -webkit-tap-highlight-color: transparent;
    color: var(--color-text); /* Ensure icon has a color */
}

.header-search-toggle svg {
    width: 24px;
    height: 24px;
    stroke-width: 2;
    stroke: currentColor;
    fill: none; /* FIX: Prevent SVG from filling with solid color */
    display: block;
    transform: translateY(1px);
    -webkit-transition: stroke 0.2s ease, fill 0.2s ease;
    -moz-transition: stroke 0.2s ease, fill 0.2s ease;
    transition: stroke 0.2s ease, fill 0.2s ease;
}

.header-search-toggle:hover {
    background: rgba(var(--color-primary-rgb), 0.08);
    border-color: var(--color-primary);
    color: var(--color-primary);
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(var(--color-primary-rgb), 0.2);
}

.header-search-toggle:hover svg {
    stroke: var(--color-primary);
    fill: none;
}

.header-search-toggle:active {
    transform: scale(0.95);
}

.header-search-toggle[aria-expanded="true"] {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
    box-shadow: 0 4px 16px rgba(var(--color-primary-rgb), 0.35);
}

/* FIX v3.9.1: Ensure SVG icon remains visible (white stroke, no fill) when search is active */
.header-search-toggle[aria-expanded="true"] svg {
    stroke: #FFFFFF;
    fill: none;
}

/* ============ SEARCH RESULTS DROPDOWN ============ */
/* Note: .search-results class is also used as body class by WordPress on search pages
   Make this selector specific to the header search dropdown only */
.header-search .search-results,
.site-header .search-results {
    position: absolute;
    top: calc(100% + var(--space-2));
    left: 0;
    right: 0;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-xl);
    max-height: 400px;
    overflow-y: auto;
          /* Reserve space for the absolute icon button (44px) + left offset (6px) + generous gap.
              v6.0.10+ FIX: Users reported the magnifying glass visually crowding the placeholder;
              we enforce a larger left padding here to guarantee clear separation. */
          padding: 0 12px 0 84px;
          padding-left: 84px !important;

.search-result {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-3);
    border-bottom: 1px solid var(--color-border);
    text-decoration: none;
    color: var(--color-text);
    transition: background var(--transition-fast);
}

.search-result:hover,
.search-result:focus-visible {
    background: var(--color-surface-alt);
}

.search-result:last-child {
    border-bottom: none;
}

.search-result__thumb {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

.search-result__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.search-result__title {
    font-weight: 700;
    font-size: var(--font-size-sm);
    color: var(--color-text-heading, var(--color-text));
}

.search-result__excerpt {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    line-height: var(--line-height-tight);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.search-no-results {
    padding: var(--space-6) var(--space-4);
    text-align: center;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

/* ============ PRIMARY NAVIGATION ============ */
.primary-nav {
    position: relative;
    display: flex;
    align-items: center;
    /* Allow nav to shrink between search + actions (prevents overlap) */
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center;
}

/* CRITICAL: Desktop navigation - horizontal flex layout without bullets */
/* IMPORTANT: Keep this scoped to >=960px so it does NOT override mobile drawer layout. */
@media (min-width: 960px) {
    .primary-nav .menu,
    nav.primary-nav ul.menu,
    #primary-navigation .menu,
    #primary-navigation ul {
            display: flex !important;
            flex-direction: row !important;
            flex-wrap: nowrap !important;
            /* CENTER the menu items within the pill container - CRITICAL FIX v3.6.0 */
            justify-content: center !important;
            align-items: center !important;
            gap: var(--space-1);
            margin: 0 !important;
              /* Extra inline padding prevents the last label from appearing clipped
                  against the rounded container (especially near breakpoints/zoom). */
              padding: var(--space-1) var(--space-2);
              scroll-padding-inline: var(--space-2);
            max-width: 100%;
            min-width: 0;
            overflow-x: auto;
            overflow-y: hidden;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior-x: contain;
            scrollbar-width: none;
            list-style: none !important;
        list-style-type: none !important;
        border-radius: var(--radius-full);
        background: var(--color-surface-alt);
        border: 1px solid var(--color-border);
    }
}

/* Hide scrollbar (WebKit) while keeping scroll accessible */
.primary-nav .menu::-webkit-scrollbar {
    display: none;
}

/* Additional specificity for stubborn browsers (desktop only) */
@media (min-width: 960px) {
    nav#primary-navigation ul#primary-menu.menu {
        display: flex !important;
        flex-direction: row !important;
        list-style: none !important;
        list-style-type: none !important;
        margin: 0 !important;
        padding: var(--space-1) var(--space-2) !important;
    }
}

/* ============ CRITICAL: MOBILE/TABLET RESPONSIVE FIX (< 960px) ============ */
/* Hide primary navigation by default on mobile/tablet - show via hamburger only */
@media (max-width: 959px) {
    /* Hide the primary navigation container entirely until toggled */
    .primary-nav:not(.is-open) {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        position: absolute !important;
        left: -9999px !important;
    }
}

.primary-nav .menu > li {
    position: relative;
}

.primary-nav .menu > li > a {
    display: inline-flex;
    align-items: center;
    min-height: var(--touch-target-min, 44px);
    padding: var(--space-2) var(--space-4);
    font-weight: 500;
    font-size: var(--font-size-sm);
    border-radius: var(--radius-full);
    color: var(--color-text-nav, var(--color-text-secondary));
    text-decoration: none;
    white-space: nowrap;
    transition: all var(--transition-fast);
    position: relative;
}

.primary-nav .menu > li > a:hover,
.primary-nav .menu > li > a:focus {
    color: var(--color-primary);
    background: var(--color-surface);
    box-shadow: var(--shadow-xs);
}

.primary-nav .menu > li > a:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Active menu items: SOLID primary (no gradients)
   Rationale: gradients render inconsistently across engines and differ between
   desktop vs mobile nav layouts. Solid tokens keep color consistent everywhere. */
.primary-nav .menu > li.current-menu-item > a,
.primary-nav .menu > li.current_page_item > a,
.primary-nav .menu > li.current-menu-ancestor > a {
    background: transparent !important;
    color: var(--color-primary) !important;
    -webkit-text-fill-color: currentColor !important;
    font-weight: 700;
    position: relative;
    box-shadow: none !important;
}

/* Underline for all active menu items (solid) */
.primary-nav .menu > li.current-menu-item > a::after,
.primary-nav .menu > li.current_page_item > a::after,
.primary-nav .menu > li.current-menu-ancestor > a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70%;
    height: 2px;
    background: var(--color-primary);
    border-radius: 2px;
}

/* ============ SMART COMPACT NAV (JS-driven) ============
   When the header would overlap (mid-size desktop, long menus, zoom), we switch to
   a compact mode that uses the mobile overlay menu pattern even on desktop.
   
   CRITICAL FIX v3.7.0: Added !important to ensure hamburger shows in compact mode
   at ALL viewport widths (960px-1440px+). Without !important, the media query rules
   at lines 2898+ were overriding this rule due to cascade order. */
.site-header.aiwp-header-compact .nav-toggle {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.site-header.aiwp-header-compact .site-header__actions > .newsletter-cta {
    display: none !important;
}

.site-header.aiwp-header-compact .primary-nav {
    position: fixed;
    top: var(--header-height, 76px);
    right: var(--space-4);
    left: var(--space-4);
    padding: var(--space-4);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border);
    display: none;
    z-index: 999;
    max-height: calc(100vh - (var(--header-height, 76px) + 24px));
    overflow-y: auto;
    transform: translateY(-16px) scale(0.96);
    opacity: 0;
    transition:
        transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
        opacity 0.28s ease-out;
}

.site-header.aiwp-header-compact .primary-nav.is-open {
    display: block;
    transform: translateY(0) scale(1);
    opacity: 1;
}

@supports (backdrop-filter: blur(16px)) {
    .site-header.aiwp-header-compact .primary-nav {
        -webkit-backdrop-filter: blur(16px) saturate(180%);
        backdrop-filter: blur(16px) saturate(180%);
    }
}

:root:not([data-theme="dark"]) .site-header.aiwp-header-compact .primary-nav,
:root[data-theme="light"] .site-header.aiwp-header-compact .primary-nav {
    background: rgba(var(--color-white-rgb), 0.92);
    box-shadow:
        0 8px 32px rgba(var(--color-black-rgb), 0.12),
        0 4px 16px rgba(var(--color-black-rgb), 0.08);
}

:root[data-theme="dark"] .site-header.aiwp-header-compact .primary-nav {
    background: rgba(13, 13, 13, 0.92);
    box-shadow:
        0 8px 32px rgba(var(--color-black-rgb), 0.42),
        0 4px 16px rgba(var(--color-black-rgb), 0.24);
}

.site-header.aiwp-header-compact .primary-nav .menu {
    flex-direction: column !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    gap: var(--space-2);
    overflow: visible;
}

.site-header.aiwp-header-compact .primary-nav .menu > li > a {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: flex-start;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-text);
    background: transparent;
    border: 1px solid var(--color-border);
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    min-height: 52px;
}

.site-header.aiwp-header-compact .primary-nav .menu > li > a:hover,
.site-header.aiwp-header-compact .primary-nav .menu > li > a:focus {
    color: var(--color-primary);
    background: var(--color-primary-10);
    border-color: var(--color-primary);
    transform: translateX(6px);
    box-shadow: 0 4px 16px var(--color-primary-15);
}

.site-header.aiwp-header-compact .primary-nav .menu > li.current-menu-item > a {
    color: var(--color-primary);
    background: var(--color-primary-10);
    border-color: var(--color-primary);
    font-weight: 600;
}

.site-header.aiwp-header-compact .primary-nav.is-open .newsletter-cta.newsletter-cta--mobile {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: var(--space-4);
    padding: var(--space-4) var(--space-5);
    border-radius: 14px;
    background: var(--color-primary);
    color: var(--color-text-inverse, #fff);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    min-height: 52px;
    box-shadow: 0 2px 12px var(--color-primary-25);
    border: none;
    cursor: pointer;
    transition: all 0.25s ease;
}

.site-header.aiwp-header-compact .primary-nav.is-open .newsletter-cta.newsletter-cta--mobile:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 36px var(--color-primary-45);
    background: var(--color-primary-hover);
}

/* ============ NEWSLETTER CTA (Mobile Dropdown) ============ */
/* Mobile subscribe button - hidden by default, shown only in mobile dropdown */
.newsletter-cta.newsletter-cta--mobile {
    display: none !important;
}

/* Show mobile subscribe only when nav is open on mobile */
@media (max-width: 959px) {
    .primary-nav.is-open .newsletter-cta.newsletter-cta--mobile {
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: var(--space-2);
        width: 100%;
        margin-top: var(--space-4);
        padding: var(--space-3) var(--space-4);
        /* No gradients: consistent solid primary */
        background: var(--color-primary);
        color: var(--color-text-inverse, #fff);
        border: none;
        border-radius: var(--radius-lg);
        font-weight: 600;
        font-size: var(--font-size-sm);
        cursor: pointer;
        transition: all var(--transition-base);
        box-shadow: var(--shadow-sm);
    }
    
    .primary-nav.is-open .newsletter-cta--mobile:hover {
        box-shadow: var(--shadow-glow-primary);
        transform: translateY(-1px);
    }
}

/* ============ THEME TOGGLE ============ */
.theme-controls {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    position: relative;
}

/* Make the controls cluster feel like a single smart unit */
@supports (background: color-mix(in srgb, white 50%, black)) {
    .theme-controls {
        padding: 2px;
        border-radius: var(--radius-full);
        background: color-mix(in srgb, var(--color-surface) 70%, var(--color-surface-alt));
        border: 1px solid var(--color-border-subtle);
    }
}

.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    min-width: 80px;
    height: 40px;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    cursor: pointer;
    transition: all var(--transition-fast);
    font-size: var(--font-size-sm);
    font-weight: 500;
    position: relative;
    overflow: hidden;
}

/* Active state when dark mode is enabled - cool moon accent */
.theme-toggle[aria-pressed="true"] {
    background: #0f172a;
    color: #93c5fd;
    border: 2px solid #3b82f6;
    box-shadow: 0 2px 12px rgba(59, 130, 246, 0.35);
}

.theme-toggle[aria-pressed="true"]:hover {
    background: #1e3a8a;
    border-color: #60a5fa;
    box-shadow: 0 4px 20px rgba(96, 165, 250, 0.45);
}

/* Light mode state (default) - warm sun accent */
.theme-toggle[aria-pressed="false"] {
    background: #fffbeb;
    color: #92400e;
    border: 2px solid #fbbf24;
    box-shadow: 0 2px 8px rgba(251, 191, 36, 0.25);
}

.theme-toggle[aria-pressed="false"]:hover {
    border-color: #f59e0b;
    background: #fde68a;
    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.35);
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
    border-color: var(--color-primary);
    outline: none;
}

.theme-toggle:focus-visible {
    box-shadow: 0 0 0 3px var(--color-primary-35);
}

.theme-toggle__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    line-height: 1;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.theme-toggle__icon svg {
    width: 16px;
    height: 16px;
    display: block;
    stroke: currentColor !important;
    fill: none !important;
    stroke-width: 2;
}

/* Sun icon - visible in light mode (aria-pressed=false) */
.theme-toggle__icon .theme-icon--sun {
    color: #f59e0b;
    stroke: #f59e0b !important;
}

/* Moon icon - hidden by default */
.theme-toggle__icon .theme-icon--moon {
    display: none;
    color: #60a5fa;
    stroke: #60a5fa !important;
}

/* Dark mode: hide sun, show moon */
.theme-toggle[aria-pressed="true"] .theme-toggle__icon .theme-icon--sun {
    display: none;
}

.theme-toggle[aria-pressed="true"] .theme-toggle__icon .theme-icon--moon {
    display: block;
}

/* Icon rotation animation on theme change */
.theme-toggle[aria-pressed="true"] .theme-toggle__icon {
    transform: rotate(180deg);
}

.theme-toggle__label {
    font-size: var(--font-size-sm);
    font-weight: 500;
    white-space: nowrap;
}

/* Legacy header chat toggles are not used; keep hidden if injected by old content/plugins. */
.site-header [data-aiwp-chat-toggle],
.site-header .chat-toggle {
    display: none !important;
}

.chat-toggle {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.chat-toggle:hover,
.chat-toggle:focus-visible {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: var(--color-primary-subtle);
    outline: none;
}

.chat-toggle:focus-visible {
    box-shadow: 0 0 0 3px var(--color-primary-35);
}

.chat-toggle svg {
    width: 18px;
    height: 18px;
    min-width: 18px;
    min-height: 18px;
    display: block;
    fill: none;
    flex-shrink: 0;
}

/* Ensure chat icon SVG path is visible with explicit color */
.chat-toggle svg path {
    stroke: #0066CC;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Ensure chat icon is always visible */
.chat-toggle {
    color: var(--color-primary, #0066CC);
}

.chat-toggle:hover {
    color: var(--color-primary-hover, #0052a3);
}

.chat-toggle:hover svg path {
    stroke: #0052a3;
}

.theme-panel-toggle {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.theme-panel-toggle__label {
    display: none;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-left: 6px;
    white-space: nowrap;
}

/* Desktop: show a small label so users discover "Theme/Text" controls */
@media (min-width: 960px) {
    .theme-panel-toggle {
        width: auto;
        padding: 0 12px;
        gap: 8px;
    }

    .theme-panel-toggle__label {
        display: inline;
    }
}

.theme-panel-toggle[aria-expanded="true"] {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: var(--color-primary-subtle);
    box-shadow: 0 0 0 3px var(--color-primary-15);
}

.theme-panel-toggle:hover,
.theme-panel-toggle:focus-visible {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: var(--color-primary-subtle);
    outline: none;
}

.theme-panel-toggle:focus-visible {
    box-shadow: 0 0 0 3px var(--color-primary-35);
}

.theme-panel-toggle svg {
    width: 16px;
    height: 16px;
    display: block;
}

.theme-panel {
    position: absolute;
    top: calc(100% + var(--space-2));
    right: 0;
    width: min(320px, calc(100vw - var(--space-6)));
    background: var(--glass-bg-strong);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    padding: var(--space-4);
    z-index: 1100;
}

.theme-panel[hidden] {
    display: none;
}

.theme-panel__group + .theme-panel__group {
    margin-top: var(--space-4);
}

.theme-panel__heading {
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: var(--space-2);
}

.theme-panel__segmented {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2);
}

.theme-panel__option {
    height: 40px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.theme-panel__option:hover,
.theme-panel__option:focus-visible {
    border-color: var(--color-primary);
    background: var(--color-primary-subtle);
    color: var(--color-primary);
    outline: none;
}

.theme-panel__option[aria-checked="true"] {
    border-color: var(--color-primary);
    background: var(--color-primary);
    /* Accent-aware text color (prevents white-on-light-accent invisibility) */
    color: #FFFFFF;
    color: var(--smart-btn-text-on-primary, #FFFFFF);
    -webkit-text-fill-color: #FFFFFF;
    -webkit-text-fill-color: var(--smart-btn-text-on-primary, #FFFFFF);
    box-shadow: var(--shadow-primary-sm, 0 2px 12px rgba(0, 102, 204, 0.25));
}

.theme-panel__footer {
    margin-top: var(--space-4);
    display: flex;
    justify-content: flex-end;
}

.theme-panel__reset {
    height: 36px;
    padding: 0 var(--space-4);
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border);
    background: transparent;
    color: var(--color-text-muted);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.theme-panel__reset:hover,
.theme-panel__reset:focus-visible {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: var(--color-primary-subtle);
    outline: none;
}

/* ============ NEWSLETTER CTA ============ */
/* SMART VISIBILITY v5.0: Text/icons ALWAYS WHITE by default (safe fallback) */
/* JS will update --smart-btn-text-on-primary when accent is light */
.newsletter-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-5);
    background: var(--color-primary-surface, var(--color-primary, #0066CC));
    /* CRITICAL: Always white by default; JS overrides for light accents */
    color: #FFFFFF;
    color: var(--smart-btn-text-on-primary, #FFFFFF);
    -webkit-text-fill-color: var(--smart-btn-text-on-primary, #FFFFFF);
    border: none;
    border-radius: var(--radius-full);
    font-weight: 600;
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--shadow-sm);
}

.newsletter-cta:hover {
    background: var(--color-primary-surface-hover, var(--color-primary-hover, #004D99));
    color: #FFFFFF;
    color: var(--smart-btn-text-on-primary, #FFFFFF);
    -webkit-text-fill-color: var(--smart-btn-text-on-primary, #FFFFFF);
    box-shadow: var(--shadow-glow-primary);
    transform: scale(1.02);
}

/* ============ MOBILE NAV TOGGLE - REVAMPED v3.6.0 ============ */
/* GUARDRAIL v5.61.0: Hamburger menu MUST ALWAYS be visible on mobile/tablet.
   The previous implementation relied on JS to add .aiwp-header-compact class,
   which could fail on slow connections or JS errors.
   
   Fix: Use CSS-only approach - hamburger is display:inline-flex on mobile BY DEFAULT.
   JS can still enhance behavior, but CSS guarantees visibility. */
.nav-toggle {
    /* Desktop: hidden by default (full nav shows instead) */
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    padding: 0;
    border-radius: 14px;
    border: 1.5px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(var(--color-black-rgb), 0.06);
    -webkit-tap-highlight-color: transparent;
    /* Ensure hamburger bars are visible */
    position: relative;
    z-index: 10001;
}

/* CRITICAL: ALWAYS show hamburger on mobile/tablet (CSS-only, no JS dependency) */
@media (max-width: 1199px) {
    .nav-toggle {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

.nav-toggle:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
    box-shadow: 0 0 0 6px rgba(var(--color-primary-rgb), 0.15);
}

.nav-toggle:hover {
    border-color: var(--color-primary);
    background: rgba(var(--color-primary-rgb), 0.08);
    box-shadow: 0 4px 12px rgba(var(--color-primary-rgb), 0.2);
    transform: scale(1.05);
}

.nav-toggle:active {
    transform: scale(0.95);
    transition-duration: 0.1s;
}

.nav-toggle__bar {
    position: relative;
    width: 22px;
    height: 2.5px;
    border-radius: 4px;
    background: var(--color-text, #1a1a1a);
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.nav-toggle__bar::before,
.nav-toggle__bar::after {
    content: "";
    position: absolute;
    left: 0;
    width: 22px;
    height: 2.5px;
    border-radius: 4px;
    background: var(--color-text, #1a1a1a);
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.nav-toggle__bar::before {
    top: -7px;
}

.nav-toggle__bar::after {
    bottom: -7px;
}

/* Ensure hamburger lines are always visible in both themes */
:root:not([data-theme="dark"]) .nav-toggle__bar,
:root:not([data-theme="dark"]) .nav-toggle__bar::before,
:root:not([data-theme="dark"]) .nav-toggle__bar::after {
    background: #1a1a1a !important;
}

:root[data-theme="dark"] .nav-toggle__bar,
:root[data-theme="dark"] .nav-toggle__bar::before,
:root[data-theme="dark"] .nav-toggle__bar::after {
    background: #e0e0e0 !important;
}

/* X animation when open */
.nav-toggle[aria-expanded="true"] {
    border-color: var(--color-primary);
    background: rgba(var(--color-primary-rgb), 0.1);
    color: var(--color-primary);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar {
    background: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar::before {
    top: 0;
    transform: rotate(45deg);
    background: var(--color-primary);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar::after {
    bottom: 0;
    transform: rotate(-45deg);
    background: var(--color-primary);
}

/* ============ READING PROGRESS - Minimal Top Bar ============ */
/* Clean, thin progress indicator - no floating percentage */
.reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    background: var(--color-primary);
    width: 0%;
    z-index: 1001;
    -webkit-transition: width 80ms ease-out;
    -moz-transition: width 80ms ease-out;
    transition: width 80ms ease-out;
}

/* REMOVE: Reading progress percentage indicator - not needed */
.reading-progress-indicator {
    display: none !important;
}

/* Reading progress visible on ALL pages - scroll indicator */
body:not(.single) .reading-progress {
    display: block;
}

/* Ensure reading progress is always visible */
.site-header .reading-progress {
    opacity: 1;
    visibility: visible;
}

/* ============ MODALS ============ *//* ============ MODALS ============ */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-overlay);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
}

.modal.is-open {
    display: flex;
}

.modal-content {
    background: var(--color-surface);
    padding: var(--space-8);
    border-radius: var(--radius-2xl);
    max-width: 440px;
    width: 100%;
    position: relative;
    box-shadow: var(--shadow-2xl);
    animation: modalSlideIn var(--transition-base);
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modal-close {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface-alt);
    border: none;
    border-radius: var(--radius-md);
    font-size: 1.25rem;
    cursor: pointer;
    color: var(--color-text-muted);
    transition: all var(--transition-fast);
}

.modal-close:hover {
    background: var(--color-accent-subtle);
    color: var(--color-accent);
}

/* ============ RESPONSIVE HEADER ============ */
@media (max-width: 959px) {
    .site-header__inner {
        gap: var(--space-3);
        padding: var(--space-3) var(--space-4);
    }

    .site-header__actions {
        gap: var(--space-2);
    }

    .site-header__actions .theme-toggle {
        min-width: auto;
        width: 44px;
        height: 44px;
        padding: var(--space-2);
        border-radius: var(--radius-lg);
    }
    
    /* Hide label on mobile, show only icon */
    .site-header__actions .theme-toggle .theme-toggle__label {
        display: none;
    }

    /* Subscribe remains available on mobile (icon-only styling is applied elsewhere in this @media). */

    .nav-toggle {
        display: inline-flex;
        width: 44px;
        height: 44px;
    }

    /* Mobile UX: search is hidden until the magnifying glass is pressed */
    .header-search {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        flex: 1 1 100%;
        width: 100%;
        max-width: none !important;
        min-width: 0 !important;
        padding: 10px 12px;
        margin-top: 2px;
    }

    .header-search.is-open {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    /* Avoid duplicate magnifiers: use the action-row toggle on mobile */
    .header-search__button {
        display: none;
    }

    .header-search__input {
        padding-left: 12px;
    }

    .header-search-toggle {
        display: inline-flex !important;
    }

    /* Prevent body horizontal scroll on mobile when nav is open */
    body {
        overflow-x: hidden;
    }

    /* ============ MOBILE NAVIGATION - GLASSMORPHISM v7.1.0 REVAMPED ============ */
    /* Premium glassmorphism mobile menu dropdown */
    .primary-nav {
        position: fixed;
        top: calc(var(--header-height, 76px) + 8px); /* Slight gap below header */
        right: var(--space-4);
        left: var(--space-4);
        background: rgba(var(--color-white-rgb), 0.97);
        padding: var(--space-5);
        border-radius: 20px;
        border: 1px solid rgba(var(--color-black-rgb), 0.08);
        box-shadow: 
            0 20px 60px rgba(var(--color-black-rgb), 0.15),
            0 8px 24px rgba(var(--color-black-rgb), 0.1),
            0 0 0 1px rgba(var(--color-white-rgb), 0.5) inset;
        display: none;
        z-index: 9998;
        max-height: calc(100vh - (var(--header-height, 76px) + 32px));
        overflow-y: auto;
        overflow-x: hidden;
        /* Spring animation */
        transform: translateY(-20px) scale(0.95);
        opacity: 0;
        transition: 
            transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), 
            opacity 0.3s ease-out;
    }
    
    @supports (backdrop-filter: blur(24px)) {
        .primary-nav {
            background: rgba(var(--color-white-rgb), 0.88);
            -webkit-backdrop-filter: blur(24px) saturate(200%);
            backdrop-filter: blur(24px) saturate(200%);
        }
    }

    .primary-nav.is-open {
        display: block;
        transform: translateY(0) scale(1);
        opacity: 1;
    }

    /* Menu container - clean */
    .primary-nav .menu {
        display: flex;
        flex-direction: column;
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        padding: 0;
        margin: 0;
        list-style: none;
        gap: var(--space-2);
    }

    /* Menu items with staggered animation */
    .primary-nav .menu > li {
        transform: translateY(-8px);
        opacity: 0;
        animation: slideDownMenuItem 0.35s ease-out forwards;
    }

    .primary-nav .menu > li:nth-child(1) { animation-delay: 0.04s; }
    .primary-nav .menu > li:nth-child(2) { animation-delay: 0.08s; }
    .primary-nav .menu > li:nth-child(3) { animation-delay: 0.12s; }
    .primary-nav .menu > li:nth-child(4) { animation-delay: 0.16s; }
    .primary-nav .menu > li:nth-child(5) { animation-delay: 0.20s; }
    .primary-nav .menu > li:nth-child(6) { animation-delay: 0.24s; }

    @keyframes slideDownMenuItem {
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    /* Clean card-style menu links - REVAMPED v3.4.0 */
    .primary-nav .menu > li > a {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        padding: var(--space-4) var(--space-5);
        border-radius: 16px;
        width: 100%;
        justify-content: flex-start;
        font-size: 1.05rem;
        font-weight: 600;
        letter-spacing: -0.01em;
        color: var(--color-text);
        background: var(--color-surface);
        border: 1.5px solid var(--color-border);
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        min-height: 56px;
        position: relative;
        overflow: hidden;
    }

    /* Subtle gradient shimmer on tap */
    .primary-nav .menu > li > a::before {
        content: '';
        position: absolute;
        inset: 0;
        /* No gradients: use a solid translucent overlay for the same "tap sheen" feel */
        background: rgba(var(--color-primary-rgb), 0.06);
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .primary-nav .menu > li > a:hover::before,
    .primary-nav .menu > li > a:focus::before,
    .primary-nav .menu > li > a:active::before {
        opacity: 1;
    }

    .primary-nav .menu > li > a:hover,
    .primary-nav .menu > li > a:focus {
        color: var(--color-primary);
        background: rgba(var(--color-primary-rgb), 0.08);
        border-color: var(--color-primary);
        -webkit-transform: translateX(8px) scale(1.01);
        -moz-transform: translateX(8px) scale(1.01);
        transform: translateX(8px) scale(1.01);
        box-shadow: 
            0 6px 20px rgba(var(--color-primary-rgb), 0.15),
            0 2px 8px rgba(var(--color-black-rgb), 0.08);
    }

    .primary-nav .menu > li > a:active {
        transform: translateX(4px) scale(0.99);
        transition-duration: 0.1s;
    }

    /* Active/Current menu item - gradient text with underline */
    .primary-nav .menu > li.current-menu-item > a,
    .primary-nav .menu > li.current_page_item > a,
    .primary-nav .menu > li.current-menu-ancestor > a {
        /* No gradients: solid primary + subtle pill background */
        color: var(--color-primary) !important;
        -webkit-text-fill-color: currentColor !important;
        background: rgba(var(--color-primary-rgb), 0.10) !important;
        font-weight: 700;
        position: relative;
        border-color: rgba(var(--color-primary-rgb), 0.28) !important;
        box-shadow: none !important;
    }

    .primary-nav .menu > li.current-menu-item > a::after,
    .primary-nav .menu > li.current_page_item > a::after,
    .primary-nav .menu > li.current-menu-ancestor > a::after {
        content: '';
        position: absolute;
        bottom: 8px;
        left: 16px;
        right: 16px;
        height: 2px;
        background: var(--color-primary);
        border-radius: 2px;
    }

    /* Mobile CTA styling - Ensure Free Tools stands out */
    .primary-nav .menu > li.menu-item--cta > a {
        background: var(--color-primary);
        color: #fff;
        border-color: var(--color-primary);
        box-shadow: 0 4px 12px rgba(var(--color-primary-rgb), 0.3);
        justify-content: center;
        font-weight: 700;
    }
    
    .primary-nav .menu > li.menu-item--cta > a:hover,
    .primary-nav .menu > li.menu-item--cta > a:focus {
        background: var(--color-primary-hover);
        color: #fff;
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(var(--color-primary-rgb), 0.4);
    }

    /* Mobile Subscribe button - REVAMPED v3.4.0 */
    .primary-nav .newsletter-cta--mobile {
        margin-top: var(--space-5);
        padding: var(--space-4) var(--space-5);
        border-radius: 16px;
        background: var(--color-primary);
        font-size: 1rem;
        font-weight: 700;
        letter-spacing: 0.02em;
        min-height: 56px;
        box-shadow: 
            0 4px 16px rgba(var(--color-primary-rgb), 0.35),
            0 2px 8px rgba(var(--color-black-rgb), 0.1);
        -webkit-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        -moz-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        color: #fff;
        border: none;
        position: relative;
        overflow: hidden;
    }

    .primary-nav .newsletter-cta--mobile::before {
        content: '';
        position: absolute;
        inset: 0;
        /* No gradients: subtle solid highlight */
        background: rgba(255, 255, 255, 0.16);
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .primary-nav .newsletter-cta--mobile:hover::before {
        opacity: 1;
    }

    .primary-nav .newsletter-cta--mobile:hover {
        -webkit-transform: translateY(-3px) scale(1.02);
        -moz-transform: translateY(-3px) scale(1.02);
        transform: translateY(-3px) scale(1.02);
        box-shadow: 
            0 12px 40px rgba(var(--color-primary-rgb), 0.45),
            0 4px 16px rgba(var(--color-black-rgb), 0.15);
        background: var(--color-primary-hover);
    }

    .primary-nav .newsletter-cta--mobile:active {
        transform: translateY(-1px) scale(0.99);
        transition-duration: 0.1s;
    }

    .branding__tagline {
        display: none;
    }

    .branding__title {
        font-size: 1.1rem;
    }
}

@media (max-width: 480px) {
    /* Search is hidden until toggled; when open keep it full-width and slightly tighter */
    .header-search {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        width: 100% !important;
        max-width: none !important;
        padding: 9px 10px;
    }

    .header-search.is-open {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    .header-search__input {
        font-size: 13px;
    }

    .header-search__icon {
        width: 16px;
        height: 16px;
    }
    
    .site-header__inner {
        padding: var(--space-2) var(--space-3);
        gap: var(--space-2);
    }
    
    .site-header__actions {
        gap: var(--space-1);
    }
    
    .branding__title {
        font-size: 0.95rem;
        /* REMOVED: max-width/ellipsis truncation - logo text must be fully visible */
        white-space: nowrap;
    }

    /* Logo SVG - uniform 36px on mobile */
    .site-logo-svg {
        width: 36px !important;
        height: 36px !important;
    }
}

@media (max-width: 360px) {
    /* CRITICAL FIX v3.5.0: Ensure header stays ABOVE all content on small screens */
    .site-header {
        z-index: 10000 !important;
        position: fixed !important;
        background: var(--color-bg, #fff) !important;
    }
    
    /* Even on very small screens, search stays hidden until toggled; when open it is full-width */
    .header-search {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        width: 100% !important;
        max-width: none !important;
        padding: 8px 10px;
    }

    .header-search.is-open {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    .header-search__input {
        font-size: 13px;
    }

    .header-search__icon {
        width: 16px;
        height: 16px;
    }
    
    .branding__title {
        font-size: 0.8rem;
        /* REMOVED: max-width/ellipsis truncation - logo text must be fully visible */
        white-space: nowrap;
    }

    /* Logo SVG - uniform 28px on small mobile */
    .site-logo-svg {
        width: 28px !important;
        height: 28px !important;
    }
    
    .site-header__inner {
        padding: 4px var(--space-2);
        min-height: 52px;
    }
    
    .site-header__actions {
        gap: 2px;
        position: relative;
        z-index: 10001 !important;
    }
    
    /* Touch-safe toggle buttons for 360px and below (no overlap, still >=44px) */
    .theme-toggle,
    .chat-toggle,
    .theme-panel-toggle,
    .nav-toggle,
    .header-search-toggle,
    .newsletter-cta {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        border-radius: 12px !important;
    }
    
    /* SVG icons in action buttons */
    .site-header__actions button svg {
        width: 20px !important;
        height: 20px !important;
    }
}

/* ============ EXTRA SMALL / BIZARRE SCREENS (below 320px) ============ */
@media (max-width: 319px) {
    /* CRITICAL FIX v3.5.0: Ensure header stays ABOVE all content on tiny screens */
    .site-header {
        z-index: 10000 !important;
        position: fixed !important;
        background: var(--color-bg, #fff) !important;
    }
    
    .site-header__inner {
        padding: 4px 6px;
        gap: 2px;
        min-height: 48px;
    }

    /* Never allow the brand text to force the action buttons into a second row. */
    .branding__text {
        display: none !important;
    }

    .branding {
        flex: 0 0 auto !important;
        min-width: 0 !important;
    }
    
    .branding__logo-icon {
        width: 24px;
        height: 24px;
    }
    
    .branding__title {
        font-size: 0.7rem;
    }

    /* Logo SVG - uniform 24px on tiny screens */
    .site-logo-svg {
        width: 24px !important;
        height: 24px !important;
    }
    
    .site-header__actions {
        gap: 2px;
        position: relative;
        z-index: 10001 !important;
    }
    
    /* CRITICAL: Keep touch targets >=44px even on tiny screens (prevent overlap via hiding brand text). */
    .theme-toggle,
    .chat-toggle,
    .theme-panel-toggle,
    .nav-toggle,
    .header-search-toggle,
    .newsletter-cta {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        padding: 0 !important;
        border-radius: 12px !important;
    }
    
    /* SVG icons in action buttons */
    .site-header__actions button svg {
        width: 20px !important;
        height: 20px !important;
    }
    
    .theme-toggle img,
    .chat-toggle img,
    .nav-toggle img,
    .header-search-toggle img {
        width: 20px;
        height: 20px;
    }
    
    /* Mobile nav dropdown scales */
    .primary-nav {
        right: 6px;
        left: 6px;
        padding: var(--space-3);
    }
    
    .primary-nav .menu > li > a {
        padding: var(--space-3) var(--space-4);
        font-size: 0.9rem;
        min-height: 44px;
    }
    
    .primary-nav.is-open .sub-menu > li {
        margin-left: 0 !important;
        padding-left: 0 !important;
    }
    
    .primary-nav.is-open .sub-menu a {
        padding: var(--space-2) var(--space-3);
        font-size: 0.9rem;
        min-height: 44px;
        border-left: none !important;
        background: transparent;
        color: var(--color-text);
    }
}

/* ============ DARK MODE HEADER ============ */
:root[data-theme="dark"] .site-header {
    background: var(--glass-bg);
    border-color: var(--color-border);
}

:root[data-theme="dark"] .branding__title {
    /* Solid, accent-aware branding (no gradients, no transparent text-fill).
       This also neutralizes any earlier gradient text rules in this file. */
    background: none !important;
    color: var(--color-primary) !important;
    -webkit-text-fill-color: currentColor !important;
}

:root[data-theme="dark"] .primary-nav .menu {
    background: var(--color-surface-alt);
    border-color: var(--color-border);
}

:root[data-theme="dark"] .primary-nav .menu > li > a:hover,
:root[data-theme="dark"] .primary-nav .menu > li > a:focus {
    background: var(--color-primary-15);
    color: var(--color-primary-light);
}

/* Dark mode: keep active nav SOLID as well (no gradients) */
:root[data-theme="dark"] .primary-nav .menu > li.current-menu-item > a,
:root[data-theme="dark"] .primary-nav .menu > li.current_page_item > a,
:root[data-theme="dark"] .primary-nav .menu > li.current-menu-ancestor > a {
    background: transparent !important;
    color: var(--color-primary) !important;
    -webkit-text-fill-color: currentColor !important;
}

/* ============ DARK MODE STANDOUT/BLOG ITEM ============ */
/* Default: Bold text, no gradient background in dark mode */
:root[data-theme="dark"] .primary-nav .menu .menu-item--standout > a {
    background: transparent;
    color: var(--color-text) !important;
    font-weight: 800;
}

:root[data-theme="dark"] .primary-nav .menu .menu-item--standout > a:hover,
:root[data-theme="dark"] .primary-nav .menu .menu-item--standout > a:focus {
    background: rgba(var(--color-primary-light-rgb), 0.15);
    color: var(--color-primary-light) !important;
}

/* Standout active state in dark mode: SOLID primary (no gradients) */
:root[data-theme="dark"] .primary-nav .menu .menu-item--standout.current-menu-item > a,
:root[data-theme="dark"] .primary-nav .menu .menu-item--standout.current_page_item > a {
    background: transparent;
    color: var(--color-primary) !important;
    -webkit-text-fill-color: currentColor !important;
    font-weight: 800;
}

:root[data-theme="dark"] .header-search {
    background: var(--color-surface-alt);
    border-color: var(--color-border);
}

:root[data-theme="dark"] .header-search:focus-within {
    border-color: var(--color-primary-light);
    box-shadow: 0 0 0 3px var(--color-primary-20);
}

:root[data-theme="dark"] .nav-toggle {
    background: var(--color-surface-alt);
    border-color: var(--color-border);
}

:root[data-theme="dark"] .nav-toggle:hover {
    background: var(--color-primary-15);
    border-color: var(--color-primary-light);
}

:root[data-theme="dark"] .theme-toggle {
    background: var(--color-surface-alt);
    border-color: var(--color-border);
}

:root[data-theme="dark"] .theme-toggle:hover {
    background: var(--color-primary-15);
    border-color: var(--color-primary-light);
    color: var(--color-primary-light);
}

:root[data-theme="dark"] .chat-toggle {
    background: var(--color-surface-alt);
    border-color: var(--color-border);
}

:root[data-theme="dark"] .chat-toggle:hover,
:root[data-theme="dark"] .chat-toggle:focus-visible {
    background: var(--color-primary-15);
    border-color: var(--color-primary-light);
    color: var(--color-primary-light);
}

:root[data-theme="dark"] .modal-content {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
}

@media (max-width: 959px) {
    :root[data-theme="dark"] .primary-nav {
        /* Dark mode - solid opaque background */
        background: var(--color-surface) !important;
        border-color: var(--color-border);
        box-shadow: 0 8px 32px rgba(var(--color-black-rgb), 0.4);
    }

    :root[data-theme="dark"] .primary-nav .menu > li > a {
        color: var(--color-text);
        background: transparent;
        border: 1px solid var(--color-border);
    }

    :root[data-theme="dark"] .primary-nav .menu > li > a:hover {
        background: var(--color-primary-15);
        border-color: var(--color-primary-light);
    }

    :root[data-theme="dark"] .primary-nav .menu > li.current-menu-item > a {
        background: var(--color-primary-20);
        border-color: var(--color-primary);
        color: var(--color-primary);
        -webkit-text-fill-color: currentColor;
    }
}

/* ============ LIGHT MODE NAV TOGGLE FIX ============ */
/* Explicit light mode styles to ensure visibility */
:root:not([data-theme="dark"]) .nav-toggle,
:root[data-theme="light"] .nav-toggle {
    background: var(--color-bg) !important;
    border: 1px solid var(--color-border) !important;
    color: var(--color-text) !important;
    box-shadow: 0 1px 3px rgba(var(--color-black-rgb), 0.08);
}

:root:not([data-theme="dark"]) .nav-toggle:hover,
:root[data-theme="light"] .nav-toggle:hover {
    background: var(--color-primary-10) !important;
    border-color: var(--color-primary) !important;
    color: var(--color-primary) !important;
}

:root:not([data-theme="dark"]) .nav-toggle__bar,
:root[data-theme="light"] .nav-toggle__bar,
:root:not([data-theme="dark"]) .nav-toggle__bar::before,
:root:not([data-theme="dark"]) .nav-toggle__bar::after,
:root[data-theme="light"] .nav-toggle__bar::before,
:root[data-theme="light"] .nav-toggle__bar::after {
    background: var(--color-text) !important;
}

/* ============ LIGHT MODE MOBILE NAV - CLEAN SOLID v5.2.0 ============ */
@media (max-width: 959px) {
    :root:not([data-theme="dark"]) .primary-nav,
    :root[data-theme="light"] .primary-nav {
        /* Light mode - solid clean background */
        background: var(--color-bg);
        border-color: var(--color-border);
        box-shadow: 0 8px 32px rgba(var(--color-black-rgb), 0.1);
    }

    :root:not([data-theme="dark"]) .primary-nav .menu > li > a,
    :root[data-theme="light"] .primary-nav .menu > li > a {
        color: var(--color-text);
        background: transparent;
        border: 1px solid var(--color-border);
    }

    :root:not([data-theme="dark"]) .primary-nav .menu > li > a:hover,
    :root[data-theme="light"] .primary-nav .menu > li > a:hover {
        color: var(--color-primary);
        background: var(--color-primary-10);
        border-color: var(--color-primary);
    }

    :root:not([data-theme="dark"]) .primary-nav .menu > li.current-menu-item > a,
    :root[data-theme="light"] .primary-nav .menu > li.current-menu-item > a {
        color: var(--color-primary);
        background: var(--color-primary-10);
        border-color: var(--color-primary);
    }

    :root:not([data-theme="dark"]) .primary-nav .newsletter-cta--mobile,
    :root[data-theme="light"] .primary-nav .newsletter-cta--mobile {
        color: var(--color-bg);
    }
}

/* ============================================================
   CRITICAL RESPONSIVE NAVIGATION FIX v3.3.0
   This section MUST be at the end to ensure highest cascade priority
   ============================================================ */

/* ============ DESKTOP ONLY: Show primary nav (>= 960px) ============ */
@media (min-width: 960px) {
    /* Desktop (normal): show primary nav, hide hamburger */
    .site-header:not(.aiwp-header-compact) .primary-nav,
    .site-header:not(.aiwp-header-compact) nav.primary-nav,
    .site-header:not(.aiwp-header-compact) nav#primary-navigation {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        transform: none !important;
        pointer-events: auto !important;
    }

    .site-header:not(.aiwp-header-compact) .nav-toggle,
    .site-header:not(.aiwp-header-compact) button.nav-toggle {
        display: none !important;
        visibility: hidden !important;
    }

    /* Desktop (smart compact): hide nav until toggled; show hamburger */
    .site-header.aiwp-header-compact nav#primary-navigation,
    .site-header.aiwp-header-compact .primary-nav {
        display: none !important;
    }

    .site-header.aiwp-header-compact nav#primary-navigation.is-open,
    .site-header.aiwp-header-compact .primary-nav.is-open {
        display: block !important;
    }

    .site-header.aiwp-header-compact .nav-toggle,
    .site-header.aiwp-header-compact button.nav-toggle {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* ============ MOBILE/TABLET: Hide primary nav, show hamburger (< 960px) ============ */
@media (max-width: 959px) {
    /* CRITICAL: Hide primary navigation by default - hamburger reveals it */
    .site-header .primary-nav,
    .site-header nav.primary-nav,
    .site-header nav#primary-navigation,
    #primary-navigation,
    nav.primary-nav {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        position: absolute !important;
        left: -9999px !important;
        top: -9999px !important;
    }
    
    /* When menu IS open (toggled via hamburger), show it with full styling */
    .site-header .primary-nav.is-open,
    .site-header nav.primary-nav.is-open,
    .site-header nav#primary-navigation.is-open,
    #primary-navigation.is-open,
    nav.primary-nav.is-open,
    .primary-nav.is-open {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        position: fixed !important;
        left: var(--space-4, 16px) !important;
        right: var(--space-4, 16px) !important;
        top: var(--header-height, 76px) !important;
        z-index: 9998 !important;
        /* Mobile dropdown styling */
        background: var(--color-bg, #fff) !important;
        padding: var(--space-4, 16px) !important;
        border-radius: var(--radius-xl, 16px) !important;
        border: 1px solid var(--color-border, #e0e0e0) !important;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) !important;
        max-height: calc(100vh - (var(--header-height, 76px) + 24px)) !important;
        overflow-y: auto !important;
    }
    
    /* Style the menu list in mobile dropdown */
    .primary-nav.is-open .menu,
    .primary-nav.is-open ul {
        display: flex !important;
        flex-direction: column !important;
        gap: var(--space-2, 8px) !important;
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
    }
    
    /* Style menu items in mobile dropdown */
    .primary-nav.is-open .menu > li,
    .primary-nav.is-open ul > li {
        list-style: none !important;
        display: block !important;
    }
    
    /* Style menu links in mobile dropdown */
    .primary-nav.is-open .menu > li > a,
    .primary-nav.is-open ul > li > a {
        display: flex !important;
        align-items: center !important;
        padding: var(--space-3, 12px) var(--space-4, 16px) !important;
        border-radius: var(--radius-lg, 12px) !important;
        width: 100% !important;
        font-size: 1rem !important;
        font-weight: 500 !important;
        color: var(--color-text, #1a1a1a) !important;
        background: var(--color-surface-alt, #f5f5f5) !important;
        border: 1px solid var(--color-border, #e0e0e0) !important;
        text-decoration: none !important;
        min-height: 48px !important;
        transition: all 0.2s ease !important;
    }
    
    .primary-nav.is-open .menu > li > a:hover,
    .primary-nav.is-open ul > li > a:hover {
        color: var(--color-primary, #10b981) !important;
        background: var(--color-primary-10, rgba(16, 185, 129, 0.1)) !important;
        border-color: var(--color-primary, #10b981) !important;
        transform: translateX(4px) !important;
    }
    
    /* CRITICAL: Show hamburger toggle on mobile/tablet */
    .site-header .nav-toggle,
    .site-header button.nav-toggle,
    .nav-toggle,
    button.nav-toggle {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* ============ ULTRA-SMALL SCREENS (< 480px) ============ */
@media (max-width: 479px) {
    /* Ensure nav stays hidden */
    .primary-nav:not(.is-open) {
        display: none !important;
    }
    
    /* Adjust open nav position for smaller screens */
    .primary-nav.is-open {
        left: var(--space-3) !important;
        right: var(--space-3) !important;
        top: 56px !important;
    }
}

/* ============ EXTRA-SMALL SCREENS (< 360px) ============ */
@media (max-width: 359px) {
    /* Ensure nav stays hidden */
    .primary-nav:not(.is-open) {
        display: none !important;
    }
    
    /* Minimal margins for very small screens */
    .primary-nav.is-open {
        left: var(--space-2) !important;
        right: var(--space-2) !important;
        top: 52px !important;
        padding: var(--space-3) !important;
    }
}

/* ============ DARK MODE MOBILE NAV DROPDOWN - REVAMPED v3.4.0 ============ */
@media (max-width: 959px) {
    :root[data-theme="dark"] .primary-nav.is-open {
        background: rgba(20, 20, 28, 0.98) !important;
        border-color: rgba(255, 255, 255, 0.1) !important;
        box-shadow: 
            0 20px 60px rgba(0, 0, 0, 0.5) !important,
            0 8px 24px rgba(0, 0, 0, 0.4) !important,
            0 0 0 1px rgba(255, 255, 255, 0.08) inset !important;
    }
    
    @supports (backdrop-filter: blur(24px)) {
        :root[data-theme="dark"] .primary-nav.is-open {
            background: rgba(20, 20, 28, 0.92) !important;
            -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
            backdrop-filter: blur(24px) saturate(180%) !important;
        }
    }
    
    :root[data-theme="dark"] .primary-nav.is-open .menu > li > a,
    :root[data-theme="dark"] .primary-nav.is-open ul > li > a {
        color: rgba(255, 255, 255, 0.9) !important;
        background: rgba(255, 255, 255, 0.05) !important;
        border-color: rgba(255, 255, 255, 0.1) !important;
    }
    
    :root[data-theme="dark"] .primary-nav.is-open .menu > li > a:hover,
    :root[data-theme="dark"] .primary-nav.is-open ul > li > a:hover {
        color: var(--color-primary-light, #6ba3ff) !important;
        background: rgba(var(--color-primary-light-rgb), 0.15) !important;
        border-color: var(--color-primary-light, #6ba3ff) !important;
        box-shadow: 0 6px 24px rgba(var(--color-primary-light-rgb), 0.2) !important;
    }

    :root[data-theme="dark"] .primary-nav.is-open .menu > li.current-menu-item > a {
        color: var(--color-primary-light, #6ba3ff) !important;
        background: rgba(var(--color-primary-light-rgb), 0.2) !important;
        border-color: var(--color-primary-light, #6ba3ff) !important;
    }

    :root[data-theme="dark"] .primary-nav.is-open .newsletter-cta--mobile {
        background: var(--color-primary-light, #6ba3ff) !important;
        color: #0a0a0f !important;
        box-shadow: 0 4px 20px rgba(var(--color-primary-light-rgb), 0.4) !important;
    }

    :root[data-theme="dark"] .primary-nav.is-open .newsletter-cta--mobile:hover {
        box-shadow: 0 8px 32px rgba(var(--color-primary-light-rgb), 0.5) !important;
    }
}

/* ============ CRITICAL FIX v7.2.0: MOBILE NAV TOGGLE VISIBILITY GUARANTEE ============ */
/* This ensures the hamburger button is ALWAYS visible on mobile regardless of cascade */
/* Addresses issue: hamburger not showing on mobile while tablet/desktop work fine */

/* MOBILE RANGE: 0px - 959px (hamburger MUST be visible) */
@media (max-width: 959px) {
    /* Highest specificity selector to override any conflicting rules */
    .site-header .site-header__actions button.nav-toggle,
    .site-header .site-header__actions .nav-toggle,
    .site-header button.nav-toggle,
    button.nav-toggle[data-aiwp-nav-toggle],
    .nav-toggle[data-aiwp-nav-toggle],
    .nav-toggle {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        z-index: 10001 !important;
    }
}

/* SMALL MOBILE (< 480px) - ensure hamburger is still visible */
@media (max-width: 479px) {
    .site-header .site-header__actions button.nav-toggle,
    .site-header .site-header__actions .nav-toggle,
    .site-header button.nav-toggle,
    button.nav-toggle[data-aiwp-nav-toggle],
    .nav-toggle[data-aiwp-nav-toggle],
    .nav-toggle {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
    }
}

/* EXTRA SMALL (< 360px) - hamburger still visible but compact */
@media (max-width: 359px) {
    .site-header .site-header__actions button.nav-toggle,
    .site-header .site-header__actions .nav-toggle,
    .site-header button.nav-toggle,
    button.nav-toggle[data-aiwp-nav-toggle],
    .nav-toggle[data-aiwp-nav-toggle],
    .nav-toggle {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        border-radius: 10px !important;
    }
}

/* DESKTOP (960px+) - hamburger MUST be hidden */
@media (min-width: 960px) {
    .site-header .site-header__actions button.nav-toggle,
    .site-header .site-header__actions .nav-toggle,
    .site-header button.nav-toggle,
    button.nav-toggle[data-aiwp-nav-toggle],
    .nav-toggle[data-aiwp-nav-toggle],
    .nav-toggle {
        display: none !important;
        visibility: hidden !important;
    }
}


/* ============ CRITICAL MOBILE NAV GUARDRAIL v5.62.0 ============ */
/* PROBLEM: Hamburger menu disappears in 960-1199px viewport range.
   ROOT CAUSE: Gap between mobile rules (max-width: 959px) and desktop rules (min-width: 1200px).
   FIX: Explicit rules for the 960-1199px range to ensure hamburger always shows.
   
   This ensures hamburger ALWAYS shows on mobile/tablet regardless of:
   - JS loading state
   - .aiwp-header-compact class presence
   - Any other display rules
   
   The rule uses !important with high specificity to override everything. */

/* CRITICAL FIX v5.62.0: EXPLICIT RULES FOR 960-1199px RANGE */
/* This is the problematic range where hamburger was disappearing */
@media (min-width: 960px) and (max-width: 1199px) {
    /* ALWAYS show hamburger in this range */
    .site-header .nav-toggle,
    .site-header button.nav-toggle,
    .site-header .site-header__actions .nav-toggle,
    .site-header .site-header__actions button.nav-toggle,
    .nav-toggle,
    button.nav-toggle,
    [data-aiwp-nav-toggle] {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        z-index: 10001 !important;
    }
    
    /* Primary nav hidden until toggled in this range */
    .site-header .primary-nav:not(.is-open),
    .site-header nav#primary-navigation:not(.is-open),
    #primary-navigation:not(.is-open),
    nav.primary-nav:not(.is-open) {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }
    
    /* When toggled open, show nav as mobile dropdown */
    .site-header .primary-nav.is-open,
    .site-header nav#primary-navigation.is-open,
    #primary-navigation.is-open,
    nav.primary-nav.is-open {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: fixed !important;
        top: calc(var(--header-height, 76px) + 8px) !important;
        left: var(--space-4, 16px) !important;
        right: var(--space-4, 16px) !important;
    }
}

/* TABLET AND MOBILE (< 960px): ALWAYS show hamburger */
@media (max-width: 959px) {
    .site-header .nav-toggle,
    .site-header button.nav-toggle,
    .nav-toggle,
    button.nav-toggle,
    [data-aiwp-nav-toggle] {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
    
    /* Primary nav hidden until toggled */
    .site-header .primary-nav:not(.is-open),
    .site-header nav#primary-navigation:not(.is-open),
    #primary-navigation:not(.is-open),
    nav.primary-nav:not(.is-open) {
        display: none !important;
        visibility: hidden !important;
    }
    
    /* When toggled open, show nav */
    .site-header .primary-nav.is-open,
    .site-header nav#primary-navigation.is-open,
    #primary-navigation.is-open,
    nav.primary-nav.is-open {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* DESKTOP (1200px+): Show primary nav, hide hamburger */
@media (min-width: 1200px) {
    /* Show primary nav by default on desktop */
    .site-header:not(.aiwp-header-compact) .primary-nav,
    .site-header:not(.aiwp-header-compact) nav#primary-navigation {
        display: flex !important;
        visibility: visible !important;
    }
    
    /* Hide hamburger on desktop when not in compact mode */
    .site-header:not(.aiwp-header-compact) .nav-toggle,
    .site-header:not(.aiwp-header-compact) button.nav-toggle {
        display: none !important;
        visibility: hidden !important;
    }
    
    /* CRITICAL FIX v3.8.0: Show hamburger when compact mode is active at ANY width */
    .site-header.aiwp-header-compact .nav-toggle,
    .site-header.aiwp-header-compact button.nav-toggle {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Hide primary nav when compact mode is active (until toggled) */
    .site-header.aiwp-header-compact .primary-nav:not(.is-open),
    .site-header.aiwp-header-compact nav#primary-navigation:not(.is-open) {
        display: none !important;
        visibility: hidden !important;
    }
}


/* ============ CRITICAL FIX v3.9.0: SEARCH TOGGLE + HEADER ACTIONS VISIBILITY ============ */
/* PROBLEM: Search toggle glitches when pressed, buttons missing at certain screen sizes.
   ROOT CAUSE: 
   1. Instant display:none -> display:flex transition causes layout shift (glitch)
   2. Media query conflicts causing buttons to disappear at certain widths
   FIX: 
   1. Use max-height + opacity animation instead of display for smooth transitions
   2. Add high-specificity guardrails for button visibility */

/* MOBILE/TABLET (< 960px): Search toggle MUST be visible */
@media (max-width: 959px) {
    .site-header .header-search-toggle,
    .site-header .site-header__actions .header-search-toggle,
    .site-header__actions .header-search-toggle,
    .header-search-toggle,
    button.header-search-toggle {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;
    }
    
    /* Ensure header actions container is always visible */
    .site-header .site-header__actions,
    .site-header__actions {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        flex-shrink: 0 !important;
        gap: 8px !important;
    }
    
    /* Ensure newsletter button is visible on mobile */
    .site-header .newsletter-cta,
    .site-header__actions .newsletter-cta,
    .newsletter-cta {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* DESKTOP (960px+): Search toggle MUST be hidden (search field is visible instead) */
@media (min-width: 960px) {
    .site-header .header-search-toggle,
    .site-header .site-header__actions .header-search-toggle,
    .site-header__actions .header-search-toggle,
    .header-search-toggle,
    button.header-search-toggle {
        display: none !important;
        visibility: hidden !important;
    }
    
    /* Ensure header actions are visible on desktop too */
    .site-header .site-header__actions,
    .site-header__actions {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* SMOOTH SEARCH ANIMATION GUARDRAIL - Prevent glitchy layout shifts */
@media (max-width: 959px) {
    /* Closed state: hidden but ready to animate */
    .header-search:not(.is-open) {
        max-height: 0 !important;
        overflow: hidden !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        -webkit-transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                            opacity 0.2s ease-out,
                            margin 0.3s ease,
                            padding 0.3s ease,
                            visibility 0s linear 0.3s !important;
        -moz-transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                         opacity 0.2s ease-out,
                         margin 0.3s ease,
                         padding 0.3s ease,
                         visibility 0s linear 0.3s !important;
        transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                    opacity 0.2s ease-out,
                    margin 0.3s ease,
                    padding 0.3s ease,
                    visibility 0s linear 0.3s !important;
    }
    
    /* Open state: smoothly animate in */
    .header-search.is-open {
        display: flex !important;
        max-height: var(--search-expand-max-height, 80px) !important;
        overflow: visible !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        margin-top: 8px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        -webkit-transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                            opacity 0.25s ease-out 0.05s,
                            margin 0.3s ease,
                            padding 0.3s ease,
                            visibility 0s linear 0s !important;
        -moz-transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                         opacity 0.25s ease-out 0.05s,
                         margin 0.3s ease,
                         padding 0.3s ease,
                         visibility 0s linear 0s !important;
        transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                    opacity 0.25s ease-out 0.05s,
                    margin 0.3s ease,
                    padding 0.3s ease,
                    visibility 0s linear 0s !important;
    }
}


/* ========== components-home.css ========== */
/* ========================================
   Hero, Cards, Buttons, and Footer
   2025 Aurora Glass Redesign
   ======================================== */

/* ============ HERO SECTIONS ============ */
.hero,
.tools-hero {
    text-align: left;
    padding: clamp(3rem, 8vw, 5rem) clamp(1.5rem, 5vw, 3rem) clamp(2.5rem, 7vw, 4rem);
    background: var(--gradient-hero);
    position: relative;
    overflow: hidden;
    border-radius: 0 0 var(--radius-3xl) var(--radius-3xl);
}

.hero > *,
.tools-hero > * {
    max-width: min(960px, 100%);
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 768px) {
    .hero,
    .tools-hero {
        text-align: center;
        padding-left: var(--space-4);
        padding-right: var(--space-4);
    }
}

.hero::before,
.tools-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--gradient-mesh);
    pointer-events: none;
    opacity: 0.6;
}

.hero h1,
.tools-hero h1 {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--color-primary);
    margin-bottom: var(--space-4);
    position: relative;
    z-index: 1;
    line-height: 1.1;
}

.hero p,
.tools-hero p {
    font-size: var(--font-size-md);
    color: var(--color-text-muted);
    max-width: 560px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    line-height: var(--line-height-relaxed);
}

/* ============ TOOLS GRID ============ */
.tools-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    grid-auto-rows: 1fr;
    gap: clamp(1.5rem, 3vw, 2.5rem);
    padding: clamp(2.5rem, 6vw, 4rem) clamp(1.5rem, 4vw, 3rem);
    max-width: 1200px;
    margin: 0 auto;
}

@media (max-width: 640px) {
    .tools-grid {
        padding: var(--space-6) var(--space-4);
    }
}

/* ============ BRAND HERO ============ */
.brand-hero {
    padding: var(--space-16) var(--space-4);
    text-align: center;
    background: var(--gradient-hero);
    position: relative;
}

.brand-hero__content {
    max-width: 720px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.brand-hero__title {
    font-size: clamp(2.5rem, 7vw, 5rem);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1.05;
    margin-bottom: var(--space-4);
    color: var(--color-primary);
}

.brand-hero__tagline {
    font-size: var(--font-size-xl);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-8);
    line-height: var(--line-height-relaxed);
}

.brand-hero__actions {
    display: flex;
    gap: var(--space-4);
    justify-content: center;
    flex-wrap: wrap;
}

/* Mobile Brand Hero */
@media (max-width: 480px) {
    .brand-hero {
        padding: var(--space-10) var(--space-4);
    }
    
    .brand-hero__title {
        font-size: clamp(1.75rem, 8vw, 2.5rem);
    }
    
    .brand-hero__tagline {
        font-size: var(--font-size-base);
    }
    
    .brand-hero__actions {
        flex-direction: column;
        gap: var(--space-3);
        width: 100%;
    }
    
    .brand-hero__actions .btn,
    .brand-hero__actions .button {
        width: 100%;
    }
}

/* ============ BUTTONS ============ */
.btn,
.button,
button:not(.nav-toggle):not(.theme-toggle):not(.modal-close),
input[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    font-weight: 600;
    font-size: var(--font-size-sm);
    border-radius: var(--radius-lg);
    transition: all var(--transition-base);
    cursor: pointer;
    text-decoration: none;
    border: 2px solid transparent; /* Consistent border for alignment */
    box-sizing: border-box;
    min-height: 44px; /* Touch-friendly, ensures consistent height */
    line-height: 1.25;
}

.btn--primary,
.button-primary,
.button {
    background: var(--gradient-primary);
    color: var(--smart-btn-text-on-primary, #fff);
    box-shadow: var(--shadow-sm), 0 0 0 0 transparent;
}

.btn--primary:hover,
.button-primary:hover,
.button:hover {
    box-shadow: var(--shadow-glow-primary);
    transform: translateY(-2px);
}

.btn--secondary {
    background: var(--color-surface);
    color: var(--color-text);
    border: 2px solid var(--color-border-strong);
}

[data-theme="light"] .btn--secondary {
    background: var(--color-surface);
    color: var(--color-text);
    border: 2px solid var(--color-text-muted);
}

:root:not([data-theme="dark"]) .btn--secondary:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: var(--color-primary-subtle);
}

.btn--secondary:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: var(--color-primary-subtle);
}

.btn--ghost {
    background: transparent;
    color: var(--color-primary);
    padding: var(--space-2) var(--space-4);
}

.btn--ghost:hover {
    background: var(--color-primary-subtle);
}

/* ============ CARDS ============ */
.tool-card,
.aiwp-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2xl);
    padding: var(--space-6);
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 200px;
    height: 100%;
}

.tool-card::before,
.aiwp-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gradient-primary);
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.tool-card:hover,
.aiwp-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-card-hover), 0 20px 40px -15px var(--color-primary-15);
    border-color: var(--color-primary-light);
}

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

/* Tool Card Content */
.tool-card h3 {
    font-size: var(--font-size-lg);
    font-weight: 700;
    margin-bottom: var(--space-3);
    color: var(--color-text);
    line-height: 1.3;
}

.tool-card > p {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--space-4);
    flex-grow: 1;
}

/* Tool Card CTA Links - Aurora Glass Style */
.tool-card p:last-child a,
.tool-card a[href^="#"] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-primary);
    background: var(--color-primary-subtle);
    border: 1px solid var(--color-primary-light);
    border-radius: var(--radius-lg);
    text-decoration: none;
    transition: all var(--transition-fast);
    margin-top: auto;
}

.tool-card p:last-child a:hover,
.tool-card a[href^="#"]:hover {
    background: var(--gradient-primary);
    color: #fff;
    border-color: transparent;
    transform: translateX(4px);
    box-shadow: var(--shadow-glow-primary);
}

/* Coming Soon Card Variant */
.tool-card--coming-soon {
    border-style: dashed;
    opacity: 0.85;
}

.tool-card--coming-soon p:last-child a {
    background: var(--color-accent-subtle);
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.tool-card--coming-soon p:last-child a:hover {
    background: var(--color-accent);
    color: #fff;
}

/* ============ TOOLS CTA SECTION ============ */
.tools-cta {
    text-align: center;
    padding: var(--space-16) var(--space-6);
    background: var(--color-surface);
    border-radius: var(--radius-3xl);
    margin: var(--space-8) auto;
    max-width: 800px;
    border: 1px solid var(--color-border);
    position: relative;
    overflow: hidden;
}

.tools-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--gradient-aurora);
}

.tools-cta h2 {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 800;
    margin-bottom: var(--space-4);
    color: var(--color-text);
}

.tools-cta p {
    font-size: var(--font-size-md);
    color: var(--color-text-muted);
    max-width: 540px;
    margin: 0 auto var(--space-6);
    line-height: var(--line-height-relaxed);
}

.tools-cta .button,
.tools-cta a[href="/contact/"],
.tools-cta a[href*="contact"] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-8);
    font-size: var(--font-size-md);
    font-weight: 700;
    background: var(--gradient-primary);
    color: #fff;
    border-radius: var(--radius-xl);
    text-decoration: none;
    transition: all var(--transition-base);
    box-shadow: var(--shadow-md);
}

.tools-cta .button:hover,
.tools-cta a[href="/contact/"]:hover,
.tools-cta a[href*="contact"]:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-glow-primary);
}

@media (max-width: 768px) {
    .tools-cta {
        padding: var(--space-10) var(--space-4);
        margin: var(--space-6) var(--space-4);
        border-radius: var(--radius-2xl);
    }
}

/* ============ SITE FOOTER ============ */
.site-footer {
    border-top: 1px solid var(--color-border);
    padding: var(--space-16) 0 var(--space-8);
    margin-top: var(--space-16);
    background: var(--color-surface-alt);
    position: relative;
}

.site-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--color-border);
}

.site-footer__inner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: clamp(2rem, 4vw, 4rem);
    align-items: flex-start;
}

@media (max-width: 768px) {
    .site-footer__inner {
        text-align: center;
    }
}

.site-footer__brand {
    max-width: 320px;
}

@media (max-width: 768px) {
    .site-footer__brand {
        max-width: none;
        margin: 0 auto;
    }
}

.site-footer__brand .branding__title {
    font-size: var(--font-size-xl);
    font-weight: 800;
    margin-bottom: var(--space-3);
    color: var(--color-primary);
    display: inline-block;
}

.site-footer__brand p {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
}

.site-footer__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    padding-top: var(--space-8);
    margin-top: var(--space-8);
    border-top: 1px solid var(--color-border);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

@media (max-width: 640px) {
    .site-footer__meta {
        flex-direction: column;
        text-align: center;
    }
}

.site-footer__powered {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-primary);
    font-weight: 500;
}

.site-footer__powered svg {
    opacity: 0.85;
}

.site-footer h3 {
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-text-muted);
    margin-bottom: var(--space-4);
    font-weight: 700;
}

.footer-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-nav li {
    margin-bottom: var(--space-3);
}

.footer-nav a {
    color: var(--color-text-secondary);
    text-decoration: none;
    font-size: var(--font-size-sm);
    transition: color var(--transition-fast);
}

.footer-nav a:hover {
    color: var(--color-primary);
}

/* ============ TRENDING PALETTE SECTION ============ */
.trending-palette {
    padding: var(--space-20) 0;
    background: var(--color-surface-alt);
    position: relative;
    overflow: hidden;
}

/* Full-width trending section */
.trending-palette > .container {
    max-width: 100%;
}

@media (min-width: 1280px) {
    .trending-palette > .container {
        max-width: 1520px;
    }
}

.trending-palette::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--gradient-mesh);
    pointer-events: none;
}

.trending-palette__header {
    text-align: center;
    margin-bottom: var(--space-12);
    position: relative;
    z-index: 2;
}

.trending-palette__label {
    display: inline-block;
    padding: var(--space-2) var(--space-4);
    background: var(--color-primary);
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-4);
}

.trending-palette__title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    margin-bottom: var(--space-4);
    color: var(--color-text);
}

.section-desc {
    color: var(--color-text-muted);
    font-size: var(--font-size-md);
    max-width: 540px;
    margin: 0 auto;
}

.trending-palette__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--space-6);
    position: relative;
    z-index: 2;
}

/* ============ TRENDING CARD ============ */
.trending-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2xl);
    padding: var(--space-6);
    transition: all var(--transition-slow);
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.trending-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--gradient-aurora);
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.trending-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
    border-color: var(--color-primary-light);
}

.trending-card:hover::before {
    opacity: 1;
}

.trending-card__image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-5);
    background: var(--color-surface-alt);
    transition: transform var(--transition-slow);
}

.trending-card:hover .trending-card__image {
    transform: scale(1.02);
}

.trending-card__meta {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.trending-card__category {
    color: var(--color-primary);
    font-weight: 600;
}

.trending-card__title {
    font-size: var(--font-size-xl);
    font-weight: 700;
    margin-bottom: var(--space-3);
    line-height: var(--line-height-snug);
}

.trending-card__title a {
    color: var(--color-text);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.trending-card__title a:hover {
    color: var(--color-primary);
}

.trending-card__excerpt {
    color: var(--color-text-muted);
    margin-bottom: auto;
    line-height: var(--line-height-relaxed);
    font-size: var(--font-size-sm);
}

.trending-card__footer {
    margin-top: var(--space-5);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.trending-card__read-more {
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    transition: all var(--transition-fast);
}

.trending-card__read-more:hover {
    gap: var(--space-3);
}

.trending-card__read-more svg {
    transition: transform var(--transition-fast);
}

.trending-card__read-more:hover svg {
    transform: translateX(4px);
}

.trending-card__read-time {
    font-size: var(--font-size-xs);
    color: var(--color-text-subtle);
}


/* ========== pages.css ========== */
/* ========================================
   PAGES - About, Contact, Tools
   Clean High-Contrast Design v5.2.0
   ======================================== */

/* ============ SHARED PAGE HERO ============ */
.page-hero {
    position: relative;
    padding: clamp(4rem, 10vw, 7rem) 0;
    text-align: center;
    overflow: hidden;
    background: var(--color-surface-alt);
}

.page-hero .container {
    position: relative;
    z-index: 1;
}

.page-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-5);
    background: var(--color-primary);
    color: #FFFFFF !important;
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: var(--space-6);
    /* Ensure text is visible on primary background */
    -webkit-text-fill-color: #FFFFFF;
}

/* SVG icons inside eyebrows - always white for contrast on primary background */
.page-hero__eyebrow svg {
    width: 16px;
    height: 16px;
    color: #FFFFFF !important;
    stroke: #FFFFFF !important;
    fill: none;
    flex-shrink: 0;
}

.page-hero h1 {
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
    margin-bottom: var(--space-5);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    color: var(--color-text);
}

.page-hero > .container > p {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    max-width: 600px;
    margin: 0 auto var(--space-8);
    line-height: var(--line-height-relaxed);
}

.page-hero .button-group {
    display: flex;
    gap: var(--space-4);
    justify-content: center;
    flex-wrap: wrap;
}

/* Mobile Hero fixes */
@media (max-width: 480px) {
    .page-hero {
        padding: clamp(2rem, 8vw, 4rem) var(--space-4);
    }
    
    .page-hero h1 {
        font-size: clamp(1.75rem, 7vw, 2.5rem);
        padding: 0 var(--space-2);
    }
    
    .page-hero > .container > p {
        font-size: var(--font-size-base);
        padding: 0 var(--space-2);
    }
    
    .page-hero .button-group {
        flex-direction: column;
        gap: var(--space-3);
        padding: 0 var(--space-4);
    }
    
    .page-hero .button-group .btn,
    .page-hero .button-group .button {
        width: 100%;
    }
}

/* ============ LEGAL PAGES (Privacy / Terms) ============ */
body.aiwp-legal .entry {
    max-width: 980px;
    margin: 0 auto var(--space-16);
    padding: var(--space-10) var(--space-10);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-lg);
}

body.aiwp-legal .entry__header {
    text-align: left;
    margin-bottom: var(--space-8);
}

body.aiwp-legal .entry__title {
    font-size: clamp(2rem, 4vw, 3rem);
    letter-spacing: -0.03em;
}

body.aiwp-legal .entry__content {
    font-size: var(--font-size-md);
    line-height: 1.85;
    color: var(--color-text);
}

body.aiwp-legal .entry__content > p {
    margin: 0 0 var(--space-5);
}

body.aiwp-legal .entry__content h2,
body.aiwp-legal .entry__content h3 {
    margin-top: var(--space-10);
    margin-bottom: var(--space-4);
    color: var(--color-text);
}

body.aiwp-legal .aiwp-legal-list {
    margin: var(--space-6) 0;
    padding-left: 1.25rem;
}

body.aiwp-legal .aiwp-legal-list li {
    margin: var(--space-3) 0;
    color: var(--color-text);
}

@media (max-width: 768px) {
    body.aiwp-legal .entry {
        padding: var(--space-8) var(--space-5);
        border-radius: var(--radius-xl);
    }
}

/* ============ ABOUT PAGE ============ */

/* Principles Section */
.about-principles {
    padding: var(--space-20) 0;
    background: var(--color-bg);
    position: relative;
}

.about-principles::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1200px;
    height: 1px;
    background: var(--color-border);
}

.about-principles__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-6);
}

.about-principles__card {
    position: relative;
    padding: var(--space-8);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2xl);
    transition: all var(--transition-base);
    overflow: hidden;
}

.about-principles__card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--color-primary);
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.about-principles__card::after {
    content: '';
    position: absolute;
    top: var(--space-6);
    right: var(--space-6);
    width: 48px;
    height: 48px;
    border-radius: var(--radius-xl);
    background: var(--color-primary-subtle);
    opacity: 0.5;
    transition: all var(--transition-base);
}

.about-principles__card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
    border-color: var(--color-primary-light);
}

.about-principles__card:hover::before {
    opacity: 1;
}

.about-principles__card:hover::after {
    transform: scale(1.2);
    opacity: 0.8;
}

.about-principles__card span {
    display: block;
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: var(--space-3);
    position: relative;
    z-index: 1;
}

.about-principles__card p {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    line-height: var(--line-height-relaxed);
    margin: 0;
    position: relative;
    z-index: 1;
}

/* About Editorial Section */
.about-editorial {
    padding: var(--space-16) 0;
    background: var(--color-surface-alt);
    position: relative;
}

.about-editorial .container {
    position: relative;
    z-index: 1;
    max-width: 800px;
}

.about-editorial .container > * {
    margin-bottom: var(--space-6);
}

.about-editorial h2 {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: var(--space-4);
}

.about-editorial p {
    font-size: var(--font-size-md);
    line-height: 1.8;
    color: var(--color-text-secondary);
}

/* About Editorial - Story & Expertise Sections v6.2.0 */
.about-editorial .about-story,
.about-editorial .about-expertise {
    margin-bottom: var(--space-10);
}

.about-editorial .about-story h2,
.about-editorial .about-expertise h2 {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: var(--space-5);
    display: inline-block;
    position: relative;
}

.about-editorial .about-story h2::after,
.about-editorial .about-expertise h2::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 40px;
    height: 3px;
    background: var(--color-primary);
    border-radius: 2px;
}

/* Enhanced list styling for What I Build */
.about-editorial ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.about-editorial ul li {
    position: relative;
    padding-left: var(--space-6);
    margin-bottom: var(--space-4);
    line-height: 1.7;
}

.about-editorial ul li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: var(--color-primary);
    font-weight: 600;
}

.about-editorial ul li strong {
    color: var(--color-text);
    font-weight: 600;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .about-editorial {
        padding: var(--space-12) 0;
    }
    
    .about-editorial .container {
        padding: 0 var(--space-4);
    }
    
    .about-editorial .about-story h2,
    .about-editorial .about-expertise h2 {
        font-size: var(--font-size-lg);
    }
}

@media (max-width: 480px) {
    .about-editorial {
        padding: var(--space-8) 0;
    }
    
    .about-editorial ul li {
        padding-left: var(--space-5);
    }
}

/* About CTA Section - Clean Design v5.2.0 - CROSS-VIEWPORT PARITY FIX */
.about-cta {
    padding: var(--space-20) 0;
    /* v5.27.2: Use solid background for better text contrast instead of nearly-transparent surface-alt */
    background: var(--color-bg);
    position: relative;
    color: var(--color-text);
}

/* v5.27.2: Force proper text colors on about-cta content (fix webkit-text-fill-color inheritance bug) */
.about-cta,
.about-cta *:not(.button):not(.button--primary):not(.button--ghost):not(.about-cta__eyebrow):not(.about-cta__eyebrow *) {
    -webkit-text-fill-color: currentColor;
}

/* Solid accent border */
.about-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(200px, 30%);
    height: 3px;
    background: var(--color-primary);
    border-radius: 2px;
}

.about-cta__grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: var(--space-12);
    align-items: center;
}

/* Centered variant - single column, elegant centered layout */
.about-cta__grid--centered {
    grid-template-columns: 1fr;
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}

.about-cta__grid--centered .about-cta__content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

@media (max-width: 900px) {
    .about-cta__grid {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }
}

.about-cta__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #0066CC;
    color: var(--color-primary, #0066CC);
    -webkit-text-fill-color: currentColor;
    margin-bottom: var(--space-4);
    padding: var(--space-2) var(--space-4);
    background: var(--color-primary-15);
    border-radius: var(--radius-pill);
    border: 1px solid var(--color-primary-25);
}

/* SVG icons in about-cta eyebrow - match text color (primary) */
/* Explicit fallback first pattern per AGENTS.md */
.about-cta__eyebrow svg {
    width: 14px;
    height: 14px;
    color: #0066CC;
    color: var(--color-primary, #0066CC);
    stroke: #0066CC;
    stroke: var(--color-primary, #0066CC);
    fill: none;
    flex-shrink: 0;
}

.about-cta__grid h2 {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: var(--space-4);
    /* v5.27.2: Use heading token for maximum contrast */
    color: var(--color-text-heading);
    line-height: 1.2;
}

.about-cta__grid > div:first-child > p,
.about-cta__content > p {
    font-size: var(--font-size-md);
    /* v5.27.2: Use secondary instead of muted for better readability */
    color: var(--color-text-secondary);
    margin-bottom: var(--space-8);
    line-height: var(--line-height-relaxed);
    max-width: 560px;
}

/* Enhanced button group for CTA */
.button-group--cta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    justify-content: center;
}

.button-group--cta .button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-6);
    font-size: var(--font-size-md);
    font-weight: 600;
    border-radius: var(--radius-lg);
    transition: all var(--transition-smooth);
}

.button-group--cta .button--primary {
    background: var(--color-primary-surface);
    color: var(--sv-btn-text-on-primary);
    border: none;
    box-shadow: 0 2px 8px var(--color-primary-25);
}

.button-group--cta .button--primary:hover {
    transform: translateY(-2px);
    background: var(--color-primary-surface-hover);
    box-shadow: 0 4px 16px var(--color-primary-35);
}

.button-group--cta .button--ghost {
    background: transparent;
    color: var(--color-text);
    border: 2px solid var(--color-border);
}

.button-group--cta .button--ghost:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: var(--color-primary-10);
}

/* Button SVG icons - inherit color from button */
.button-group--cta .button svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: currentColor;
    stroke: currentColor;
    fill: none;
}

/* Primary button SVGs - always white */
.button-group--cta .button--primary svg {
    color: var(--sv-icon-on-accent);
    stroke: var(--sv-icon-on-accent);
}

/* Ghost button SVGs - match text color */
.button-group--cta .button--ghost svg {
    color: var(--color-text);
    stroke: var(--color-text);
}

.button-group--cta .button--ghost:hover svg {
    color: var(--color-primary);
    stroke: var(--color-primary);
}

/* Ungrouped CTA actions (single-row buttons without CTA group styling) */
.cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    justify-content: center;
    align-items: center;
}

.cta-actions .button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

/* Independent CTA items: each element animates on its own hover */
.cta-actions--independent {
    gap: var(--space-5);
    margin-top: var(--space-6);
}

.cta-independent {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-weight: 600;
    font-size: var(--font-size-md);
    transition: transform 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    min-width: 180px;
}

/* Primary button style for filled CTA */
.cta-independent.button--primary {
    padding: var(--space-4) var(--space-6);
    background: var(--color-primary);
    color: #FFFFFF;
    -webkit-text-fill-color: #FFFFFF;
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: 0 2px 8px var(--color-primary-25);
    text-decoration: none;
}

.cta-independent.button--primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px var(--color-primary-35);
    background: var(--color-primary-surface-hover);
}

.cta-independent.button--primary svg {
    color: #FFFFFF;
    stroke: #FFFFFF;
    fill: none;
}

/* Text link style for secondary CTA */
.cta-independent--text {
    color: var(--color-text);
    text-decoration: none;
    padding: var(--space-4) 0;
}

.cta-independent--text:hover {
    transform: translateY(-2px);
    color: var(--color-primary);
}

@media (max-width: 480px) {
    .cta-actions--independent {
        flex-direction: row;
        gap: var(--space-5);
    }
    
    .cta-independent.button--primary {
        padding: var(--space-3) var(--space-5);
    }
}

@media (max-width: 480px) {
    .cta-actions {
        flex-direction: column;
        width: 100%;
    }

    .cta-actions .button {
        width: 100%;
        justify-content: center;
    }
}

/* Responsive CTA buttons */
@media (max-width: 480px) {
    .button-group--cta {
        flex-direction: column;
        width: 100%;
    }
    
    .button-group--cta .button {
        width: 100%;
        justify-content: center;
    }
}

/* Legacy meta section - kept for backwards compatibility */
.about-cta__meta {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
}

@media (max-width: 500px) {
    .about-cta__meta {
        grid-template-columns: 1fr;
    }
}

.about-cta__meta > div {
    padding: var(--space-6);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    transition: all var(--transition-base);
}

.about-cta__meta > div:hover {
    border-color: var(--color-primary-light);
    box-shadow: var(--shadow-md);
}

.about-cta__meta span {
    display: block;
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
    margin-bottom: var(--space-2);
}

.about-cta__meta strong {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-text);
}

/* ============ CONTACT PAGE ============ */

/* Contact Hero */
.contact-hero {
    background: var(--color-bg);
}

/* Contact Grid */
.contact-grid {
    padding: var(--space-16) 0;
    background: var(--color-surface-alt);
    position: relative;
}

.contact-grid::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--gradient-mesh);
    pointer-events: none;
    opacity: 0.3;
}

.contact-grid__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
}

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

.contact-grid__cards {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.contact-grid__card {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    padding: var(--space-6);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    text-decoration: none;
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

.contact-grid__card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--gradient-primary);
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.contact-grid__card:hover {
    transform: translateX(8px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-primary-light);
}

.contact-grid__card:hover::before {
    opacity: 1;
}

.contact-grid__card-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary-subtle);
    border-radius: var(--radius-lg);
    flex-shrink: 0;
}

.contact-grid__card-icon svg {
    width: 24px;
    height: 24px;
    color: var(--color-primary);
}

.contact-grid__card-content {
    flex: 1;
}

.contact-grid__card span {
    display: block;
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
    margin-bottom: var(--space-1);
}

.contact-grid__card strong {
    font-size: var(--font-size-md);
    font-weight: 700;
    color: var(--color-text);
}

/* Contact Details */
.contact-grid__details {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.contact-grid__details > div {
    padding: var(--space-6);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
}

.contact-grid__details span {
    display: block;
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-primary);
    margin-bottom: var(--space-2);
}

.contact-grid__details strong {
    display: block;
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-text);
}

.contact-grid__details p {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin: var(--space-2) 0 0 0;
    line-height: var(--line-height-relaxed);
}

/* Contact Form */
.contact-form {
    padding: var(--space-16) 0 var(--space-20);
    background: var(--color-bg);
}

.contact-form__shell {
    max-width: 700px;
    margin: 0 auto;
    padding: var(--space-10);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-lg);
    text-align: center;
}

.contact-form__shell h2 {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    margin-bottom: var(--space-4);
    color: var(--color-text);
}

.contact-form__shell > p {
    font-size: var(--font-size-md);
    color: var(--color-text-muted);
    margin-bottom: var(--space-6);
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

/* Contact form fields */
.aiwp-contact-form {
    margin-top: var(--space-7);
    display: grid;
    gap: var(--space-5);
    text-align: left;
}

.aiwp-contact-form__grid {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.aiwp-contact-form label {
    font-weight: 600;
    color: var(--color-text);
    display: block;
    font-size: var(--font-size-sm);
}

.aiwp-contact-form input,
.aiwp-contact-form select,
.aiwp-contact-form textarea {
    width: 100%;
    margin-top: var(--space-2);
    padding: 0.75rem 0.9rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: var(--color-surface-alt);
    color: var(--color-text);
    -webkit-text-fill-color: var(--color-text);
    caret-color: var(--color-text);
    font-size: var(--font-size-base);
}

.aiwp-contact-form input::placeholder,
.aiwp-contact-form textarea::placeholder {
    color: var(--color-text-muted);
    opacity: 0.85;
}

.aiwp-contact-form textarea {
    min-height: 140px;
    resize: vertical;
}

.aiwp-contact-form__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-4);
}

.aiwp-contact-form__note {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.aiwp-contact-form__status {
    display: none;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
}

.aiwp-contact-form__status.is-success {
    display: block;
    background: var(--color-success, #22c55e);
    color: #ffffff;
}

.aiwp-contact-form__status.is-error {
    display: block;
    background: var(--color-error, #f43f5e);
    color: #ffffff;
}

.aiwp-hp {
    position: absolute !important;
    left: -9999px !important;
    height: 1px !important;
    width: 1px !important;
    min-height: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    margin: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

.aiwp-turnstile {
    display: flex;
    justify-content: center;
    margin-top: var(--space-4);
}

/* Contact page CTA row ("Email Me Directly" + "See Free Tools")
   Use the shared .button-group--cta system, but keep layout consistent inside the contact shell. */
.contact-form .button-group--cta {
    margin-top: var(--space-6);
    justify-content: center;
}

/* ============ TOOLS PAGE ============ */

.tools-hero {
    position: relative;
    padding: clamp(4rem, 10vw, 7rem) clamp(1.5rem, 5vw, 3rem);
    text-align: left;
    overflow: hidden;
    background: var(--color-surface-alt);
}

.tools-hero h1 {
    font-size: clamp(2.25rem, 5vw, 3.75rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
    margin-bottom: var(--space-5);
    color: var(--color-text);
}

.tools-hero p {
    font-size: clamp(1rem, 2vw, var(--font-size-lg));
    color: var(--color-text-secondary);
    max-width: 600px;
    margin: 0 auto var(--space-8);
}

@media (max-width: 768px) {
    .tools-hero {
        text-align: center;
        padding-left: var(--space-4);
        padding-right: var(--space-4);
    }
}

/* Tools Grid */
.tools-grid {
    padding: clamp(3rem, 8vw, 5rem) 0 clamp(2rem, 6vw, 4rem);
    background: var(--color-surface-alt);
    position: relative;
}

/* Override WordPress block layout for tools grid - make it a CSS grid */
.tools-grid.wp-block-group.is-layout-constrained {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    grid-auto-rows: 1fr;
    gap: clamp(1.5rem, 3vw, 2.75rem);
    max-width: 1200px;
    margin: 0 auto;
    padding: clamp(2.5rem, 6vw, 4rem) clamp(1.5rem, 4vw, 3rem);
}

.tools-grid::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--gradient-mesh);
    pointer-events: none;
    opacity: 0.3;
}

.tools-grid .container {
    position: relative;
    z-index: 1;
}

.tools-grid__header {
    text-align: center;
    margin-bottom: var(--space-12);
}

.tools-grid__header h2 {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    margin-bottom: var(--space-3);
}

.tools-grid__header p {
    color: var(--color-text-muted);
    max-width: 500px;
    margin: 0 auto;
}

.tools-grid__items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: clamp(1.5rem, 3vw, 2.5rem);
    align-items: stretch;
}

/* Tool Card (Enhanced) */
.tool-card {
    position: relative;
    padding: var(--space-8);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2xl);
    text-decoration: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    transition: all var(--transition-base);
    overflow: hidden;
    min-height: 200px;
    height: 100%;
}

/* Override WordPress block layout inside tool cards */
.tool-card.wp-block-group.is-layout-flow {
    display: flex !important;
    -webkit-text-fill-color: var(--color-text); /* This line was incorrectly added */
    caret-color: var(--color-text);
    gap: var(--space-3);
}

.tool-card h3 {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 var(--space-2) 0;
}

.tool-card > p {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    line-height: var(--line-height-relaxed);
    margin: 0;
    flex: 1;
}

.tool-card > p:last-child {
    margin-top: auto;
    flex: 0;
}

.tool-card .button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    background: var(--gradient-primary);
    color: #fff;
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-decoration: none;
    transition: all var(--transition-fast);
    box-shadow: var(--shadow-md);
}

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

.tool-card .button-secondary {
    background: transparent;
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
    box-shadow: none;
}

.tool-card .button-secondary:hover {
    background: var(--color-primary);
    color: #fff;
}

.tool-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--gradient-aurora);
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.tool-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
    border-color: var(--color-primary-light);
}

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

.tool-card__icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient-primary);
    border-radius: var(--radius-xl);
    color: #fff;
    font-size: 1.5rem;
}

.tool-card__title {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-text);
    margin: 0;
}

.tool-card__description {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    line-height: var(--line-height-relaxed);
    margin: 0;
    flex: 1;
}

.tool-card__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-primary);
    margin-top: auto;
}

.tool-card__cta svg {
    width: 16px;
    height: 16px;
    transition: transform var(--transition-fast);
}

.tool-card:hover .tool-card__cta svg {
    transform: translateX(4px);
}

/* ============ CTA SECTION (Tools Page) ============ */
.cta-section {
    background: var(--color-surface-dark, rgba(18, 18, 26, 1));
    border-radius: var(--radius-2xl, 24px);
    padding: clamp(3rem, 8vw, 5rem) clamp(1.5rem, 5vw, 3rem);
    margin: var(--space-16, 4rem) auto;
    max-width: 900px;
    text-align: center;
}

.cta-section h2 {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    color: var(--color-text-light, var(--color-text-dark));
    margin-bottom: var(--space-4, 1rem);
    line-height: 1.2;
}

.cta-section p {
    font-size: var(--font-size-lg, 1.125rem);
    color: var(--color-text-slate-300, var(--color-text-secondary-dark));
    max-width: 600px;
    margin: 0 auto var(--space-8, 2rem);
    line-height: var(--line-height-relaxed, 1.7);
}

.cta-section .wp-block-buttons {
    justify-content: center;
}

.cta-section .wp-block-button__link {
    transition: background var(--transition-fast), box-shadow var(--transition-fast);
    box-shadow: 0 6px 18px rgba(var(--color-primary-rgb, 0, 102, 204), 0.28);
}

@media (hover: hover) and (pointer: fine) {
    .cta-section .wp-block-button__link:hover {
        transform: none;
        box-shadow: 0 10px 26px rgba(var(--color-primary-rgb, 0, 102, 204), 0.35);
    }
}

.cta-section .wp-block-button__link:active {
    transform: none;
}

/* Hide empty entry footer on pages without tags */
.entry__footer:empty,
.entry__footer:not(:has(*:not(:empty))) {
    display: none;
    padding: 0;
    margin: 0;
    border: none;
}

/* Fallback for browsers without :has() support */
@supports not selector(:has(*)) {
    .page .entry__footer {
        display: none;
    }
}

/* ============ DARK MODE OVERRIDES ============ */

:root[data-theme="dark"] .page-hero::before,
:root[data-theme="dark"] .tools-hero::before {
    opacity: 0.2;
}

:root[data-theme="dark"] .page-hero h1,
:root[data-theme="dark"] .tools-hero h1 {
    color: var(--color-primary-light);
}

:root[data-theme="dark"] .page-hero > .container > p,
:root[data-theme="dark"] .tools-hero p {
    color: var(--color-text-slate-300, var(--color-text-secondary-dark));
}

:root[data-theme="dark"] .about-principles {
    background: var(--color-bg-dark);
}

:root[data-theme="dark"] .about-principles__card,
:root[data-theme="dark"] .contact-grid__card,
:root[data-theme="dark"] .contact-grid__details > div,
:root[data-theme="dark"] .about-cta__meta > div,
:root[data-theme="dark"] .tool-card,
:root[data-theme="dark"] .contact-form__shell {
    background: var(--color-surface-dark);
    border-color: var(--color-border-dark);
}

:root[data-theme="dark"] .about-principles__card span,
:root[data-theme="dark"] .contact-grid__card strong,
:root[data-theme="dark"] .contact-grid__details strong,
:root[data-theme="dark"] .about-cta__meta strong,
:root[data-theme="dark"] .tool-card__title,
:root[data-theme="dark"] .contact-form__shell h2,
:root[data-theme="dark"] .about-cta__grid h2 {
    color: var(--color-text-dark);
}

:root[data-theme="dark"] .about-principles__card p,
:root[data-theme="dark"] .tool-card__description,
:root[data-theme="dark"] .contact-grid__card span,
:root[data-theme="dark"] .contact-grid__details span,
:root[data-theme="dark"] .contact-grid__details p,
:root[data-theme="dark"] .about-cta__meta span,
:root[data-theme="dark"] .contact-form__shell > p,
:root[data-theme="dark"] .about-cta__grid > div:first-child > p {
    color: var(--color-text-muted-dark);
}

:root[data-theme="dark"] .about-editorial,
:root[data-theme="dark"] .contact-grid,
:root[data-theme="dark"] .tools-grid {
    background: var(--color-overlay-light);
}

:root[data-theme="dark"] .about-editorial .container > *,
:root[data-theme="dark"] .about-editorial h2 {
    color: var(--color-text-dark);
}

:root[data-theme="dark"] .about-editorial p {
    color: var(--color-text-secondary-dark);
}

:root[data-theme="dark"] .about-editorial::before,
:root[data-theme="dark"] .contact-grid::before,
:root[data-theme="dark"] .tools-grid::before {
    opacity: 0.15;
}

:root[data-theme="dark"] .about-cta {
    background: var(--color-surface-alt);
}

:root[data-theme="dark"] .about-cta::before {
    background: var(--color-primary);
}

:root[data-theme="dark"] .about-cta__eyebrow {
    color: var(--color-primary-light);
    background: var(--color-primary-15);
    border-color: var(--color-primary-25);
}

:root[data-theme="dark"] .about-cta__content > p {
    color: var(--color-text-muted-dark);
}

:root[data-theme="dark"] .button-group--cta .button--primary {
    background: var(--color-primary);
    box-shadow: 0 2px 12px var(--color-primary-35);
}

:root[data-theme="dark"] .button-group--cta .button--ghost {
    color: var(--color-text-dark);
    border-color: rgba(var(--color-white-rgb), 0.2);
}

:root[data-theme="dark"] .button-group--cta .button--ghost:hover {
    color: var(--color-primary-light);
    border-color: var(--color-primary-light);
    background: var(--color-primary-10);
}

:root[data-theme="dark"] .contact-grid__card-icon {
    background: var(--color-primary-20);
}

:root[data-theme="dark"] .contact-grid__details span {
    color: var(--color-primary-light);
}

/* ============ BUTTON FIXES - LIGHT & DARK MODE ============ */

/* Button group alignment fix for cross-browser consistency */
.about-cta .button-group,
.page-hero .button-group,
.contact-form .button-group {
    display: inline-flex;
    align-items: stretch; /* Equal heights */
    gap: var(--space-3);
    flex-wrap: wrap;
}

/* Primary buttons on About/Contact/Tools pages */
.page-hero .button,
.about-cta .button,
.contact-form .button {
    background: var(--color-primary-surface);
    color: var(--sv-btn-text-on-primary);
    border: 2px solid transparent; /* Match ghost button border for equal height */
    box-sizing: border-box;
    min-height: 44px; /* Touch-friendly minimum height */
    line-height: 1.25;
}

.page-hero .button:hover,
.about-cta .button:hover,
.contact-form .button:hover {
    background: var(--color-primary-surface-hover);
    color: var(--sv-btn-text-on-primary);
}

.page-hero .button:focus,
.page-hero .button:focus-visible,
.about-cta .button:focus,
.about-cta .button:focus-visible,
.contact-form .button:focus,
.contact-form .button:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    color: var(--sv-btn-text-on-primary);
}

.page-hero .button:active,
.about-cta .button:active,
.contact-form .button:active {
    transform: translateY(1px);
    color: var(--sv-btn-text-on-primary);
}

/* Ghost/Secondary buttons - Light Mode */
.page-hero .button--ghost,
.about-cta .button--ghost {
    background: transparent;
    color: var(--color-text);
    border: 2px solid var(--color-border-strong);
    box-sizing: border-box;
    min-height: 44px; /* Match primary button height */
    line-height: 1.25;
}

.page-hero .button--ghost:hover,
.about-cta .button--ghost:hover {
    background: var(--color-surface-alt);
    color: var(--color-text);
    border-color: var(--color-primary);
}

.page-hero .button--ghost:focus,
.page-hero .button--ghost:focus-visible,
.about-cta .button--ghost:focus,
.about-cta .button--ghost:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    color: var(--color-text);
    background: var(--color-surface-alt);
}

.page-hero .button--ghost:active,
.about-cta .button--ghost:active {
    background: var(--color-surface);
    color: var(--color-text);
    transform: translateY(1px);
}

/* Ghost/Secondary buttons - Dark Mode */
:root[data-theme="dark"] .page-hero .button--ghost,
:root[data-theme="dark"] .about-cta .button--ghost {
    background: transparent;
    color: var(--color-text-dark);
    border: 2px solid rgba(var(--color-white-rgb), 0.3);
}

:root[data-theme="dark"] .page-hero .button--ghost:hover,
:root[data-theme="dark"] .about-cta .button--ghost:hover {
    background: rgba(var(--color-white-rgb), 0.1);
    color: var(--color-text-dark);
    border-color: var(--color-primary-light);
}

:root[data-theme="dark"] .page-hero .button--ghost:focus,
:root[data-theme="dark"] .page-hero .button--ghost:focus-visible,
:root[data-theme="dark"] .about-cta .button--ghost:focus,
:root[data-theme="dark"] .about-cta .button--ghost:focus-visible {
    outline: 2px solid var(--color-primary-light);
    outline-offset: 2px;
    color: var(--color-text-dark);
    background: rgba(var(--color-white-rgb), 0.1);
}

:root[data-theme="dark"] .page-hero .button--ghost:active,
:root[data-theme="dark"] .about-cta .button--ghost:active {
    background: rgba(var(--color-white-rgb), 0.15);
    color: var(--color-text-dark);
}

/* ============ RESPONSIVE ============ */

@media (max-width: 640px) {
    .page-hero,
    .tools-hero {
        padding: var(--space-12) 0;
    }
    
    .about-principles,
    .about-cta,
    .contact-grid,
    .contact-form,
    .tools-grid {
        padding: var(--space-12) 0;
    }
    
    .about-principles__card,
    .tool-card {
        padding: var(--space-6);
    }
    
    .contact-form__shell {
        padding: var(--space-6);
    }
}

/* ============ NEWSLETTER SECTION ============ */
.newsletter-section {
    padding: var(--space-20) 0;
    background: var(--color-surface-alt);
    position: relative;
    overflow: hidden;
}

.newsletter-section__inner {
    position: relative;
    z-index: 1;
    max-width: 680px;
    margin: 0 auto;
    padding: var(--space-12);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-xl);
    text-align: center;
}

.newsletter-section__icon {
    width: 80px;
    height: 80px;
    margin: 0 auto var(--space-6);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary);
    border-radius: var(--radius-2xl);
    color: #fff;
}

.newsletter-section__content {
    margin-bottom: var(--space-8);
}

.newsletter-section__eyebrow {
    display: inline-block;
    padding: var(--space-1) var(--space-4);
    background: var(--color-primary-subtle);
    color: var(--color-primary);
    font-size: var(--font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-radius: var(--radius-full);
    margin-bottom: var(--space-4);
}

.newsletter-section__content h2 {
    font-size: clamp(1.75rem, 4vw, 2.25rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: var(--space-4);
    color: var(--color-text);
}

.newsletter-section__content p {
    font-size: var(--font-size-md);
    color: var(--color-text-muted);
    line-height: var(--line-height-relaxed);
    max-width: 480px;
    margin: 0 auto;
}

/* Newsletter Form */
.newsletter-form {
    display: flex;
    gap: var(--space-3);
    max-width: 480px;
    margin: 0 auto var(--space-6);
}

.newsletter-form__input-group {
    flex: 1;
    position: relative;
}

.newsletter-form__icon {
    position: absolute;
    left: var(--space-4);
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-muted);
    pointer-events: none;
}

.newsletter-form input[type="email"] {
    width: 100%;
    padding: var(--space-4) var(--space-4) var(--space-4) var(--space-12);
    font-size: var(--font-size-md);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-bg);
    color: var(--color-text);
    transition: all var(--transition-fast);
}

.newsletter-form input[type="email"]:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px var(--color-primary-subtle);
}

.newsletter-form input[type="email"]::placeholder {
    color: var(--color-text-muted);
}

.newsletter-form__button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-6);
    background: var(--color-primary-surface, var(--color-primary, #0066CC));
    color: #FFFFFF;
    color: var(--smart-btn-text-on-primary, #FFFFFF);
    -webkit-text-fill-color: #FFFFFF;
    -webkit-text-fill-color: var(--smart-btn-text-on-primary, #FFFFFF);
    font-size: var(--font-size-md);
    font-weight: 600;
    border: none;
    border-radius: var(--radius-xl);
    cursor: pointer;
    transition: all var(--transition-base);
    white-space: nowrap;
    box-shadow: var(--shadow-md);
}

.newsletter-form__button:hover {
    background: var(--color-primary-surface-hover, var(--color-primary-hover, #004D99));
    color: #FFFFFF;
    color: var(--smart-btn-text-on-primary, #FFFFFF);
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow-primary);
}

.newsletter-form__button svg {
    transition: transform var(--transition-fast);
}

.newsletter-form__button:hover svg {
    transform: translateX(4px);
}

.newsletter-section__note {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin: 0;
}

.newsletter-section__note svg {
    color: var(--color-success);
    flex-shrink: 0;
}

/* Newsletter Form Responsive */
@media (max-width: 600px) {
    .newsletter-section__inner {
        padding: var(--space-8);
        margin: 0 var(--space-4);
    }
    
    .newsletter-form {
        flex-direction: column;
    }
    
    .newsletter-form__button {
        justify-content: center;
    }
}

/* ============ NEWSLETTER MODAL ============ */
.newsletter-modal .modal-content,
.newsletter-modal__content {
    max-width: 480px;
    padding: var(--space-10);
    text-align: center;
    border-radius: var(--radius-2xl);
    position: relative;
    overflow: hidden;
}

.newsletter-modal__content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--gradient-aurora);
}

.newsletter-modal .modal-close {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    cursor: pointer;
    color: var(--color-text-muted);
    transition: all var(--transition-fast);
    font-size: 0;
}

.newsletter-modal .modal-close:hover {
    background: var(--color-error-subtle, var(--color-error-10));
    border-color: var(--color-error);
    color: var(--color-error);
}

.newsletter-modal__icon {
    width: 72px;
    height: 72px;
    margin: 0 auto var(--space-6);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient-primary);
    border-radius: var(--radius-xl);
    color: #fff;
    box-shadow: var(--shadow-glow-primary);
}

.newsletter-modal__content h2 {
    font-size: var(--font-size-2xl);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: var(--space-3);
    color: var(--color-text);
}

.newsletter-modal__content > p {
    font-size: var(--font-size-md);
    color: var(--color-text-muted);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--space-6);
}

/* Modal Form */
.newsletter-modal__form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.newsletter-modal__input-wrapper {
    position: relative;
}

.newsletter-modal__input-icon {
    position: absolute;
    left: var(--space-4);
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-muted);
    pointer-events: none;
}

.newsletter-modal__form input[type="email"] {
    width: 100%;
    padding: var(--space-4) var(--space-4) var(--space-4) var(--space-12);
    font-size: var(--font-size-md);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-bg);
    color: var(--color-text);
    transition: all var(--transition-fast);
}

.newsletter-modal__form input[type="email"]:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px var(--color-primary-subtle);
}

.newsletter-modal__form input[type="email"]::placeholder {
    color: var(--color-text-muted);
}

.newsletter-modal__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-6);
    background: var(--gradient-primary);
    color: #fff;
    font-size: var(--font-size-md);
    font-weight: 600;
    border: none;
    border-radius: var(--radius-xl);
    cursor: pointer;
    transition: all var(--transition-base);
    box-shadow: var(--shadow-md);
}

.newsletter-modal__submit:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow-primary);
}

.newsletter-modal__submit:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.newsletter-modal__submit svg {
    transition: transform var(--transition-fast);
}

.newsletter-modal__submit:hover:not(:disabled) svg {
    transform: translateX(4px);
}

.newsletter-modal__note {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin-top: var(--space-4);
}

.newsletter-modal__note svg {
    color: var(--color-success);
    flex-shrink: 0;
}

/* Modal Response Messages */
.newsletter-modal__response:empty {
    display: none;
}

.newsletter-modal__response {
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-4);
    font-size: var(--font-size-sm);
    font-weight: 600;
}

.newsletter-modal__response.success {
    background: var(--color-success-10);
    color: var(--color-success);
    border: 1px solid var(--color-success);
}

.newsletter-modal__response.error {
    background: var(--color-error-10);
    color: var(--color-error);
    border: 1px solid var(--color-error);
}

/* ============ DARK MODE - NEWSLETTER ============ */
:root[data-theme="dark"] .newsletter-section::before {
    opacity: 0.2;
}

:root[data-theme="dark"] .newsletter-section__inner {
    background: var(--color-surface-dark);
    border-color: var(--color-border-dark);
}

:root[data-theme="dark"] .newsletter-section__content h2 {
    color: var(--color-text-slate-100);
}

:root[data-theme="dark"] .newsletter-form input[type="email"],
:root[data-theme="dark"] .newsletter-modal__form input[type="email"] {
    background: var(--color-overlay-light);
    border-color: var(--color-border-dark);
    color: var(--color-text-slate-100);
}

:root[data-theme="dark"] .newsletter-modal__content {
    background: var(--color-surface-dark);
}

:root[data-theme="dark"] .newsletter-modal__content h2 {
    color: var(--color-text-slate-100);
}

/* ========================================
   Single Article Styles
   ======================================== */

/* Article Header */
.article-header {
    margin-bottom: var(--space-12);
}

.article-header__container {
    /* Give the title/meta more room on desktop while keeping readability. */
    max-width: min(100%, 1120px);
    margin: 0 auto;
    padding: 0 var(--space-6);
}

.article-category {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--touch-target-min, 44px);
    padding: 0 var(--space-4);
    background: var(--color-primary);
    color: white;
    font-size: var(--font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-6);
    text-decoration: none;
    transition: var(--transition-base);
}

.article-category:hover {
    background: var(--color-primary-dark);
    color: white;
}

.article-title {
    font-size: clamp(2rem, 5vw, var(--font-size-3xl));
    font-weight: 900;
    line-height: 1.1;
    margin: 0 0 var(--space-6);
    color: var(--color-text);
}

.article-subtitle {
    margin: calc(-1 * var(--space-3)) 0 var(--space-6);
    font-size: var(--font-size-lg);
    line-height: 1.45;
    color: var(--color-text-secondary);
    letter-spacing: -0.01em;
}

.article-meta {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.article-meta__author {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.article-author-avatar {
    border-radius: 50%;
}

.article-meta__author-name {
    font-weight: 600;
    color: var(--color-text);
}

.article-meta__separator {
    color: var(--color-text-muted);
}

.article-review {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-3);
    flex-wrap: wrap;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.article-review__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    border: 1px solid var(--color-border-subtle);
    background: var(--color-surface);
    color: var(--color-text);
    font-weight: 600;
}

.article-review__link {
    color: var(--color-accent);
    text-decoration: none;
    font-weight: 600;
}

/* Featured Image */
.article-featured-image {
    margin: var(--space-8) auto 0;
    width: 100%;
    max-width: var(--max-width-container);
}

.article-featured-image .article-image {
    width: 100%;
    height: auto;
    border-radius: var(--radius-xl);
    display: block;
}

.article-featured-image__caption {
    margin-top: var(--space-3);
    text-align: center;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

/* Article Content */
.single-article {
    padding: var(--space-8) 0 var(--space-16);
}

@media (max-width: 768px) {
    .single-article {
        padding: var(--space-5) 0 var(--space-12);
    }
}

.article-content {
    /* Wide shell so grids/infographics can fill desktop width */
    max-width: 100%;
    margin: 0 auto;
    padding: var(--space-8) var(--space-6);
    font-size: var(--font-size-md);
    line-height: 1.75;
    color: var(--color-text);
    background: rgba(var(--color-white-rgb), 0.9);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-card);
    position: relative;
}

/* ========================================
   CONTENT COLOR SAFETY (Premium + Readable)
   Tone down full-bleed primary backgrounds inside article content.
   Gutenberg core sets many background utility classes with `!important`,
   so we mirror that only within the post body to avoid global side effects.
   ======================================== */
.article-content :is(.wp-block-group, .wp-block-cover, .wp-block-columns, .wp-block-column, .wp-block-media-text, .wp-block-table).has-primary-background-color,
.article-content :is(.wp-block-group, .wp-block-cover, .wp-block-columns, .wp-block-column, .wp-block-media-text, .wp-block-table)[style*="background-color: var(--color-primary)"],
.article-content :is(.wp-block-group, .wp-block-cover, .wp-block-columns, .wp-block-column, .wp-block-media-text, .wp-block-table)[style*="background: var(--color-primary)"] {
    background-color: var(--color-primary-10) !important;
    color: var(--color-text) !important;
    border: 1px solid var(--color-primary-20);
    border-left: 4px solid var(--color-primary);
    border-radius: var(--radius-xl);
}

.article-content :is(.wp-block-group, .wp-block-cover).has-primary-background-color a,
.article-content :is(.wp-block-group, .wp-block-cover)[style*="background-color: var(--color-primary)"] a,
.article-content :is(.wp-block-group, .wp-block-cover)[style*="background: var(--color-primary)"] a {
    color: var(--color-primary);
}

@supports (backdrop-filter: blur(12px)) {
    .article-content {
        background: rgba(var(--color-white-rgb), 0.82);
        -webkit-backdrop-filter: blur(12px) saturate(180%);
        backdrop-filter: blur(12px) saturate(180%);
    }
}

[data-theme="dark"] .article-content {
    background: rgba(13, 13, 13, 0.9);
    border-color: var(--color-border-dark);
    box-shadow: var(--shadow-lg);
}

/* AIWP Content Engine: avoid duplicated headers inside theme templates */
.article-content .aiwp-hero {
    background: transparent;
    border: none;
    padding: 0;
    box-shadow: none;
    margin: 0 0 var(--space-8);
}

.article-content .aiwp-hero h1,
.article-content .aiwp-hero .aiwp-eyebrow {
    display: none !important;
}

/* Desktop: keep prose readable while allowing full-width components */
@media (min-width: 1024px) {
    .article-content {
        padding: var(--space-10) var(--space-8);
    }

    .article-content > :where(p, h2, h3, h4, h5, h6, ul, ol, blockquote, pre, table) {
        max-width: var(--max-width-prose);
        margin-left: auto;
        margin-right: auto;
    }

    .article-content > :where(.synth-stats-grid, .synth-chart-container, .synth-compare-grid, .synth-bento-grid, .synth-timeline, .synth-feature-grid, .aiwp-section, .wp-block-image.alignwide, .wp-block-group.alignwide, .wp-block-table.alignwide, .wp-block-image.alignfull, .wp-block-group.alignfull) {
        max-width: 100%;
    }
}

.article-content p {
    color: var(--color-text);
    font-size: 1.125rem; /* 18px - comfortable reading size */
    line-height: 1.8; /* Slightly more breathing room */
    margin-bottom: var(--space-5);
    text-align: justify; /* Professional look */
    hyphens: auto; /* Enable automatic hyphenation */
    -webkit-hyphens: auto;
}

/* First paragraph after heading - no indent, but subsequent paragraphs get indent */
.article-content h2 + p,
.article-content h3 + p,
.article-content h4 + p {
    text-indent: 0;
}

.article-content p + p {
    text-indent: 1.5em; /* Traditional paragraph indent for consecutive paragraphs */
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .article-content p {
        font-size: 1rem; /* 16px on mobile */
        line-height: 1.75;
        text-align: left; /* Left-align on mobile for better readability */
        hyphens: none;
    }
    
    .article-content p + p {
        text-indent: 1em;
    }
}

.article-content h2,
.article-content h3,
.article-content h4 {
    color: var(--color-text);
    margin-top: var(--space-8);
    margin-bottom: var(--space-3);
    letter-spacing: -0.01em;
    scroll-margin-top: calc(var(--header-height) + var(--space-6));
}

.article-content ul,
.article-content ol {
    padding-left: var(--space-6);
    margin: var(--space-5) 0;
    display: grid;
    gap: var(--space-3);
    color: var(--color-text);
}

.article-content li {
    line-height: 1.7;
    color: var(--color-text-secondary);
}

.article-content blockquote {
    background: var(--color-surface-alt);
    border-left: 4px solid var(--color-primary);
    border-radius: var(--radius-lg);
    padding: var(--space-5) var(--space-6);
    margin: var(--space-6) 0;
    box-shadow: var(--shadow-card);
}

[data-theme="dark"] .article-content blockquote {
    background: var(--color-surface-alt-dark);
    border-color: var(--color-primary);
}

.article-content figure {
    margin: var(--space-8) 0;
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
}

.article-content figure img {
    border-radius: inherit;
}

@media (max-width: 640px) {
    .article-content {
        padding: var(--space-6) var(--space-4);
    }
    .article-content h2,
    .article-content h3,
    .article-content h4 {
        margin-top: var(--space-6);
    }
}

.article-content a:not(.button):not(.btn):not(.wp-block-button__link) {
    color: var(--color-primary);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.3em;
    transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
}

.article-content a:not(.button):not(.btn):not(.wp-block-button__link):hover,
.article-content a:not(.button):not(.btn):not(.wp-block-button__link):focus-visible {
    color: var(--color-accent);
    text-decoration-color: currentColor;
}

/* ============================================
   ARTICLE FOOTER - AURORA GLASS ELEGANCE
   Premium design with refined aesthetics
   ============================================ */

.article-footer {
    max-width: var(--max-width-container);
    margin: var(--space-12) auto 0;
    padding: 0 var(--space-6);
    position: relative;
}

/* Elegant divider before footer */
.article-footer::before {
    content: '';
    position: absolute;
    top: calc(-1 * var(--space-10));
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    max-width: 300px;
    height: 1px;
    background: var(--color-border);
}

/* ============ ARTICLE TAGS - REFINED PILLS ============ */
.article-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-6);
    background: var(--color-surface-alt);
    border-radius: var(--radius-2xl);
    border: 1px solid var(--color-border);
    margin-bottom: var(--space-8);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    position: relative;
    overflow: hidden;
}

.article-tags::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--color-primary);
    opacity: 0.55;
}

.article-tags__label {
    font-weight: 700;
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-text-muted);
    padding-right: var(--space-4);
    border-right: 2px solid var(--color-border);
    margin-right: 0;
    flex-shrink: 0;
}

.article-tags__tag {
    position: relative;
    padding: var(--space-2) var(--space-5);
    background: var(--color-surface);
    color: var(--color-text-secondary);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid var(--color-border);
    overflow: hidden;
}

.article-tags__tag::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--gradient-primary);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
}

.article-tags__tag:hover {
    color: white;
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.article-tags__tag:hover::before {
    opacity: 1;
}

/* ============ SOCIAL SHARING - CLEAN MINIMAL DESIGN v6.0 ============ */
/* No gradients, high contrast, accessible */
.social-sharing {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    padding: var(--space-6);
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border);
    margin-top: var(--space-8);
    position: relative;
}

/* Desktop: Horizontal layout */
@media (min-width: 768px) {
    .social-sharing {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: var(--space-5) var(--space-6);
    }
    
    .social-sharing__header {
        margin-bottom: 0;
        padding-right: var(--space-5);
        border-right: 1px solid var(--color-border);
    }
}

/* Remove decorative pseudo-elements */
.social-sharing::before,
.social-sharing::after {
    display: none;
}

.social-sharing__header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.social-sharing__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--color-primary);
    border-radius: var(--radius-lg);
    color: white;
    flex-shrink: 0;
}

/* v6.5.0: Ensure SVG icon is visible with explicit stroke color */
.social-sharing__icon svg {
    stroke: #FFFFFF;
    fill: none;
    width: 20px;
    height: 20px;
}

.social-sharing__title {
    font-size: var(--font-size-base);
    font-weight: 600;
    margin: 0;
    color: var(--color-text);
}

.social-sharing__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    justify-content: flex-start;
}

@media (min-width: 768px) {
    .social-sharing__links {
        justify-content: flex-end;
    }
}

/* ============ SOCIAL SHARE BUTTONS - CLEAN SOLID COLORS ============ */
.social-share__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 500;
    text-decoration: none;
    transition: all var(--transition-fast);
    cursor: pointer;
    min-height: 40px;
    border: none;
}

.social-share__link svg {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    /* ALWAYS VISIBLE: Explicit white icons on colored backgrounds */
    fill: #FFFFFF !important;
    stroke: #FFFFFF !important;
    color: #FFFFFF !important;
}

/* For stroke-based icons (email, copy), fill should be none */
.social-share__link--email svg,
.social-share__link--copy svg {
    fill: none !important;
    stroke: #FFFFFF !important;
}

.social-share__link span {
    white-space: nowrap;
}

/* Twitter/X - Dark */
.social-share__link--twitter {
    background: #000000;
    color: #FFFFFF;
    -webkit-text-fill-color: #FFFFFF;
}

.social-share__link--twitter:hover {
    background: #1a1a1a;
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* Facebook - Official Blue */
.social-share__link--facebook {
    background: #1877F2;
    color: #FFFFFF;
    -webkit-text-fill-color: #FFFFFF;
}

.social-share__link--facebook:hover {
    background: #166FE5;
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* LinkedIn - Official Blue */
.social-share__link--linkedin {
    background: #0A66C2;
    color: #FFFFFF;
    -webkit-text-fill-color: #FFFFFF;
}

.social-share__link--linkedin:hover {
    background: #004182;
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* WhatsApp - Green (v5.29.0) */
.social-share__link--whatsapp {
    background: #25D366;
    color: white;
}

.social-share__link--whatsapp:hover {
    background: #128C7E;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.35);
}

/* Email - Purple (v5.29.0) */
.social-share__link--email {
    background: #8b5cf6;
    color: white;
}

.social-share__link--email:hover {
    background: #7c3aed;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.35);
}

/* Copy Link - Outlined */
.social-share__link--copy {
    background: var(--color-primary-surface, var(--color-primary));
    color: #FFFFFF;
    color: var(--sv-btn-text-on-primary, #FFFFFF);
    -webkit-text-fill-color: #FFFFFF;
    -webkit-text-fill-color: var(--sv-btn-text-on-primary, #FFFFFF);
    border: 1px solid rgba(var(--color-primary-surface-rgb, 0, 102, 204), 0.6);
}

.social-share__link--copy:hover {
    background: var(--color-primary-surface-hover, var(--color-primary-hover));
    border-color: var(--color-primary-surface-hover, var(--color-primary-hover));
    color: var(--sv-btn-text-on-primary);
    transform: translateY(-2px);
}

.social-share__link--copy.copied {
    background: var(--color-success);
    color: white;
    border-color: var(--color-success);
}

@keyframes copied-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}

/* ============ LIGHT MODE REFINEMENTS ============ */
:root:not([data-theme="dark"]) .article-footer::before {
    background: var(--color-border);
}

:root:not([data-theme="dark"]) .article-tags {
    background: var(--color-surface-alt);
    border-color: var(--color-border);
}

:root:not([data-theme="dark"]) .article-tags__tag {
    background: var(--color-surface);
    color: var(--color-text);
    border-color: var(--color-border);
}

/* Social sharing light mode - already clean, minimal overrides needed */
:root:not([data-theme="dark"]) .social-sharing {
    background: var(--color-surface);
    border-color: var(--color-border);
    box-shadow: var(--shadow-sm);
}

:root:not([data-theme="dark"]) .social-share__link--twitter {
    background: var(--color-primary-surface, var(--color-primary));
    color: var(--sv-btn-text-on-primary);
}

:root:not([data-theme="dark"]) .social-share__link--copy {
    background: var(--color-primary-surface, var(--color-primary));
    border-color: rgba(var(--color-primary-surface-rgb, 0, 102, 204), 0.6);
}

/* ============ RESPONSIVE - ARTICLE FOOTER ============ */
/* v6.4.0: Enhanced responsive social sharing */
@media (min-width: 768px) {
    .social-sharing {
        text-align: center;
    }
    
    .social-sharing__header {
        justify-content: center;
    }
    
    .social-sharing__links {
        justify-content: center;
    }
    
    .social-share__link {
        min-width: 140px;
    }
}

@media (max-width: 767px) {
    .social-sharing__links {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 480px) {
    .article-tags {
        padding: var(--space-4) var(--space-5);
    }
    
    .article-tags__label {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--color-border);
        padding-bottom: var(--space-3);
        margin-bottom: var(--space-2);
        margin-right: 0;
    }
    
    /* v6.5.0: Improved mobile social sharing - 2 columns for better visual balance */
    .social-sharing {
        padding: var(--space-5);
        text-align: center;
    }
    
    .social-sharing__header {
        justify-content: center;
        margin-bottom: var(--space-3);
    }
    
    .social-sharing__links {
        grid-template-columns: 1fr 1fr; /* 2 columns for balanced mobile layout */
        gap: var(--space-2);
    }
    
    .social-share__link {
        width: 100%;
        min-width: auto;
        padding: var(--space-3) var(--space-2);
        font-size: 0.8125rem;
    }
}

/* Desktop rail takes over sharing; keep footer clean */
@media (min-width: 1024px) {
    .article-footer .social-sharing {
        display: none;
    }
}

/* Mobile: keep sharing in footer, not the rail */
@media (max-width: 1023px) {
    .aiwp-design-card--share {
        display: none;
    }
}

/* Author Bio */
.author-bio {
    margin-top: var(--space-12);
    padding: var(--space-8);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
}

.author-bio__inner {
    display: flex;
    gap: var(--space-6);
    align-items: start;
}

.author-bio__avatar {
    border-radius: 50%;
    flex-shrink: 0;
}

.author-bio__content {
    flex: 1;
}

.author-bio__name {
    font-size: var(--font-size-lg);
    font-weight: 800;
    margin: 0 0 var(--space-2);
}

.author-bio__description {
    color: var(--color-text-muted);
    margin: 0 0 var(--space-4);
    line-height: 1.6;
}

.author-bio__links {
    display: flex;
    gap: var(--space-3);
}

.author-bio__link {
    color: var(--color-primary);
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition-base);
}

.author-bio__link:hover {
    text-decoration: underline;
}

/* ============ TOOLS PAGE RESPONSIVE ============ */
@media (max-width: 900px) {
    .tools-grid.wp-block-group.is-layout-constrained {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .tools-grid.wp-block-group.is-layout-constrained {
        grid-template-columns: 1fr;
        padding: var(--space-8) var(--space-4);
        gap: var(--space-4);
    }
    
    .tool-card {
        min-height: 0;
        padding: var(--space-6);
    }
}

/* Responsive adjustments for articles */
@media (max-width: 768px) {
    .article-header__container {
        padding: 0 var(--space-4);
    }
    
    .article-content {
        padding: 0 var(--space-4);
    }
    
    .article-footer {
        padding: 0 var(--space-4);
    }
    
    .author-bio__inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .author-bio__links {
        justify-content: center;
    }
}

/* ========================================
   KEY TAKEAWAYS & CALLOUT BOXES v6.0.0
   Clean, accessible design with high contrast
   No gradients - solid colors only
   ======================================== */

/* Base Takeaway/Callout Box */
.aiwp-takeaway,
.synth-takeaways,
.key-takeaways,
[class*="takeaway"] {
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-primary);
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    padding: var(--space-6);
    margin: var(--space-8) 0;
}

/* Takeaway Title/Header */
.aiwp-takeaway-title,
.synth-takeaways-title,
.key-takeaways-title,
[class*="takeaway"] > *:first-child:not(ul):not(ol) {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 var(--space-4) 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* Takeaway List */
.aiwp-takeaway ul,
.synth-takeaways ul,
.key-takeaways ul,
[class*="takeaway"] ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.aiwp-takeaway li,
.synth-takeaways li,
.key-takeaways li,
[class*="takeaway"] li {
    color: var(--color-text);
    padding: var(--space-3) 0;
    padding-left: var(--space-6);
    position: relative;
    border-bottom: 1px solid var(--color-border-subtle);
    line-height: var(--line-height-relaxed);
}

.aiwp-takeaway li:last-child,
.synth-takeaways li:last-child,
.key-takeaways li:last-child,
[class*="takeaway"] li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.aiwp-takeaway li::before,
.synth-takeaways li::before,
.key-takeaways li::before,
[class*="takeaway"] li::before {
    content: "→";
    position: absolute;
    left: 0;
    color: var(--color-primary);
    font-weight: 600;
}

/* Dark mode adjustments */
[data-theme="dark"] .aiwp-takeaway,
[data-theme="dark"] .synth-takeaways,
[data-theme="dark"] .key-takeaways,
[data-theme="dark"] [class*="takeaway"] {
    background: var(--color-surface-alt-dark);
    border-color: var(--color-border-dark);
    border-left-color: var(--color-primary);
}

[data-theme="dark"] .aiwp-takeaway li,
[data-theme="dark"] .synth-takeaways li,
[data-theme="dark"] .key-takeaways li,
[data-theme="dark"] [class*="takeaway"] li {
    color: var(--color-text-dark);
    border-bottom-color: var(--color-border-dark);
}

/* ========================================
   POST CONTENT INLINE STYLE OVERRIDES v6.0.0
   Force clean design on legacy posts with inline styles
   ======================================== */

/* Override ALL gradient backgrounds to solid colors */
[class*="synth-"][style*="gradient"],
[class*="takeaway"][style*="gradient"],
[class*="chart"][style*="gradient"],
[class*="stat"][style*="gradient"],
[class*="hero"][style*="gradient"],
[class*="quote"][style*="gradient"],
[class*="benefit"][style*="gradient"],
[class*="compare"][style*="gradient"] {
    background: var(--color-surface-alt) !important;
}

/* Fix dark background sections */
.synth-takeaways,
.synth-chart-container,
[class*="takeaways"][style*="#020617"],
[class*="takeaways"][style*="#0f172a"],
[style*="background: #020617"],
[style*="background: #0f172a"],
[style*="background: linear-gradient"] {
    background: var(--color-surface-alt) !important;
    border: 1px solid var(--color-border) !important;
}

/* Fix stat cards - remove gradient, use solid */
.synth-stat-card,
[class*="stat-card"] {
    background: var(--color-surface-alt) !important;
    border: 1px solid var(--color-border) !important;
}

.synth-stat-value,
[class*="stat-value"] {
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    color: var(--color-primary) !important;
}

.synth-stat-label,
[class*="stat-label"] {
    color: var(--color-text-muted) !important;
}

/* Fix chart containers */
.synth-chart-container,
[class*="chart-container"] {
    background: var(--color-surface-alt) !important;
    border: 1px solid var(--color-border) !important;
}

.synth-chart-title,
[class*="chart-title"] {
    color: var(--color-text) !important;
}

/* Fix bar chart fills - solid colors */
.synth-bar-fill,
[class*="bar-fill"] {
    background: var(--color-primary) !important;
}

.synth-bar-fill.cyan,
.synth-bar-fill.teal,
.synth-bar-fill.emerald,
.synth-bar-fill.sky,
.synth-bar-fill.blue {
    background: var(--color-primary) !important;
}

.synth-bar-label,
[class*="bar-label"] {
    color: var(--color-text-secondary) !important;
}

.synth-bar-track,
[class*="bar-track"] {
    background: var(--color-border) !important;
}

/* Fix section headings */
.synth-section h2,
[class*="section"] h2 {
    color: var(--color-text) !important;
    border-left-color: var(--color-primary) !important;
}

.synth-section h3,
[class*="section"] h3 {
    color: var(--color-text-secondary) !important;
}

.synth-section p,
[class*="section"] p {
    color: var(--color-text) !important;
}

/* Fix quote blocks */
.synth-quote,
[class*="quote"] {
    background: var(--color-primary-subtle) !important;
    border-left-color: var(--color-primary) !important;
}

.synth-quote-text,
[class*="quote-text"] {
    color: var(--color-text) !important;
}

.synth-quote-author,
[class*="quote-author"] {
    color: var(--color-primary) !important;
}

/* Fix tables */
.synth-table th,
[class*="table"] th {
    background: var(--color-primary) !important;
    color: var(--color-bg) !important;
}

.synth-table td,
[class*="table"] td {
    color: var(--color-text) !important;
    border-bottom-color: var(--color-border) !important;
}

/* Fix takeaways boxes */
.synth-takeaways {
    background: var(--color-surface-alt) !important;
    border: 1px solid var(--color-border) !important;
    border-left: 4px solid var(--color-primary) !important;
}

.synth-takeaways-title {
    color: var(--color-text) !important;
}

.synth-takeaways li {
    color: var(--color-text) !important;
    border-bottom-color: var(--color-border-subtle) !important;
}

/* Fix type/benefit cards */
.synth-type-card,
[class*="type-card"] {
    background: var(--color-surface) !important;
    border-color: var(--color-border) !important;
}

.synth-type-name,
[class*="type-name"] {
    color: var(--color-text) !important;
}

.synth-type-desc,
[class*="type-desc"] {
    color: var(--color-text-secondary) !important;
}

.synth-benefit,
[class*="benefit"] {
    background: var(--color-surface-alt) !important;
}

.synth-benefit-name,
[class*="benefit-name"] {
    color: var(--color-text) !important;
}

.synth-benefit-value,
[class*="benefit-value"] {
    color: var(--color-primary) !important;
}

/* Fix compare cards */
.synth-compare-card,
[class*="compare-card"] {
    background: var(--color-surface-alt) !important;
    border: 1px solid var(--color-border) !important;
}

.synth-compare-card.real {
    border-left: 4px solid var(--color-warning) !important;
}

.synth-compare-card.synthetic {
    border-left: 4px solid var(--color-primary) !important;
}

.synth-compare-title,
[class*="compare-title"] {
    color: var(--color-text) !important;
}

/* Fix hero overlay - ensure readable text */
.synth-hero-overlay,
[class*="hero-overlay"] {
    background: rgba(var(--color-black-rgb), 0.7) !important;
}

.synth-hero-title,
[class*="hero-title"] {
    color: var(--color-bg) !important;
}

/* Fix reading badges */
.synth-reading-badge,
[class*="reading-badge"] {
    background: var(--color-primary) !important;
    color: var(--color-bg) !important;
}

/* ============ 404 PAGE ============ */
.error-hero {
    padding-bottom: var(--space-16);
}

.error-hero__inner {
    max-width: 860px;
}

.error-hero__code {
    font-size: clamp(4rem, 10vw, 7rem);
    font-weight: 900;
    line-height: 1;
    color: var(--color-primary);
    margin: 0 0 var(--space-6);
}

.error-hero__search {
    max-width: 640px;
    margin: 0 auto var(--space-10);
}

.error-hero__search-row {
    display: flex;
    gap: var(--space-3);
    align-items: stretch;
}

.error-hero__search-input {
    flex: 1;
    width: 100%;
    padding: var(--space-4) var(--space-5);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-bg);
    color: var(--color-text);
    font-size: var(--font-size-base);
}

.error-hero__search-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
}

.error-hero__search-button {
    white-space: nowrap;
}

.error-hero__links {
    display: flex;
    justify-content: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-top: var(--space-6);
}

.error-popular {
    padding: var(--space-16) 0;
    border-top: 1px solid var(--color-border);
}

@media (max-width: 600px) {
    .error-hero__search-row {
        flex-direction: column;
    }

    .error-hero__search-button {
        width: 100%;
        justify-content: center;
    }
}

/* ============ SEARCH RESULTS PAGE ============ */
.search-hero {
    background: var(--color-surface-alt);
    padding: clamp(3rem, 8vw, 5rem) 0;
}

.search-hero__form {
    margin-top: var(--space-8);
    max-width: 540px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 var(--space-4);
}

/* Reset WordPress default search form styles - make outer form invisible */
.search-hero__form .search-form,
.search-hero .search-form {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Hide any default form styling - only the oval wrapper should be visible */
.search-hero__form,
.search-hero .search-form {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* ============ DYNAMIC ISLAND GRADIENT ANIMATION FOR SEARCH ============ */
@keyframes searchGradientPulse {
    0% {
        box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.5), 0 4px 20px rgba(0, 102, 204, 0.3);
        border-color: rgba(0, 102, 204, 0.8);
    }
    25% {
        box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.5), 0 6px 24px rgba(139, 92, 246, 0.4);
        border-color: rgba(139, 92, 246, 0.8);
    }
    50% {
        box-shadow: 0 0 0 5px rgba(6, 182, 212, 0.5), 0 8px 28px rgba(6, 182, 212, 0.35);
        border-color: rgba(6, 182, 212, 0.8);
    }
    75% {
        box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.5), 0 6px 24px rgba(139, 92, 246, 0.4);
        border-color: rgba(139, 92, 246, 0.8);
    }
    100% {
        box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.4), 0 4px 20px rgba(0, 102, 204, 0.25);
        border-color: rgba(0, 102, 204, 0.6);
    }
}

@keyframes searchScalePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.01); }
}

/* ============ GEMINI-STYLE CIRCULATING GRADIENT FOR SEARCH ============ */
@keyframes searchCirculatingGradient {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* Elegant OVAL search form - clean minimal styling with SOLID background */
.search-form__wrapper {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    background: #ffffff !important; /* SOLID white - no transparency */
    background-color: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    border-radius: 9999px !important; /* Full oval pill shape */
    padding: 6px 6px 6px 20px !important;
    transition: box-shadow 0.3s ease, border-color 0.3s ease !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05) !important;
    flex-direction: row !important;
    position: relative !important;
    overflow: visible !important; /* Allow glow to extend beyond borders */
    z-index: 1;
    visibility: visible !important;
    opacity: 1 !important;
    isolation: isolate; /* Create stacking context */
}

/* ========================================
   GEMINI-STYLE ROTATING GRADIENT BORDER
   Multi-color rotating conic-gradient effect
   ======================================== */

/* Default state: NO pseudo-elements */
.search-form__wrapper::before,
.search-form__wrapper::after {
    content: none;
    display: none;
}

/* Gemini rotating gradient keyframes */
@keyframes geminiSearchRotate {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* NO-GRADIENT search glow (finite pulse)
   - Removes conic-gradient border (policy) + infinite rotation (performance).
   - Keeps a premium "active" state via a subtle box-shadow pulse.
*/
@keyframes searchGlowPulse {
    0%, 100% {
        box-shadow:
            0 0 0 rgba(var(--color-primary-rgb, 0, 102, 204), 0),
            0 10px 24px rgba(var(--color-black-rgb, 26, 26, 26), 0.10);
    }
    50% {
        box-shadow:
            0 0 0 4px rgba(var(--color-primary-rgb, 0, 102, 204), 0.12),
            0 14px 30px rgba(var(--color-black-rgb, 26, 26, 26), 0.12);
    }
}

.search-form__wrapper.is-glowing,
.search-form__wrapper.is-searching {
    border-color: rgba(var(--color-primary-rgb, 0, 102, 204), 0.45) !important;
    background: var(--color-surface, #ffffff) !important;
    position: relative !important;
    overflow: visible !important;
    will-change: box-shadow;
    animation: searchGlowPulse 2.2s ease 3;
}

/* Ensure content stays above the gradient layers */
.search-form__wrapper.is-glowing > *,
.search-form__wrapper.is-searching > * {
    position: relative !important;
    z-index: 1 !important;
}

.search-form__wrapper:hover {
    background: rgba(255, 255, 255, 1) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    border-color: rgba(0, 102, 204, 0.25) !important;
}

.search-form__wrapper:focus-within {
    background: rgba(255, 255, 255, 1) !important;
    border-color: var(--color-primary, #0066CC) !important;
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb, 0, 102, 204), 0.15) !important;
}

/* Legacy .is-searching class now uses the same edge glow as .is-glowing - no pseudo-elements */

/* ========== ALWAYS VISIBLE TEXT & ICONS - REGARDLESS OF ACCENT COLOR ========== */
/* Force search icon to be ALWAYS visible - dark on light mode */
.search-form__icon {
    flex-shrink: 0 !important;
    width: 22px !important;
    height: 22px !important;
    color: #404040 !important; /* FIXED dark color - always visible on white */
    stroke: #404040 !important;
    margin-right: 14px !important;
    opacity: 0.7 !important;
    transition: opacity 0.2s ease, transform 0.2s ease !important;
}

.search-form__wrapper:focus-within .search-form__icon {
    color: #1a1a1a !important; /* Darker on focus */
    stroke: #1a1a1a !important;
    opacity: 1 !important;
    transform: scale(1.1);
}

/* Super clean search input - no border, no outline, no focus ring */
/* Text ALWAYS visible - forced dark color on light backgrounds */
.search-form__input {
    flex: 1 !important;
    border: none !important;
    border-width: 0 !important;
    border-style: none !important;
    border-color: transparent !important;
    background: transparent !important;
    padding: 14px 16px 14px 0 !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    color: #1a1a1a !important; /* FIXED dark text - always visible on white */
    outline: none !important;
    outline-width: 0 !important;
    outline-style: none !important;
    outline-color: transparent !important;
    box-shadow: none !important;
    min-width: 0 !important;
    line-height: 1.4 !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    caret-color: #0066CC !important; /* Blue caret always visible */
}

/* Placeholder text - always visible gray */
.search-form__input::placeholder {
    color: #666666 !important;
    opacity: 0.7 !important;
}

/* Remove ALL default input styling - super clean oval search */
.search-form__input,
.search-form__input:focus,
.search-form__input:focus-visible,
.search-form__input:focus-within,
.search-form__input:active,
.search-form__input:hover {
    border: none !important;
    border-width: 0 !important;
    border-style: none !important;
    border-color: transparent !important;
    outline: none !important;
    outline-width: 0 !important;
    outline-style: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* Reset browser input styling aggressively */
input[type="search"].search-form__input,
input.search-form__input,
.search-hero input.search-form__input,
.search-form__wrapper input {
    border: none !important;
    border-width: 0 !important;
    outline: none !important;
    outline-width: 0 !important;
    box-shadow: none !important;
    -webkit-appearance: textfield !important;
    -moz-appearance: textfield !important;
    appearance: textfield !important;
}

/* Focus visible override for clean design */
.search-form__input:focus-visible,
input.search-form__input:focus-visible {
    outline: none !important;
    outline-width: 0 !important;
    border: none !important;
}

.search-form__input::placeholder {
    color: var(--color-text-muted) !important;
    opacity: 0.6;
}

.search-form__submit {
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    padding: 12px 24px !important;
    /* SMART VISIBILITY: Use accent color with smart text contrast */
    background: var(--color-primary) !important;
    color: var(--smart-btn-text-on-primary) !important;
    border: none !important;
    border-radius: 100px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    letter-spacing: 0.01em !important;
    width: auto !important;
    max-width: 120px !important;
}

.search-form__submit:hover {
    background: var(--color-primary-hover) !important;
    color: var(--smart-btn-text-on-primary) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(var(--color-primary-rgb), 0.3);
}

.search-form__submit:active {
    transform: translateY(0);
}

/* Hide the X clear button on search inputs */
.search-form__input::-webkit-search-cancel-button,
.search-form__input::-webkit-search-decoration,
.search-form__input::-webkit-search-results-button,
.search-form__input::-webkit-search-results-decoration {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: none !important;
}

.search-form__input::-ms-clear,
.search-form__input::-ms-reveal {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* Dark mode search form - clean oval with subtle dark styling */
:root[data-theme="dark"] .search-form__wrapper {
    background: rgba(20, 20, 25, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3) !important;
    visibility: visible !important;
    opacity: 1 !important;
}

:root[data-theme="dark"] .search-form__wrapper::after {
    background: rgba(20, 20, 25, 0.98);
}

:root[data-theme="dark"] .search-form__wrapper:hover {
    background: rgba(25, 25, 30, 0.98) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important;
}

:root[data-theme="dark"] .search-form__wrapper:focus-within {
    background: rgba(22, 22, 28, 1) !important;
    border-color: var(--color-primary, #0066CC) !important;
    box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.25) !important;
}

/* Dark mode text and icons - ALWAYS visible (light colors on dark background) */
:root[data-theme="dark"] .search-form__icon {
    color: #cccccc !important;
    stroke: #cccccc !important;
    opacity: 0.8 !important;
}

:root[data-theme="dark"] .search-form__wrapper:focus-within .search-form__icon {
    color: #ffffff !important;
    stroke: #ffffff !important;
    opacity: 1 !important;
}

:root[data-theme="dark"] .search-form__input {
    color: #ffffff !important; /* Light text on dark backgrounds */
    caret-color: #38bdf8 !important; /* Bright cyan caret */
}

:root[data-theme="dark"] .search-form__input::placeholder {
    color: #aaaaaa !important;
    opacity: 0.8 !important;
}

/* Dark mode - Gemini rotating gradient with dark inner background */
:root[data-theme="dark"] .search-form__wrapper.is-glowing,
:root[data-theme="dark"] .search-form__wrapper.is-searching {
    border-color: transparent !important;
    box-shadow: 0 0 20px rgba(56, 189, 248, 0.3), 0 0 40px rgba(139, 92, 246, 0.2) !important;
}

/* Dark mode inner background - solid dark to hide gradient center */
:root[data-theme="dark"] .search-form__wrapper.is-glowing::after,
:root[data-theme="dark"] .search-form__wrapper.is-searching::after {
    background: rgb(20, 20, 25) !important;
}

/* Mobile search form */
@media (max-width: 480px) {
    .search-form__wrapper {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        padding: 4px 4px 4px 12px !important;
    }
    
    .search-form__input {
        padding: 10px 8px 10px 0 !important;
        font-size: 14px !important;
        min-width: 0 !important;
        flex: 1 !important;
    }
    
    .search-form__submit {
        padding: 10px 16px !important;
        font-size: 13px !important;
        white-space: nowrap !important;
    }
    
    .search-form__icon {
        width: 16px !important;
        height: 16px !important;
        margin-right: 6px !important;
        flex-shrink: 0 !important;
    }
}

/* Extra small screens */
@media (max-width: 360px) {
    .search-form__wrapper {
        padding: 3px 3px 3px 10px !important;
    }
    
    .search-form__input {
        padding: 8px 6px 8px 0 !important;
        font-size: 13px !important;
    }
    
    .search-form__submit {
        padding: 8px 12px !important;
        font-size: 12px !important;
    }
    
    .search-form__icon {
        width: 14px !important;
        height: 14px !important;
        margin-right: 4px !important;
    }
}

/* No Results State */
.search-no-results {
    text-align: center;
    padding: var(--space-16) var(--space-6);
    max-width: 600px;
    margin: 0 auto;
}

.search-no-results__icon {
    width: 100px;
    height: 100px;
    margin: 0 auto var(--space-6);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface-alt);
    border-radius: var(--radius-2xl);
    color: var(--color-text-muted);
}

.search-no-results__title {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: var(--space-4);
}

.search-no-results__description {
    font-size: var(--font-size-md);
    color: var(--color-text-muted);
    margin-bottom: var(--space-8);
    line-height: var(--line-height-relaxed);
}

.search-no-results__suggestions {
    background: var(--color-surface-alt);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    margin-bottom: var(--space-8);
    text-align: left;
}

.search-no-results__suggestions h3 {
    font-size: var(--font-size-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    margin-bottom: var(--space-4);
}

.search-no-results__suggestions ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.search-no-results__suggestions li {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--color-text);
    font-size: var(--font-size-sm);
}

.search-no-results__suggestions li::before {
    content: '✓';
    color: var(--color-primary);
    font-weight: bold;
}

.search-no-results__actions {
    display: flex;
    gap: var(--space-4);
    justify-content: center;
    flex-wrap: wrap;
}

.search-no-results__actions .button {
    padding: var(--space-3) var(--space-6);
}

.search-no-results__actions .button-secondary {
    background: transparent;
    color: var(--color-text);
    border: 2px solid var(--color-border);
}

.search-no-results__actions .button-secondary:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* Responsive Search - keep horizontal layout on all screens */
@media (max-width: 600px) {
    /* Keep form horizontal - don't change to column! */
    .search-form__wrapper {
        padding: var(--space-2) !important;
    }
    
    /* Keep icon visible */
    .search-form__icon {
        display: block !important;
        width: 16px !important;
        height: 16px !important;
    }
    
    /* No results buttons stack */
    .search-no-results__actions {
        flex-direction: column;
    }
    
    .search-no-results__actions .button {
        width: 100%;
    }
}

/* Dark mode search */
:root[data-theme="dark"] .search-hero {
    background: var(--color-surface-alt-dark, var(--color-bg-dark));
}

:root[data-theme="dark"] .search-form__wrapper {
    background: var(--color-surface-dark);
    border-color: var(--color-border-dark);
}

:root[data-theme="dark"] .search-no-results__icon {
    background: var(--color-surface-dark);
}

:root[data-theme="dark"] .search-no-results__suggestions {
    background: var(--color-surface-dark);
}

/* ============ ABOUT PAGE SVG ICONS ============ */
.about-principles__icon svg {
    width: 24px;
    height: 24px;
    color: var(--color-primary);
    stroke: var(--color-primary);
}

/* ============ TIERED CTA BUTTONS ============ */
.button-group--tiered {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    justify-content: center;
}

.button-group--tiered .button {
    min-width: 180px;
}

@media (max-width: 768px) {
    .button-group--tiered {
        flex-direction: column;
        align-items: stretch;
    }
    
    .button-group--tiered .button {
        width: 100%;
        justify-content: center;
    }
}

[data-theme="dark"] .about-principles__icon svg {
    color: var(--color-primary-light);
    stroke: var(--color-primary-light);
}

/* ============ AI TRANSPARENCY META BOX ============ */
.ai-transparency-box {
    background: var(--color-primary-10);
    border: 1px solid var(--color-primary-20);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    margin: var(--space-6) 0;
}

.ai-transparency-box__header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    flex-wrap: wrap;
}

.ai-transparency-box__header svg {
    color: var(--color-primary);
    stroke: var(--color-primary);
    flex-shrink: 0;
}

.ai-transparency-box__title {
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ai-transparency-box__badge {
    background: var(--color-primary);
    color: #fff;
    font-size: var(--font-size-xs);
    font-weight: 600;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ai-transparency-box__stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.ai-transparency-stat {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.ai-transparency-stat__label {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ai-transparency-stat__value {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-text-heading);
}

.ai-transparency-box__disclaimer {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0;
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-primary-20);
}

@media (max-width: 768px) {
    .ai-transparency-box__stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

/* Dark mode */
[data-theme="dark"] .ai-transparency-box {
    background: rgba(0, 102, 204, 0.1);
    border-color: rgba(0, 102, 204, 0.2);
}

[data-theme="dark"] .ai-transparency-stat__value {
    color: var(--color-text-dark);
}

[data-theme="dark"] .ai-transparency-box__disclaimer {
    border-color: rgba(0, 102, 204, 0.2);
}

/* ============ SYSTEM STATUS WIDGET ============ */
.system-status {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    background: var(--color-surface-alt);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    margin-right: var(--space-4);
}

.system-status__indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-success);
    animation: statusPulse 2s infinite;
}

.system-status__indicator--operational {
    background: var(--color-success);
}

.system-status__indicator--degraded {
    background: var(--color-warning);
}

.system-status__indicator--down {
    background: var(--color-error);
}

@keyframes statusPulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
    }
    50% {
        box-shadow: 0 0 0 4px rgba(16, 185, 129, 0);
    }
}

.system-status__text {
    font-weight: 600;
    color: var(--color-success);
}

.system-status__separator {
    color: var(--color-text-muted);
}

.system-status__detail {
    color: var(--color-text-muted);
}

@media (max-width: 768px) {
    .system-status {
        display: none; /* Hide on mobile to save space */
    }
}

[data-theme="dark"] .system-status {
    background: rgba(255, 255, 255, 0.05);
}


/* ========== tools-page.css ========== */
/* =====================================================
   TOOLS PAGE - GOOGLE STUDIO INSPIRED DESIGN
   Last Updated: 2025-12-22
   Version: 7.0.0
   
   Modern, interactive, responsive, and clean design.
   Fixed AI Configuration overflow on mobile.
   ===================================================== */

/* ============ VARIABLES ============ */
:root {
    --tool-card-bg: #ffffff;
    --tool-card-border: #e0e0e0;
    --tool-card-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
    --tool-card-shadow-hover: 0 1px 3px 0 rgba(60, 64, 67, 0.3), 0 4px 8px 3px rgba(60, 64, 67, 0.15);
    --tool-primary: #1a73e8; /* Google Blue */
    --tool-primary-hover: #174ea6;
    /* No gradients: keep tools hero background solid */
    --tool-bg-pattern: none;
}

[data-theme="dark"] {
    --tool-card-bg: #202124;
    --tool-card-border: #3c4043;
    --tool-card-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
    --tool-card-shadow-hover: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
    --tool-primary: #8ab4f8;
    --tool-primary-hover: #aecbfa;
    /* No gradients: keep tools hero background solid */
    --tool-bg-pattern: none;
}

/* ============ HERO SECTION ============ */
.page-tools .tools-hero,
.tools-page-hero,
.wp-block-group.tools-hero {
    position: relative;
    padding: 6rem 2rem 4rem;
    text-align: center;
    background-color: var(--color-bg);
    background-image: var(--tool-bg-pattern);
    overflow: hidden;
}

/* Tools page: remove redundant entry title + ensure hero content is centered */
article.entry:has(.tools-hero) > .entry__header {
    display: none;
}

.entry__content .tools-hero {
    align-items: center;
    gap: 1.25rem;
}

.entry__content .tools-hero > * {
    max-width: 860px;
    width: 100%;
}

.entry__content .tools-hero .wp-block-heading,
.entry__content .tools-hero .lead,
.entry__content .tools-hero p {
    text-align: center;
    text-wrap: balance;
}

.page-tools .tools-hero::after {
    /* No gradients: remove the fade overlay */
    content: none;
}

.page-tools .tools-hero h1,
.tools-page-hero h1 {
    font-family: 'Google Sans', 'Inter', sans-serif;
    font-size: clamp(2rem, 6vw, 4rem);
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 1rem;
    letter-spacing: -0.02em;
    position: relative;
    z-index: 1;
}

.page-tools .tools-hero > p,
.tools-page-hero > p {
    font-size: clamp(1rem, 2.5vw, 1.25rem);
    color: var(--color-text-secondary);
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
    position: relative;
    z-index: 1;
    padding: 0 1rem;
}

/* ============ AI CONFIGURATION BAR - RESPONSIVE FIX ============ */
.ai-config-bar,
[class*="ai-config"],
.wp-block-group:has([class*="configuration"]) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px 20px;
    background: var(--tool-card-bg);
    border: 1px solid var(--tool-card-border);
    border-radius: 16px;
    margin: 0 auto 2rem;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

/* Force AI Configuration dropdowns to wrap on mobile */
@media (max-width: 600px) {
    .ai-config-bar,
    [class*="ai-config"],
    .wp-block-group:has([class*="configuration"]) {
        flex-direction: column;
        align-items: stretch;
        padding: 12px 16px;
        gap: 8px;
    }
    
    .ai-config-bar > *,
    [class*="ai-config"] > * {
        width: 100%;
        min-width: 0;
    }
    
    .ai-config-bar select,
    [class*="ai-config"] select {
        width: 100%;
        max-width: 100%;
    }
}

/* Provider/Model dropdowns styling */
.ai-config-bar select,
[class*="ai-config"] select,
.wp-block-group select {
    padding: 10px 36px 10px 14px;
    font-size: 14px;
    border: 1px solid var(--tool-card-border);
    border-radius: 8px;
    background: var(--tool-card-bg);
    color: var(--color-text);
    cursor: pointer;
    min-width: 140px;
    max-width: 200px;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

/* ============ TOOLS GRID ============ */
.tools-grid,
.tools-grid.wp-block-group.is-layout-constrained {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

/* Reset margins */
.tools-grid > * {
    margin: 0 !important;
}

/* ============ TOOL CARD - ENHANCED ============ */
.tool-card {
    background: var(--tool-card-bg);
    border: 1px solid var(--tool-card-border);
    border-radius: 16px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    height: 100%;
}

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

/* Card accent line on hover */
.tool-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--tool-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.tool-card:hover::before {
    transform: scaleX(1);
}

/* Icon styling */
.tool-card h3 {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: 'Google Sans', 'Inter', sans-serif;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0;
    line-height: 1.4;
}

/* Emoji icon circle */
.tool-card h3::first-letter {
    font-size: 1.5rem;
    margin-right: 0;
}

/* Description */
.tool-card p {
    font-size: 0.9375rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin: 0;
    flex-grow: 1;
}

/* Button styling */
.tool-card a[href^="#"],
.tool-card p:last-child a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    background-color: var(--tool-primary);
    color: #ffffff;
    font-weight: 600;
    font-size: 0.875rem;
    border: none;
    border-radius: 24px;
    text-decoration: none;
    transition: all 0.2s ease;
    margin-top: auto;
    width: fit-content;
    box-shadow: 0 2px 6px rgba(26, 115, 232, 0.3);
}

.tool-card a[href^="#"]:hover,
.tool-card p:last-child a:hover {
    background-color: var(--tool-primary-hover);
    box-shadow: 0 4px 12px rgba(26, 115, 232, 0.4);
    transform: translateY(-2px);
}

/* Coming Soon State */
.tool-card--coming-soon {
    opacity: 0.75;
}

.tool-card--coming-soon a[href^="#"]:not([href="#newsletter"]),
.tool-card--coming-soon p:last-child a:not([href="#newsletter"]) {
    background-color: var(--color-text-muted);
    cursor: default;
    pointer-events: none;
}

/* Coming soon card still needs a REAL CTA: allow newsletter modal trigger */
.tool-card--coming-soon a[href="#newsletter"],
.tool-card--coming-soon p:last-child a[href="#newsletter"] {
    pointer-events: auto;
    cursor: pointer;
    opacity: 1;
    background-color: var(--tool-primary);
    color: #FFFFFF;
}

.tool-card--coming-soon a[href="#newsletter"]:hover,
.tool-card--coming-soon p:last-child a[href="#newsletter"]:hover {
    background-color: var(--tool-primary-hover);
}

/* ============ CTA SECTION ============ */
.tools-cta-section {
    background: var(--color-surface-alt);
    border-radius: 24px;
    padding: clamp(2rem, 6vw, 4rem) clamp(1.5rem, 4vw, 3rem);
    margin: 3rem auto;
    max-width: 900px;
    text-align: center;
}

.tools-cta-section h2 {
    font-size: clamp(1.5rem, 4vw, 2.25rem);
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 1rem;
}

.tools-cta-section p {
    font-size: clamp(0.9375rem, 2vw, 1.125rem);
    color: var(--color-text-secondary);
    max-width: 600px;
    margin: 0 auto 2rem;
    line-height: 1.6;
}

.tools-cta-section .button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    background: var(--tool-primary);
    color: #fff;
    font-weight: 600;
    font-size: 1rem;
    border: none;
    border-radius: 28px;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(26, 115, 232, 0.3);
}

.tools-cta-section .button:hover {
    background: var(--tool-primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(26, 115, 232, 0.4);
}

/* ============ ANIMATIONS ============ */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.tool-card {
    animation: fadeInUp 0.5s ease backwards;
}

/* Stagger animations */
.tool-card:nth-child(1) { animation-delay: 0.05s; }
.tool-card:nth-child(2) { animation-delay: 0.1s; }
.tool-card:nth-child(3) { animation-delay: 0.15s; }
.tool-card:nth-child(4) { animation-delay: 0.2s; }
.tool-card:nth-child(5) { animation-delay: 0.25s; }
.tool-card:nth-child(6) { animation-delay: 0.3s; }
.tool-card:nth-child(7) { animation-delay: 0.35s; }
.tool-card:nth-child(8) { animation-delay: 0.4s; }
.tool-card:nth-child(9) { animation-delay: 0.45s; }
.tool-card:nth-child(10) { animation-delay: 0.5s; }
.tool-card:nth-child(11) { animation-delay: 0.55s; }
.tool-card:nth-child(12) { animation-delay: 0.6s; }

/* Accessibility + performance: respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .tool-card {
        animation: none !important;
        transform: none !important;
    }

    .tool-card:hover {
        transform: none !important;
    }

    .tool-card::before {
        transition: none !important;
    }
}

/* ============ RESPONSIVE ============ */
@media (max-width: 768px) {
    .tools-grid {
        grid-template-columns: 1fr;
        padding: 1rem;
        gap: 16px;
    }
    
    .page-tools .tools-hero {
        padding: 3rem 1rem 2rem;
    }
    
    .page-tools .tools-hero h1 {
        font-size: 1.75rem;
    }
    
    .tool-card {
        padding: 20px;
    }
    
    .tool-card h3 {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .tools-grid {
        padding: 0.75rem;
        gap: 12px;
    }
    
    .page-tools .tools-hero {
        padding: 2rem 0.75rem 1.5rem;
    }
    
    .tool-card {
        padding: 16px;
        gap: 12px;
    }
    
    .tool-card a[href^="#"],
    .tool-card p:last-child a {
        width: 100%;
        padding: 12px 20px;
    }
}


/* ========== animations.css ========== */
/* ========================================
   Micro-Interactions & Animations
   Apple Liquid Glass Design System v5.0.0
   ======================================== */

/* ============ KEYFRAMES ============ */

/* Dynamic Island morph animation */
@keyframes dynamicIslandExpand {
    0% {
        transform: scale(0.8);
        opacity: 0;
        border-radius: 50px;
    }
    50% {
        transform: scale(1.02);
    }
    100% {
        transform: scale(1);
        opacity: 1;
        border-radius: var(--radius-2xl);
    }
}

@keyframes dynamicIslandContract {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(0.8);
        opacity: 0;
    }
}

/* Apple-style spring bounce */
@keyframes springBounce {
    0% { transform: scale(1); }
    40% { transform: scale(0.97); }
    100% { transform: scale(1); }
}

/* Subtle float animation for hero elements */
@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}

/* Gradient shimmer for loading states - Apple style */
@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* Pulse glow effect - Apple Blue */
@keyframes pulseGlow {
    0%, 100% {
        box-shadow: 0 0 16px var(--color-primary-15);
    }
    50% {
        box-shadow: 0 0 32px var(--color-primary-25);
    }
}

/* Fade in up - Apple smooth */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fade in */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Scale in - Apple elastic */
@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.96);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Slide in from right */
@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(16px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Apple-style morphing shape */
@keyframes morphShape {
    0%, 100% {
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    }
    50% {
        border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
    }
}

/* ============ SCROLL ANIMATIONS ============ */

/* Fallback keyframes - ensures visibility even if IntersectionObserver doesn't fire */
@keyframes animate-scroll-fallback {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Elements that animate on scroll (add .animate-on-scroll class)
   v5.44.0 - Added CSS fallback animation to prevent stuck invisible elements */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), 
                transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    /* FALLBACK: If JS doesn't add .is-visible within 0.8s, animate to visible
       This ensures content is visible during automated screenshots and for SEO crawlers */
    animation: animate-scroll-fallback 0.5s ease-out 0.8s forwards;
}

.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
    /* Cancel fallback when JS properly triggers visibility */
    animation: none;
}

/* Progressive enhancement: header.php adds `no-js` to <body>.
   If JS doesn't run, keep content visible instead of stuck at opacity:0. */
.no-js .animate-on-scroll {
    opacity: 1;
    transform: none;
    animation: none;
}

/* Staggered animation delays for grid items */
.animate-on-scroll:nth-child(1) { transition-delay: 0ms; }
.animate-on-scroll:nth-child(2) { transition-delay: 80ms; }
.animate-on-scroll:nth-child(3) { transition-delay: 200ms; }
.animate-on-scroll:nth-child(4) { transition-delay: 300ms; }
.animate-on-scroll:nth-child(5) { transition-delay: 400ms; }
.animate-on-scroll:nth-child(6) { transition-delay: 500ms; }

/* ============ HOVER MICRO-INTERACTIONS ============ */

/* Button press effect */
.btn:active,
.button:active,
button:active:not(.nav-toggle):not(.theme-toggle) {
    transform: translateY(1px) scale(0.98);
}

/* Card lift effect (enhanced) */
.card-lift {
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.card-lift:hover {
    transform: translateY(-6px);
}

/* Link underline animation */
.link-underline {
    position: relative;
    text-decoration: none;
}

.link-underline::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--color-primary);
    transition: width var(--transition-base);
}

.link-underline:hover::after {
    width: 100%;
}

/* Icon rotation on hover */
.icon-rotate:hover svg,
.icon-rotate:hover .icon {
    transform: rotate(15deg);
    transition: transform var(--transition-base);
}

/* Scale on hover */
.scale-hover {
    transition: transform var(--transition-base);
}

.scale-hover:hover {
    transform: scale(1.05);
}

/* ============ LOADING STATES ============ */

/* Skeleton loading - solid color pulse */
.skeleton {
    background: var(--color-surface-alt);
    animation: pulse 1.5s ease-in-out infinite;
    border-radius: var(--radius-md);
}

@keyframes pulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

/* Spinner */
.spinner {
    width: 24px;
    height: 24px;
    border: 2px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ============ FOCUS STATES ============ */

/* Enhanced focus ring */
.focus-ring:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--color-primary-subtle),
                0 0 0 5px var(--color-primary);
}

/* ============ TOAST/NOTIFICATION ANIMATIONS ============ */

.toast-enter {
    animation: slideInRight 0.3s ease-out;
}

.toast-exit {
    animation: fadeOut 0.2s ease-in forwards;
}

@keyframes fadeOut {
    to {
        opacity: 0;
        transform: translateX(20px);
    }
}

/* ============ REDUCED MOTION ============ */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .animate-on-scroll {
        opacity: 1;
        transform: none;
    }
}

/* ============ HERO ANIMATIONS ============ */

.brand-hero__title {
    animation: fadeInUp 0.8s ease-out;
}

.brand-hero__tagline {
    animation: fadeInUp 0.8s ease-out 0.1s backwards;
}

.brand-hero__actions {
    animation: fadeInUp 0.8s ease-out 0.2s backwards;
}

/* ============ GRADIENT BORDER EFFECT ============ */

.gradient-border {
    position: relative;
    background: var(--color-surface);
    border-radius: var(--radius-xl);
}

.gradient-border::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1px solid var(--color-primary);
    opacity: 0;
    transition: opacity var(--transition-base);
    pointer-events: none;
}

.gradient-border:hover::before {
    opacity: 1;
}

/* ============ GLOW EFFECTS ============ */

.glow-primary {
    box-shadow: var(--shadow-glow-primary);
}

.glow-accent {
    box-shadow: var(--shadow-glow-accent);
}

.glow-on-hover {
    transition: box-shadow var(--transition-base);
}

.glow-on-hover:hover {
    box-shadow: var(--shadow-glow-soft);
}


/* ========== image-optimizations.css ========== */
/* ========================================
   IMAGE OPTIMIZATIONS - v5.1.0
   Cross-browser image rendering fixes
   ======================================== 
   
   FIXES:
   - Hero carousel image stretching/distortion
   - Missing featured images fallback
   - Card image aspect ratio consistency
   - Cross-browser object-fit support
   - Mobile/Tablet/Desktop optimization
   ======================================== */

/* ============ GLOBAL IMAGE RESET ============ */
img {
    max-width: 100%;
    height: auto;
    display: block;
    /* Cross-browser rendering */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* Prevent image dragging */
img {
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}

/* ============ HERO CAROUSEL IMAGES ============ */
.hero-carousel {
    position: relative;
    width: 100%;
    margin: var(--space-8) auto;
    overflow: hidden;
    border-radius: var(--radius-xl);
    /* Full width on desktop, taller aspect ratio for impact */
    aspect-ratio: 21 / 9;
    min-height: 400px;
    max-height: 600px;
    background: var(--color-surface-alt);
}

/* Wide Desktop (1280px+): Full width carousel */
@media (min-width: 1280px) {
    .hero-carousel {
        max-width: 100%;
        aspect-ratio: 21 / 8;
        min-height: 450px;
        max-height: 650px;
    }
}

.hero-carousel__wrapper {
    position: absolute;
    inset: 0;
    overflow: hidden;
    /* Explicit constraints */
    width: 100%;
    height: 100%;
}

.hero-carousel__slides {
    display: flex;
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: 100%;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    /* WebKit/Safari hardening: keep the slides container on a stable composited layer
       to avoid intermittent "blank" frames when translating between slides. */
    will-change: transform;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.hero-carousel__slide {
    position: relative;
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: 100%;
    /* IMPORTANT:
       Do not force a transparent background with !important.
       Slides without featured images rely on an inline solid background color
       (see `front-page.php`), and a forced transparent background makes those
       slides appear as a blank/white screen.
    */
    overflow: hidden;
}

.hero-carousel__image {
    position: absolute !important;  /* CRITICAL: Must be absolute to fill container */
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    /* CRITICAL: Proper object-fit with cross-browser support */
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    /* Ensure the image reliably paints above the slide background */
    z-index: 1;
    /* Smooth image scaling */
    /* translateZ(0) improves Safari/WebKit compositing stability when the parent is transformed */
    -webkit-transform: translateZ(0) scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: translateZ(0) scale(1);
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-carousel__slide:hover .hero-carousel__image {
    -webkit-transform: translateZ(0) scale(1.03);
    -moz-transform: scale(1.03);
    -ms-transform: scale(1.03);
    transform: translateZ(0) scale(1.03);
}

/* ============ HERO CAROUSEL (MOBILE SAFE MODE) ============ */
/*
   Some mobile engines (and some optimization/caching combinations) can intermittently
   fail to paint translated slide stacks, causing a "blank" carousel after next/prev.
   On mobile, we use an overlay/fade approach (absolute slides + .is-active) which is
   significantly more robust.

   NOTE: This lives in image-optimizations.css (imported) and uses !important to
   prevent late-loading @imported modules from overriding custom-tailwind overrides.
*/
@media (max-width: 768px) {
    .hero-carousel__slides {
        display: block !important;
        position: relative;
        transform: none !important;
    }

    .hero-carousel__slide {
        position: absolute !important;
        inset: 0;
        opacity: 0;
        pointer-events: none;
        transition: opacity 260ms ease;
    }

    .hero-carousel__slide.is-active {
        opacity: 1;
        pointer-events: auto;
    }
}

/* Hero carousel responsive */
@media (max-width: 1024px) {
    .hero-carousel {
        width: 100%;
        aspect-ratio: 16 / 8;
        min-height: 280px;
        max-height: 450px;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 768px) {
    .hero-carousel {
        width: 100%;
        /* Increase height for mobile to show content */
        aspect-ratio: 16 / 9;
        min-height: 400px !important;  /* Taller to accommodate image + overlay */
        max-height: 500px;
        margin: var(--space-6) auto;
        border-radius: var(--radius-lg);
    }
}

@media (max-width: 480px) {
    .hero-carousel {
        width: 100%;
        aspect-ratio: 16 / 9;
        min-height: 350px !important;  /* Ensure enough height for small screens */
        max-height: 450px;
        margin: var(--space-4) auto;
    }
}

/* ============ TRENDING CARD IMAGES ============ */
.trending-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.trending-card__image-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--color-surface-alt);
    flex-shrink: 0;
}

.trending-card__image,
.trending-card a > img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    border-radius: var(--radius-lg);
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    /* Fallback solid color */
    background: var(--color-surface-alt);
}

.trending-card:hover .trending-card__image,
.trending-card:hover a > img {
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);
}

/* ============ POST CARD IMAGES ============ */
.post-card__image-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--color-surface-alt);
    flex-shrink: 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

/* CRITICAL FIX v5.2.0: Anchor wrapper must be block with full dimensions
   for absolute positioned images to render correctly.
   Using higher specificity to override base.css "article a:not([class])" rule */
.post-card .post-card__image-wrapper a,
article.post-card .post-card__image-wrapper a {
    display: block !important;
    position: absolute !important;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* Placeholder solid color for missing images */
.post-card__image-wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--color-surface-alt);
    z-index: 0;
}

.post-card__image {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.post-card:hover .post-card__image {
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);
}

/* ============ LATEST ARTICLES SECTION ============ */
/* Cards without featured images - show placeholder */
.post-card--no-image {
    border-top: 4px solid var(--color-primary);
    position: relative;
    overflow: hidden;
}

.post-card--no-image .post-card__content {
    padding-top: var(--space-6);
    position: relative;
    z-index: 1;
}

.post-card--no-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 120px;
    background: var(--color-surface-alt);
    opacity: 0.5;
    pointer-events: none;
    z-index: 0;
}

/* ============ ENTRY CARD IMAGES (Archive/Blog) ============ */
.entry-card__thumb {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    background: var(--color-surface-alt);
}

.entry-card__thumb img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    transition: transform 0.5s ease;
}

.entry-card:hover .entry-card__thumb img {
    transform: scale(1.05);
}

/* ============ ARTICLE FEATURED IMAGE ============ */
.article-featured-image {
    position: relative;
    width: 100%;
    aspect-ratio: 21 / 9;
    max-height: 480px;
    overflow: hidden;
    border-radius: var(--radius-2xl);
    margin-bottom: var(--space-8);
    background: var(--color-surface-alt);
}

.article-featured-image .article-image {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
}

@media (max-width: 768px) {
    .article-featured-image {
        aspect-ratio: 16 / 9;
        max-height: 320px;
        border-radius: var(--radius-xl);
        margin-bottom: var(--space-6);
    }
}

@media (max-width: 480px) {
    .article-featured-image {
        aspect-ratio: 4 / 3;
        max-height: 260px;
        border-radius: var(--radius-lg);
        margin-bottom: var(--space-4);
    }
}

/* ============ FRONT INSIGHTS IMAGES ============ */
.front-insights__media {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: var(--radius-xl);
    background: var(--color-surface-alt);
}

.front-insights__img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.front-insights__card:hover .front-insights__img {
    transform: scale(1.05);
}

/* ============ AVATAR IMAGES ============ */
.post-card__author-avatar,
.entry__meta img,
.avatar,
.comment-author-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    -o-object-fit: cover;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--color-surface-alt);
}

/* ============ LOGO IMAGES ============ */
.custom-logo-link img,
.site-logo img {
    max-height: 48px;
    width: auto;
    height: auto;
    -o-object-fit: contain;
    object-fit: contain;
}

@media (max-width: 768px) {
    .custom-logo-link img,
    .site-logo img {
        max-height: 40px;
    }
}

/* ============ WORDPRESS BLOCK IMAGES ============ */
.wp-block-image img,
.entry__content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
}

.wp-block-image.is-style-rounded img {
    border-radius: var(--radius-full);
}

/* Full-width image blocks */
.wp-block-image.alignfull img,
.wp-block-image.alignwide img {
    width: 100%;
}

/* ============ LAZY LOADING OPTIMIZATION ============ */
img[loading="lazy"] {
    /* Placeholder background while loading */
    background: var(--color-surface-alt);
}

/* Fade in when loaded */
img.lazyloaded {
    -webkit-animation: fadeIn 0.3s ease;
    animation: fadeIn 0.3s ease;
}

@-webkit-keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ============ IMAGE PLACEHOLDER SVG ============ */
.image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: var(--color-surface-alt);
    color: var(--color-text-subtle);
}

.image-placeholder svg {
    width: 48px;
    height: 48px;
    opacity: 0.3;
}

/* ============ CROSS-BROWSER OBJECT-FIT FALLBACK ============ */
/* For older browsers that don't support object-fit */
@supports not (object-fit: cover) {
    .hero-carousel__image,
    .trending-card__image,
    .post-card__image,
    .entry-card__thumb img,
    .article-featured-image .article-image {
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
}

/* ============ HIGH DPI / RETINA OPTIMIZATION ============ */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    img {
        image-rendering: -webkit-optimize-contrast;
    }
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce) {
    .hero-carousel__image,
    .trending-card__image,
    .post-card__image,
    .entry-card__thumb img,
    .front-insights__img {
        transition: none;
    }
    
    .hero-carousel__slide:hover .hero-carousel__image,
    .trending-card:hover .trending-card__image,
    .post-card:hover .post-card__image,
    .entry-card:hover .entry-card__thumb img,
    .front-insights__card:hover .front-insights__img {
        transform: none;
    }

    /* Carousel containers: remove sliding/fade animations too */
    .hero-carousel__slides,
    .hero-carousel__slide {
        transition: none !important;
    }
}


/* ========== responsive-optimizations.css ========== */
/* ========================================
   RESPONSIVE DESIGN OPTIMIZATIONS - v5.1.0
   Elegant spacing, indentation & layouts
   ======================================== 
   
   BREAKPOINTS:
   - Desktop: 1440px+
   - Laptop: 1024px - 1439px  
   - Tablet: 768px - 1023px
   - Mobile Large: 480px - 767px
   - Mobile Small: 320px - 479px
   ======================================== */

/* ============ CONTAINER SPACING ============ */
.container {
    width: 100%;
    max-width: var(--max-width-container, 1200px);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-6);
    padding-right: var(--space-6);
}

/* Ultra-wide Desktop (1600px+) - Use wide layouts */
@media (min-width: 1600px) {
    .container {
        max-width: 1680px;
        padding-left: var(--space-10);
        padding-right: var(--space-10);
    }
    
    /* Remove nested container restrictions on home page */
    .site-main > .container > section > .container {
        max-width: 100%;
        padding: 0;
    }
}

/* Desktop Large (1280px - 1599px) */
@media (min-width: 1280px) and (max-width: 1599px) {
    .container {
        max-width: 1400px;
        padding-left: var(--space-8);
        padding-right: var(--space-8);
    }
    
    /* Remove nested container restrictions on home page */
    .site-main > .container > section > .container {
        max-width: 100%;
        padding: 0;
    }
}

/* Laptop (1024px - 1279px) */
@media (min-width: 1024px) and (max-width: 1279px) {
    .container {
        max-width: 960px;
        padding-left: var(--space-6);
        padding-right: var(--space-6);
    }
}

/* Tablet (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    .container {
        max-width: 720px;
        padding-left: var(--space-5);
        padding-right: var(--space-5);
    }
}

/* Mobile Large (480px - 767px) */
@media (min-width: 480px) and (max-width: 767px) {
    .container {
        padding-left: var(--space-4);
        padding-right: var(--space-4);
    }
}

/* Mobile Small (< 480px) */
@media (max-width: 479px) {
    .container {
        padding-left: var(--space-3);
        padding-right: var(--space-3);
    }
}

/* ============ GRID SYSTEMS ============ */
/* Posts Grid - Responsive columns */
.posts-grid {
    display: grid;
    gap: var(--space-6);
}

/* Wide Desktop: 4 columns */
@media (min-width: 1280px) {
    .posts-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--space-8);
    }
}

/* Desktop: 3 columns */
@media (min-width: 1024px) and (max-width: 1439px) {
    .posts-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-8);
    }
}

/* Tablet: 2 columns */
@media (min-width: 768px) and (max-width: 1023px) {
    .posts-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-6);
    }
}

/* Mobile: 1 column */
@media (max-width: 767px) {
    .posts-grid {
        grid-template-columns: 1fr;
        gap: var(--space-5);
    }
}

/* Trending Grid */
.trending-palette__grid {
    display: grid;
    gap: var(--space-6);
}

/* Wide Desktop: 4 columns */
@media (min-width: 1280px) {
    .trending-palette__grid {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--space-8);
    }
}

@media (min-width: 1024px) and (max-width: 1439px) {
    .trending-palette__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-8);
    }
}

@media (min-width: 640px) and (max-width: 1023px) {
    .trending-palette__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-6);
    }
}

@media (max-width: 639px) {
    .trending-palette__grid {
        grid-template-columns: 1fr;
        gap: var(--space-5);
    }
}

/* Tools Grid */
.tools-grid {
    display: grid;
    gap: var(--space-6);
}

@media (min-width: 1200px) {
    .tools-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-8);
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .tools-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-6);
    }
}

@media (max-width: 767px) {
    .tools-grid {
        grid-template-columns: 1fr;
        gap: var(--space-5);
    }
}

/* ============ SECTION SPACING ============ */
section {
    margin-bottom: var(--space-16);
}

@media (max-width: 1023px) {
    section {
        margin-bottom: var(--space-12);
    }
}

@media (max-width: 767px) {
    section {
        margin-bottom: var(--space-10);
    }
}

@media (max-width: 479px) {
    section {
        margin-bottom: var(--space-8);
    }
}

/* ============ HERO SECTIONS ============ */
.archive-hero,
.page-hero,
.tools-hero,
.brand-hero {
    padding: clamp(3rem, 8vw, 6rem) 0;
    text-align: center;
}

@media (max-width: 767px) {
    .archive-hero,
    .page-hero,
    .tools-hero,
    .brand-hero {
        padding: clamp(2rem, 6vw, 4rem) 0;
    }
}

/* Hero Title Sizing */
.archive-hero__title,
.page-hero h1,
.brand-hero__title {
    font-size: clamp(2rem, 6vw, 4rem);
    margin-bottom: var(--space-4);
    line-height: 1.1;
}

@media (max-width: 767px) {
    .archive-hero__title,
    .page-hero h1,
    .brand-hero__title {
        font-size: clamp(1.5rem, 8vw, 2.5rem);
        margin-bottom: var(--space-3);
    }
}

/* Hero Description */
.archive-hero__description,
.page-hero > .container > p,
.brand-hero__tagline {
    font-size: clamp(1rem, 2vw, 1.25rem);
    max-width: 600px;
    margin: 0 auto var(--space-6);
    line-height: 1.6;
}

@media (max-width: 767px) {
    .archive-hero__description,
    .page-hero > .container > p,
    .brand-hero__tagline {
        font-size: var(--font-size-base);
        margin-bottom: var(--space-5);
    }
}

/* Hero Actions */
.archive-hero__actions,
.brand-hero__actions {
    display: flex;
    gap: var(--space-4);
    justify-content: center;
    flex-wrap: wrap;
}

@media (max-width: 479px) {
    .archive-hero__actions,
    .brand-hero__actions {
        flex-direction: column;
        gap: var(--space-3);
        width: 100%;
    }
    
    .archive-hero__actions .button,
    .brand-hero__actions .button,
    .archive-hero__actions .btn,
    .brand-hero__actions .btn {
        width: 100%;
    }
}

/* ============ CARD SPACING ============ */
.post-card,
.trending-card,
.tool-card {
    border-radius: var(--radius-card, var(--radius-xl));
}

.post-card__content,
.trending-card__content,
.tool-card__content {
    padding: var(--space-6);
}

@media (max-width: 767px) {
    .post-card__content,
    .trending-card__content,
    .tool-card__content {
        padding: var(--space-5);
    }
}

@media (max-width: 479px) {
    .post-card__content,
    .trending-card__content,
    .tool-card__content {
        padding: var(--space-4);
    }
}

/* Card Titles */
.post-card__title,
.trending-card__title {
    font-size: var(--font-size-lg);
    margin-bottom: var(--space-3);
    line-height: 1.3;
}

@media (max-width: 767px) {
    .post-card__title,
    .trending-card__title {
        font-size: var(--font-size-base);
        margin-bottom: var(--space-2);
    }
}

/* ============ SECTION HEADERS ============ */
.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-8);
    flex-wrap: wrap;
}

.section-header__title {
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    margin: 0;
}

@media (max-width: 767px) {
    .section-header {
        margin-bottom: var(--space-6);
    }
    
    .section-header__title {
        font-size: clamp(1.25rem, 5vw, 1.75rem);
    }
}

/* ============ NEWSLETTER SECTION ============ */
.newsletter-section,
.newsletter-cta {
    padding: var(--space-12) var(--space-6);
    border-radius: var(--radius-2xl);
    text-align: center;
}

@media (max-width: 767px) {
    .newsletter-section,
    .newsletter-cta {
        padding: var(--space-8) var(--space-5);
        border-radius: var(--radius-xl);
    }
}

@media (max-width: 479px) {
    .newsletter-section,
    .newsletter-cta {
        padding: var(--space-6) var(--space-4);
        border-radius: var(--radius-lg);
    }
}

/* Newsletter Form */
.newsletter-form {
    display: flex;
    gap: var(--space-3);
    max-width: 480px;
    margin: 0 auto;
}

@media (max-width: 639px) {
    .newsletter-form {
        flex-direction: column;
        gap: var(--space-4);
    }
    
    .newsletter-form input,
    .newsletter-form button {
        width: 100%;
    }
}

/* ============ FOOTER SPACING ============ */
.site-footer {
    padding: var(--space-16) 0 var(--space-8);
}

@media (max-width: 767px) {
    .site-footer {
        padding: var(--space-12) 0 var(--space-6);
    }
}

.footer-grid {
    display: grid;
    gap: var(--space-10);
}

@media (min-width: 768px) {
    .footer-grid {
        grid-template-columns: 2fr 1fr 1fr;
        gap: var(--space-12);
    }
}

@media (max-width: 767px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: var(--space-8);
        text-align: center;
    }
}

/* ============ TOUCH TARGET OPTIMIZATION ============ */
/* Minimum 44x44px touch targets for mobile */
@media (max-width: 1023px) {
    button,
    .button,
    .btn,
    a.button,
    input[type="submit"],
    .nav-toggle {
        min-height: 44px;
        min-width: 44px;
    }
}

@media (max-width: 767px) {
    button,
    .button,
    .btn,
    a.button,
    input[type="submit"] {
        min-height: 48px;
        padding: var(--space-3) var(--space-5);
    }
}

/* ============ TYPOGRAPHY SCALING ============ */
/* Fluid typography */
html {
    font-size: 16px;
}

@media (max-width: 1439px) {
    html {
        font-size: 15.5px;
    }
}

@media (max-width: 1023px) {
    html {
        font-size: 15px;
    }
}

@media (max-width: 767px) {
    html {
        font-size: 14.5px;
    }
}

@media (max-width: 479px) {
    html {
        font-size: 14px;
    }
}

/* ============ PREVENT HORIZONTAL OVERFLOW ============ */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

img, video, iframe, embed, object, table {
    max-width: 100%;
}

/* Long words/URLs */
p, h1, h2, h3, h4, h5, h6, li, td, th {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Only enable automatic hyphenation on narrow screens where it helps prevent overflow.
   On desktop it can create ugly forced hyphens in headings/body copy. */
@media (max-width: 767px) {
    p, h1, h2, h3, h4, h5, h6, li, td, th {
        -webkit-hyphens: auto;
        -moz-hyphens: auto;
        -ms-hyphens: auto;
        hyphens: auto;
    }
}

/* ============ PRINT STYLES ============ */
@media print {
    .site-header,
    .site-footer,
    .nav-toggle,
    .newsletter-cta,
    .theme-toggle,
    .hero-carousel__controls,
    .sharing-buttons {
        display: none !important;
    }
    
    body {
        font-size: 12pt;
        line-height: 1.5;
        color: #000;
        background: #fff;
    }
    
    .container {
        max-width: 100%;
        padding: 0;
    }
    
    a {
        color: #000;
        text-decoration: underline;
    }
    
    img {
        max-width: 100%;
        page-break-inside: avoid;
    }
}


/* ========== overrides-light.css ========== */
/* ========================================
   Light Mode Overrides
   v7.0.0 - Uses CSS Variable System
   NO HARDCODED COLORS - All from variables.css
   ======================================== */

/* 
 * This file provides light mode overrides using the CSS variable system.
 * All colors reference variables defined in variables.css.
 * This ensures palette changes in admin propagate correctly.
 */

/* ============ LIGHT MODE ARTICLE BACKGROUNDS ============ */
:root:not([data-theme="dark"]) article:not(:has(.tools-hero)):not(:has(.page-hero)),
:root[data-theme="light"] article:not(:has(.tools-hero)):not(:has(.page-hero)) {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
}

:root:not([data-theme="dark"]) .entry:not(:has(.tools-hero)):not(:has(.page-hero)),
:root[data-theme="light"] .entry:not(:has(.tools-hero)):not(:has(.page-hero)) {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
}

:root:not([data-theme="dark"]) .entry-card,
:root[data-theme="light"] .entry-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
}

:root:not([data-theme="dark"]) body {
    background: var(--color-surface-alt);
}

/* ============ LIGHT MODE CARD STYLING ============ */
:root:not([data-theme="dark"]) .post-card,
:root[data-theme="light"] .post-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-card);
}

:root:not([data-theme="dark"]) .post-card:hover,
:root[data-theme="light"] .post-card:hover {
    box-shadow: var(--shadow-card-hover);
}

/* ============ LIGHT MODE TYPOGRAPHY ============ */
:root:not([data-theme="dark"]) .post-card-title,
:root:not([data-theme="dark"]) .card-title,
:root[data-theme="light"] .post-card-title,
:root[data-theme="light"] .card-title {
    color: var(--color-text);
}

:root:not([data-theme="dark"]) .post-card-excerpt,
:root:not([data-theme="dark"]) .card-excerpt,
:root[data-theme="light"] .post-card-excerpt,
:root[data-theme="light"] .card-excerpt {
    color: var(--color-text-secondary);
}

:root:not([data-theme="dark"]) .post-card-meta,
:root:not([data-theme="dark"]) .card-meta,
:root[data-theme="light"] .post-card-meta,
:root[data-theme="light"] .card-meta {
    color: var(--color-text-muted);
}

/* ============ LIGHT MODE ARTICLE CONTENT ============ */
:root:not([data-theme="dark"]) .article-header .article-title,
:root[data-theme="light"] .article-header .article-title {
    color: var(--color-text);
}

:root:not([data-theme="dark"]) .article-header .article-meta,
:root[data-theme="light"] .article-header .article-meta {
    color: var(--color-text-muted);
}

:root:not([data-theme="dark"]) .article-content,
:root[data-theme="light"] .article-content {
    color: var(--color-text);
}

:root:not([data-theme="dark"]) .article-content h2,
:root:not([data-theme="dark"]) .article-content h3,
:root:not([data-theme="dark"]) .article-content h4,
:root[data-theme="light"] .article-content h2,
:root[data-theme="light"] .article-content h3,
:root[data-theme="light"] .article-content h4 {
    color: var(--color-text);
}

/* ============ LIGHT MODE LINKS ============ */
:root:not([data-theme="dark"]) .article-content a,
:root[data-theme="light"] .article-content a {
    color: var(--color-primary);
}

:root:not([data-theme="dark"]) .article-content a:hover,
:root[data-theme="light"] .article-content a:hover {
    color: var(--color-primary-hover);
}

/* ============ LIGHT MODE CODE BLOCKS ============ */
:root:not([data-theme="dark"]) .article-content code:not([class*="language-"]),
:root[data-theme="light"] .article-content code:not([class*="language-"]) {
    background: var(--color-surface-alt);
    color: var(--color-text);
}

/* ============ LIGHT MODE BLOCKQUOTES ============ */
:root:not([data-theme="dark"]) .article-content blockquote,
:root[data-theme="light"] .article-content blockquote {
    border-left-color: var(--color-primary);
    background: var(--color-surface-alt);
}

/* ============ LIGHT MODE SYNTH CARDS ============ */
:root:not([data-theme="dark"]) .synth-card,
:root:not([data-theme="dark"]) [class*="synth-"],
:root[data-theme="light"] .synth-card,
:root[data-theme="light"] [class*="synth-"] {
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
}

:root:not([data-theme="dark"]) .synth-card-title,
:root[data-theme="light"] .synth-card-title {
    color: var(--color-text);
}

:root:not([data-theme="dark"]) .synth-card-content,
:root[data-theme="light"] .synth-card-content {
    color: var(--color-text-secondary);
}

/* ============ LIGHT MODE TAKEAWAYS ============ */
:root:not([data-theme="dark"]) .synth-takeaways,
:root:not([data-theme="dark"]) [class*="takeaways"],
:root[data-theme="light"] .synth-takeaways,
:root[data-theme="light"] [class*="takeaways"] {
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
}

:root:not([data-theme="dark"]) .synth-takeaways h3,
:root:not([data-theme="dark"]) .synth-takeaways h4,
:root[data-theme="light"] .synth-takeaways h3,
:root[data-theme="light"] .synth-takeaways h4 {
    color: var(--color-text);
}

:root:not([data-theme="dark"]) .synth-takeaways li,
:root[data-theme="light"] .synth-takeaways li {
    color: var(--color-text-secondary);
}

/* ============ LIGHT MODE FOOTER ============ */
:root:not([data-theme="dark"]) .site-footer,
:root[data-theme="light"] .site-footer {
    background: var(--color-surface-alt);
    border-top: 1px solid var(--color-border);
}

/* ============ LEGAL PAGE STYLES ============ */
.legal-page {
    background: var(--color-bg);
}

.legal-page .legal-content {
    max-width: 800px;
    margin: 0 auto;
    padding: var(--space-8);
}

.legal-page h1,
.legal-page h2,
.legal-page h3 {
    color: var(--color-text);
}

.legal-page p,
.legal-page li {
    color: var(--color-text-secondary);
}

.legal-page a {
    color: var(--color-primary);
}



/* ========== variants-dark.css ========== */
/* ========================================
   Dark Theme Variants v7.0.0
   Uses CSS Variable System - NO HARDCODED COLORS
   All colors reference variables from variables.css
   ======================================== */

/* Note: Main dark mode color switching happens in variables.css
   This file provides component-specific dark mode overrides
   using the CSS variable system for consistency */

/* ============ DARK BODY & MAIN ============ */
:root[data-theme="dark"] body {
    background: var(--color-bg);
    color: var(--color-text);
}

:root[data-theme="dark"] .site-main,
:root[data-theme="dark"] main {
    background: var(--color-bg);
}

:root[data-theme="dark"] .container {
    background: transparent;
}

/* ============ DARK HEADER ============ */
:root[data-theme="dark"] .site-header {
    border-color: var(--color-border);
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
}

:root[data-theme="dark"] .site-header.scrolled {
    box-shadow: var(--shadow-card);
}

/* ============ DARK CARDS ============ */
:root[data-theme="dark"] .post-card,
:root[data-theme="dark"] .entry-card,
:root[data-theme="dark"] article.entry {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-card);
}

:root[data-theme="dark"] .post-card:hover,
:root[data-theme="dark"] .entry-card:hover {
    box-shadow: var(--shadow-card-hover);
}

:root[data-theme="dark"] .post-card-title,
:root[data-theme="dark"] .card-title,
:root[data-theme="dark"] .entry-title {
    color: var(--color-text);
}

:root[data-theme="dark"] .post-card-excerpt,
:root[data-theme="dark"] .card-excerpt {
    color: var(--color-text-secondary);
}

:root[data-theme="dark"] .post-card-meta,
:root[data-theme="dark"] .card-meta {
    color: var(--color-text-muted);
}

/* ============ DARK ARTICLE CONTENT ============ */
:root[data-theme="dark"] .article-header .article-title {
    color: var(--color-text);
}

:root[data-theme="dark"] .article-header .article-meta {
    color: var(--color-text-muted);
}

:root[data-theme="dark"] .article-content {
    color: var(--color-text);
}

:root[data-theme="dark"] .article-content h2,
:root[data-theme="dark"] .article-content h3,
:root[data-theme="dark"] .article-content h4 {
    color: var(--color-text);
}

:root[data-theme="dark"] .article-content p {
    color: var(--color-text-secondary);
}

/* ============ DARK LINKS ============ */
:root[data-theme="dark"] .article-content a {
    color: var(--color-primary);
}

:root[data-theme="dark"] .article-content a:hover {
    color: var(--color-primary-hover);
}

/* ============ DARK CODE BLOCKS ============ */
:root[data-theme="dark"] .article-content code:not([class*="language-"]) {
    background: var(--color-surface-alt);
    color: var(--color-text);
}

:root[data-theme="dark"] .article-content pre {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
}

/* ============ DARK BLOCKQUOTES ============ */
:root[data-theme="dark"] .article-content blockquote {
    border-left-color: var(--color-primary);
    background: var(--color-surface-alt);
}

:root[data-theme="dark"] .article-content blockquote p {
    color: var(--color-text-secondary);
}

/* ============ DARK TABLES ============ */
:root[data-theme="dark"] .article-content table {
    border-color: var(--color-border);
}

:root[data-theme="dark"] .article-content th {
    background: var(--color-surface-alt);
    color: var(--color-text);
    border-color: var(--color-border);
}

:root[data-theme="dark"] .article-content td {
    border-color: var(--color-border);
    color: var(--color-text-secondary);
}

/* ============ DARK SYNTH COMPONENTS ============ */
:root[data-theme="dark"] .synth-card,
:root[data-theme="dark"] [class*="synth-"] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
}

:root[data-theme="dark"] .synth-card-title {
    color: var(--color-text);
}

:root[data-theme="dark"] .synth-card-content {
    color: var(--color-text-secondary);
}

/* ============ DARK TAKEAWAYS ============ */
:root[data-theme="dark"] .synth-takeaways,
:root[data-theme="dark"] [class*="takeaways"] {
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
}

:root[data-theme="dark"] .synth-takeaways h3,
:root[data-theme="dark"] .synth-takeaways h4 {
    color: var(--color-text);
}

:root[data-theme="dark"] .synth-takeaways li {
    color: var(--color-text-secondary);
}

/* ============ DARK STAT CARDS ============ */
:root[data-theme="dark"] .synth-stat-card,
:root[data-theme="dark"] [class*="stat-card"] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
}

:root[data-theme="dark"] .synth-stat-value {
    color: var(--color-primary);
}

:root[data-theme="dark"] .synth-stat-label {
    color: var(--color-text-secondary);
}

/* ============ DARK BUTTONS ============ */
:root[data-theme="dark"] .btn-primary,
:root[data-theme="dark"] .wp-block-button__link {
    background: var(--color-primary-surface, var(--color-primary, #0066CC));
    color: #FFFFFF;
    color: var(--smart-btn-text-on-primary, #FFFFFF);
}

:root[data-theme="dark"] .btn-primary:hover,
:root[data-theme="dark"] .wp-block-button__link:hover {
    background: var(--color-primary-surface-hover, var(--color-primary-hover, #004D99));
}

/* ============ DARK FOOTER ============ */
:root[data-theme="dark"] .site-footer {
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
}

:root[data-theme="dark"] .site-footer a {
    color: var(--color-text-secondary);
}

:root[data-theme="dark"] .site-footer a:hover {
    color: var(--color-primary);
}

/* ============ DARK NAVIGATION ============ */
:root[data-theme="dark"] .nav-link {
    color: var(--color-text-secondary);
}

:root[data-theme="dark"] .nav-link:hover,
:root[data-theme="dark"] .nav-link.active {
    color: var(--color-text);
}

:root[data-theme="dark"] .mobile-nav {
    background: var(--glass-bg);
    border-color: var(--color-border);
}

/* ============ DARK FORMS ============ */
:root[data-theme="dark"] input,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select {
    background: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text);
}

:root[data-theme="dark"] input:focus,
:root[data-theme="dark"] textarea:focus,
:root[data-theme="dark"] select:focus {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
}

:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder {
    color: var(--color-text-muted);
}

/* ============ DARK SEARCH ============ */
:root[data-theme="dark"] .search-form input {
    background: var(--color-surface-alt);
    border-color: var(--color-border);
    color: var(--color-text);
}

/* ============ DARK SOCIAL SHARING ============ */
:root[data-theme="dark"] .social-sharing {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
}

:root[data-theme="dark"] .social-share-btn {
    background: var(--color-surface-alt);
    color: var(--color-text);
    border: 1px solid var(--color-border);
}

:root[data-theme="dark"] .social-share-btn:hover {
    background: var(--color-primary-surface, var(--color-primary, #0066CC));
    color: #FFFFFF;
    color: var(--smart-btn-text-on-primary, #FFFFFF);
}

/* ============ DARK NEWSLETTER ============ */
:root[data-theme="dark"] .newsletter-section {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
}

:root[data-theme="dark"] .newsletter-title {
    color: var(--color-text);
}

:root[data-theme="dark"] .newsletter-description {
    color: var(--color-text-secondary);
}



/* ========== design-stream.css ========== */
.aiwp-design-shell {
    background: var(--color-surface-alt, var(--color-bg, #ffffff));
    padding: clamp(1.25rem, 3vw, 2.5rem);
    border: none;
    color: var(--color-text, #1a1a1a);
}

.aiwp-design-canvas {
    width: 100%;
    background: var(--color-surface, #ffffff);
    border: 1px solid var(--color-border-strong, rgba(26, 26, 26, 0.25));
    padding: clamp(1.25rem, 3vw, 2rem);
    margin: 0 0 clamp(1.25rem, 2.5vw, 1.75rem);
    border-radius: var(--radius-2xl, 20px);
    box-shadow: var(--shadow-card, 0 1px 3px rgba(0, 0, 0, 0.04));
    overflow: hidden;
}

.aiwp-design-brief {
    display: grid;
    gap: 0.35rem;
}

.aiwp-design-headline {
    font-size: clamp(1.4rem, 3vw, 1.8rem);
    font-weight: 700;
    color: var(--color-text, #1a1a1a);
    margin: 0;
}

/* When admin rail is hidden, use full width single column */
.aiwp-design-grid {
    display: block;
    width: 100%;
    max-width: var(--max-width-container, 1600px);
    margin-left: auto;
    margin-right: auto;
}

/* Admin-only sidebar layout - only applies when rail exists */
.aiwp-design-grid:has(.aiwp-design-rail) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    gap: clamp(1.5rem, 3vw, 2.75rem);
    align-items: start;
}

.aiwp-design-main {
    min-width: 0;
    max-width: 100%;
}

.aiwp-design-rail {
    position: sticky;
    top: 96px;
    display: grid;
    gap: 1rem;
    align-self: start;
}

.aiwp-rail-share {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}

.aiwp-rail-share .social-share__link {
    width: 100%;
    min-width: 0;
    justify-content: center;
}

.aiwp-toc__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.45rem;
}

.aiwp-toc__item--h3 {
    padding-left: 0.85rem;
}

.aiwp-toc__link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: var(--touch-target-min, 44px);
    padding: 0.25rem 0.35rem;
    border-radius: var(--radius-lg, 12px);
    color: var(--color-text, #1a1a1a);
    text-decoration: none;
    font-weight: 600;
    line-height: 1.35;
}

.aiwp-toc__link:hover {
    color: var(--color-primary, #0066cc);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.aiwp-toc__link:focus-visible {
    outline: 2px solid var(--color-primary, #0066cc);
    outline-offset: 2px;
}

@media (max-width: 1023px) {
    .aiwp-design-grid,
    .aiwp-design-grid:has(.aiwp-design-rail) {
        display: block;
    }
    .aiwp-design-rail {
        position: relative;
        top: auto;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        margin-top: 2rem;
    }
    .aiwp-rail-share {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.aiwp-design-card {
    background: var(--color-surface, #ffffff);
    border: 1px solid var(--color-border-subtle, rgba(26, 26, 26, 0.08));
    padding: clamp(1rem, 2vw, 1.35rem);
    border-radius: var(--radius-2xl, 20px);
    box-shadow: var(--shadow-card, 0 1px 3px rgba(0, 0, 0, 0.04));
    color: var(--color-text, #1a1a1a);
}

@media (hover: hover) {
    .aiwp-design-card:hover {
        border-color: var(--color-border-strong, rgba(26, 26, 26, 0.28));
        box-shadow: var(--shadow-card-hover, 0 8px 24px rgba(0, 0, 0, 0.08));
    }
}

.aiwp-design-card--stream {
    border-color: var(--color-primary, #0066cc);
}

.aiwp-design-card--status {
    background: var(--color-surface, #ffffff);
}

.aiwp-design-kicker {
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted, #666666);
    margin: 0 0 0.35rem;
}

.aiwp-design-meta {
    color: var(--color-text-muted, #404040);
    margin: 0 0 0.35rem;
    font-size: 0.95rem;
}

.aiwp-design-meta-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.35rem;
    color: var(--color-text, #1a1a1a);
}

.aiwp-design-endpoint {
    font-family: var(--font-mono, "SF Mono", "Fira Code", monospace);
    font-size: 0.95rem;
    padding: 0.75rem;
    background: var(--color-surface, #ffffff);
    border: 1px solid var(--color-border, rgba(26, 26, 26, 0.12));
    color: var(--color-text, #1a1a1a);
    border-radius: var(--radius-lg, 12px);
}

.aiwp-design-shell .article-header {
    padding: clamp(1.25rem, 2.5vw, 1.75rem);
    background: var(--color-surface, #ffffff);
    border: 1px solid var(--color-border-subtle, rgba(26, 26, 26, 0.08));
    border-radius: var(--radius-2xl, 20px);
    box-shadow: var(--shadow-card, 0 1px 3px rgba(0, 0, 0, 0.04));
    margin-bottom: clamp(1rem, 2vw, 1.5rem);
    overflow: hidden;
}

.aiwp-design-shell .article-featured-image {
    margin: clamp(1rem, 2vw, 1.5rem) 0 0;
    border: 1px solid var(--color-border, rgba(26, 26, 26, 0.12));
    border-radius: var(--radius-xl, 16px);
    overflow: hidden;
}

.aiwp-design-shell .article-footer {
    margin-top: clamp(1.5rem, 3vw, 2.25rem);
    padding-top: clamp(1.25rem, 2vw, 1.75rem);
    border-top: 1px solid var(--color-border-strong, rgba(26, 26, 26, 0.25));
}


/* ========== content-overrides.css ========== */
/* =====================================================================
   UNIVERSAL CONTENT OVERRIDES
   Version: 2.0.0 (2025-12-11)
   
   Purpose: Force all inline styles in post content to use CSS variables.
   This ensures complete design control regardless of AI-generated content.
   
   ARCHITECTURE:
   - Uses !important to override inline styles
   - All colors reference CSS variables from variables.css
   - Changes propagate when admin updates palette
   
   WCAG 2.1 AA COMPLIANCE:
   - All text has minimum 4.5:1 contrast ratio
   - Large text (18pt+) has minimum 3:1 contrast ratio
   - No same-spectrum text/background combinations
   ===================================================================== */

/* ============ GLOBAL INLINE STYLE RESET ============ */
/* Note: Specific overrides are applied to synth-* components below.
   This architecture ensures all AI-generated inline styles are
   overridden by the CSS variable system. */

/* ============ SYNTH COMPONENT LIBRARY ============ */
/* These components are generated by AI with inline styles.
   We force them to use the CSS variable system. */

/* === TAKEAWAYS BOX === */
.synth-takeaways,
[class*="takeaways"] {
    /* No gradients: solid surface with primary accent border */
    background: var(--color-surface-alt) !important;
    border: 1px solid var(--color-border) !important;
    border-left: 5px solid var(--color-primary) !important;
    border-radius: 12px !important;
    padding: 2rem !important;
    margin: 2.5rem auto !important;
    max-width: 800px !important;
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.06) !important;
}

.synth-takeaways h3,
.synth-takeaways-title,
[class*="takeaways-title"],
[class*="takeaways"] > div:first-child {
    color: var(--color-text) !important;
    font-size: 1.35rem !important;
    font-weight: 700 !important;
    margin-bottom: 1.25rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    text-align: center !important;
    justify-content: center !important;
}

.synth-takeaways ul,
[class*="takeaways"] ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.synth-takeaways li,
[class*="takeaways"] li {
    color: var(--color-text-secondary) !important;
    padding: 0.875rem 0 !important;
    padding-left: 2rem !important;
    position: relative !important;
    border-bottom: 1px solid var(--color-border-subtle) !important;
    line-height: 1.65 !important;
    font-size: 1rem !important;
}

.synth-takeaways li:last-child,
[class*="takeaways"] li:last-child {
    border-bottom: none !important;
}

.synth-takeaways li::before,
[class*="takeaways"] li::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 1rem !important;
    width: 20px !important;
    height: 20px !important;
    background: var(--color-primary) !important;
    border-radius: 50% !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-size: 12px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* Remove the text checkmark since we use SVG icon now */
.synth-takeaways li,
[class*="takeaways"] li {
    /* Remove any inline checkmarks from content */
}
}

/* === STAT CARDS === */
.synth-stat-card,
[class*="stat-card"],
.synth-stats-grid > div,
.stats-grid > div {
    background: var(--color-surface-alt) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-lg) !important;
    padding: var(--space-6) !important;
    text-align: center !important;
}

.synth-stat-value,
[class*="stat-value"],
.synth-stat-card > div:first-child,
[class*="stat-card"] > div:first-child {
    color: var(--color-primary) !important;
    font-size: var(--font-size-3xl) !important;
    font-weight: 900 !important;
    margin-bottom: var(--space-2) !important;
    /* Remove any text gradient effects */
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: currentColor !important;
}

.synth-stat-label,
[class*="stat-label"],
.synth-stat-card > div:last-child,
[class*="stat-card"] > div:last-child {
    color: var(--color-text-muted) !important;
    font-size: var(--font-size-sm) !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

/* === CHART CONTAINERS === */
.synth-chart-container,
[class*="chart-container"],
.synth-chart-wrapper,
[class*="chart-wrapper"] {
    background: var(--color-surface-alt) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-lg) !important;
    padding: var(--space-6) !important;
    margin: var(--space-6) 0 !important;
}

.synth-chart-title,
[class*="chart-title"] {
    color: var(--color-text) !important;
    font-size: var(--font-size-lg) !important;
    font-weight: 700 !important;
    margin-bottom: var(--space-4) !important;
}

/* === BAR CHARTS === */
.synth-bar,
.synth-bar-chart__bar,
[class*="bar-item"] {
    margin-bottom: var(--space-3) !important;
}

.synth-bar-label,
.synth-bar-chart__bar-label,
[class*="bar-label"]:not(.looker-bar-label) {
    color: var(--color-text-secondary) !important;
    font-size: var(--font-size-sm) !important;
    margin-bottom: var(--space-1) !important;
}

.synth-bar-track,
.synth-bar-chart__bar-track,
[class*="bar-track"]:not(.looker-bar-track) {
    background: var(--color-border) !important;
    border-radius: var(--radius-full) !important;
    height: 12px !important;
    overflow: hidden !important;
    position: relative !important;
    border: 1px solid rgba(var(--color-black-rgb, 26, 26, 26), 0.08) !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.12) !important;
}

.synth-bar-fill,
.synth-bar-chart__bar-fill,
[class*="bar-fill"]:not(.looker-bar-fill) {
    background: var(--color-primary) !important;
    height: 100% !important;
    border-radius: var(--radius-full) !important;
    position: relative !important;
    cursor: pointer !important;
    transition: width 1s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s ease, box-shadow 0.2s ease !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        inset 0 -2px 4px rgba(0, 0, 0, 0.25),
        0 6px 12px rgba(0, 0, 0, 0.15) !important;
}

.synth-bar-fill::after,
.synth-bar-chart__bar-fill::after,
[class*="bar-fill"]:not(.looker-bar-fill)::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 45% !important;
    background: rgba(255, 255, 255, 0.18) !important;
}

.synth-bar-fill:focus-visible,
.synth-bar-chart__bar-fill:focus-visible,
[class*="bar-fill"]:not(.looker-bar-fill):focus-visible {
    outline: 2px solid var(--color-primary) !important;
    outline-offset: 2px !important;
}

.synth-bar-chart,
[class*="bar-chart"]:not(.looker-bar-chart) {
    position: relative !important;
    overflow: visible !important;
}

/* === VERTICAL BAR CHART SUPPORT (.bar-group / .bar structure) === */
.synth-bar-chart {
    display: flex !important;
    align-items: flex-end !important;
    gap: var(--space-6, 1.5rem) !important;
    height: var(--chart-height, 200px) !important;
    padding: var(--space-4, 1rem) !important;
    background: var(--color-surface, #FFFFFF) !important;
    border-radius: var(--radius-lg, 12px) !important;
    border: 1px solid var(--color-border, rgba(0, 0, 0, 0.08)) !important;
}

.synth-bar-chart .bar-group {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    flex: 1 !important;
    height: 100% !important;
    min-width: 60px !important;
}

.synth-bar-chart .bar-group .bar {
    width: 100% !important;
    max-width: 80px !important;
    border-radius: var(--radius-md, 8px) var(--radius-md, 8px) 0 0 !important;
    margin-top: auto !important; /* Push bar to bottom */
    transition: height 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s ease !important;
    position: relative !important;
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.25),
        inset 0 -3px 6px rgba(0, 0, 0, 0.15),
        0 4px 8px rgba(0, 0, 0, 0.1) !important;
}

.synth-bar-chart .bar-group .bar:hover {
    transform: scaleY(1.02) !important;
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.3),
        inset 0 -3px 6px rgba(0, 0, 0, 0.2),
        0 6px 12px rgba(0, 0, 0, 0.15) !important;
}

.synth-bar-chart .bar-group .bar::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 40% !important;
    background: rgba(255, 255, 255, 0.15) !important;
    border-radius: var(--radius-md, 8px) var(--radius-md, 8px) 0 0 !important;
    pointer-events: none !important;
}

.synth-bar-chart .bar-group .label,
.synth-bar-chart .bar-group p {
    margin-top: var(--space-2, 0.5rem) !important;
    font-size: var(--font-size-sm, 0.875rem) !important;
    font-weight: 600 !important;
    color: var(--color-text, #1A1A1A) !important;
    text-align: center !important;
}

/* Remove gradient color variants */
.synth-bar-fill.cyan,
.synth-bar-fill.teal,
.synth-bar-fill.emerald,
.synth-bar-fill.sky,
.synth-bar-fill.blue,
[class*="bar-fill"][class*="cyan"],
[class*="bar-fill"][class*="teal"],
[class*="bar-fill"][class*="emerald"] {
    background: var(--color-primary) !important;
}

.synth-bar-value,
[class*="bar-value"] {
    color: var(--color-text) !important;
    font-weight: 600 !important;
}

/* === SOURCES / CITATIONS (IEEE) === */
.aiwp-sources,
.aiwp-sources--ieee {
    margin: var(--space-4, 1rem) 0 !important;
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
    max-width: 900px;
}

.aiwp-sources li,
.aiwp-sources--ieee li {
    margin-bottom: var(--space-3, 0.75rem) !important;
    color: var(--color-text, #1A1A1A) !important;
    line-height: 1.55 !important;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.aiwp-sources a,
.aiwp-sources--ieee a {
    color: var(--color-primary, #0066CC) !important;
    text-decoration: underline !important;
    text-underline-offset: 2px;
    word-break: break-word;
}

.aiwp-cite {
    color: var(--color-primary, #0066CC);
    font-weight: 800;
    white-space: nowrap;
}

/* === REDACTED COMMAND BLOCKS === */
.aiwp-command-redacted {
    background: var(--color-surface-alt) !important;
    border: 1px dashed var(--color-border) !important;
    border-radius: var(--radius-md) !important;
    padding: var(--space-4) !important;
    margin: var(--space-5) 0 !important;
    color: var(--color-text-muted) !important;
    font-family: var(--font-mono, "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace) !important;
    font-size: var(--font-size-sm) !important;
}

.aiwp-command-redacted code {
    color: inherit !important;
    background: transparent !important;
}

/* === TYPE/FEATURE CARDS === */
.synth-type-card,
[class*="type-card"],
.synth-feature-card,
[class*="feature-card"] {
    background: var(--color-surface) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-lg) !important;
    padding: var(--space-5) !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
}

.synth-type-card:hover,
[class*="type-card"]:hover,
.synth-feature-card:hover,
[class*="feature-card"]:hover {
    border-color: var(--color-primary) !important;
    box-shadow: var(--shadow-card-hover) !important;
}

.synth-type-icon,
[class*="type-icon"],
.synth-feature-icon,
[class*="feature-icon"] {
    font-size: 2rem !important;
    margin-bottom: var(--space-3) !important;
}

.synth-type-name,
[class*="type-name"],
.synth-feature-name,
[class*="feature-name"] {
    color: var(--color-text) !important;
    font-size: var(--font-size-lg) !important;
    font-weight: 700 !important;
    margin-bottom: var(--space-2) !important;
}

.synth-type-desc,
[class*="type-desc"],
.synth-feature-desc,
[class*="feature-desc"] {
    color: var(--color-text-secondary) !important;
    font-size: var(--font-size-sm) !important;
    line-height: 1.6 !important;
}

/* === GRIDS === */
.synth-types-grid,
[class*="types-grid"],
.synth-features-grid,
[class*="features-grid"],
.synth-stats-grid,
[class*="stats-grid"] {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    gap: var(--space-4) !important;
    margin: var(--space-6) 0 !important;
}

/* === QUOTE CARDS === */
.synth-quote,
[class*="synth-quote"],
.synth-quote-card,
[class*="quote-card"] {
    background: var(--color-surface-alt) !important;
    border: none !important;
    border-left: 4px solid var(--color-primary) !important;
    border-radius: var(--radius-lg) !important;
    padding: var(--space-6) !important;
    margin: var(--space-6) 0 !important;
}

.synth-quote-text,
[class*="quote-text"] {
    color: var(--color-text) !important;
    font-size: var(--font-size-lg) !important;
    font-style: italic !important;
    line-height: 1.6 !important;
    margin-bottom: var(--space-3) !important;
}

.synth-quote-author,
[class*="quote-author"] {
    color: var(--color-primary) !important;
    font-size: var(--font-size-sm) !important;
    font-weight: 600 !important;
}

/* === COMPARISON CARDS === */
.synth-compare-card,
[class*="compare-card"] {
    background: var(--color-surface-alt) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-lg) !important;
    padding: var(--space-5) !important;
}

.synth-compare-card.real,
[class*="compare-card"].real {
    border-left: 4px solid var(--color-warning) !important;
}

.synth-compare-card.synthetic,
[class*="compare-card"].synthetic {
    border-left: 4px solid var(--color-primary) !important;
}

.synth-compare-title,
[class*="compare-title"] {
    color: var(--color-text) !important;
    font-weight: 700 !important;
    margin-bottom: var(--space-3) !important;
}

/* === TABLES === */
.synth-table,
[class*="synth-table"],
.article-content table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: var(--space-6) 0 !important;
    border-radius: var(--radius-lg) !important;
    overflow: hidden !important;
}

/* Mobile: tables must scroll instead of collapsing into vertical letter stacks */
@media (max-width: 768px) {
    .synth-table,
    [class*="synth-table"],
    .article-content table,
    .aiwp-section table {
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .synth-table th:first-child,
    .synth-table td:first-child,
    .article-content table th:first-child,
    .article-content table td:first-child,
    .aiwp-section table th:first-child,
    .aiwp-section table td:first-child {
        white-space: nowrap !important;
    }
}

.synth-table th,
[class*="synth-table"] th,
.article-content table th {
    background: var(--color-primary-surface, var(--color-primary, #0066CC)) !important;
    color: #FFFFFF !important;
    color: var(--smart-btn-text-on-primary, #FFFFFF) !important;
    font-weight: 600 !important;
    padding: var(--space-3) var(--space-4) !important;
    text-align: left !important;
}

.synth-table td,
[class*="synth-table"] td,
.article-content table td {
    color: var(--color-text) !important;
    padding: var(--space-3) var(--space-4) !important;
    border-bottom: 1px solid var(--color-border) !important;
}

.synth-table tr:last-child td,
[class*="synth-table"] tr:last-child td,
.article-content table tr:last-child td {
    border-bottom: none !important;
}

/* === BENEFIT CARDS === */
.synth-benefit,
[class*="benefit-item"],
.synth-benefits > div {
    background: var(--color-surface-alt) !important;
    border-radius: var(--radius-md) !important;
    padding: var(--space-4) !important;
    margin-bottom: var(--space-3) !important;
}

.synth-benefit-name,
[class*="benefit-name"] {
    color: var(--color-text) !important;
    font-weight: 600 !important;
}

.synth-benefit-value,
[class*="benefit-value"] {
    color: var(--color-primary) !important;
    font-weight: 700 !important;
}

/* === SECTION STYLING === */
.synth-section,
[class*="synth-section"] {
    margin: var(--space-8) 0 !important;
}

.synth-section h2,
[class*="synth-section"] h2 {
    color: var(--color-text) !important;
    font-size: var(--font-size-2xl) !important;
    font-weight: 800 !important;
    margin-bottom: var(--space-4) !important;
    padding-left: var(--space-4) !important;
    border-left: 4px solid var(--color-primary) !important;
}

.synth-section h3,
[class*="synth-section"] h3 {
    color: var(--color-text) !important;
    font-size: var(--font-size-xl) !important;
    font-weight: 700 !important;
    margin: var(--space-5) 0 var(--space-3) !important;
}

.synth-section p,
[class*="synth-section"] p {
    color: var(--color-text-secondary) !important;
    line-height: 1.7 !important;
    margin-bottom: var(--space-4) !important;
}

/* === HERO SECTIONS === */
.synth-hero,
[class*="synth-hero"],
.article-hero-overlay {
    background: rgba(var(--color-black-rgb), 0.6) !important;
}

.synth-hero-title,
[class*="hero-title"] {
    color: var(--color-text-inverse) !important;
}

/* === READING BADGES === */
.synth-reading-badge,
[class*="reading-badge"],
.synth-badge,
[class*="synth-badge"] {
    background: var(--color-primary-surface, var(--color-primary, #0066CC)) !important;
    color: #FFFFFF !important;
    color: var(--smart-btn-text-on-primary, #FFFFFF) !important;
    font-size: var(--font-size-xs) !important;
    font-weight: 600 !important;
    padding: var(--space-1) var(--space-3) !important;
    border-radius: var(--radius-full) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: var(--space-1) !important;
}

/* === INLINE IMAGES === */
.synth-inline-img,
[class*="synth-inline-img"] {
    border-radius: var(--radius-lg) !important;
    margin: var(--space-6) 0 !important;
    box-shadow: var(--shadow-card) !important;
}

/* === CTA BUTTONS === */
.synth-cta,
[class*="synth-cta"],
.synth-button,
[class*="synth-button"] {
    background: var(--color-primary-surface, var(--color-primary, #0066CC)) !important;
    color: #FFFFFF !important;
    color: var(--smart-btn-text-on-primary, #FFFFFF) !important;
    border: none !important;
    border-radius: var(--radius-md) !important;
    padding: var(--space-3) var(--space-6) !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: var(--space-2) !important;
    transition: background 0.2s !important;
}

.synth-cta:hover,
[class*="synth-cta"]:hover,
.synth-button:hover,
[class*="synth-button"]:hover {
    background: var(--color-primary-surface-hover, var(--color-primary-hover, #004D99)) !important;
    color: #FFFFFF !important;
    color: var(--smart-btn-text-on-primary, #FFFFFF) !important;
}

/* ============ FORCED INLINE STYLE OVERRIDES ============ */
/* These selectors target specific inline style patterns */

/* Dark backgrounds */
[style*="background: #020617"],
[style*="background: #0f172a"],
[style*="background: #1a1a2e"],
[style*="background: #16213e"],
[style*="background: #0d1117"],
[style*="background: #1e1e1e"],
[style*="background:#020617"],
[style*="background:#0f172a"],
[style*="background-color: #020617"],
[style*="background-color: #0f172a"] {
    background: var(--color-surface-alt) !important;
}

/* Gradient backgrounds */
[style*="linear-gradient"],
[style*="radial-gradient"] {
    background: var(--color-surface-alt) !important;
}

/* Force text colors on dark-intended containers */
[style*="background: #020617"] *,
[style*="background: #0f172a"] *,
[style*="linear-gradient"] * {
    color: var(--color-text) !important;
}

/* Specific color overrides for light text on dark */
[style*="color: #67e8f9"],
[style*="color: #22d3ee"],
[style*="color: #e2e8f0"],
[style*="color: #cbd5e1"],
[style*="color: #f8fafc"],
[style*="color:#67e8f9"],
[style*="color:#e2e8f0"] {
    color: var(--color-text) !important;
}

/* Border color overrides */
[style*="border-color: #0e7490"],
[style*="border-color: #1e293b"],
[style*="border: 1px solid #0e7490"],
[style*="border: 1px solid #1e293b"] {
    border-color: var(--color-border) !important;
}

/* ============ SOCIAL SHARING COMPONENT ============ */
.social-sharing,
.social-share,
[class*="social-sharing"] {
    background: var(--color-surface) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-lg) !important;
    padding: var(--space-6) !important;
    margin: var(--space-6) 0 !important;
}

.social-sharing__header,
[class*="social-sharing__header"] {
    display: flex !important;
    align-items: center !important;
    gap: var(--space-3) !important;
    margin-bottom: var(--space-4) !important;
}

/* v6.6.0: Social sharing icon - white on primary background for visibility */
.social-sharing__icon,
[class*="social-sharing__icon"] {
    /* Primary background with white icon for contrast */
    color: #FFFFFF !important;
}

/* v6.6.0: Ensure social sharing header SVG icon is WHITE on blue background */
.social-sharing__icon svg,
[class*="social-sharing__icon"] svg {
    stroke: #FFFFFF !important;
    fill: none !important;
}

.social-sharing__title,
[class*="social-sharing__title"] {
    color: var(--color-text) !important;
    font-size: var(--font-size-lg) !important;
    font-weight: 700 !important;
    margin: 0 !important;
}

.social-sharing__links,
[class*="social-sharing__links"] {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: var(--space-3) !important;
}

/* v5.28.0: Social share links - ensure WCAG 2.1 touch targets (44px min) */
.social-share__link,
[class*="social-share__link"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--space-2) !important;
    padding: 10px 14px !important; /* Explicit padding for consistent sizing */
    min-width: 44px !important;
    min-height: 44px !important;
    border-radius: var(--radius-md) !important;
    font-size: var(--font-size-sm) !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: background 0.2s, color 0.2s !important;
    box-sizing: border-box !important; /* v5.28.0: Ensure padding counts toward min dimensions */
}

/* SVG Icon Visibility Fix - Explicit fill/stroke for cross-browser compatibility */
.social-share__link svg,
[class*="social-share__link"] svg {
    flex-shrink: 0 !important;
}

/* Fill-based icons (Twitter, Facebook, LinkedIn) */
.social-share__link svg[fill="currentColor"],
[class*="social-share__link"] svg[fill="currentColor"] {
    fill: currentColor !important;
}

/* Stroke-based icons (Copy link) */
.social-share__link svg[fill="none"],
[class*="social-share__link"] svg[fill="none"] {
    fill: none !important;
    stroke: currentColor !important;
}

/* Twitter/X */
.social-share__link--twitter,
[class*="social-share__link--twitter"] {
    background: #000000 !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

.social-share__link--twitter:hover,
[class*="social-share__link--twitter"]:hover {
    background: #1a1a1a !important;
}

/* Facebook */
.social-share__link--facebook,
[class*="social-share__link--facebook"] {
    background: #1877F2 !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

.social-share__link--facebook:hover,
[class*="social-share__link--facebook"]:hover {
    background: #166FE5 !important;
}

/* LinkedIn */
.social-share__link--linkedin,
[class*="social-share__link--linkedin"] {
    background: #0A66C2 !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

.social-share__link--linkedin:hover,
[class*="social-share__link--linkedin"]:hover {
    background: #004182 !important;
}

/* Copy Link */
.social-share__link--copy,
[class*="social-share__link--copy"] {
    background: var(--color-primary-surface, var(--color-primary)) !important;
    color: #FFFFFF !important;
    color: var(--sv-btn-text-on-primary, #FFFFFF) !important;
    border: 1px solid rgba(var(--color-primary-surface-rgb, 0, 102, 204), 0.6) !important;
}

.social-share__link--copy:hover,
[class*="social-share__link--copy"]:hover {
    background: var(--color-primary-surface-hover, var(--color-primary-hover)) !important;
    color: #FFFFFF !important;
    color: var(--sv-btn-text-on-primary, #FFFFFF) !important;
    border-color: var(--color-primary-surface-hover, var(--color-primary-hover)) !important;
}

.social-share__link--copy.copied,
[class*="social-share__link--copy"].copied {
    background: var(--color-success) !important;
    color: #FFFFFF !important;
    border-color: var(--color-success) !important;
}

/* ============ AIWP COMPONENT LIBRARY v11.0 ============ */
/* These are CSS class-based components generated by class-visual-content-generator.php */

/* === AIWP STATS BLOCK === */
.aiwp-stats-block {
    background: var(--color-primary-surface, var(--color-primary, #0066CC)) !important;
    border-radius: var(--radius-lg) !important;
    padding: var(--space-8) !important;
    margin: var(--space-6) 0 !important;
}

.aiwp-stats-block__title {
    text-align: center !important;
    color: #FFFFFF !important;
    color: var(--smart-btn-text-on-primary, #FFFFFF) !important;
    margin-bottom: var(--space-6) !important;
    font-size: var(--font-size-xl) !important;
    font-weight: 700 !important;
}

.aiwp-stats-block__grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
    gap: var(--space-6) !important;
}

.aiwp-stat-card {
    text-align: center !important;
}

.aiwp-stat-card__value {
    font-size: clamp(2rem, 5vw, 3.5rem) !important;
    font-weight: 800 !important;
    color: #FFFFFF !important;
    color: var(--smart-btn-text-on-primary, #FFFFFF) !important;
    line-height: 1 !important;
    margin-bottom: var(--space-2) !important;
}

.aiwp-stat-card__label {
    color: rgba(var(--color-white-rgb), 0.8) !important;
    font-size: var(--font-size-sm) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

/* === AIWP QUOTE CARD === */
.aiwp-quote-card {
    background: var(--color-primary-surface, var(--color-primary, #0066CC)) !important;
    padding: var(--space-8) !important;
    border-radius: var(--radius-lg) !important;
    margin: var(--space-6) 0 !important;
    position: relative !important;
    overflow: hidden !important;
    border: none !important;
}

.aiwp-quote-card__icon {
    position: absolute !important;
    top: var(--space-4) !important;
    left: var(--space-6) !important;
    font-size: 4rem !important;
    color: rgba(var(--color-white-rgb), 0.2) !important;
    line-height: 1 !important;
}

.aiwp-quote-card__text {
    color: #FFFFFF !important;
    font-size: var(--font-size-lg) !important;
    font-style: italic !important;
    line-height: 1.8 !important;
    margin: 0 0 var(--space-6) 0 !important;
    position: relative !important;
    z-index: 1 !important;
}

.aiwp-quote-card__author {
    display: flex !important;
    align-items: center !important;
    gap: var(--space-4) !important;
}

.aiwp-quote-card__avatar {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    border: 2px solid var(--color-text-inverse) !important;
}

.aiwp-quote-card__name {
    color: rgba(var(--color-white-rgb), 0.9) !important;
    font-style: normal !important;
    font-weight: 600 !important;
}

/* === AIWP PROCESS DIAGRAM === */
.aiwp-process-diagram {
    --aiwp-process-diagram-bg: var(--color-surface-alt) !important;
    --aiwp-process-marker-size: 42px !important;
    --aiwp-process-marker-half: 21px !important;

    background: var(--aiwp-process-diagram-bg) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-lg) !important;
    padding: var(--space-8) !important;
    margin: var(--space-6) 0 !important;
    box-shadow: var(--shadow-card) !important;
}

.aiwp-process-diagram__title {
    text-align: center !important;
    color: var(--color-text) !important;
    margin-bottom: var(--space-6) !important;
    font-size: var(--font-size-xl) !important;
    font-weight: 700 !important;
}

.aiwp-process-diagram__grid {
    position: relative !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: var(--space-8) !important;
    padding-top: var(--aiwp-process-marker-half) !important;
}

.aiwp-process-diagram__grid::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: var(--aiwp-process-marker-half) !important;
    height: 2px !important;
    background: var(--color-border) !important;
    border-radius: var(--radius-full) !important;
}

.aiwp-process-step {
    position: relative !important;
    background: var(--color-surface) !important;
    padding: var(--space-6) !important;
    padding-top: calc(var(--space-6) + var(--aiwp-process-marker-half)) !important;
    border-radius: var(--radius-md) !important;
    border: 1px solid var(--color-border) !important;
    box-shadow: var(--shadow-card) !important;
    text-align: left !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.aiwp-process-step__icon {
    font-size: 2.5rem !important;
    margin-bottom: var(--space-3) !important;
}

.aiwp-process-step__number {
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: var(--aiwp-process-marker-size) !important;
    height: var(--aiwp-process-marker-size) !important;
    border-radius: var(--radius-full) !important;
    background: var(--color-primary) !important;
    color: #FFFFFF !important;
    color: var(--smart-btn-text-on-primary, #FFFFFF) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 800 !important;
    font-size: 15px !important;
    letter-spacing: 0.06em !important;
    box-shadow: 0 0 0 6px var(--aiwp-process-diagram-bg) !important;
}

.aiwp-process-step__text {
    color: var(--color-text-secondary) !important;
    font-size: var(--font-size-base) !important;
    line-height: 1.55 !important;
}

@media (hover: hover) {
    .aiwp-process-step:hover {
        border-color: var(--color-primary) !important;
        box-shadow: var(--shadow-card-hover) !important;
    }
}

/* === AIWP COMPARISON === */
.aiwp-comparison {
    background: var(--color-surface-alt) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-lg) !important;
    padding: var(--space-8) !important;
    margin: var(--space-6) 0 !important;
}

.aiwp-comparison__title {
    text-align: center !important;
    color: var(--color-text) !important;
    margin-bottom: var(--space-6) !important;
    font-size: var(--font-size-xl) !important;
    font-weight: 700 !important;
}

.aiwp-comparison__grid {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    gap: var(--space-4) !important;
    align-items: start !important;
}

.aiwp-comparison__column {
    background: var(--color-surface) !important;
    padding: var(--space-6) !important;
    border-radius: var(--radius-md) !important;
}

.aiwp-comparison__column--negative {
    border-top: 4px solid var(--color-error) !important;
}

.aiwp-comparison__column--positive {
    border-top: 4px solid var(--color-success) !important;
}

.aiwp-comparison__heading {
    text-align: center !important;
    margin-bottom: var(--space-4) !important;
    font-size: var(--font-size-base) !important;
    font-weight: 600 !important;
}

.aiwp-comparison__column--negative .aiwp-comparison__heading {
    color: var(--color-error) !important;
}

.aiwp-comparison__column--positive .aiwp-comparison__heading {
    color: var(--color-success) !important;
}

.aiwp-comparison__list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.aiwp-comparison__item {
    padding: var(--space-3) 0 !important;
    border-bottom: 1px solid var(--color-border) !important;
    color: var(--color-text-secondary) !important;
}

.aiwp-comparison__item:last-child {
    border-bottom: none !important;
}

.aiwp-comparison__divider {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 var(--space-4) !important;
}

.aiwp-comparison__vs {
    background: var(--color-text) !important;
    color: #FFFFFF !important;
    color: var(--color-bg, #FFFFFF) !important;
    padding: var(--space-3) var(--space-4) !important;
    border-radius: var(--radius-md) !important;
    font-weight: 700 !important;
}

/* === AIWP TIMELINE === */
.aiwp-timeline {
    background: var(--color-surface) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-lg) !important;
    padding: var(--space-8) !important;
    margin: var(--space-6) 0 !important;
    box-shadow: var(--shadow-card) !important;
}

.aiwp-timeline__title {
    text-align: center !important;
    color: var(--color-text) !important;
    margin-bottom: var(--space-6) !important;
    font-size: var(--font-size-xl) !important;
    font-weight: 700 !important;
}

.aiwp-timeline__content {
    position: relative !important;
    padding-left: var(--space-10) !important;
}

.aiwp-timeline__line {
    position: absolute !important;
    left: 15px !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 2px !important;
    background: var(--color-primary) !important;
}

.aiwp-timeline__event {
    position: relative !important;
    padding-bottom: var(--space-6) !important;
}

.aiwp-timeline__dot {
    position: absolute !important;
    left: calc(-1 * var(--space-10) + 8px) !important;
    top: 0 !important;
    width: 16px !important;
    height: 16px !important;
    background: var(--color-primary) !important;
    border-radius: 50% !important;
    border: 3px solid var(--color-surface) !important;
    box-shadow: 0 0 0 3px var(--color-primary) !important;
}

.aiwp-timeline__date {
    color: var(--color-primary) !important;
    font-weight: 600 !important;
    font-size: var(--font-size-sm) !important;
    margin-bottom: var(--space-1) !important;
}

.aiwp-timeline__event-title {
    font-weight: 700 !important;
    color: var(--color-text) !important;
    font-size: var(--font-size-lg) !important;
    margin-bottom: var(--space-2) !important;
}

.aiwp-timeline__description {
    color: var(--color-text-muted) !important;
    line-height: 1.6 !important;
}

/* ============ ARTICLE FOOTER ============ */
.article-footer,
footer.article-footer {
    margin-top: var(--space-8) !important;
    padding-top: var(--space-6) !important;
    border-top: 1px solid var(--color-border) !important;
}

/* ============ DARK MODE ADJUSTMENTS ============ */
:root[data-theme="dark"] .synth-takeaways,
:root[data-theme="dark"] [class*="takeaways"],
:root[data-theme="dark"] .synth-chart-container,
:root[data-theme="dark"] [class*="chart-container"],
:root[data-theme="dark"] .synth-quote,
:root[data-theme="dark"] [class*="quote"],
:root[data-theme="dark"] .social-sharing {
    background: var(--color-surface) !important;
}

:root[data-theme="dark"] .synth-type-card,
:root[data-theme="dark"] [class*="type-card"],
:root[data-theme="dark"] .synth-feature-card,
:root[data-theme="dark"] [class*="feature-card"],
:root[data-theme="dark"] .aiwp-process-step,
:root[data-theme="dark"] .aiwp-comparison,
:root[data-theme="dark"] .aiwp-comparison__column {
    background: var(--color-surface-alt) !important;
}

:root[data-theme="dark"] .aiwp-process-diagram,
:root[data-theme="dark"] .aiwp-timeline {
    --aiwp-process-diagram-bg: var(--color-surface) !important;
    background: var(--color-surface) !important;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 768px) {
    /* ========================================================================
       MOBILE READABILITY FIX v5.63.0 (2026-01-05)
       
       NUCLEAR OPTION: On mobile, NO element should appear side-by-side with text.
       ALL visual elements must be full-width stacked blocks.
       ======================================================================== */
    
    /* === NUCLEAR OPTION: EVERYTHING INSIDE ARTICLE STACKS VERTICALLY === */
    .article-content,
    .entry-content,
    .aiwp-article,
    .post-content {
        display: block !important;
    }
    
    /* Direct children of article content: ALWAYS full-width block */
    .article-content > *,
    .entry-content > *,
    .aiwp-article > *,
    .post-content > *,
    .aiwp-section > * {
        display: block !important;
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        clear: both !important;
        box-sizing: border-box !important;
    }
    
    /* === ANY BOX/CARD/PANEL INSIDE CONTENT: FULL WIDTH === */
    .article-content > div[class],
    .entry-content > div[class],
    .aiwp-section > div[class],
    .article-content aside,
    .entry-content aside,
    .article-content figure,
    .entry-content figure {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
        clear: both !important;
    }
    
    /* === CHARTS AND INFOGRAPHICS: ABSOLUTE FULL WIDTH === */
    .pc3-chart,
    .pc3-stat,
    .pc3-stats,
    .pc3-hbar,
    .pc3-vbar,
    .synth-chart-container,
    .synth-stats-grid,
    [class*="stats-grid"],
    .synth-stat-card,
    [class*="stat-card"],
    .synth-info-card,
    [class*="info-card"],
    .synth-data-card,
    [class*="data-card"],
    .synth-metric-card,
    [class*="metric-card"],
    .synth-mission-card,
    [class*="mission-card"],
    .synth-mini-card,
    [class*="mini-card"],
    .synth-floating-card,
    [class*="floating-card"],
    .synth-aside,
    [class*="synth-aside"],
    figure,
    .wp-block-image,
    .wp-block-table,
    .wp-block-group,
    aside,
    .aiwp-infographic,
    [class*="infographic"],
    .aiwp-chart,
    [class*="chart-wrapper"],
    .synth-bar-chart,
    .synth-comparison-table,
    .synth-bento-grid,
    .synth-feature-grid,
    [class*="card"],
    [class*="box"],
    [class*="panel"],
    [class*="widget"],
    [class*="aside"],
    [class*="sidebar"] {
        display: block !important;
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        clear: both !important;
        position: relative !important;
    }
    
    /* === CLEAR FLOATS EVERYWHERE === */
    .article-content::after,
    .entry-content::after,
    .aiwp-section::after,
    .aiwp-article::after {
        content: "" !important;
        display: table !important;
        clear: both !important;
    }
    
    /* === GRID LAYOUTS: SINGLE COLUMN ON MOBILE === */
    .synth-types-grid,
    [class*="types-grid"],
    .synth-features-grid,
    [class*="features-grid"],
    .synth-stats-grid,
    [class*="stats-grid"],
    .aiwp-stats-block__grid,
    .aiwp-process-diagram__grid,
    .synth-compare-grid,
    .synth-bento-grid,
    .synth-feature-grid {
        grid-template-columns: 1fr !important;
        gap: var(--space-4) !important;
    }
    
    /* === INLINE ELEMENTS: FORCE BLOCK === */
    .synth-badge-inline,
    [class*="badge-inline"],
    .synth-stat-inline,
    [class*="stat-inline"] {
        display: block !important;
        width: 100% !important;
        margin: var(--space-3) 0 !important;
    }
    
    /* === SIDEBAR/PULL QUOTES: FULL WIDTH === */
    .synth-sidebar-quote,
    .synth-pull-quote,
    [class*="pull-quote"],
    [class*="sidebar-quote"],
    .synth-callout,
    [class*="callout"] {
        float: none !important;
        width: 100% !important;
        margin: var(--space-4) 0 !important;
        max-width: 100% !important;
    }
    
    /* === STATS CARDS: PROPER SPACING === */
    .pc3-stat,
    .synth-stat-card,
    [class*="stat-card"] {
        margin-bottom: var(--space-4) !important;
    }
    
    /* === PROCESS DIAGRAM VERTICAL LAYOUT === */
    .aiwp-process-diagram__grid {
        padding-top: 0 !important;
        padding-left: calc(var(--aiwp-process-marker-size) + var(--space-4)) !important;
    }

    .aiwp-process-diagram__grid::before {
        left: var(--aiwp-process-marker-half) !important;
        right: auto !important;
        top: 0 !important;
        bottom: 0 !important;
        width: 2px !important;
        height: auto !important;
    }

    .aiwp-process-step {
        padding-top: var(--space-6) !important;
    }

    .aiwp-process-step__number {
        left: calc(-1 * (var(--aiwp-process-marker-size) + var(--space-4))) !important;
        top: var(--space-6) !important;
        transform: none !important;
        box-shadow: 0 0 0 4px var(--aiwp-process-diagram-bg) !important;
    }
    
    /* === COMPARISON GRID: STACK VERTICALLY === */
    .aiwp-comparison__grid {
        grid-template-columns: 1fr !important;
    }
    
    .aiwp-comparison__divider {
        padding: var(--space-4) 0 !important;
    }
    
    /* === SOCIAL SHARING: VERTICAL ON MOBILE === */
    .social-sharing__links,
    [class*="social-sharing__links"] {
        flex-direction: column !important;
    }
    
    .social-share__link,
    [class*="social-share__link"] {
        justify-content: center !important;
    }
    
    /* === BENTO GRID: SINGLE COLUMN === */
    .synth-bento-grid > div {
        grid-row: auto !important;
    }
    
    /* === IMAGES: FULL WIDTH === */
    .article-content img,
    .aiwp-section img {
        max-width: 100% !important;
        height: auto !important;
        float: none !important;
        display: block !important;
        margin: var(--space-4) auto !important;
    }
    
    /* === TABLES: FULL WIDTH WITH SCROLL === */
    .article-content table,
    .aiwp-section table {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
}

/* ============ ELEGANT LAYOUT COMPONENTS ============ */

/* Stats Grid - Multi-column responsive */
.synth-stats-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
    gap: var(--space-4) !important;
    margin: var(--space-6) 0 !important;
}

/* Comparison Grid - Two column pros/cons */
.synth-compare-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: var(--space-5) !important;
    margin: var(--space-6) 0 !important;
}

.synth-compare-card {
    background: var(--color-surface-alt) !important;
    border-radius: var(--radius-lg) !important;
    padding: var(--space-5) !important;
    border: 1px solid var(--color-border) !important;
}

.synth-compare-card.pros {
    border-left: 4px solid var(--color-success) !important;
}

.synth-compare-card.cons {
    border-left: 4px solid var(--color-warning) !important;
}

.synth-compare-card h4 {
    color: var(--color-text) !important;
    font-size: var(--font-size-lg) !important;
    font-weight: 700 !important;
    margin-bottom: var(--space-3) !important;
}

.synth-compare-card ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.synth-compare-card li {
    color: var(--color-text-secondary) !important;
    padding: var(--space-2) 0 !important;
    padding-left: var(--space-5) !important;
    position: relative !important;
}

.synth-compare-card.pros li::before {
    content: "\2713" !important;
    position: absolute !important;
    left: 0 !important;
    color: var(--color-success) !important;
    font-weight: bold !important;
}

.synth-compare-card.cons li::before {
    content: "\2717" !important;
    position: absolute !important;
    left: 0 !important;
    color: var(--color-warning) !important;
    font-weight: bold !important;
}

/* Bento Grid - Asymmetric layout */
.synth-bento-grid {
    display: grid !important;
    grid-template-columns: 2fr 1fr !important;
    grid-template-rows: auto auto !important;
    gap: var(--space-4) !important;
    margin: var(--space-6) 0 !important;
}

/* Feature Grid */
.synth-feature-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
    gap: var(--space-5) !important;
    margin: var(--space-6) 0 !important;
}

.synth-feature-card {
    background: var(--color-surface) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-lg) !important;
    padding: var(--space-5) !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
}

.synth-feature-card:hover {
    border-color: var(--color-primary) !important;
    box-shadow: var(--shadow-card-hover) !important;
}

.synth-feature-icon {
    font-size: var(--font-size-2xl) !important;
    margin-bottom: var(--space-3) !important;
}

.synth-feature-card h4 {
    color: var(--color-text) !important;
    font-size: var(--font-size-md) !important;
    font-weight: 600 !important;
    margin-bottom: var(--space-2) !important;
}

.synth-feature-card p {
    color: var(--color-text-secondary) !important;
    font-size: var(--font-size-sm) !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

/* Timeline */
.synth-timeline {
    position: relative !important;
    padding-left: var(--space-8) !important;
    margin: var(--space-6) 0 !important;
}

.synth-timeline::before {
    content: '' !important;
    position: absolute !important;
    left: 15px !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 2px !important;
    background: var(--color-border) !important;
}

.synth-timeline-item {
    position: relative !important;
    padding-bottom: var(--space-5) !important;
}

.synth-timeline-marker {
    position: absolute !important;
    left: calc(-1 * var(--space-8) + 6px) !important;
    width: 20px !important;
    height: 20px !important;
    background: var(--color-primary-surface, var(--color-primary, #0066CC)) !important;
    color: #FFFFFF !important;
    color: var(--smart-btn-text-on-primary, #FFFFFF) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: var(--font-size-xs) !important;
    font-weight: 700 !important;
}

.synth-timeline-content h4 {
    color: var(--color-text) !important;
    font-size: var(--font-size-md) !important;
    font-weight: 600 !important;
    margin-bottom: var(--space-1) !important;
}

.synth-timeline-content p {
    color: var(--color-text-secondary) !important;
    font-size: var(--font-size-sm) !important;
    margin: 0 !important;
}

/* Sidebar Quote */
.synth-sidebar-quote {
    background: var(--color-surface-alt) !important;
    border-radius: var(--radius-lg) !important;
    padding: var(--space-5) !important;
    border-left: 4px solid var(--color-primary) !important;
}

.synth-sidebar-quote blockquote {
    font-style: italic !important;
    color: var(--color-text) !important;
    font-size: var(--font-size-md) !important;
    line-height: 1.6 !important;
    margin: 0 0 var(--space-3) 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
}

.synth-sidebar-quote cite {
    color: var(--color-primary) !important;
    font-size: var(--font-size-sm) !important;
    font-weight: 600 !important;
    font-style: normal !important;
}

/* Progress Bars */
.synth-progress-container {
    margin: var(--space-6) 0 !important;
}

.synth-progress-item {
    margin-bottom: var(--space-4) !important;
}

.synth-progress-header {
    display: flex !important;
    justify-content: space-between !important;
    margin-bottom: var(--space-2) !important;
    font-size: var(--font-size-sm) !important;
    color: var(--color-text-secondary) !important;
}

.synth-progress-track {
    height: 8px !important;
    background: var(--color-border) !important;
    border-radius: var(--radius-full) !important;
    overflow: hidden !important;
}

.synth-progress-fill {
    height: 100% !important;
    background: var(--color-primary) !important;
    border-radius: var(--radius-full) !important;
    transition: width 0.5s ease !important;
}

/* Donut Chart */
.synth-donut-chart {
    margin: 0 auto var(--space-4) !important;
}

.synth-donut-legend {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: var(--space-3) !important;
    justify-content: center !important;
}

.synth-legend-item {
    display: flex !important;
    align-items: center !important;
    gap: var(--space-2) !important;
    font-size: var(--font-size-sm) !important;
    color: var(--color-text-secondary) !important;
}

/* Dark Mode for Elegant Layouts */
[data-theme="dark"] .synth-compare-card,
[data-theme="dark"] .synth-feature-card,
[data-theme="dark"] .synth-sidebar-quote,
[data-theme="dark"] .synth-timeline-content {
    background: var(--color-surface-alt-dark) !important;
}

[data-theme="dark"] .synth-timeline::before {
    background: var(--color-border-dark) !important;
}

[data-theme="dark"] .synth-progress-track {
    background: var(--color-border-dark) !important;
}

/* =====================================================================
   MOBILE RESPONSIVE FIXES v5.66.0 (2026-01-05)
   
   CRITICAL: Fix timeline, social sharing, charts, and infographics
   on mobile view to prevent broken layouts and side-by-side rendering.
   ===================================================================== */

/* === MOBILE TIMELINE FIX === */
/* Force all timeline variants to vertical layout on mobile */
@media (max-width: 768px) {
    /* S-Bend Timeline Mobile Fix */
    .sbend-timeline,
    .synth-timeline,
    .aiwp-timeline {
        display: block !important;
        width: 100% !important;
        overflow-x: hidden !important;
    }
    
    .sbend-timeline__track,
    .synth-timeline,
    .aiwp-timeline__track {
        flex-direction: column !important;
        display: flex !important;
    }
    
    .sbend-timeline__item,
    .synth-timeline-item,
    .aiwp-timeline__item {
        display: flex !important;
        flex-direction: row !important;
        width: 100% !important;
        gap: var(--space-3, 12px) !important;
        margin-bottom: var(--space-4, 16px) !important;
    }
    
    /* Force timeline cards to full width */
    .sbend-timeline__card,
    .synth-timeline-content,
    .aiwp-timeline__content {
        flex: 1 !important;
        max-width: none !important;
        width: calc(100% - 50px) !important;
        text-align: left !important;
    }
    
    /* Hide arrows on mobile */
    .sbend-timeline__item--left .sbend-timeline__card::after,
    .sbend-timeline__item--right .sbend-timeline__card::after {
        display: none !important;
    }
    
    /* Timeline marker fixed position */
    .sbend-timeline__marker,
    .synth-timeline-marker,
    .aiwp-timeline__marker {
        flex-shrink: 0 !important;
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        font-size: 12px !important;
        border-radius: 50% !important;
    }
    
    /* Center line on mobile - left side */
    .sbend-timeline__track::before {
        left: 18px !important;
        transform: translateX(0) !important;
    }
}

/* === MOBILE CHARTS & INFOGRAPHICS FIX === */
/* Make all charts scrollable on mobile if too wide */
@media (max-width: 768px) {
    /* Horizontal scroll wrapper for wide charts */
    .pc3-chart,
    .pc-chart,
    .synth-chart-container,
    .synth-bar-chart,
    .uv-chart,
    [class*="chart-container"],
    [class*="bar-chart"] {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: thin !important;
        max-width: 100% !important;
    }
    
    /* Horizontal bar charts - optimize for mobile */
    .pc3-hbar,
    .pc-hbar,
    .synth-hbar,
    .uv-hbar {
        min-width: 280px !important;
    }
    
    .pc3-hbar__label,
    .pc-hbar__label,
    .synth-bar-label {
        flex: 0 0 120px !important;
        min-width: 90px !important;
        max-width: 140px !important;
        font-size: 0.75rem !important;
        line-height: 1.2 !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        overflow-wrap: anywhere !important;
    }
    
    .pc3-hbar__value,
    .pc-hbar__value,
    .synth-bar-value {
        min-width: 40px !important;
        font-size: 0.75rem !important;
    }
    
    /* Vertical bar charts - reduce height */
    .pc3-vbar,
    .pc-vbar,
    .synth-vbar,
    .uv-vbar {
        --pc3-chart-height: 180px !important;
        --chart-height: 180px !important;
    }
    
    /* Stats grid - force 2 columns on mobile, 1 on extra small */
    .pc3-stats,
    .pc-stats,
    .synth-stats-grid,
    .uv-stats,
    [class*="stats-grid"] {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--space-3, 12px) !important;
    }
    
    .pc3-stat,
    .pc-stat,
    .synth-stat,
    .uv-stat {
        padding: var(--space-3, 12px) !important;
    }
    
    .pc3-stat__value,
    .pc-stat__value,
    .synth-stat-value {
        font-size: 1.5rem !important;
    }
    
    .pc3-stat__label,
    .pc-stat__label,
    .synth-stat-label {
        font-size: 0.75rem !important;
    }
}

/* Extra small screens - single column stats */
@media (max-width: 480px) {
    .pc3-stats,
    .pc-stats,
    .synth-stats-grid,
    .uv-stats,
    [class*="stats-grid"] {
        grid-template-columns: 1fr !important;
    }
    
    .pc3-stat__value,
    .pc-stat__value,
    .synth-stat-value {
        font-size: 1.25rem !important;
    }
}

/* === MOBILE SOCIAL SHARING FIX v5.66.0 === */
/* Enhanced mobile social sharing section */
@media (max-width: 767px) {
    .social-sharing {
        padding: var(--space-4, 16px) !important;
        margin-top: var(--space-6, 24px) !important;
    }
    
    .social-sharing__header {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: var(--space-2, 8px) !important;
        margin-bottom: var(--space-3, 12px) !important;
    }
    
    .social-sharing__icon {
        width: 44px !important;
        height: 44px !important;
    }
    
    .social-sharing__title {
        font-size: 0.9375rem !important;
    }
    
    .social-sharing__links {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--space-2, 8px) !important;
        width: 100% !important;
    }
    
    .social-share__link {
        width: 100% !important;
        min-height: 44px !important;
        padding: var(--space-2, 8px) var(--space-3, 12px) !important;
        font-size: 0.8125rem !important;
        justify-content: center !important;
        border-radius: var(--radius-md, 8px) !important;
    }
    
    .social-share__link svg {
        width: 16px !important;
        height: 16px !important;
    }
    
    .social-share__link span {
        display: inline !important;
    }
}

/* Extra small screens - keep 2 columns but smaller */
@media (max-width: 360px) {
    .social-sharing__links {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--space-1, 4px) !important;
    }
    
    .social-share__link {
        padding: var(--space-2, 8px) !important;
        font-size: 0.75rem !important;
    }
    
    .social-share__link span {
        display: none !important;
    }
}

/* === PREVENT TEXT/IMAGE SIDE-BY-SIDE ON MOBILE === */
@media (max-width: 768px) {
    /* Force all visual elements to full width */
    .article-content figure,
    .article-content aside,
    .article-content .wp-block-image,
    .article-content .synth-stats-grid,
    .article-content .pc3-chart,
    .article-content [class*="chart"],
    .article-content [class*="infographic"],
    .article-content .sbend-timeline,
    .article-content .synth-timeline,
    .article-content .aiwp-timeline {
        display: block !important;
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        clear: both !important;
    }
    
    /* Clear floats on paragraphs after visuals */
    .article-content figure + p,
    .article-content aside + p,
    .article-content [class*="chart"] + p,
    .article-content [class*="stats"] + p {
        clear: both !important;
    }
}

/* === IMAGE LOADING OPTIMIZATION === */
/* Fast image loading for post cards */
.post-card__image img,
.entry-card__image img,
[class*="card__image"] img {
    will-change: opacity !important;
    transition: opacity 0.3s ease !important;
}

/* Ensure images don't shift layout */
.post-card__image,
.entry-card__image,
[class*="card__image"] {
    aspect-ratio: 16 / 10 !important;
    overflow: hidden !important;
    background: var(--color-surface-alt, #f5f5f5) !important;
}

/* Progressive image loading placeholder */
.post-card__image::before,
.entry-card__image::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(90deg, 
        var(--color-surface-alt, #f5f5f5) 0%, 
        var(--color-surface, #fafafa) 50%, 
        var(--color-surface-alt, #f5f5f5) 100%) !important;
    animation: shimmer 1.5s infinite !important;
    z-index: 0 !important;
}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Hide shimmer when image loaded */
.post-card__image.is-image-loaded::before,
.entry-card__image.is-image-loaded::before {
    display: none !important;
}

/* ==========================================================================
   MOBILE VISUAL FIXES v5.68.0
   Fixes reported issues:
   1. Article author avatar (publisher logo) distorted
   2. Social sharing icon showing as square
   3. Any circular elements not rendering as circles
   ========================================================================== */

/* === TABLET AVATAR FIX - ENFORCE CIRCLE === */
@media (max-width: 1024px) {
    .post-card__author-avatar {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        max-width: 36px !important;
        max-height: 36px !important;
        border-radius: 50% !important;
        object-fit: cover !important;
        flex-shrink: 0 !important;
        aspect-ratio: 1 / 1 !important;
    }
}

/* === ARTICLE AUTHOR AVATAR FIX - ENFORCE CIRCLE === */
@media (max-width: 767px) {
    /* Article meta author avatar - must be perfect circle */
    .article-author-avatar,
    .article-meta__author img,
    .article-meta .avatar {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        max-width: 36px !important;
        max-height: 36px !important;
        border-radius: 50% !important;
        object-fit: cover !important;
        flex-shrink: 0 !important;
        aspect-ratio: 1 / 1 !important;
    }
    
    /* Author bio avatar - larger but still circle */
    .author-bio__avatar {
        width: 60px !important;
        height: 60px !important;
        min-width: 60px !important;
        min-height: 60px !important;
        border-radius: 50% !important;
        object-fit: cover !important;
        flex-shrink: 0 !important;
        aspect-ratio: 1 / 1 !important;
    }
    
    /* Post card author avatars */
    .post-card__author-avatar {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
        border-radius: 50% !important;
        object-fit: cover !important;
        flex-shrink: 0 !important;
        aspect-ratio: 1 / 1 !important;
    }
}

/* === SOCIAL SHARING ICON FIX - REMOVE SQUARE ARTIFACT === */
@media (max-width: 767px) {
    /* Social sharing icon container - must be perfect circle */
    .social-sharing__icon {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        max-width: 40px !important;
        max-height: 40px !important;
        border-radius: 50% !important;
        background: var(--color-primary, #0066CC) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
        aspect-ratio: 1 / 1 !important;
        overflow: hidden !important;
    }
    
    /* Remove any pseudo-elements that might create square */
    .social-sharing__icon::before,
    .social-sharing__icon::after {
        display: none !important;
        content: none !important;
    }
    
    /* SVG icon inside - proper sizing */
    .social-sharing__icon svg {
        width: 20px !important;
        height: 20px !important;
        stroke: #FFFFFF !important;
        fill: none !important;
        flex-shrink: 0 !important;
    }
    
    /* Social sharing header layout */
    .social-sharing__header {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 8px !important;
    }
}

/* === SITE LOGO FIX - ENFORCE PROPER DIMENSIONS === */
@media (max-width: 767px) {
    .site-logo-svg,
    .branding .site-logo-svg {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        max-width: 36px !important;
        max-height: 36px !important;
        flex-shrink: 0 !important;
    }
}

/* === UNIVERSAL CIRCLE ENFORCEMENT === */
/* Any element that should be circular must have these properties */
@media (max-width: 767px) {
    [class*="avatar"],
    [class*="__avatar"],
    .avatar,
    img.avatar {
        border-radius: 50% !important;
        object-fit: cover !important;
        aspect-ratio: 1 / 1 !important;
    }
}


/* ========== universal-contrast.css ========== */
/* =====================================================================
   UNIVERSAL CONTRAST SYSTEM
   Version: 1.0.0 (2025-12-11)
   
   Purpose: Ensure ALL text is readable on ALL backgrounds across the site.
   This is the "universal cure" for readability - no text left unreadable.
   
   WCAG 2.1 AA Compliance:
   - Normal text: 4.5:1 minimum contrast ratio
   - Large text (18pt+ or 14pt bold): 3:1 minimum contrast ratio
   - UI components: 3:1 minimum contrast ratio
   
   RULES:
   1. Dark text on light backgrounds
   2. Light text on dark backgrounds  
   3. Never same-spectrum colors for text/background
   4. Auto-fix inline styles that violate contrast
   ===================================================================== */

/* ============ FOUNDATIONAL TEXT CONTRAST ============ */

/* Force high contrast text on all light backgrounds - DARKER for readability */
body,
.article-content,
.post-content,
.entry-content,
.page-content,
main,
article,
section,
div:not([class*="dark"]):not([class*="primary"]):not([class*="accent"]):not([class*="synth-"]):not([class*="aiwp-"]):not([style*="background"]) {
    color: var(--color-text, #111111) !important;
}

/* Headings - Maximum contrast - Pure black for best readability */
h1, h2, h3, h4, h5, h6,
.entry-title,
.post-title,
.page-title,
.article-title,
[class*="heading"],
[class*="title"] {
    color: var(--color-text-heading, var(--color-text, #0a0a0a)) !important;
}

/* Body text and paragraphs */
p, li, span, td, th, label, blockquote {
    color: inherit !important;
}

/* ============ DARK BACKGROUND TEXT FIXES ============ */

/* Primary colored backgrounds - white text */
.aiwp-stat-card,
.aiwp-stats-block,
.aiwp-quote-card,
[class*="primary-bg"],
[style*="background: var(--color-primary)"],
[style*="background-color: var(--color-primary)"],
[style*="background: #0066CC"],
[style*="background: #007AFF"],
[style*="background:#0066CC"],
[style*="background:#007AFF"] {
    color: var(--sv-text-on-accent, var(--color-text-inverse, #FFFFFF)) !important;
}

.aiwp-stat-card *,
.aiwp-stats-block *,
.aiwp-quote-card *,
[class*="primary-bg"] * {
    color: var(--sv-text-on-accent, var(--color-text-inverse, #FFFFFF)) !important;
}

/* Dark slate backgrounds - white text */
[style*="background: #0f172a"],
[style*="background: #1e293b"],
[style*="background: #0D0D0D"],
[style*="background: #1A1A1A"],
[style*="background: #020617"],
[style*="background:#0f172a"],
[style*="background:#1e293b"],
[class*="dark-bg"],
[class*="bg-dark"],
.dark-section,
.hero-dark {
    color: rgb(var(--color-white-rgb)) !important;
}

[style*="background: #0f172a"] *,
[style*="background: #1e293b"] *,
[style*="background: #0D0D0D"] *,
[style*="background: #1A1A1A"] *,
[class*="dark-bg"] *,
[class*="bg-dark"] * {
    color: rgb(var(--color-white-rgb)) !important;
}

/* ============ LIGHT BACKGROUND TEXT FIXES - DARKER FOR READABILITY ============ */

/* Surface and surface-alt backgrounds - dark text closer to black */
[style*="background: #F8F9FA"],
[style*="background: #F5F5F7"],
[style*="background: #FFFFFF"],
[style*="background: #f8fafc"],
[style*="background:#F8F9FA"],
[style*="background:#FFFFFF"],
[class*="light-bg"],
[class*="bg-light"] {
    color: #111111 !important;
}

[style*="background: #F8F9FA"] *,
[style*="background: #FFFFFF"] *,
[class*="light-bg"] *,
[class*="bg-light"] * {
    color: inherit !important;
}

/* Exception: Elements that need specific colors */
.synth-takeaways li::before,
.synth-compare-card.pros li::before,
[class*="takeaways"] li::before {
    color: var(--color-primary, #0066CC) !important;
}

.synth-compare-card.cons li::before {
    color: var(--color-warning, #B86800) !important;
}

/* ============ GRADIENT BACKGROUND FIXES ============ */

/* Remove all gradients and replace with solid colors */
[style*="linear-gradient"] {
    background: var(--color-surface-alt, #F8F9FA) !important;
    color: var(--color-text, #1A1A1A) !important;
}

[style*="linear-gradient"] * {
    color: inherit !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: inherit !important;
}

/* Fix gradient text (remove gradient fill, use solid color) */
[style*="-webkit-background-clip: text"],
[style*="background-clip: text"],
[style*="-webkit-text-fill-color: transparent"] {
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: var(--color-text, #1A1A1A) !important;
    color: var(--color-text, #1A1A1A) !important;
}

/* ============ INLINE STYLE OVERRIDES - DARKER TEXT ============ */

/* Low contrast cyan text - make it readable */
[style*="color: #67e8f9"],
[style*="color: #22d3ee"],
[style*="color:#67e8f9"],
[style*="color:#22d3ee"] {
    color: var(--color-primary, #0066CC) !important;
}

/* Low contrast slate gray text - darken it significantly for WCAG compliance */
[style*="color: #64748b"],
[style*="color:#64748b"],
[style*="color: #374151"],
[style*="color:#374151"],
[style*="color: #1f2937"],
[style*="color:#1f2937"] {
    color: var(--color-text-secondary, #2a2a2a) !important;
}

/* Low contrast light gray text - darken it significantly */
[style*="color: #e2e8f0"],
[style*="color: #cbd5e1"],
[style*="color: #f8fafc"],
[style*="color: #94a3b8"],
[style*="color:#e2e8f0"],
[style*="color:#cbd5e1"] {
    color: var(--color-text-secondary, #2a2a2a) !important;
}

/* Muted text that's too light - make it readable */
[style*="color: #6b7280"],
[style*="color: #9ca3af"],
[style*="opacity: 0.6"],
[style*="opacity: 0.5"],
[style*="opacity: 0.4"] {
    color: var(--color-text-muted, #4a4a4a) !important;
    opacity: 1 !important;
}

/* ============ RGBA TEXT FIXES ============ */

/* Fix rgba text that's too transparent */
[style*="rgba(255, 255, 255, 0.6)"],
[style*="rgba(255, 255, 255, 0.5)"],
[style*="rgba(255, 255, 255, 0.4)"],
[style*="rgba(255,255,255,0.6)"],
[style*="rgba(255,255,255,0.5)"] {
    color: rgba(255, 255, 255, 0.9) !important;
}

[style*="rgba(0, 0, 0, 0.4)"],
[style*="rgba(0, 0, 0, 0.3)"],
[style*="rgba(0,0,0,0.4)"],
[style*="rgba(0,0,0,0.3)"] {
    color: rgba(0, 0, 0, 0.75) !important;
}

/* ============ TABLE READABILITY - DARKER TEXT ============ */

table,
.synth-table,
.article-content table {
    color: var(--color-text, #111111) !important;
}

table th,
.synth-table th,
.article-content table th {
    background: var(--color-primary, #0066CC) !important;
    color: var(--color-text-inverse, #FFFFFF) !important;
}

table td,
.synth-table td,
.article-content table td {
    color: var(--color-text, #111111) !important;
    background: var(--color-surface, #FFFFFF) !important;
}

table tr:nth-child(even) td,
.synth-table tr:nth-child(even) td {
    background: var(--color-surface-alt, #F8F9FA) !important;
}

/* ============ LINK CONTRAST ============ */

/* Only enforce link colors inside content areas.
   Avoid overriding UI links that are styled as badges/buttons (e.g., category pill, share buttons). */
.article-content a,
.post-content a,
.entry-content a {
    color: var(--color-primary, #0066CC) !important;
}

.article-content a:hover,
.article-content a:focus,
.post-content a:hover,
.post-content a:focus,
.entry-content a:hover,
.entry-content a:focus {
    color: var(--color-primary-hover, #004D99) !important;
}

/* Links on dark backgrounds */
[class*="dark-bg"] a,
[class*="bg-dark"] a,
.synth-stat-card a,
.aiwp-stats-block a,
.aiwp-quote-card a,
[style*="background: #0f172a"] a,
[style*="background: #1e293b"] a {
    color: #5AC8FA !important;
}

[class*="dark-bg"] a:hover,
[class*="bg-dark"] a:hover,
.synth-stat-card a:hover,
.aiwp-stats-block a:hover {
    color: #FFFFFF !important;
}

/* ============ BUTTON CONTRAST ============ */

/*
   IMPORTANT: Do NOT globally restyle every <button> on the site.
   That breaks UI components that intentionally use per-button colors
   (e.g., the AI-WP chatbot accent preset grid).

   Scope to content areas and known button classes/blocks instead.
*/
.article-content button,
.post-content button,
.entry-content button,
.page-content button,
.contact-form button,
.button,
.btn,
.wp-block-button__link,
input[type="submit"],
input[type="button"],
[class*="cta-button"],
[class*="synth-cta"],
[class*="synth-button"] {
    background: var(--color-primary, #0066CC) !important;
    color: var(--color-text-inverse, #FFFFFF) !important;
    border: none !important;
}

.article-content button:hover,
.post-content button:hover,
.entry-content button:hover,
.page-content button:hover,
.contact-form button:hover,
.button:hover,
.btn:hover,
.wp-block-button__link:hover,
input[type="submit"]:hover {
    background: var(--color-primary-hover, #004D99) !important;
    color: var(--color-text-inverse, #FFFFFF) !important;
}

/* Secondary/outline buttons */
.btn-secondary,
.button-secondary,
.wp-block-button.is-style-outline .wp-block-button__link {
    background: transparent !important;
    color: var(--color-primary, #0066CC) !important;
    border: 2px solid var(--color-primary, #0066CC) !important;
}

.btn-secondary:hover,
.button-secondary:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover {
    background: var(--color-primary, #0066CC) !important;
    color: var(--color-text-inverse, #FFFFFF) !important;
}

/* ============ FORM ELEMENTS CONTRAST ============ */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"]:not(.header-search__input):not(.search-form__input),
input[type="tel"],
input[type="url"],
input[type="number"],
textarea,
select {
    background: var(--color-surface, #FFFFFF) !important;
    color: var(--color-text, #1A1A1A) !important;
    border: 1px solid var(--color-border, #D1D5DB) !important;
}

/* Search page oval input should be borderless - clean design */
.search-hero .search-form__input,
.search-form__wrapper .search-form__input,
input.search-form__input,
input[type="search"].search-form__input {
    border: none !important;
    border-width: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

input::placeholder,
textarea::placeholder {
    color: var(--color-text-muted, #666666) !important;
}

label {
    color: var(--color-text, #1A1A1A) !important;
}

/* ============ BADGE/TAG CONTRAST ============ */

.badge,
.tag,
.category-badge,
.synth-badge,
.synth-reading-badge,
[class*="badge"],
[class*="tag"] {
    background: var(--color-primary, #0066CC) !important;
    color: var(--color-text-inverse, #FFFFFF) !important;
}

/* ============ BLOCKQUOTE CONTRAST ============ */

blockquote,
.wp-block-quote,
.synth-quote {
    background: var(--color-surface-alt, #F8F9FA) !important;
    color: var(--color-text, #1A1A1A) !important;
    border-left: 4px solid var(--color-primary, #0066CC) !important;
}

blockquote p,
.wp-block-quote p,
.synth-quote p {
    color: inherit !important;
}

blockquote cite,
.wp-block-quote cite,
.synth-quote cite,
.synth-quote-author {
    color: var(--color-primary, #0066CC) !important;
}

/* ============ CODE BLOCKS CONTRAST ============ */

code,
pre,
.wp-block-code,
kbd {
    background: var(--color-surface-alt, #F8F9FA) !important;
    color: var(--color-text, #1A1A1A) !important;
}

pre code {
    background: transparent !important;
}

/* ============ CALLOUT BOXES CONTRAST ============ */

.callout,
.notice,
.alert,
.info-box,
.warning-box,
.success-box,
.error-box,
[class*="callout"],
[class*="notice"],
[class*="alert"] {
    color: var(--color-text, #1A1A1A) !important;
}

.callout.warning,
.notice.warning,
.alert.warning,
[class*="warning"] {
    background: var(--color-warning-10, rgba(184, 104, 0, 0.1)) !important;
    border-left-color: var(--color-warning, #B86800) !important;
}

.callout.success,
.notice.success,
.alert.success,
[class*="success"] {
    background: var(--color-success-10, rgba(29, 122, 62, 0.1)) !important;
    border-left-color: var(--color-success, #1D7A3E) !important;
}

.callout.error,
.notice.error,
.alert.error,
[class*="error"],
[class*="danger"] {
    background: var(--color-error-10, rgba(196, 30, 58, 0.1)) !important;
    border-left-color: var(--color-error, #C41E3A) !important;
}

/* ============ FOOTER CONTRAST - DARKER TEXT ============ */

footer,
.site-footer,
.footer {
    color: var(--color-text, #111111) !important;
}

footer a,
.site-footer a,
.footer a {
    color: var(--color-primary, #0066CC) !important;
}

/* Dark footer variant */
footer.dark,
.site-footer.dark,
.footer.dark,
[class*="footer-dark"] {
    background: #1A1A1A !important;
    color: rgb(var(--color-white-rgb)) !important;
}

footer.dark a,
.site-footer.dark a,
.footer.dark a {
    color: #5AC8FA !important;
}

/* ============ HEADER/NAVIGATION CONTRAST - DARKER TEXT ============ */

/* Scope to the global site header only.
   Avoid overriding in-article headers (e.g., the category badge). */
.site-header,
.site-header nav,
.site-header .navigation {
    color: var(--color-text-nav, var(--color-text, #111111)) !important;
}

.site-header a,
.site-header nav a,
.site-header .navigation a,
.site-header .menu-item a {
    color: var(--color-text-nav, var(--color-text, #1a1a1a)) !important;
}

.site-header a:hover,
.site-header nav a:hover,
.site-header .navigation a:hover,
.site-header .menu-item a:hover {
    color: var(--color-primary, #0066CC) !important;
}

/* ============ SIDEBAR CONTRAST - DARKER TEXT ============ */

aside,
.sidebar,
.widget {
    color: var(--color-text, #111111) !important;
}

.widget-title,
.sidebar-title {
    color: var(--color-text-heading, var(--color-text, #0a0a0a)) !important;
}

/* ============ CARD COMPONENTS CONTRAST - DARKER TEXT ============ */

.card,
.post-card,
.article-card,
.feature-card,
[class*="card"] {
    background: var(--color-surface, #FFFFFF) !important;
    color: var(--color-text, #111111) !important;
}

.card-title,
.card-heading,
[class*="card"] h2,
[class*="card"] h3,
[class*="card"] h4 {
    color: var(--color-text-heading, var(--color-text, #0a0a0a)) !important;
}

.card-description,
.card-excerpt,
.card-text,
[class*="card"] p {
    color: var(--color-text-secondary, #2d2d2d) !important;
}

/* ============ ICON VISIBILITY ============ */

/*
   Icon visibility helper.

   IMPORTANT: Do not clobber outline/line SVG icons that explicitly opt out of
   fill via `fill="none"` (many of our UI icons use stroke-based SVGs).
*/
svg:not([fill="none"]),
.icon,
[class*="icon"] {
    fill: currentColor;
}

svg[fill="none"] {
    fill: none;
}

/* Ensure icons are visible on all backgrounds */
.dark-bg svg,
.dark-bg .icon,
[style*="background: #0f172a"] svg,
[style*="background: #1e293b"] svg {
    fill: rgb(var(--color-white-rgb)) !important;
    color: rgb(var(--color-white-rgb)) !important;
}

/* ============ META INFORMATION CONTRAST - DARKER TEXT ============ */

.meta,
.post-meta,
.entry-meta,
.article-meta,
.byline,
.posted-on,
.author,
time,
.date {
    color: var(--color-text-muted, #4a4a4a) !important;
}

/* ============ PAGINATION CONTRAST ============ */

.pagination,
.nav-links {
    color: var(--color-text, #1A1A1A) !important;
}

/* Non-hovered, non-current page numbers - show as text color */
.pagination .page-numbers:not(.current):not(:hover),
.pagination a.page-numbers:not(.current):not(:hover) {
    color: var(--color-text, #1A1A1A) !important;
    background: transparent !important;
}

/* Fix: Only change the HOVERED item, not others */
.pagination a.page-numbers:hover,
.pagination .nav-links a:hover {
    background: var(--color-primary, #0066CC) !important;
    color: var(--color-text-inverse, #FFFFFF) !important;
    border-color: var(--color-primary, #0066CC) !important;
}

/* Current page number - always styled */
.pagination .page-numbers.current,
.pagination span.current {
    background: var(--color-primary, #0066CC) !important;
    color: var(--color-text-inverse, #FFFFFF) !important;
}

/* ============ CAPTION/FIGCAPTION CONTRAST ============ */

/* Override ALL figcaption inline styles for WCAG compliance */
figcaption,
.wp-caption-text,
.gallery-caption,
figure figcaption,
.aiwp-inline-image figcaption,
.wp-block-image figcaption {
    color: var(--color-text-secondary, #404040) !important;
    background: var(--color-surface-alt, #F8F9FA) !important;
}

/* Override specific low-contrast color patterns */
[style*="color:#64748b"],
[style*="color: #64748b"],
[style*="color:#6b7280"],
[style*="color: #6b7280"],
[style*="color:#9ca3af"],
[style*="color: #9ca3af"],
[style*="color:#cbd2dc"],
[style*="color: #cbd2dc"] {
    color: var(--color-text-secondary, #404040) !important;
}

/* Override gradient backgrounds on figcaptions */
figcaption[style*="linear-gradient"],
figcaption[style*="gradient"] {
    background: var(--color-surface-alt, #F8F9FA) !important;
}

/* ============ SELECTION CONTRAST ============ */

::selection {
    background: var(--color-primary, #0066CC) !important;
    color: var(--color-text-inverse, #FFFFFF) !important;
}

::-moz-selection {
    background: var(--color-primary, #0066CC) !important;
    color: var(--color-text-inverse, #FFFFFF) !important;
}

/* ============ FOCUS STATES (ACCESSIBILITY) ============ */

:focus {
    outline: 2px solid var(--color-primary, #0066CC) !important;
    outline-offset: 2px !important;
}

:focus:not(:focus-visible) {
    outline: none !important;
}

:focus-visible {
    outline: 2px solid var(--color-primary, #0066CC) !important;
    outline-offset: 2px !important;
}

/* Search page oval - no outline on input (wrapper handles focus state) */
.search-form__wrapper .search-form__input:focus,
.search-form__wrapper .search-form__input:focus-visible,
.search-form__input:focus,
.search-form__input:focus-visible,
input.search-form__input:focus,
input.search-form__input:focus-visible {
    outline: none !important;
    outline-width: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

/* ============ PRINT CONTRAST ============ */

@media print {
    body,
    article,
    .article-content {
        background: #FFFFFF !important;
        color: #000000 !important;
    }
    
    a {
        color: #000000 !important;
        text-decoration: underline !important;
    }
}

/* ============ RESPONSIVE CONTRAST ADJUSTMENTS ============ */

@media (max-width: 768px) {
    /* Increase text size for better mobile readability */
    body {
        font-size: 1rem !important;
    }
    
    /* Ensure touch targets are visible */
    a,
    button,
    .btn {
        min-height: 44px !important;
        min-width: 44px !important;
    }
}

/* ============ HIGH CONTRAST MODE SUPPORT ============ */

@media (prefers-contrast: high) {
    :root {
        --color-text: #000000 !important;
        --color-text-secondary: #000000 !important;
        --color-text-muted: #333333 !important;
        --color-border: #000000 !important;
        --color-primary: #0000CC !important;
    }
    
    body {
        background: #FFFFFF !important;
    }
}

/* ============ REDUCED MOTION SUPPORT ============ */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition: none !important;
        animation: none !important;
    }
}


/* ========== smart-visibility.css ========== */
/* =====================================================================
   SMART VISIBILITY SYSTEM v5.0.0 — GLOBAL EDITION
   Version: 5.0.0 (2025-12-23)
   
   🚀 CUTTING-EDGE AUTONOMOUS VISIBILITY ENGINE
   ⚡ EVERY ICON, EVERY TEXT — ALWAYS VISIBLE — NO EXCEPTIONS
   
   ARCHITECTURE:
   1. LUMINANCE TOKENS: Smart color tokens that auto-flip based on surface
   2. GLOBAL ICON ENGINE: Every SVG icon inherits intelligent contrast
   3. UNIVERSAL TEXT CONTRAST: Text automatically darkens on light, lightens on dark
   4. ACCENT-AWARE SYSTEM: When accent is light → text/icons go dark
   5. FLOATING ELEMENTS: Chat, FABs, tooltips — all guaranteed visible
   6. FUTURE-PROOF: Any new element inherits smart visibility automatically
   7. CSS color-mix() + light-dark() for next-gen browser support
   
   GOLDEN RULE: NOTHING IS EVER INVISIBLE — ICONS + TEXT ALWAYS READABLE
   ===================================================================== */

/* ========================================
   §1 — CORE VISIBILITY TOKENS (THE BRAIN)
   These power the entire system
   ======================================== */

:root {
    /* ===== LUMINANCE DETECTION SYSTEM v5.1.0 ===== */
    /* JavaScript sets data-accent-luminance="high|mid|low" based on accent brightness */
    /* Threshold: Luminance > 0.5 = "high" (light accent), < 0.3 = "low" (dark accent) */
    
    /* ===== ABSOLUTE CONTRAST COLORS ===== */
    --sv-black: #000000;
    --sv-near-black: #0a0a0a;
    --sv-dark: #1a1a1a;
    --sv-dark-soft: #333333;
    --sv-gray: #666666;
    
    --sv-white: #FFFFFF;
    --sv-near-white: #f5f5f5;
    --sv-light: #e0e0e0;
    --sv-light-soft: #cccccc;
    
    /* ===== SMART BRANDING TOKENS ===== */
    /* Logo and brand name automatically adapt to accent */
    --sv-brand-text: var(--color-primary);
    --sv-brand-text-hover: var(--color-primary-hover);
    --sv-brand-logo: var(--color-primary);
    --sv-brand-logo-glow: rgba(var(--color-primary-rgb), 0.25);

    /* Accent glow for active states (uses raw accent surface for fidelity) */
    --sv-accent-glow: rgba(var(--color-primary-surface-rgb, 0, 102, 204), 0.55);
    --sv-accent-glow-soft: rgba(var(--color-primary-surface-rgb, 0, 102, 204), 0.25);
    
    /* ===== 🎯 SMART CONTRAST TOKENS ===== */
    /* These are the MASTER tokens — everything references them */
    
    /* Text on SURFACES (cards, backgrounds, containers) */
    --sv-text-on-surface: var(--sv-near-black);
    --sv-text-on-surface-secondary: var(--sv-dark);
    --sv-text-on-surface-muted: var(--sv-dark-soft);
    
    /* Text on PRIMARY/ACCENT backgrounds */
    --sv-text-on-accent: var(--sv-white);
    --sv-text-on-accent-secondary: var(--sv-near-white);
    
    /* Text on DARK backgrounds */
    --sv-text-on-dark: var(--sv-white);
    --sv-text-on-dark-secondary: var(--sv-near-white);
    --sv-text-on-dark-muted: var(--sv-light);
    
    /* ===== 🔷 UNIVERSAL ICON SYSTEM ===== */
    /* Icons inherit from these based on their container */
    --sv-icon-on-surface: var(--sv-dark);
    --sv-icon-on-surface-hover: var(--sv-near-black);
    --sv-icon-on-accent: var(--sv-white);
    --sv-icon-on-accent-hover: var(--sv-white);
    --sv-icon-on-dark: var(--sv-white);
    --sv-icon-on-dark-hover: var(--sv-white);
    
    /* ===== VISIBILITY ENHANCERS ===== */
    /* Shadows/filters for extreme edge cases */
    --sv-icon-shadow: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
    --sv-icon-shadow-strong: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
    --sv-icon-shadow-on-light: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.15));
    --sv-icon-shadow-on-dark: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
    
    /* Universal visibility filter (works on ANY background) */
    --sv-icon-universal-filter: 
        drop-shadow(0 0 1px rgba(255,255,255,0.5)) 
        drop-shadow(0 1px 2px rgba(0,0,0,0.3));
    
    /* Text shadow for visibility on variable backgrounds */
    --sv-text-shadow-on-image: 
        0 2px 4px rgba(0, 0, 0, 0.5),
        0 1px 2px rgba(0, 0, 0, 0.3);
    
    /* Extreme visibility (nuclear option) */
    --sv-force-visible-filter: 
        drop-shadow(0 0 1px rgba(255,255,255,0.9))
        drop-shadow(0 0 2px rgba(0,0,0,0.7))
        drop-shadow(0 1px 3px rgba(0,0,0,0.5));
    
    --sv-force-visible-text-shadow:
        0 0 2px rgba(255,255,255,0.8),
        0 0 4px rgba(255,255,255,0.5),
        0 1px 3px rgba(0,0,0,0.4);
    
    /* ===== BUTTON TEXT SYSTEM ===== */
    --sv-btn-text-on-primary: var(--sv-text-on-accent);
    --sv-btn-text-on-secondary: var(--sv-text-on-surface);
    --sv-btn-text-on-ghost: var(--sv-text-on-surface);

    /* Bridge legacy smart tokens to the new visibility system */
    --smart-text-on-accent: var(--sv-text-on-accent);
    --smart-icon-on-accent: var(--sv-icon-on-accent);
    --smart-btn-text-on-primary: var(--sv-btn-text-on-primary);
    
    /* ===== HERO/LANDING SECTIONS ===== */
    --sv-hero-text: var(--sv-near-black);
    --sv-hero-text-secondary: var(--sv-dark);
    --sv-hero-text-muted: var(--sv-dark-soft);
}

/* ========================================
   §2 — DARK MODE AUTO-FLIP
   All tokens automatically invert
   ======================================== */

[data-theme="dark"] {
    /* Surface text flips to light */
    --sv-text-on-surface: var(--sv-near-white);
    --sv-text-on-surface-secondary: var(--sv-light);
    --sv-text-on-surface-muted: var(--sv-light-soft);
    
    /* Icons on surface flip to light */
    --sv-icon-on-surface: var(--sv-white);
    --sv-icon-on-surface-hover: var(--sv-white);
    
    /* Ghost buttons get light text */
    --sv-btn-text-on-ghost: var(--sv-text-on-dark);
    
    /* Hero sections */
    --sv-hero-text: var(--sv-white);
    --sv-hero-text-secondary: var(--sv-near-white);
    --sv-hero-text-muted: var(--sv-light);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --sv-text-on-surface: var(--sv-near-white);
        --sv-text-on-surface-secondary: var(--sv-light);
        --sv-text-on-surface-muted: var(--sv-light-soft);
        --sv-icon-on-surface: var(--sv-white);
        --sv-icon-on-surface-hover: var(--sv-white);
        --sv-btn-text-on-ghost: var(--sv-text-on-dark);
        --sv-hero-text: var(--sv-white);
        --sv-hero-text-secondary: var(--sv-near-white);
        --sv-hero-text-muted: var(--sv-light);
    }
}

/* ========================================
   §3 — ACCENT-AWARE CONTRAST SYSTEM
   When accent color is LIGHT → text/icons go DARK
   ======================================== */

/* JavaScript adds data-accent-luminance="high" when accent is bright */
[data-accent-luminance="high"],
[data-accent-is-light="true"],
.accent-is-light {
    /* Flip text on accent to DARK */
    --sv-text-on-accent: var(--sv-near-black);
    --sv-text-on-accent-secondary: var(--sv-dark);
    --sv-icon-on-accent: var(--sv-near-black);
    --sv-icon-on-accent-hover: var(--sv-black);
    --sv-btn-text-on-primary: var(--sv-near-black);
    
    /* Reduce shadows on dark icons */
    --sv-icon-shadow: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.1));
    
    /* Branding adjusts for light accents */
    --sv-brand-text: var(--sv-near-black);
    --sv-brand-logo-glow: rgba(0, 0, 0, 0.1);
}

/* Mid-luminance accents - balanced contrast */
[data-accent-luminance="mid"] {
    --sv-text-on-accent: var(--sv-white);
    --sv-icon-on-accent: var(--sv-white);
    --sv-icon-shadow: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

/* Low luminance (dark accents) - use light text/icons */
[data-accent-luminance="low"] {
    --sv-text-on-accent: var(--sv-white);
    --sv-text-on-accent-secondary: var(--sv-near-white);
    --sv-icon-on-accent: var(--sv-white);
    --sv-icon-on-accent-hover: var(--sv-white);
    --sv-btn-text-on-primary: var(--sv-white);
    --sv-icon-shadow: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.35));
}

/* ========================================
   §4 — MODERN CSS FEATURES (Progressive Enhancement)
   color-mix() and light-dark() for cutting-edge browsers
   ======================================== */

@supports (background: color-mix(in srgb, white 50%, black)) {
    :root {
        /* Dynamic contrast blending */
        --sv-text-blended: color-mix(in srgb, var(--sv-text-on-surface) 100%, transparent);
        --sv-icon-blended: color-mix(in srgb, var(--sv-icon-on-surface) 95%, transparent);
    }
}

@supports (color: light-dark(white, black)) {
    :root {
        /* Automatic theme-aware without media queries */
        --sv-auto-text: light-dark(var(--sv-near-black), var(--sv-white));
        --sv-auto-icon: light-dark(var(--sv-dark), var(--sv-white));
        --sv-auto-surface: light-dark(rgba(0,0,0,0.05), rgba(255,255,255,0.05));
    }
}

/* ========================================
   §5 — GLOBAL SVG/ICON VISIBILITY ENGINE
   Every icon automatically gets smart contrast
   ======================================== */

/* ===== BASE ICON INHERITANCE ===== */
svg,
.icon,
[class*="icon-"],
[class*="-icon"],
[role="img"] svg {
    /* Default: inherit color from context */
    color: inherit;
    fill: currentColor;
}

/* ===== STROKED ICONS ===== */
svg[stroke],
svg [stroke]:not([stroke="none"]),
.icon-stroke,
.icon-stroke svg {
    stroke: currentColor;
    stroke-width: 2;
}

/* ===== ICONS ON SURFACE BACKGROUNDS ===== */
/* Header, nav, cards, general containers */
.site-header svg,
.site-header [class*="icon"],
.site-footer svg,
.site-footer [class*="icon"],
.card svg,
[class*="card"] svg,
.nav svg,
nav svg {
    color: var(--sv-icon-on-surface) !important;
    stroke: var(--sv-icon-on-surface) !important;
}

/* ===== ICONS ON PRIMARY/ACCENT BACKGROUNDS ===== */
/* Buttons, CTAs, badges, launchers, FABs */
.btn-primary svg,
.button--primary svg,
.button-primary svg,
[class*="btn-primary"] svg,
[class*="cta"] svg,
.newsletter-cta svg,
.newsletter-cta svg path,
.newsletter-form__button svg,
button[type="submit"] svg,
input[type="submit"] + svg,
.wp-block-button__link svg,
[class*="launcher"] svg,
[class*="fab"] svg,
.floating-btn svg,
.aiwp-chat-launcher svg,
.aiwp-chatbot-launcher svg,
#aiwp-chatbot-launcher svg,
[id*="chatbot-launcher"] svg,
[id*="chat-launcher"] svg,
[class*="chat-launcher"] svg,
[class*="chatbot-launcher"] svg {
    color: var(--sv-icon-on-accent) !important;
    stroke: var(--sv-icon-on-accent) !important;
    filter: var(--sv-icon-shadow) !important;
}

/* Hover state for accent icons */
.newsletter-cta:hover svg,
[class*="cta"]:hover svg,
[class*="launcher"]:hover svg,
.aiwp-chat-launcher:hover svg,
#aiwp-chatbot-launcher:hover svg {
    color: var(--sv-icon-on-accent-hover) !important;
    stroke: var(--sv-icon-on-accent-hover) !important;
}

/* ===== HEADER ACTION BUTTONS ===== */
.site-header__actions svg,
.site-header__actions button svg,
.header-search-toggle svg,
.nav-toggle svg,
.theme-toggle svg {
    color: var(--sv-icon-on-surface) !important;
    stroke: var(--sv-icon-on-surface) !important;
}

.site-header__actions button:hover svg,
.header-search-toggle:hover svg,
.theme-toggle:hover svg {
    color: var(--color-primary, #0066CC) !important;
    stroke: var(--color-primary, #0066CC) !important;
}

/* Newsletter CTA in header - accent background */
.site-header__actions .newsletter-cta svg,
.site-header__actions .newsletter-cta svg path,
.site-header .newsletter-cta svg {
    color: var(--sv-icon-on-accent) !important;
    stroke: var(--sv-icon-on-accent) !important;
    filter: var(--sv-icon-shadow) !important;
}

/* ===== HAMBURGER MENU BARS ===== */
.nav-toggle__bar,
.nav-toggle__bar::before,
.nav-toggle__bar::after {
    background: var(--sv-icon-on-surface) !important;
}

/* ========================================
   §6 — FLOATING ELEMENTS (ALWAYS VISIBLE)
   Chat launchers, FABs, floating buttons, tooltips
   ======================================== */

/* ===== CHAT LAUNCHER — GUARANTEED VISIBLE ===== */
.aiwp-chat-launcher,
.aiwp-chatbot-launcher,
#aiwp-chatbot-launcher,
[id*="chatbot-launcher"],
[id*="chat-launcher"],
[class*="chat-launcher"],
[class*="chatbot-launcher"],
[class*="fab"],
.floating-btn,
.floating-action-btn {
    /* Text/icon uses accent-aware contrast */
    color: var(--sv-text-on-accent) !important;
}

/* Ensure floating accent surfaces stay true to the chosen accent */
.aiwp-chat-launcher,
.aiwp-chatbot-launcher,
#aiwp-chatbot-launcher,
[id*="chatbot-launcher"],
[id*="chat-launcher"],
[class*="chat-launcher"],
[class*="chatbot-launcher"],
[class*="fab"],
.floating-btn,
.floating-action-btn {
    background: var(--color-primary-surface, var(--color-primary, #0066CC)) !important;
}

.aiwp-chat-launcher svg,
.aiwp-chatbot-launcher svg,
#aiwp-chatbot-launcher svg,
[id*="chatbot-launcher"] svg,
[id*="chat-launcher"] svg,
[class*="chat-launcher"] svg,
[class*="chatbot-launcher"] svg,
[class*="fab"] svg,
.floating-btn svg,
.floating-action-btn svg {
    color: var(--sv-icon-on-accent) !important;
    stroke: var(--sv-icon-on-accent) !important;
    fill: none !important;
    filter: var(--sv-icon-shadow) !important;
    /* Ensure icon is never hidden */
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

/* Specific paths in chat icon */
.aiwp-chat-launcher svg path,
.aiwp-chat-launcher svg circle,
.aiwp-chat-launcher svg line,
#aiwp-chatbot-launcher svg path,
#aiwp-chatbot-launcher svg circle,
#aiwp-chatbot-launcher svg line,
[class*="chat-launcher"] svg path,
[class*="chat-launcher"] svg circle,
[class*="chat-launcher"] svg line {
    stroke: var(--sv-icon-on-accent) !important;
    stroke-width: 2 !important;
}

/* ===== TOOLTIP/POPOVER TEXT ===== */
[role="tooltip"],
.tooltip,
.popover,
[class*="tooltip"],
[class*="popover"] {
    color: var(--sv-text-on-dark) !important;
}

[role="tooltip"] svg,
.tooltip svg,
.popover svg {
    color: var(--sv-icon-on-dark) !important;
    stroke: var(--sv-icon-on-dark) !important;
}

/* ========================================
   §7 — HERO SECTIONS (LIGHT BACKGROUND)
   All text dark on light hero backgrounds
   ======================================== */

.archive-hero,
.archive-hero--home,
.front-hero,
.page-hero,
.brand-hero,
.home-hero {
    color: var(--sv-hero-text) !important;
}

.archive-hero__eyebrow,
.front-hero__eyebrow,
.page-hero__eyebrow {
    color: var(--sv-hero-text-secondary) !important;
}

.archive-hero__title,
.archive-hero h1,
.front-hero__title,
.front-hero h1,
.page-hero__title,
.page-hero h1,
.brand-hero__title,
.home-hero__title {
    color: var(--sv-hero-text) !important;
    opacity: 1 !important;
}

.archive-hero__description,
.archive-hero p,
.front-hero__description,
.front-hero p,
.page-hero__description,
.page-hero p,
.brand-hero__description,
.home-hero__description {
    color: var(--sv-hero-text-secondary) !important;
    opacity: 1 !important;
}

.archive-hero__meta,
.archive-hero__meta strong,
.archive-hero__meta span,
.home-hero__copy strong,
.home-hero__copy span {
    color: var(--sv-hero-text) !important;
}

/* ========================================
   §8 — HERO CTA BUTTONS (ACCENT-FILLED)
   All hero buttons filled with accent color
   ======================================== */

/* Primary CTA buttons in hero */
.archive-hero .button,
.archive-hero__actions .button,
.archive-hero__actions > a,
.front-hero .button,
.page-hero .button,
.home-hero__copy .button,
.brand-hero__actions .button {
    background: var(--color-primary-surface, var(--color-primary, #0066CC)) !important;
    background-color: var(--color-primary-surface, var(--color-primary, #0066CC)) !important;
    color: var(--sv-btn-text-on-primary) !important;
    border: 2px solid var(--color-primary-surface, var(--color-primary, #0066CC)) !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 14px rgba(var(--color-primary-rgb, 0, 102, 204), 0.35) !important;
}

/* Hero button icons */
.archive-hero .button svg,
.archive-hero__actions .button svg,
.front-hero .button svg,
.page-hero .button svg,
.home-hero__copy .button svg,
.brand-hero__actions .button svg {
    color: var(--sv-icon-on-accent) !important;
    stroke: var(--sv-icon-on-accent) !important;
}

/* Hover state */
.archive-hero .button:hover,
.archive-hero__actions .button:hover,
.front-hero .button:hover,
.page-hero .button:hover,
.home-hero__copy .button:hover,
.brand-hero__actions .button:hover {
    background: var(--color-primary-surface-hover, var(--color-primary-hover, #004D99)) !important;
    border-color: var(--color-primary-surface-hover, var(--color-primary-hover, #004D99)) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(var(--color-primary-rgb, 0, 102, 204), 0.45) !important;
}

/* Focus state */
.archive-hero .button:focus,
.archive-hero .button:focus-visible,
.archive-hero__actions .button:focus,
.archive-hero__actions .button:focus-visible {
    outline: 3px solid var(--sv-white) !important;
    outline-offset: 2px !important;
}

/* Dark mode hero buttons */
:root[data-theme="dark"] .archive-hero .button,
:root[data-theme="dark"] .archive-hero__actions .button,
:root[data-theme="dark"] .home-hero__copy .button {
    background: var(--color-primary-surface, var(--color-primary, #0066CC)) !important;
    color: var(--sv-btn-text-on-primary) !important;
    border-color: var(--color-primary-surface, var(--color-primary, #0066CC)) !important;
}

/* ========================================
   §9 — GLOBAL BUTTON TEXT VISIBILITY
   Every button type gets appropriate contrast
   ======================================== */

/* Primary/filled buttons */
.btn-primary,
.button-primary,
.btn--primary,
.button,
.button--primary,
.wp-block-button__link,
[class*="btn-primary"],
[class*="button-primary"],
button[type="submit"],
input[type="submit"],
input[type="button"] {
    color: var(--sv-btn-text-on-primary) !important;
}

/* Ensure primary fills use the raw accent surface (even if it's very light) */
.btn-primary,
.btn--primary,
.button-primary,
.button--primary,
[class*="btn-primary"],
[class*="button-primary"],
button[type="submit"],
input[type="submit"],
input[type="button"],
.newsletter-cta,
.primary-nav .menu .menu-item--cta > a,
.primary-nav .menu .sub-menu .menu-item--cta > a {
    background: var(--color-primary-surface, var(--color-primary, #0066CC)) !important;
    border-color: var(--color-primary-surface, var(--color-primary, #0066CC)) !important;
}

.btn-primary:hover,
.btn--primary:hover,
.button-primary:hover,
.button--primary:hover,
[class*="btn-primary"]:hover,
[class*="button-primary"]:hover,
button[type="submit"]:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.newsletter-cta:hover,
.primary-nav .menu .menu-item--cta > a:hover,
.primary-nav .menu .sub-menu .menu-item--cta > a:hover {
    background: var(--color-primary-surface-hover, var(--color-primary-hover, #004D99)) !important;
    border-color: var(--color-primary-surface-hover, var(--color-primary-hover, #004D99)) !important;
}

.wp-block-button:not(.is-style-outline) .wp-block-button__link {
    background: var(--color-primary-surface, var(--color-primary, #0066CC)) !important;
    border-color: var(--color-primary-surface, var(--color-primary, #0066CC)) !important;
}

.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
    background: var(--color-primary-surface-hover, var(--color-primary-hover, #004D99)) !important;
    border-color: var(--color-primary-surface-hover, var(--color-primary-hover, #004D99)) !important;
}

.btn-primary svg,
.button-primary svg,
.button--primary svg,
[class*="btn-primary"] svg,
button[type="submit"] svg {
    color: var(--sv-icon-on-accent) !important;
    stroke: var(--sv-icon-on-accent) !important;
}

/* Secondary/outline buttons */
.btn-secondary,
.button-secondary,
.btn--secondary,
.button--secondary,
.btn-outline,
.btn--outline,
.button-outline,
.button--outline,
[class*="btn-secondary"],
[class*="btn-outline"] {
    color: var(--sv-btn-text-on-secondary) !important;
}

/* Ghost/text buttons */
.btn-ghost,
.btn--ghost,
.button--ghost,
.btn-text,
[class*="btn-ghost"],
[class*="btn-text"] {
    color: var(--sv-btn-text-on-ghost) !important;
}

/* Ghost buttons must remain ghost (transparent) even if a base .button rule is applied elsewhere. */
.btn-ghost,
.btn--ghost,
.button--ghost,
[class*="btn-ghost"],
[class*="btn-text"],
.btn-text {
    background: transparent !important;
}

/* CTA elements - CRITICAL: Always default to #FFFFFF (never rely on tokens alone)
   PATTERN: Explicit #FFFFFF first, then token override for smart contrast
   EXCEPTIONS:
   - .archive-topics__cta is a LINK CTA (not a button)
   - .about-cta, .cta-section are CONTAINER sections, not buttons
   - Ghost buttons inside CTA sections need readable dark text */
.newsletter-cta,
.subscribe-btn,
button[class*="-cta"],
a.button[class*="-cta"]:not(.archive-topics__cta) {
    color: #FFFFFF !important;
    color: var(--sv-btn-text-on-primary, #FFFFFF) !important;
    -webkit-text-fill-color: #FFFFFF !important;
    -webkit-text-fill-color: var(--sv-btn-text-on-primary, #FFFFFF) !important;
}

.newsletter-cta span,
.newsletter-cta__label {
    color: #FFFFFF !important;
    color: var(--sv-btn-text-on-primary, #FFFFFF) !important;
    -webkit-text-fill-color: #FFFFFF !important;
    -webkit-text-fill-color: var(--sv-btn-text-on-primary, #FFFFFF) !important;
}

/* Newsletter CTA SVG - ALWAYS white icons */
.newsletter-cta svg,
.newsletter-cta svg path,
.newsletter-cta svg rect,
button[class*="-cta"] svg,
a.button[class*="-cta"]:not(.archive-topics__cta) svg {
    color: #FFFFFF !important;
    stroke: #FFFFFF !important;
    fill: none !important;
    color: var(--sv-icon-on-accent, #FFFFFF) !important;
    stroke: var(--sv-icon-on-accent, #FFFFFF) !important;
}

/* ========================================
   §9.5 — ABOUT CTA & CTA SECTION GHOST BUTTONS
   Ghost buttons in CTA sections must have dark readable text
   ======================================== */

/* Contact page CTA row: reserve border space only for primary buttons (ghost needs visible outline). */
.contact-form .button-group--cta .button:not(.button--ghost) {
    border: 2px solid transparent !important;
}

.about-cta .button--ghost,
.about-cta .button--ghost:visited,
 .contact-form .button--ghost,
 .contact-form .button--ghost:visited,
 .contact-form .button-group--cta .button--ghost,
 .contact-form .button-group--cta .button--ghost:visited,
.cta-section .button--ghost,
.cta-section .button--ghost:visited,
.button-group--cta .button--ghost,
.button-group--cta .button--ghost:visited {
    color: #1A1A1A !important;
    color: var(--color-text, #1A1A1A) !important;
    -webkit-text-fill-color: #1A1A1A !important;
    -webkit-text-fill-color: var(--color-text, #1A1A1A) !important;
     /* Explicit border ensures ghost CTAs remain visually button-like even if another module resets borders. */
     border: 2px solid rgba(0, 0, 0, 0.2) !important;
     border-color: rgba(0, 0, 0, 0.2) !important;
    background: transparent !important;
}

 .about-cta .button--ghost:hover,
 .contact-form .button--ghost:hover,
 .contact-form .button-group--cta .button--ghost:hover,
.cta-section .button--ghost:hover,
.button-group--cta .button--ghost:hover {
    color: #0066CC !important;
    color: var(--color-primary, #0066CC) !important;
    -webkit-text-fill-color: #0066CC !important;
    -webkit-text-fill-color: var(--color-primary, #0066CC) !important;
    border-color: var(--color-primary, #0066CC) !important;
}

 .about-cta .button--ghost svg,
 .contact-form .button--ghost svg,
 .contact-form .button-group--cta .button--ghost svg,
.cta-section .button--ghost svg,
.button-group--cta .button--ghost svg {
    color: #1A1A1A !important;
    color: var(--color-text, #1A1A1A) !important;
    stroke: #1A1A1A !important;
    stroke: var(--color-text, #1A1A1A) !important;
}

 .about-cta .button--ghost:hover svg,
 .contact-form .button--ghost:hover svg,
 .contact-form .button-group--cta .button--ghost:hover svg,
.cta-section .button--ghost:hover svg,
.button-group--cta .button--ghost:hover svg {
    color: #0066CC !important;
    color: var(--color-primary, #0066CC) !important;
    stroke: #0066CC !important;
    stroke: var(--color-primary, #0066CC) !important;
}

/* Dark mode: ghost buttons need light text */
:root[data-theme="dark"] .about-cta .button--ghost,
:root[data-theme="dark"] .about-cta .button--ghost:visited,
 :root[data-theme="dark"] .contact-form .button--ghost,
 :root[data-theme="dark"] .contact-form .button--ghost:visited,
 :root[data-theme="dark"] .contact-form .button-group--cta .button--ghost,
 :root[data-theme="dark"] .contact-form .button-group--cta .button--ghost:visited,
:root[data-theme="dark"] .cta-section .button--ghost,
:root[data-theme="dark"] .cta-section .button--ghost:visited,
:root[data-theme="dark"] .button-group--cta .button--ghost,
:root[data-theme="dark"] .button-group--cta .button--ghost:visited {
    color: #EDEDED !important;
    -webkit-text-fill-color: #EDEDED !important;
     border: 2px solid rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

:root[data-theme="dark"] .about-cta .button--ghost:hover,
 :root[data-theme="dark"] .contact-form .button--ghost:hover,
 :root[data-theme="dark"] .contact-form .button-group--cta .button--ghost:hover,
:root[data-theme="dark"] .cta-section .button--ghost:hover,
:root[data-theme="dark"] .button-group--cta .button--ghost:hover {
    color: #63B3ED !important;
    -webkit-text-fill-color: #63B3ED !important;
    border-color: #63B3ED !important;
}

:root[data-theme="dark"] .about-cta .button--ghost svg,
 :root[data-theme="dark"] .contact-form .button--ghost svg,
 :root[data-theme="dark"] .contact-form .button-group--cta .button--ghost svg,
:root[data-theme="dark"] .cta-section .button--ghost svg,
:root[data-theme="dark"] .button-group--cta .button--ghost svg {
    color: #EDEDED !important;
    stroke: #EDEDED !important;
}

:root[data-theme="dark"] .about-cta .button--ghost:hover svg,
 :root[data-theme="dark"] .contact-form .button--ghost:hover svg,
 :root[data-theme="dark"] .contact-form .button-group--cta .button--ghost:hover svg,
:root[data-theme="dark"] .cta-section .button--ghost:hover svg,
:root[data-theme="dark"] .button-group--cta .button--ghost:hover svg {
    color: #63B3ED !important;
    stroke: #63B3ED !important;
}

/* Archive Topics CTA - Always primary color on white card background */
.archive-topics__cta {
    color: #0066CC !important;
    color: var(--color-primary, #0066CC) !important;
    -webkit-text-fill-color: #0066CC !important;
    -webkit-text-fill-color: var(--color-primary, #0066CC) !important;
    font-weight: 600;
    font-size: var(--font-size-sm);
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: auto;
    padding-top: var(--space-4);
}

/* ========================================
   §10 — CARD & CONTENT TEXT
   Auto-contrast based on card background
   ======================================== */

/* Light surface cards */
.card,
.post-card,
.article-card,
[class*="card"]:not([class*="dark"]):not([class*="stat"]):not([class*="synth"]) {
    color: var(--sv-text-on-surface);
}

.card h1, .card h2, .card h3, .card h4, .card h5, .card h6,
.post-card h1, .post-card h2, .post-card h3, .post-card h4,
.article-card h1, .article-card h2, .article-card h3,
[class*="card"]:not([class*="dark"]) [class*="title"],
[class*="card"]:not([class*="dark"]) [class*="heading"] {
    color: var(--sv-text-on-surface) !important;
}

.card p, .card span:not([class*="badge"]), .card li,
.post-card p, .post-card span:not([class*="badge"]),
[class*="card"]:not([class*="dark"]) [class*="description"],
[class*="card"]:not([class*="dark"]) [class*="excerpt"] {
    color: var(--sv-text-on-surface-secondary) !important;
}

/* Dark/accent stat cards */
[class*="dark-card"],
[class*="stat-card"],
.synth-stat-card,
.aiwp-stat-card,
[class*="card"][class*="primary"],
[class*="card"][class*="accent"] {
    color: var(--sv-text-on-dark) !important;
}

[class*="dark-card"] *,
[class*="stat-card"] *,
.synth-stat-card *,
.aiwp-stat-card * {
    color: inherit !important;
}

/* ========================================
   §11 — THEME CUSTOMIZER PANEL
   Panel buttons and accent picker
   ======================================== */

.theme-panel,
.aiwp-theme-panel,
.aiwp-chatbot-theme-panel,
[class*="theme-panel"],
[class*="customizer"] {
    color: var(--sv-text-on-surface) !important;
}

/* Panel headings */
.theme-panel__heading,
.aiwp-theme-panel h3,
.aiwp-theme-panel h4,
.aiwp-chatbot-theme-panel__heading,
[class*="theme-panel"] h3,
[class*="theme-panel"] h4 {
    color: var(--sv-text-on-surface-secondary) !important;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 700;
}

/* Toggle buttons */
.theme-panel__option,
.theme-panel button,
.aiwp-theme-panel button,
.aiwp-chatbot-theme-panel__option,
[class*="theme-panel"] button:not([class*="accent"]):not([class*="preset"]) {
    color: var(--sv-text-on-surface) !important;
    font-weight: 600 !important;
}

/* Active toggle - accent-aware */
.theme-panel__option[aria-checked="true"],
.theme-panel__option.active,
.aiwp-chatbot-theme-panel__option[aria-checked="true"],
[class*="theme-panel"] button[aria-pressed="true"],
[class*="theme-panel"] button.active {
    background: var(--color-primary-surface, var(--color-primary, #0066CC)) !important;
    color: var(--sv-btn-text-on-primary) !important;
    box-shadow:
        0 0 0 1px rgba(var(--color-primary-surface-rgb, 0, 102, 204), 0.55),
        0 0 12px var(--sv-accent-glow),
        0 0 20px var(--sv-accent-glow-soft) !important;
}

/* Accent color picker checkmark */
.accent-picker button[aria-pressed="true"]::after,
.accent-picker button.active::after,
[class*="accent"] button[aria-pressed="true"]::after,
[class*="color-picker"] button[aria-pressed="true"]::after,
.aiwp-chatbot-theme-panel__preset.is-active::after,
.theme-panel__preset.is-active::after {
    content: none !important;
    display: none !important;
}

/* Selected accent ring */
.accent-picker button[aria-pressed="true"],
.accent-picker button.active,
[class*="accent"] button[aria-pressed="true"],
.aiwp-chatbot-theme-panel__preset.is-active,
.theme-panel__preset.is-active {
    box-shadow: 
        0 0 0 2px var(--color-surface, #fff),
        0 0 0 4px rgba(var(--color-primary-surface-rgb, 0, 102, 204), 0.75),
        0 0 12px var(--sv-accent-glow),
        0 0 20px var(--sv-accent-glow-soft),
        inset 0 0 0 2px rgba(255, 255, 255, 0.35) !important;
    transform: scale(1.1) !important;
}

/* ========================================
   §12 — TABLE & DATA VISUALIZATION
   ======================================== */

table th,
.synth-table th,
[class*="table"] th {
    color: var(--sv-text-on-dark) !important;
}

table td,
.synth-table td,
[class*="table"] td {
    color: var(--sv-text-on-surface) !important;
}

.chart-label,
.axis-label,
.legend-text,
[class*="chart"] text,
[class*="graph"] text {
    fill: var(--sv-text-on-surface) !important;
    color: var(--sv-text-on-surface) !important;
}

/* ========================================
   §13 — BADGES & TAGS
   ======================================== */

.badge,
.tag,
.category-badge,
[class*="badge"]:not([class*="outline"]):not([class*="light"]),
[class*="tag"]:not(body):not([class*="outline"]):not([class*="light"]) {
    color: var(--sv-text-on-dark) !important;
}

.badge-outline,
.badge-light,
.tag-outline,
[class*="badge-outline"],
[class*="badge-light"],
[class*="tag-outline"] {
    color: var(--sv-text-on-surface) !important;
}

/* ========================================
   §14 — FORM ELEMENTS
   ======================================== */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="number"],
textarea,
select {
    color: var(--sv-text-on-surface) !important;
}

input::placeholder,
textarea::placeholder {
    color: var(--sv-text-on-surface-muted) !important;
    opacity: 0.7 !important;
}

label,
.form-label,
[class*="label"]:not(.badge):not(.tag) {
    color: var(--sv-text-on-surface) !important;
}

/* ========================================
   §15 — MOBILE NAVIGATION
   Clean mobile nav styling
   ======================================== */

@media (max-width: 959px) {
    .primary-nav.is-open .menu > li > a {
        color: var(--sv-text-on-surface) !important;
        border: none !important;
        text-decoration: none !important;
    }
    
    .primary-nav.is-open .menu > li > a::after {
        display: none !important;
    }
    
    .primary-nav.is-open .menu > li.current-menu-item > a,
    .primary-nav.is-open .menu > li.current_page_item > a {
        color: var(--color-primary) !important;
        font-weight: 700;
        background: rgba(var(--color-primary-rgb), 0.08) !important;
        border-left: 3px solid var(--color-primary) !important;
        padding-left: calc(var(--space-4) - 3px) !important;
        -webkit-text-fill-color: var(--color-primary) !important;
    }
    
    .primary-nav.is-open .menu > li > a:hover,
    .primary-nav.is-open .menu > li > a:focus {
        color: var(--color-primary) !important;
        background: rgba(var(--color-primary-rgb), 0.04) !important;
    }
    
    .primary-nav.is-open .newsletter-cta {
        color: var(--sv-text-on-accent) !important;
    }
    
    .primary-nav.is-open .newsletter-cta svg {
        stroke: var(--sv-icon-on-accent) !important;
    }
    
    .primary-nav.is-open .sub-menu > li > a {
        border: none !important;
        text-decoration: none !important;
    }
}

@media (max-width: 374px) {
    .primary-nav.is-open .menu > li > a {
        padding: var(--space-3) var(--space-3) !important;
        font-size: 0.95rem;
    }
    
    .site-header__inner {
        padding: var(--space-2) var(--space-2) !important;
    }
    
    .branding__title {
        font-size: 1rem !important;
    }
}

/* ========================================
   §16 — HERO CAROUSEL (IMAGE OVERLAYS)
   Text on images needs shadows
   ======================================== */

.hero-carousel__slide h1,
.hero-carousel__slide h2,
.hero-carousel__slide p,
.hero-carousel__title,
.hero-carousel__title a,
.hero-carousel__excerpt,
.hero-carousel__meta,
.hero-carousel__date,
.hero-carousel__read-time,
.hero-carousel__category {
    /* CRITICAL FIX v3.9.0: Explicit white with fallback to ensure carousel text is always visible
       on dark overlays. The var() with fallback ensures it works even if variable chain breaks */
    color: #FFFFFF !important;
    color: var(--sv-text-on-dark, #FFFFFF) !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
    -webkit-text-fill-color: #FFFFFF !important;
    -webkit-text-fill-color: var(--sv-text-on-dark, #FFFFFF) !important;
}

.hero-carousel__control,
.carousel-prev,
.carousel-next,
[class*="carousel"] button:not([class*="dot"]) {
    color: var(--sv-icon-on-accent) !important;
}

.hero-carousel__control svg,
.carousel-prev svg,
.carousel-next svg {
    stroke: var(--sv-icon-on-accent) !important;
    filter: var(--sv-icon-shadow-strong) !important;
}

/* ========================================
   §17 — FOOTER
   ======================================== */

.site-footer,
.footer,
[class*="footer"] {
    color: var(--sv-text-on-surface);
}

.site-footer h1, .site-footer h2, .site-footer h3, .site-footer h4,
.footer h1, .footer h2, .footer h3, .footer h4 {
    color: var(--sv-text-on-surface) !important;
}

.site-footer p, .site-footer span, .site-footer li,
.footer p, .footer span, .footer li {
    color: var(--sv-text-on-surface-secondary) !important;
}

.site-footer svg,
.footer svg {
    color: var(--sv-icon-on-surface) !important;
}

.site-footer a:hover svg,
.footer a:hover svg {
    color: var(--color-primary) !important;
}

/* ========================================
   §18 — CLOSE/DISMISS BUTTONS
   Modal close buttons always visible
   ======================================== */

[class*="close"] svg,
[class*="dismiss"] svg,
button[aria-label*="close" i] svg,
button[aria-label*="dismiss" i] svg,
.modal-close svg {
    color: var(--sv-icon-on-surface) !important;
    stroke: var(--sv-icon-on-surface) !important;
}

/* ========================================
   §19 — UTILITY CLASSES
   Force visibility when needed
   ======================================== */

/* Force dark visibility (for light backgrounds) */
.sv-force-dark,
.force-dark-visibility,
.force-dark-visibility svg,
.force-dark-visibility span,
.force-dark-visibility p {
    color: var(--sv-near-black) !important;
    stroke: var(--sv-near-black) !important;
}

/* Force light visibility (for dark backgrounds) */
.sv-force-light,
.force-light-visibility,
.force-light-visibility svg,
.force-light-visibility span,
.force-light-visibility p {
    color: var(--sv-white) !important;
    stroke: var(--sv-white) !important;
    filter: var(--sv-icon-shadow-on-dark) !important;
}

/* Force maximum visibility (unknown backgrounds) */
.sv-force-max,
.force-max-visibility,
.force-max-visibility svg {
    filter: var(--sv-force-visible-filter) !important;
}

.force-max-visibility-text {
    text-shadow: var(--sv-force-visible-text-shadow) !important;
}

/* ========================================
   §20 — ACCESSIBILITY MODES
   ======================================== */

@media (prefers-contrast: high) {
    :root {
        --sv-text-on-surface: #000000;
        --sv-text-on-surface-secondary: #000000;
        --sv-text-on-surface-muted: #000000;
        --sv-text-on-accent: #FFFFFF;
        --sv-text-on-dark: #FFFFFF;
        --sv-icon-on-surface: #000000;
        --sv-icon-on-accent: #FFFFFF;
        --sv-icon-on-dark: #FFFFFF;
        --sv-hero-text: #000000;
        
        --sv-force-visible-filter: 
            drop-shadow(0 0 1px rgba(0,0,0,1)) 
            drop-shadow(0 0 2px rgba(255,255,255,1)) !important;
    }
    
    [data-theme="dark"] {
        --sv-text-on-surface: #FFFFFF;
        --sv-text-on-surface-secondary: #FFFFFF;
        --sv-icon-on-surface: #FFFFFF;
    }
    
    svg,
    .icon,
    button svg,
    a svg {
        filter: var(--sv-force-visible-filter) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nav-toggle__bar,
    .nav-toggle__bar::before,
    .nav-toggle__bar::after,
    svg, .icon,
    button, [role="button"] {
        transition: none !important;
        animation: none !important;
    }
}

/* ========================================
   §21 — PRINT STYLES
   ======================================== */

@media print {
    * {
        color: #000000 !important;
        text-shadow: none !important;
        filter: none !important;
    }
    
    svg, .icon {
        stroke: #000000 !important;
        fill: #000000 !important;
    }
    
    .newsletter-cta, .nav-toggle, .theme-toggle, 
    .aiwp-chat-launcher, #aiwp-chatbot-launcher,
    [class*="launcher"], [class*="fab"] {
        display: none !important;
    }
}

/* ========================================
   §22 — FINAL VISIBILITY GUARANTEE
   Nuclear failsafe — nothing ever invisible
   ======================================== */

/* Hidden SVGs must be visible */
svg[style*="opacity: 0"],
svg[style*="visibility: hidden"],
.icon[style*="opacity: 0"],
.icon[style*="visibility: hidden"] {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Fallback for colorless icons */
svg:not([fill]):not([stroke]):not([class]) {
    color: var(--sv-icon-on-surface);
    fill: currentColor;
    stroke: currentColor;
}

/* Button icons must be visible */
button:not([disabled]) svg,
a:not([disabled]) svg,
[role="button"]:not([disabled]) svg {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Chat launcher specific guarantee */
#aiwp-chatbot-launcher,
.aiwp-chat-launcher,
.aiwp-chatbot-launcher,
[id*="chatbot-launcher"],
[class*="chat-launcher"] {
    /* Ensure the element itself is visible */
    opacity: 1 !important;
    visibility: visible !important;
}

#aiwp-chatbot-launcher svg,
.aiwp-chat-launcher svg,
.aiwp-chatbot-launcher svg,
[id*="chatbot-launcher"] svg,
[class*="chat-launcher"] svg {
    /* Icon triple-guarantee */
    color: var(--sv-icon-on-accent) !important;
    stroke: var(--sv-icon-on-accent) !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

/* ========================================
   §23 — EYEBROW & BADGE SVG CONTRAST
   All eyebrow elements get proper icon colors
   ======================================== */

/* Eyebrows on PRIMARY/ACCENT backgrounds (filled) - FORCE WHITE TEXT */
.page-hero__eyebrow,
.archive-hero__eyebrow,
.front-hero__eyebrow,
.trending-palette__label,
[class*="eyebrow"][class*="primary"],
[class*="eyebrow"][style*="background: var(--color-primary)"],
[class*="badge"][class*="primary"] {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

.page-hero__eyebrow *,
.archive-hero__eyebrow *,
.front-hero__eyebrow *,
.trending-palette__label * {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

.page-hero__eyebrow svg,
.archive-hero__eyebrow svg,
.front-hero__eyebrow svg,
.trending-palette__label svg,
[class*="eyebrow"][class*="primary"] svg,
[class*="badge"][class*="primary"] svg {
    color: #FFFFFF !important;
    stroke: #FFFFFF !important;
    fill: none !important;
}

/* Eyebrows on LIGHT backgrounds (outline style) */
.about-cta__eyebrow,
.posts-empty-state__eyebrow,
.archive-topics__eyebrow,
.front-insights__eyebrow,
[class*="eyebrow"]:not([class*="primary"]):not(.page-hero__eyebrow):not(.archive-hero__eyebrow):not(.front-hero__eyebrow) {
    color: #0066CC !important;
    color: var(--color-primary, #0066CC) !important;
    -webkit-text-fill-color: currentColor !important;
}

.about-cta__eyebrow svg,
.posts-empty-state__eyebrow svg,
.archive-topics__eyebrow svg,
.front-insights__eyebrow svg,
[class*="eyebrow"]:not([class*="primary"]):not(.page-hero__eyebrow):not(.archive-hero__eyebrow):not(.front-hero__eyebrow) svg {
    /* Explicit fallback first pattern - ensures visibility before variables resolve */
    color: #0066CC !important;
    color: var(--color-primary, #0066CC) !important;
    stroke: #0066CC !important;
    stroke: var(--color-primary, #0066CC) !important;
    fill: none !important;
}

/* ========================================
   §24 — BUTTON SVG CONTRAST SYSTEM
   Buttons get context-aware icon colors
   ======================================== */

/* Ghost/Outline buttons on light surfaces - dark icons */
.button--ghost svg,
.btn-ghost svg,
.button-outline svg,
.btn-outline svg,
.button--secondary svg,
.btn-secondary svg {
    color: var(--sv-icon-on-surface) !important;
    stroke: var(--sv-icon-on-surface) !important;
    fill: none !important;
}

.button--ghost:hover svg,
.btn-ghost:hover svg,
.button-outline:hover svg,
.btn-outline:hover svg {
    color: var(--color-primary) !important;
    stroke: var(--color-primary) !important;
}

/* Primary/Filled buttons - white icons */
.button--primary svg,
.btn-primary svg,
.button--lg.button--primary svg,
button.button svg:not(.button--ghost svg):not(.btn-ghost svg),
a.button:not(.button--ghost):not(.btn-ghost) svg {
    color: var(--sv-icon-on-accent) !important;
    stroke: var(--sv-icon-on-accent) !important;
    fill: none !important;
}

/* Dark mode ghost buttons - light icons */
[data-theme="dark"] .button--ghost svg,
[data-theme="dark"] .btn-ghost svg,
[data-theme="dark"] .button-outline svg {
    color: var(--sv-icon-on-surface) !important;
    stroke: var(--sv-icon-on-surface) !important;
}

[data-theme="dark"] .button--ghost:hover svg,
[data-theme="dark"] .btn-ghost:hover svg {
    color: var(--color-primary-light) !important;
    stroke: var(--color-primary-light) !important;
}

/* ========================================
   §25 — CTA SECTION SVG CONSISTENCY
   CTA sections get proper icon contrast
   ======================================== */

/* CTA content areas on light backgrounds */
.about-cta__content svg,
.contact-form__shell svg,
.cta-section svg {
    color: inherit !important;
    stroke: currentColor !important;
    fill: none !important;
}

/* CTA primary buttons */
.about-cta .button--primary svg,
.about-cta .button--lg:not(.button--ghost) svg,
.contact-form .button--primary svg,
.cta-section .button--primary svg {
    color: var(--sv-icon-on-accent) !important;
    stroke: var(--sv-icon-on-accent) !important;
}

/* CTA ghost buttons - SVG icons inherit from text (handled in §9.5) */
.about-cta .button--ghost svg,
.contact-form .button--ghost svg,
.cta-section .button--ghost svg {
    color: inherit !important;
    stroke: currentColor !important;
}


/* ========== scientific-infographics.css ========== */
/**
 * Scientific Infographics CSS Module v1.0.0
 * 
 * Styles for AI-WP-Manager Scientific Infographics System
 * Publication-quality data visualizations with WCAG AA compliance
 * 
 * @since v16.1.0
 */

/* ==========================================================================
   Base Infographic Container
   ========================================================================== */

.aiwp-scientific-infographic {
    margin: 2rem 0;
    padding: 1.5rem;
    background: var(--color-surface, #FFFFFF);
    border: 1px solid var(--color-border, #E2E8F0);
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.aiwp-infographic-header {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--color-primary, #0066CC);
}

.aiwp-infographic-title {
    margin: 0 0 0.5rem 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text-primary, #1A1A1A);
}

.aiwp-infographic-source {
    margin: 0;
    font-size: 0.875rem;
    color: var(--color-text-secondary, #404040);
    font-style: italic;
}

.aiwp-infographic-footer {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border, #E2E8F0);
}

.aiwp-infographic-methodology {
    margin: 0;
    font-size: 0.75rem;
    color: var(--color-text-muted, #666666);
}

/* ==========================================================================
   Chart Containers
   ========================================================================== */

.aiwp-chart-figure {
    margin: 1.5rem 0;
    padding: 0;
}

.aiwp-chart-caption {
    margin: 0 0 1rem 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-text-primary, #1A1A1A);
    text-align: center;
}

.aiwp-chart-container {
    margin: 0 auto;
    padding: 1rem;
    background: white;
    border-radius: 4px;
    overflow-x: auto;
    overflow-y: visible;
    position: relative;
}

.aiwp-svg-chart {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
}

.aiwp-chart-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 0.5rem;
    padding: 0 1rem;
    font-size: 0.875rem;
    color: var(--color-text-secondary, #404040);
}

.aiwp-y-label {
    transform: rotate(-90deg);
    transform-origin: left center;
}

.aiwp-x-label {
    text-align: center;
}

/* ==========================================================================
   Comparison Table
   ========================================================================== */

.aiwp-comparison-table {
    margin: 2.5rem auto;
    overflow: hidden;
    max-width: 900px;
}

.aiwp-comparison-title {
    margin: 0 0 1.25rem 0;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--color-text-primary, #1A1A1A);
    text-align: center;
}

.aiwp-comparison-wrapper {
    border: 1px solid var(--color-border, #E2E8F0);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.aiwp-comparison {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.aiwp-comparison thead {
    background: var(--color-primary, #0066CC);
    color: white;
}

.aiwp-comparison th,
.aiwp-comparison td {
    padding: 0.875rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--color-border, #E2E8F0);
}

.aiwp-comparison th {
    font-weight: 600;
    white-space: nowrap;
}

.aiwp-comparison tbody tr:nth-child(even) {
    background: var(--color-surface-alt, #F8F9FA);
}

.aiwp-comparison tbody tr:hover {
    background: rgba(0, 102, 204, 0.05);
}

.aiwp-comparison-criterion-name {
    font-weight: 500;
    color: var(--color-text-primary, #1A1A1A);
}

.aiwp-comparison-value {
    text-align: center;
}

/* Rating Classes */
.aiwp-rating-excellent {
    color: #059669;
    background: rgba(5, 150, 105, 0.1);
}

.aiwp-rating-good {
    color: #0066CC;
    background: rgba(0, 102, 204, 0.1);
}

.aiwp-rating-fair {
    color: #D97706;
    background: rgba(217, 119, 6, 0.1);
}

.aiwp-rating-poor {
    color: #DC2626;
    background: rgba(220, 38, 38, 0.1);
}

.aiwp-rating-stars {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.875rem;
    letter-spacing: 2px;
}

/* ==========================================================================
   Timeline
   ========================================================================== */

.aiwp-timeline {
    margin: 2rem 0;
    padding: 1rem 0;
}

.aiwp-timeline-title {
    margin: 0 0 1.5rem 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-text-primary, #1A1A1A);
    text-align: center;
}

.aiwp-timeline-track {
    position: relative;
    padding: 1rem 0;
}

/* Center line */
.aiwp-timeline-track::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--color-primary, #0066CC);
    transform: translateX(-50%);
}

.aiwp-timeline-event {
    position: relative;
    width: 45%;
    padding: 1rem;
    margin-bottom: 1.5rem;
    background: var(--color-surface, #FFFFFF);
    border: 1px solid var(--color-border, #E2E8F0);
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.aiwp-timeline-event--left {
    margin-left: 0;
    margin-right: auto;
}

.aiwp-timeline-event--right {
    margin-left: auto;
    margin-right: 0;
}

.aiwp-timeline-marker {
    position: absolute;
    width: 16px;
    height: 16px;
    background: var(--color-primary, #0066CC);
    border: 3px solid white;
    border-radius: 50%;
    box-shadow: 0 0 0 3px var(--color-primary, #0066CC);
}

.aiwp-timeline-event--left .aiwp-timeline-marker {
    right: -8%;
    top: 50%;
    transform: translate(50%, -50%);
}

.aiwp-timeline-event--right .aiwp-timeline-marker {
    left: -8%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.aiwp-timeline-date {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-primary, #0066CC);
}

.aiwp-timeline-event-title {
    margin: 0 0 0.5rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary, #1A1A1A);
}

.aiwp-timeline-event-desc {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--color-text-secondary, #6C757D);
    line-height: 1.5;
}

/* ==========================================================================
   Stats Grid
   ========================================================================== */

.aiwp-stats-grid {
    margin: 2rem 0;
    padding: 1.5rem;
    background: var(--color-surface-alt, #F8F9FA);
    border-radius: 8px;
}

.aiwp-stats-grid-title {
    margin: 0 0 1.5rem 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-text-primary, #1A1A1A);
    text-align: center;
}

.aiwp-stats-grid-items {
    display: grid;
    gap: 1rem;
}

.aiwp-stats-grid--cols-2 .aiwp-stats-grid-items {
    grid-template-columns: repeat(2, 1fr);
}

.aiwp-stats-grid--cols-3 .aiwp-stats-grid-items {
    grid-template-columns: repeat(3, 1fr);
}

.aiwp-stats-grid--cols-4 .aiwp-stats-grid-items {
    grid-template-columns: repeat(4, 1fr);
}

.aiwp-stat-item {
    padding: 1.5rem;
    background: var(--color-surface, #FFFFFF);
    border-radius: 8px;
    text-align: center;
    border: 1px solid var(--color-border, #E2E8F0);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.aiwp-stat-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.15);
}

.aiwp-stat-icon {
    margin-bottom: 0.75rem;
}

.aiwp-stat-icon img {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.aiwp-stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-primary, #0066CC);
    line-height: 1.2;
}

.aiwp-stat-label {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: var(--color-text-secondary, #6C757D);
    font-weight: 500;
}

.aiwp-stat-trend {
    margin-top: 0.25rem;
    font-size: 0.75rem;
}

.aiwp-stat-trend--up {
    color: #059669;
}

.aiwp-stat-trend--down {
    color: #DC2626;
}

/* ==========================================================================
   Responsive Adjustments
   ========================================================================== */

/* Tablet */
@media (max-width: 1024px) {
    .aiwp-stats-grid--cols-4 .aiwp-stats-grid-items {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .aiwp-timeline-event {
        width: 42%;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .aiwp-scientific-infographic {
        padding: 1rem;
    }
    
    .aiwp-stats-grid--cols-3 .aiwp-stats-grid-items,
    .aiwp-stats-grid--cols-4 .aiwp-stats-grid-items {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .aiwp-comparison-table {
        font-size: 0.875rem;
    }
    
    .aiwp-comparison th,
    .aiwp-comparison td {
        padding: 0.625rem 0.75rem;
    }
    
    .aiwp-timeline-track::before {
        left: 20px;
    }
    
    .aiwp-timeline-event {
        width: calc(100% - 50px);
        margin-left: 50px !important;
        margin-right: 0 !important;
    }
    
    .aiwp-timeline-event--left .aiwp-timeline-marker,
    .aiwp-timeline-event--right .aiwp-timeline-marker {
        left: -30px;
        right: auto;
        transform: translate(-50%, -50%);
    }
    
    .aiwp-stat-value {
        font-size: 1.5rem;
    }
}

/* Small Mobile */
@media (max-width: 480px) {
    .aiwp-stats-grid--cols-2 .aiwp-stats-grid-items,
    .aiwp-stats-grid--cols-3 .aiwp-stats-grid-items,
    .aiwp-stats-grid--cols-4 .aiwp-stats-grid-items {
        grid-template-columns: 1fr;
    }
    
    .aiwp-stat-item {
        padding: 1rem;
    }
}

/* ==========================================================================
   Dark Mode Support
   ========================================================================== */

[data-theme="dark"] .aiwp-scientific-infographic,
[data-theme="dark"] .aiwp-stat-item,
[data-theme="dark"] .aiwp-timeline-event,
[data-theme="dark"] .aiwp-chart-container {
    background: var(--color-surface-dark, #1E293B);
    border-color: var(--color-border-dark, #334155);
}

[data-theme="dark"] .aiwp-comparison thead {
    background: var(--color-primary-dark, #0066CC);
}

[data-theme="dark"] .aiwp-comparison tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .aiwp-stats-grid {
    background: var(--color-surface-alt-dark, #0F172A);
}

[data-theme="dark"] .aiwp-rating-excellent {
    background: rgba(5, 150, 105, 0.2);
}

[data-theme="dark"] .aiwp-rating-good {
    background: rgba(0, 102, 204, 0.2);
}

[data-theme="dark"] .aiwp-rating-fair {
    background: rgba(217, 119, 6, 0.2);
}

[data-theme="dark"] .aiwp-rating-poor {
    background: rgba(220, 38, 38, 0.2);
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
    .aiwp-scientific-infographic,
    .aiwp-stat-item,
    .aiwp-timeline-event,
    .aiwp-comparison-wrapper {
        border: 1px solid #ccc !important;
        box-shadow: none !important;
    }
    
    .aiwp-svg-chart {
        max-height: 400px !important;
    }
    
    .aiwp-timeline-track::before {
        background: #333 !important;
    }
}

/* ==========================================================================
   Interactive Charts (JS Repair)
   ========================================================================== */

.aiwp-interactive-chart {
    position: relative;
    width: 100%;
    height: 300px;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

.aiwp-chart-tooltip {
    position: absolute;
    background: rgba(0, 0, 0, 0.85);
    color: white;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 12px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 10;
    transform: translate(-50%, -100%);
    margin-top: -10px;
    white-space: nowrap;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

.aiwp-chart-bar {
    transition: height 1s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s;
    cursor: pointer;
}

.aiwp-chart-bar:hover {
    opacity: 0.8;
}

.aiwp-chart-axis-line {
    stroke: var(--color-border, #E2E8F0);
    stroke-width: 1;
}

.aiwp-chart-axis-text {
    fill: var(--color-text-secondary, #64748B);
    font-size: 11px;
}

.aiwp-chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    margin-top: 1rem;
}

.aiwp-chart-legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--color-text-secondary, #404040);
}

.aiwp-chart-legend-color {
    width: 12px;
    height: 12px;
    border-radius: 2px;
}


/* ========== glassmorphism.css ========== */
/* ========================================
   GLASSMORPHISM COMPONENTS
   2025 Aurora Glass Design System v1.0.0
   
   Applies frosted glass effects to:
   - Data cards
   - Statistics
   - Charts and graphs
   - Tables
   - Key takeaways
   
   Browser Support: Chrome 76+, Firefox 103+, Safari 9+, Edge 79+
   ======================================== */

/* ============ GLASSMORPHISM BASE STYLES ============ */
.glass,
.glass-card,
.glass-panel {
    background: rgba(var(--color-white-rgb), 0.7);
    border: 1px solid rgba(var(--color-white-rgb), 0.3);
    border-radius: var(--radius-xl);
    box-shadow: 
        0 4px 24px rgba(var(--color-black-rgb), 0.06),
        0 1px 4px rgba(var(--color-black-rgb), 0.04),
        inset 0 1px 0 rgba(var(--color-white-rgb), 0.6);
}

@supports (backdrop-filter: blur(16px)) {
    .glass,
    .glass-card,
    .glass-panel {
        background: rgba(var(--color-white-rgb), 0.5);
        -webkit-backdrop-filter: blur(16px) saturate(180%);
        backdrop-filter: blur(16px) saturate(180%);
    }
}

/* Dark mode glass */
[data-theme="dark"] .glass,
[data-theme="dark"] .glass-card,
[data-theme="dark"] .glass-panel {
    background: rgba(26, 26, 26, 0.7);
    border-color: rgba(var(--color-white-rgb), 0.1);
    box-shadow: 
        0 4px 24px rgba(0, 0, 0, 0.3),
        0 1px 4px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(var(--color-white-rgb), 0.05);
}

@supports (backdrop-filter: blur(16px)) {
    [data-theme="dark"] .glass,
    [data-theme="dark"] .glass-card,
    [data-theme="dark"] .glass-panel {
        background: rgba(26, 26, 26, 0.5);
        -webkit-backdrop-filter: blur(16px) saturate(180%);
        backdrop-filter: blur(16px) saturate(180%);
    }
}

/* ============ STATISTICS CARDS GLASSMORPHISM ============ */
/* Archive metrics cards */
.archive-metrics__card,
.synth-stat-card,
[class*="stat-card"],
.stats-grid > div,
.synth-stats-grid > div {
    background: rgba(var(--color-white-rgb), 0.7) !important;
    border: 1px solid rgba(var(--color-white-rgb), 0.4) !important;
    box-shadow: 
        0 4px 24px rgba(var(--color-black-rgb), 0.06),
        0 1px 4px rgba(var(--color-black-rgb), 0.04),
        inset 0 1px 0 rgba(var(--color-white-rgb), 0.6) !important;
}

@supports (backdrop-filter: blur(12px)) {
    .archive-metrics__card,
    .synth-stat-card,
    [class*="stat-card"],
    .stats-grid > div,
    .synth-stats-grid > div {
        background: rgba(var(--color-white-rgb), 0.45) !important;
        -webkit-backdrop-filter: blur(12px) saturate(180%);
        backdrop-filter: blur(12px) saturate(180%);
    }
}

/* Improve stat card text readability */
.archive-metrics__card .archive-metrics__value,
.synth-stat-value,
[class*="stat-value"] {
    color: var(--color-primary) !important;
    -webkit-text-fill-color: currentColor !important;
    font-weight: 800 !important;
    text-shadow: 0 1px 2px rgba(var(--color-white-rgb), 0.8);
}

.archive-metrics__card .archive-metrics__label,
.synth-stat-label,
[class*="stat-label"] {
    color: var(--color-text) !important;
    font-weight: 700 !important;
}

.archive-metrics__card .archive-metrics__hint,
.archive-metrics__card p,
.synth-stat-card p,
[class*="stat-card"] p {
    color: var(--color-text-secondary) !important;
}

/* Dark mode stat cards */
[data-theme="dark"] .archive-metrics__card,
[data-theme="dark"] .synth-stat-card,
[data-theme="dark"] [class*="stat-card"],
[data-theme="dark"] .stats-grid > div,
[data-theme="dark"] .synth-stats-grid > div {
    background: rgba(26, 26, 26, 0.7) !important;
    border-color: rgba(var(--color-white-rgb), 0.15) !important;
    box-shadow: 
        0 4px 24px rgba(0, 0, 0, 0.3),
        0 1px 4px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(var(--color-white-rgb), 0.05) !important;
}

@supports (backdrop-filter: blur(12px)) {
    [data-theme="dark"] .archive-metrics__card,
    [data-theme="dark"] .synth-stat-card,
    [data-theme="dark"] [class*="stat-card"],
    [data-theme="dark"] .stats-grid > div,
    [data-theme="dark"] .synth-stats-grid > div {
        background: rgba(26, 26, 26, 0.45) !important;
        -webkit-backdrop-filter: blur(12px) saturate(180%);
        backdrop-filter: blur(12px) saturate(180%);
    }
}

/* ============ CHARTS & GRAPHS GLASSMORPHISM ============ */
/* SVG chart containers */
.synth-chart,
[class*="chart-container"],
.chart-wrapper,
.synth-bar-chart,
.synth-line-chart,
.synth-pie-chart,
.synth-data-viz {
    background: rgba(var(--color-white-rgb), 0.65) !important;
    border: 1px solid rgba(var(--color-white-rgb), 0.3) !important;
    border-radius: var(--radius-xl) !important;
    padding: var(--space-6) !important;
    box-shadow: 
        0 4px 20px rgba(var(--color-black-rgb), 0.05),
        0 1px 4px rgba(var(--color-black-rgb), 0.03),
        inset 0 1px 0 rgba(var(--color-white-rgb), 0.5) !important;
}

@supports (backdrop-filter: blur(12px)) {
    .synth-chart,
    [class*="chart-container"],
    .chart-wrapper,
    .synth-bar-chart,
    .synth-line-chart,
    .synth-pie-chart,
    .synth-data-viz {
        background: rgba(var(--color-white-rgb), 0.4) !important;
        -webkit-backdrop-filter: blur(12px) saturate(160%);
        backdrop-filter: blur(12px) saturate(160%);
    }
}

/* Dark mode charts */
[data-theme="dark"] .synth-chart,
[data-theme="dark"] [class*="chart-container"],
[data-theme="dark"] .chart-wrapper,
[data-theme="dark"] .synth-bar-chart,
[data-theme="dark"] .synth-line-chart,
[data-theme="dark"] .synth-pie-chart,
[data-theme="dark"] .synth-data-viz {
    background: rgba(26, 26, 26, 0.65) !important;
    border-color: rgba(var(--color-white-rgb), 0.12) !important;
    box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.25),
        0 1px 4px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(var(--color-white-rgb), 0.03) !important;
}

@supports (backdrop-filter: blur(12px)) {
    [data-theme="dark"] .synth-chart,
    [data-theme="dark"] [class*="chart-container"],
    [data-theme="dark"] .chart-wrapper,
    [data-theme="dark"] .synth-bar-chart,
    [data-theme="dark"] .synth-line-chart,
    [data-theme="dark"] .synth-pie-chart,
    [data-theme="dark"] .synth-data-viz {
        background: rgba(26, 26, 26, 0.4) !important;
        -webkit-backdrop-filter: blur(12px) saturate(160%);
        backdrop-filter: blur(12px) saturate(160%);
    }
}

/* ============ TABLES GLASSMORPHISM ============ */
.synth-comparison-table,
.synth-table,
[class*="comparison-table"],
.wp-block-table,
article table {
    background: rgba(var(--color-white-rgb), 0.6) !important;
    border: 1px solid rgba(var(--color-white-rgb), 0.25) !important;
    border-radius: var(--radius-lg) !important;
    overflow: hidden;
    box-shadow: 
        0 2px 16px rgba(var(--color-black-rgb), 0.04),
        inset 0 1px 0 rgba(var(--color-white-rgb), 0.4) !important;
}

@supports (backdrop-filter: blur(10px)) {
    .synth-comparison-table,
    .synth-table,
    [class*="comparison-table"],
    .wp-block-table,
    article table {
        background: rgba(var(--color-white-rgb), 0.35) !important;
        -webkit-backdrop-filter: blur(10px) saturate(150%);
        backdrop-filter: blur(10px) saturate(150%);
    }
}

/* Table header */
.synth-comparison-table thead,
.synth-table thead,
[class*="comparison-table"] thead,
.wp-block-table thead,
article table thead {
    background: rgba(var(--color-primary-rgb), 0.08) !important;
}

/* Table rows */
.synth-comparison-table tr,
.synth-table tr,
[class*="comparison-table"] tr,
.wp-block-table tr,
article table tr {
    border-bottom: 1px solid rgba(var(--color-black-rgb), 0.06) !important;
}

.synth-comparison-table tr:hover,
.synth-table tr:hover,
[class*="comparison-table"] tr:hover,
.wp-block-table tr:hover,
article table tr:hover {
    background: rgba(var(--color-primary-rgb), 0.04) !important;
}

/* Table cell text */
.synth-comparison-table th,
.synth-comparison-table td,
.synth-table th,
.synth-table td,
[class*="comparison-table"] th,
[class*="comparison-table"] td,
.wp-block-table th,
.wp-block-table td,
article table th,
article table td {
    color: var(--color-text) !important;
    padding: var(--space-3) var(--space-4) !important;
}

.synth-comparison-table th,
.synth-table th,
[class*="comparison-table"] th,
.wp-block-table th,
article table th {
    font-weight: 700 !important;
    color: var(--color-text) !important;
}

/* Dark mode tables */
[data-theme="dark"] .synth-comparison-table,
[data-theme="dark"] .synth-table,
[data-theme="dark"] [class*="comparison-table"],
[data-theme="dark"] .wp-block-table,
[data-theme="dark"] article table {
    background: rgba(26, 26, 26, 0.6) !important;
    border-color: rgba(var(--color-white-rgb), 0.1) !important;
    box-shadow: 
        0 2px 16px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(var(--color-white-rgb), 0.03) !important;
}

@supports (backdrop-filter: blur(10px)) {
    [data-theme="dark"] .synth-comparison-table,
    [data-theme="dark"] .synth-table,
    [data-theme="dark"] [class*="comparison-table"],
    [data-theme="dark"] .wp-block-table,
    [data-theme="dark"] article table {
        background: rgba(26, 26, 26, 0.35) !important;
        -webkit-backdrop-filter: blur(10px) saturate(150%);
        backdrop-filter: blur(10px) saturate(150%);
    }
}

/* ============ KEY TAKEAWAYS GLASSMORPHISM ============ */
.synth-takeaways,
[class*="takeaways"],
.key-takeaways,
.article-summary {
    background: rgba(var(--color-white-rgb), 0.7) !important;
    border: none !important;
    border-left: 4px solid var(--color-primary) !important;
    border-radius: var(--radius-xl) !important;
    box-shadow: 
        0 4px 20px rgba(var(--color-black-rgb), 0.05),
        0 1px 4px rgba(var(--color-black-rgb), 0.03),
        inset 0 1px 0 rgba(var(--color-white-rgb), 0.5) !important;
}

@supports (backdrop-filter: blur(12px)) {
    .synth-takeaways,
    [class*="takeaways"],
    .key-takeaways,
    .article-summary {
        background: rgba(var(--color-white-rgb), 0.45) !important;
        -webkit-backdrop-filter: blur(12px) saturate(170%);
        backdrop-filter: blur(12px) saturate(170%);
    }
}

/* Dark mode takeaways */
[data-theme="dark"] .synth-takeaways,
[data-theme="dark"] [class*="takeaways"],
[data-theme="dark"] .key-takeaways,
[data-theme="dark"] .article-summary {
    background: rgba(26, 26, 26, 0.7) !important;
    border-left-color: var(--color-primary-light) !important;
    box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.25),
        0 1px 4px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(var(--color-white-rgb), 0.03) !important;
}

@supports (backdrop-filter: blur(12px)) {
    [data-theme="dark"] .synth-takeaways,
    [data-theme="dark"] [class*="takeaways"],
    [data-theme="dark"] .key-takeaways,
    [data-theme="dark"] .article-summary {
        background: rgba(26, 26, 26, 0.45) !important;
        -webkit-backdrop-filter: blur(12px) saturate(170%);
        backdrop-filter: blur(12px) saturate(170%);
    }
}

/* ============ DATA GRIDS GLASSMORPHISM ============ */
.synth-data-grid,
[class*="data-grid"],
.synth-metrics-grid,
[class*="metrics-grid"] {
    background: rgba(var(--color-white-rgb), 0.5) !important;
    border: 1px solid rgba(var(--color-white-rgb), 0.2) !important;
    border-radius: var(--radius-xl) !important;
    padding: var(--space-4) !important;
    box-shadow: 
        0 4px 16px rgba(var(--color-black-rgb), 0.04),
        inset 0 1px 0 rgba(var(--color-white-rgb), 0.4) !important;
}

@supports (backdrop-filter: blur(10px)) {
    .synth-data-grid,
    [class*="data-grid"],
    .synth-metrics-grid,
    [class*="metrics-grid"] {
        background: rgba(var(--color-white-rgb), 0.3) !important;
        -webkit-backdrop-filter: blur(10px) saturate(150%);
        backdrop-filter: blur(10px) saturate(150%);
    }
}

/* Dark mode data grids */
[data-theme="dark"] .synth-data-grid,
[data-theme="dark"] [class*="data-grid"],
[data-theme="dark"] .synth-metrics-grid,
[data-theme="dark"] [class*="metrics-grid"] {
    background: rgba(26, 26, 26, 0.5) !important;
    border-color: rgba(var(--color-white-rgb), 0.08) !important;
    box-shadow: 
        0 4px 16px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(var(--color-white-rgb), 0.02) !important;
}

@supports (backdrop-filter: blur(10px)) {
    [data-theme="dark"] .synth-data-grid,
    [data-theme="dark"] [class*="data-grid"],
    [data-theme="dark"] .synth-metrics-grid,
    [data-theme="dark"] [class*="metrics-grid"] {
        background: rgba(26, 26, 26, 0.3) !important;
        -webkit-backdrop-filter: blur(10px) saturate(150%);
        backdrop-filter: blur(10px) saturate(150%);
    }
}

/* ============ INFO BOXES GLASSMORPHISM ============ */
.synth-info-box,
[class*="info-box"],
.callout-box,
.synth-callout,
.notice-box {
    background: rgba(var(--color-white-rgb), 0.65) !important;
    border: 1px solid rgba(var(--color-white-rgb), 0.25) !important;
    border-left: 4px solid var(--color-primary) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: 
        0 4px 16px rgba(var(--color-black-rgb), 0.04),
        inset 0 1px 0 rgba(var(--color-white-rgb), 0.4) !important;
}

@supports (backdrop-filter: blur(10px)) {
    .synth-info-box,
    [class*="info-box"],
    .callout-box,
    .synth-callout,
    .notice-box {
        background: rgba(var(--color-white-rgb), 0.4) !important;
        -webkit-backdrop-filter: blur(10px) saturate(160%);
        backdrop-filter: blur(10px) saturate(160%);
    }
}

/* Dark mode info boxes */
[data-theme="dark"] .synth-info-box,
[data-theme="dark"] [class*="info-box"],
[data-theme="dark"] .callout-box,
[data-theme="dark"] .synth-callout,
[data-theme="dark"] .notice-box {
    background: rgba(26, 26, 26, 0.65) !important;
    border-color: rgba(var(--color-white-rgb), 0.1) !important;
    box-shadow: 
        0 4px 16px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(var(--color-white-rgb), 0.02) !important;
}

@supports (backdrop-filter: blur(10px)) {
    [data-theme="dark"] .synth-info-box,
    [data-theme="dark"] [class*="info-box"],
    [data-theme="dark"] .callout-box,
    [data-theme="dark"] .synth-callout,
    [data-theme="dark"] .notice-box {
        background: rgba(26, 26, 26, 0.4) !important;
        -webkit-backdrop-filter: blur(10px) saturate(160%);
        backdrop-filter: blur(10px) saturate(160%);
    }
}

/* ============ HOVER EFFECTS ============ */
.glass:hover,
.glass-card:hover,
.archive-metrics__card:hover,
.synth-stat-card:hover,
[class*="stat-card"]:hover {
    box-shadow: 
        0 8px 32px rgba(var(--color-black-rgb), 0.1),
        0 2px 8px rgba(var(--color-black-rgb), 0.06),
        inset 0 1px 0 rgba(var(--color-white-rgb), 0.7) !important;
    transform: translateY(-2px);
}

[data-theme="dark"] .glass:hover,
[data-theme="dark"] .glass-card:hover,
[data-theme="dark"] .archive-metrics__card:hover,
[data-theme="dark"] .synth-stat-card:hover,
[data-theme="dark"] [class*="stat-card"]:hover {
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.4),
        0 2px 8px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(var(--color-white-rgb), 0.08) !important;
}

/* ============ TRANSITIONS ============ */
.glass,
.glass-card,
.glass-panel,
.archive-metrics__card,
.synth-stat-card,
[class*="stat-card"],
.synth-chart,
[class*="chart-container"],
.synth-takeaways,
[class*="takeaways"],
.synth-comparison-table,
.synth-table,
[class*="comparison-table"] {
    transition: 
        transform var(--transition-base),
        box-shadow var(--transition-base),
        background var(--transition-base),
        border-color var(--transition-base);
}


/* ========== layout-system.css ========== */
/**
 * Advanced CSS Layout System
 * Version: 1.1.0
 * 
 * Modern CSS Grid, Flexbox, and Container Queries
 * for responsive, elegant layouts
 * 
 * v1.1.0 Changes:
 * - Added universal responsive utilities for navbar compression (1100-1250px)
 * - Standardized breakpoints using CSS custom properties
 * - Added header output priority system classes
 * - Enhanced container query support
 */

/* ========================================
   BREAKPOINT CUSTOM PROPERTIES
   ======================================== */
:root {
    --breakpoint-mobile: 767px;
    --breakpoint-tablet: 1023px;
    --breakpoint-desktop: 1024px;
    --breakpoint-desktop-sm: 1100px;
    --breakpoint-desktop-md: 1250px;
    --breakpoint-desktop-lg: 1400px;
    --breakpoint-wide: 1920px;
}

/* ========================================
   CONTAINER QUERIES SUPPORT
   ======================================== */

/* Container query contexts */
.container-query,
.aiwp-card,
.aiwp-grid-item,
.entry-card,
.widget,
.aiwp-section {
    container-type: inline-size;
    container-name: card;
}

/* Main content container */
.site-main,
.article-content,
.aiwp-content-area {
    container-type: inline-size;
    container-name: main-content;
}

/* ========================================
   CSS GRID LAYOUTS
   ======================================== */

/* Base grid system */
.aiwp-grid {
    display: grid;
    gap: var(--space-6, 1.5rem);
    width: 100%;
}

/* Auto-fit responsive grid */
.aiwp-grid--auto {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* Fixed column grids */
.aiwp-grid--2 {
    grid-template-columns: repeat(2, 1fr);
}

.aiwp-grid--3 {
    grid-template-columns: repeat(3, 1fr);
}

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

/* Asymmetric grids */
.aiwp-grid--sidebar {
    grid-template-columns: 1fr 320px;
}

.aiwp-grid--sidebar-left {
    grid-template-columns: 320px 1fr;
}

.aiwp-grid--golden {
    grid-template-columns: 1.618fr 1fr;
}

/* Masonry-style grid (CSS-only approximation) */
.aiwp-grid--masonry {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    grid-auto-rows: 10px;
}

.aiwp-grid--masonry > * {
    grid-row: span var(--span, 20);
}

/* Bento grid layout */
.aiwp-grid--bento {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, minmax(150px, auto));
}

.aiwp-grid--bento .bento-featured {
    grid-column: span 2;
    grid-row: span 2;
}

.aiwp-grid--bento .bento-wide {
    grid-column: span 2;
}

.aiwp-grid--bento .bento-tall {
    grid-row: span 2;
}

/* Full-bleed grid */
.aiwp-grid--full-bleed {
    display: grid;
    grid-template-columns: 
        1fr 
        min(var(--max-width-prose, 820px), calc(100% - 2 * var(--space-6))) 
        1fr;
}

.aiwp-grid--full-bleed > * {
    grid-column: 2;
}

.aiwp-grid--full-bleed > .full-bleed {
    grid-column: 1 / -1;
    width: 100%;
}

/* ========================================
   FLEXBOX UTILITIES
   ======================================== */

/* Base flex container */
.aiwp-flex {
    display: flex;
    gap: var(--space-4, 1rem);
}

/* Direction */
.aiwp-flex--row { flex-direction: row; }
.aiwp-flex--col { flex-direction: column; }
.aiwp-flex--row-reverse { flex-direction: row-reverse; }
.aiwp-flex--col-reverse { flex-direction: column-reverse; }

/* Wrap */
.aiwp-flex--wrap { flex-wrap: wrap; }
.aiwp-flex--nowrap { flex-wrap: nowrap; }

/* Justify content */
.aiwp-flex--start { justify-content: flex-start; }
.aiwp-flex--end { justify-content: flex-end; }
.aiwp-flex--center { justify-content: center; }
.aiwp-flex--between { justify-content: space-between; }
.aiwp-flex--around { justify-content: space-around; }
.aiwp-flex--evenly { justify-content: space-evenly; }

/* Align items */
.aiwp-flex--items-start { align-items: flex-start; }
.aiwp-flex--items-end { align-items: flex-end; }
.aiwp-flex--items-center { align-items: center; }
.aiwp-flex--items-stretch { align-items: stretch; }
.aiwp-flex--items-baseline { align-items: baseline; }

/* Common flex patterns */
.aiwp-flex--stack {
    flex-direction: column;
    gap: var(--space-4, 1rem);
}

.aiwp-flex--inline {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2, 0.5rem);
}

.aiwp-flex--spread {
    justify-content: space-between;
    align-items: center;
}

/* Flex item utilities */
.aiwp-flex-grow { flex-grow: 1; }
.aiwp-flex-shrink-0 { flex-shrink: 0; }
.aiwp-flex-1 { flex: 1 1 0%; }
.aiwp-flex-auto { flex: 1 1 auto; }
.aiwp-flex-none { flex: none; }

/* ========================================
   CONTAINER QUERY RESPONSIVE LAYOUTS
   ======================================== */

/* Card container queries */
@container card (max-width: 300px) {
    .cq-stack {
        flex-direction: column;
        text-align: center;
    }
    
    .cq-hide-sm {
        display: none;
    }
}

@container card (min-width: 301px) and (max-width: 500px) {
    .cq-2col {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}

@container card (min-width: 501px) {
    .cq-3col {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }
    
    .cq-inline {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-4);
    }
}

/* Main content container queries */
@container main-content (max-width: 600px) {
    .mc-stack {
        display: flex;
        flex-direction: column;
    }
    
    .mc-full {
        grid-column: 1 / -1;
    }
}

@container main-content (min-width: 601px) and (max-width: 900px) {
    .mc-2col {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-6);
    }
}

@container main-content (min-width: 901px) {
    .mc-sidebar {
        display: grid;
        grid-template-columns: 1fr 300px;
        gap: var(--space-8);
    }
    
    .mc-3col {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-6);
    }
}

/* ========================================
   ASPECT RATIO UTILITIES
   ======================================== */

.aspect-square { aspect-ratio: 1 / 1; }
.aspect-video { aspect-ratio: 16 / 9; }
.aspect-wide { aspect-ratio: 21 / 9; }
.aspect-portrait { aspect-ratio: 3 / 4; }
.aspect-golden { aspect-ratio: 1.618 / 1; }

/* ========================================
   SPACING UTILITIES (CSS Grid gap)
   ======================================== */

.gap-0 { gap: 0; }
.gap-1 { gap: var(--space-1, 0.25rem); }
.gap-2 { gap: var(--space-2, 0.5rem); }
.gap-3 { gap: var(--space-3, 0.75rem); }
.gap-4 { gap: var(--space-4, 1rem); }
.gap-6 { gap: var(--space-6, 1.5rem); }
.gap-8 { gap: var(--space-8, 2rem); }
.gap-10 { gap: var(--space-10, 2.5rem); }
.gap-12 { gap: var(--space-12, 3rem); }

/* ========================================
   ALIGNMENT UTILITIES
   ======================================== */

/* Place utilities (grid) */
.place-center {
    place-items: center;
    place-content: center;
}

.place-start { place-items: start; }
.place-end { place-items: end; }

/* Self alignment */
.self-start { align-self: start; justify-self: start; }
.self-center { align-self: center; justify-self: center; }
.self-end { align-self: end; justify-self: end; }
.self-stretch { align-self: stretch; justify-self: stretch; }

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

/* Mobile-first responsive grids */
@media (max-width: 639px) {
    .aiwp-grid--2,
    .aiwp-grid--3,
    .aiwp-grid--4,
    .aiwp-grid--sidebar,
    .aiwp-grid--sidebar-left,
    .aiwp-grid--golden {
        grid-template-columns: 1fr;
    }
    
    .aiwp-grid--bento {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
    }
    
    .aiwp-grid--bento .bento-featured,
    .aiwp-grid--bento .bento-wide,
    .aiwp-grid--bento .bento-tall {
        grid-column: auto;
        grid-row: auto;
    }
    
    .sm\:flex-col {
        flex-direction: column;
    }
    
    .sm\:hidden {
        display: none;
    }
}

/* Tablet */
@media (min-width: 640px) and (max-width: 1023px) {
    .aiwp-grid--3,
    .aiwp-grid--4 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .aiwp-grid--sidebar,
    .aiwp-grid--sidebar-left {
        grid-template-columns: 1fr;
    }
    
    .aiwp-grid--bento {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .md\:grid-2 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Desktop */
@media (min-width: 1024px) {
    .lg\:grid-3 {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .lg\:grid-4 {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .lg\:sidebar {
        grid-template-columns: 1fr 320px;
    }
}

/* Large desktop */
@media (min-width: 1280px) {
    .xl\:grid-5 {
        grid-template-columns: repeat(5, 1fr);
    }
    
    .xl\:sidebar-wide {
        grid-template-columns: 1fr 400px;
    }
}

/* ========================================
   SPECIAL LAYOUT PATTERNS
   ======================================== */

/* Hero split layout */
.aiwp-hero-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 60vh;
    align-items: center;
}

@media (max-width: 767px) {
    .aiwp-hero-split {
        grid-template-columns: 1fr;
        min-height: auto;
    }
}

/* Card grid with featured */
.aiwp-card-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--space-6);
}

.aiwp-card-grid > .card-featured {
    grid-column: span 8;
}

.aiwp-card-grid > .card-small {
    grid-column: span 4;
}

.aiwp-card-grid > .card-medium {
    grid-column: span 6;
}

.aiwp-card-grid > .card-full {
    grid-column: span 12;
}

@media (max-width: 1023px) {
    .aiwp-card-grid > .card-featured,
    .aiwp-card-grid > .card-small,
    .aiwp-card-grid > .card-medium {
        grid-column: span 6;
    }
}

@media (max-width: 639px) {
    .aiwp-card-grid > .card-featured,
    .aiwp-card-grid > .card-small,
    .aiwp-card-grid > .card-medium,
    .aiwp-card-grid > .card-full {
        grid-column: span 12;
    }
}

/* Magazine layout */
.aiwp-magazine {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, minmax(200px, auto));
    gap: var(--space-4);
}

.aiwp-magazine > .headline {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
}

.aiwp-magazine > .secondary {
    grid-column: 3 / 5;
}

@media (max-width: 767px) {
    .aiwp-magazine {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }
    
    .aiwp-magazine > .headline,
    .aiwp-magazine > .secondary {
        grid-column: auto;
        grid-row: auto;
    }
}

/* Timeline layout */
.aiwp-timeline {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-4) var(--space-6);
}

.aiwp-timeline__marker {
    position: relative;
    width: 24px;
    display: flex;
    justify-content: center;
}

.aiwp-timeline__marker::before {
    content: '';
    position: absolute;
    top: 12px;
    bottom: -28px;
    left: 50%;
    width: 2px;
    background: var(--color-border);
    transform: translateX(-50%);
}

.aiwp-timeline__item:last-child .aiwp-timeline__marker::before {
    display: none;
}

.aiwp-timeline__dot {
    width: 12px;
    height: 12px;
    background: var(--color-primary);
    border-radius: 50%;
    z-index: 1;
}

/* Sticky sidebar layout */
.aiwp-sticky-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: var(--space-8);
    align-items: start;
}

.aiwp-sticky-layout__sidebar {
    position: sticky;
    top: calc(var(--header-height, 64px) + var(--space-4));
}

@media (max-width: 1023px) {
    .aiwp-sticky-layout {
        grid-template-columns: 1fr;
    }
    
    .aiwp-sticky-layout__sidebar {
        position: static;
    }
}

/* ========================================
   VISIBILITY UTILITIES
   ======================================== */

.visible { visibility: visible; }
.invisible { visibility: hidden; }
.hidden { display: none; }

/* Screen reader only */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.sr-only-focusable:focus {
    position: static;
    width: auto;
    height: auto;
    padding: inherit;
    margin: inherit;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

/* ========================================
   OVERFLOW UTILITIES
   ======================================== */

.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }
.overflow-scroll { overflow: scroll; }
.overflow-x-auto { overflow-x: auto; overflow-y: hidden; }
.overflow-y-auto { overflow-y: auto; overflow-x: hidden; }

/* Scrollbar styling */
.custom-scrollbar::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: var(--color-surface-alt);
    border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: var(--color-border-strong);
    border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-muted);
}

/* ========================================
   POSITION UTILITIES
   ======================================== */

.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }

.inset-0 { inset: 0; }
.top-0 { top: 0; }
.right-0 { right: 0; }
.bottom-0 { bottom: 0; }
.left-0 { left: 0; }

/* Z-index scale */
.z-0 { z-index: 0; }
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-30 { z-index: 30; }
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }
.z-auto { z-index: auto; }

/* ========================================
   WIDTH/HEIGHT UTILITIES
   ======================================== */

.w-full { width: 100%; }
.w-screen { width: 100vw; }
.w-auto { width: auto; }
.w-fit { width: fit-content; }
.w-min { width: min-content; }
.w-max { width: max-content; }

.h-full { height: 100%; }
.h-screen { height: 100vh; }
.h-auto { height: auto; }
.h-fit { height: fit-content; }

.min-h-screen { min-height: 100vh; }
.min-h-0 { min-height: 0; }

.max-w-prose { max-width: var(--max-width-prose, 820px); }
.max-w-container { max-width: var(--max-width-container, 1600px); }
.max-w-full { max-width: 100%; }
.max-w-none { max-width: none; }

/* ========================================
   UNIVERSAL RESPONSIVE UTILITIES
   For consistent behavior across all components
   ======================================== */

/* Header output priority system */
.header-priority-high {
    order: -1;
    z-index: 100;
}

.header-priority-medium {
    order: 0;
    z-index: 50;
}

.header-priority-low {
    order: 1;
    z-index: 10;
}

/* Component-level responsive utilities */
.responsive-hide-tablet {
    display: block;
}

.responsive-hide-mobile {
    display: block;
}

@media (max-width: 1023px) {
    .responsive-hide-tablet {
        display: none !important;
    }
}

@media (max-width: 767px) {
    .responsive-hide-mobile {
        display: none !important;
    }
}

/* Full-width utility on all breakpoints */
.full-width-all {
    width: 100%;
    max-width: 100%;
}

/* Force flex shrink to prevent overflow */
.flex-shrink-force {
    flex-shrink: 1 !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

/* Text truncation utility */
.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ========== ui-fixes.css ========== */
/**
 * UI Fixes Module
 * Version: 1.1.0
 * 
 * Targeted fixes for:
 * - Search overlap at 1237x796 viewport
 * - Navbar height issues with "Get Free Tools"
 * - Carousel prev/next buttons (ENHANCED v16.9.3)
 * - Carousel dots center alignment
 * - General responsive adjustments
 */

/* ========================================
    ACCENT SWITCH (INSTANT FEEL)
    ======================================== */

/*
 When the accent color is changed we briefly add a root class to disable transitions.
 This removes the perceived delay caused by background/color transitions.
 */
:root.aiwp-accent-switching *,
:root.aiwp-accent-switching *::before,
:root.aiwp-accent-switching *::after {
     transition-duration: 0s !important;
     transition-delay: 0s !important;
}

/* ========================================
   CAROUSEL PREV/NEXT BUTTONS FIX
   ======================================== */

/* Ensure carousel navigation buttons are visible and clickable */
.hero-carousel__nav,
.carousel__nav,
.slick-arrow,
.swiper-button-prev,
.swiper-button-next {
    z-index: 10;
    pointer-events: auto;
}

/* Standard carousel prev/next styling */
.hero-carousel__prev,
.hero-carousel__next,
.carousel__prev,
.carousel__next {
    position: absolute;
    top: 65%;  /* Lowered from 60% for better button placement below content */
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    background: rgba(var(--color-white-rgb), 0.9);
    border: 1px solid var(--color-border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-fast);
    z-index: 10;
    color: var(--sv-text-on-surface) !important;
    font-size: 1.25rem;
    box-shadow: var(--shadow-md);
}

.hero-carousel__prev,
.carousel__prev {
    left: var(--space-4);
}

.hero-carousel__next,
.carousel__next {
    right: var(--space-4);
}

.hero-carousel__prev:hover,
.hero-carousel__next:hover,
.carousel__prev:hover,
.carousel__next:hover {
    background: var(--color-primary-surface);
    color: var(--sv-btn-text-on-primary) !important;
    border-color: var(--color-primary-surface);
    box-shadow: var(--shadow-lg);
}

/* Dark mode carousel buttons */
[data-theme="dark"] .hero-carousel__prev,
[data-theme="dark"] .hero-carousel__next,
[data-theme="dark"] .carousel__prev,
[data-theme="dark"] .carousel__next {
    background: rgba(var(--color-black-rgb), 0.8);
    border-color: var(--color-border-dark);
    color: var(--color-text-dark);
}

[data-theme="dark"] .hero-carousel__prev:hover,
[data-theme="dark"] .hero-carousel__next:hover,
[data-theme="dark"] .carousel__prev:hover,
[data-theme="dark"] .carousel__next:hover {
    background: var(--color-primary-surface);
    color: var(--sv-btn-text-on-primary) !important;
}

/* Carousel dots - center alignment */
.hero-carousel__dots,
.carousel__dots,
.slick-dots,
.swiper-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4) 0;
    list-style: none;
    margin: 0;
}

.hero-carousel__dot,
.carousel__dot,
.slick-dots li button,
.swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-border-strong);
    border: none;
    cursor: pointer;
    transition: all var(--transition-fast);
    padding: 0;
}

.hero-carousel__dot.is-active,
.carousel__dot.is-active,
.slick-dots li.slick-active button,
.swiper-pagination-bullet-active {
    background: var(--color-primary);
    width: 24px;
    border-radius: var(--radius-full);
}

/* ========================================
   ENHANCED CAROUSEL CONTROLS (v16.9.5)
   Classic carousel layout:
   - Prev button on far left
   - Next button on far right  
   - Indicators centered at bottom
   Optimized for all screen sizes
   ======================================== */

/* Controls wrapper - full width with space-between for buttons at edges */
.hero-carousel__controls,
.carousel__controls,
.featured-carousel__controls {
    position: absolute;
    bottom: 1rem;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1rem;
    pointer-events: none;
    z-index: 20;
}

/* Premium carousel buttons - positioned at edges */
.hero-carousel__button,
.featured-carousel__button,
.carousel__button,
.hero-carousel__prev,
.hero-carousel__next {
    pointer-events: auto;
    opacity: 1 !important;
    visibility: visible !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px;
    min-height: 36px;
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    border-radius: 50% !important;
    color: var(--color-text, #1A1A1A) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    position: static !important;
    transform: none !important;
    flex-shrink: 0;
}

.hero-carousel__button:hover,
.featured-carousel__button:hover,
.carousel__button:hover,
.hero-carousel__prev:hover,
.hero-carousel__next:hover {
    background: var(--color-primary, #0066CC) !important;
    color: white !important;
    transform: scale(1.05) !important;
    border-color: var(--color-primary, #0066CC) !important;
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.25) !important;
}

.hero-carousel__button svg,
.featured-carousel__button svg,
.carousel__button svg {
    width: 16px !important;
    height: 16px !important;
    stroke-width: 2.5 !important;
}

/* Dots container - centered between the buttons */
.hero-carousel__dots,
.carousel__dots,
.featured-carousel__dots,
.hero-carousel__indicators,
.carousel__indicators {
    position: static !important;
    transform: none !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0.375rem;
    flex: 1;
    width: auto !important;
    padding: 0;
    background: transparent !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
    pointer-events: auto;
}

/* ============ PREMIUM CAROUSEL INDICATORS (v5.40.0) ============ */
/* High visibility progress-style indicators - never barely visible */
.hero-carousel__dot,
.carousel__dot,
.featured-carousel__dot,
.hero-carousel__indicator,
.carousel__indicator {
    width: 40px;
    height: 5px;
    min-width: 40px;
    min-height: 5px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.35);
    border: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0;
    margin: 0;
    position: relative;
    overflow: hidden;
}

/* Hover state - brighter */
.hero-carousel__dot:hover,
.carousel__dot:hover,
.featured-carousel__dot:hover,
.hero-carousel__indicator:hover,
.carousel__indicator:hover {
    background: rgba(255, 255, 255, 0.6);
    transform: scaleY(1.2);
}

/* Active state - full white with progress animation */
.hero-carousel__dot.is-active,
.carousel__dot.is-active,
.featured-carousel__dot.is-active,
.hero-carousel__indicator.is-active,
.carousel__indicator.is-active {
    background: rgba(255, 255, 255, 0.3);
    width: 60px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Progress bar fill animation on active indicator */
.hero-carousel__dot.is-active::after,
.carousel__dot.is-active::after,
.featured-carousel__dot.is-active::after,
.hero-carousel__indicator.is-active::after,
.carousel__indicator.is-active::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0%;
    background: #FFFFFF;
    border-radius: inherit;
    animation: carouselProgress 5s linear forwards;
}

@keyframes carouselProgress {
    from { width: 0%; }
    to { width: 100%; }
}

/* ============ RESPONSIVE CAROUSEL CONTROLS ============ */

/* Tablet adjustments (768px) */
@media (max-width: 768px) {
    .hero-carousel__controls,
    .carousel__controls,
    .featured-carousel__controls {
        bottom: 0.75rem;
        padding: 0 0.75rem;
    }
    
    .hero-carousel__button,
    .featured-carousel__button,
    .carousel__button,
    .hero-carousel__prev,
    .hero-carousel__next {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px;
        min-height: 32px;
        font-size: 0.75rem !important;
    }
    
    .hero-carousel__button svg,
    .featured-carousel__button svg,
    .carousel__button svg {
        width: 14px !important;
        height: 14px !important;
    }
    
    .hero-carousel__dots,
    .carousel__dots,
    .featured-carousel__dots,
    .hero-carousel__indicators,
    .carousel__indicators {
        gap: 0.25rem;
    }
    
    .hero-carousel__dot,
    .carousel__dot,
    .featured-carousel__dot,
    .hero-carousel__indicator,
    .carousel__indicator {
        width: 32px;
        height: 4px;
        min-width: 32px;
    }
    
    .hero-carousel__dot.is-active,
    .carousel__dot.is-active,
    .featured-carousel__dot.is-active,
    .hero-carousel__indicator.is-active,
    .carousel__indicator.is-active {
        width: 48px;
    }
}

/* Mobile adjustments (480px and below) */
@media (max-width: 480px) {
    .hero-carousel__controls,
    .carousel__controls,
    .featured-carousel__controls {
        bottom: 0.5rem;
        padding: 0 0.5rem;
    }
    
    .hero-carousel__button,
    .featured-carousel__button,
    .carousel__button,
    .hero-carousel__prev,
    .hero-carousel__next {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px;
        min-height: 28px;
        font-size: 0.625rem !important;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1) !important;
    }
    
    .hero-carousel__button svg,
    .featured-carousel__button svg,
    .carousel__button svg {
        width: 12px !important;
        height: 12px !important;
    }
    
    .hero-carousel__dot,
    .carousel__dot,
    .featured-carousel__dot,
    .hero-carousel__indicator,
    .carousel__indicator {
        width: 24px;
        height: 3px;
        min-width: 24px;
    }
    
    .hero-carousel__dot.is-active,
    .carousel__dot.is-active,
    .featured-carousel__dot.is-active,
    .hero-carousel__indicator.is-active,
    .carousel__indicator.is-active {
        width: 36px;
    }
}

/* Mobile carousel adjustments */
@media (max-width: 767px) {
    .hero-carousel__prev,
    .hero-carousel__next,
    .carousel__prev,
    .carousel__next {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }
    
    .hero-carousel__prev,
    .carousel__prev {
        left: var(--space-2);
    }
    
    .hero-carousel__next,
    .carousel__next {
        right: var(--space-2);
    }
}

/* ========================================
   TEXT CONTRAST & VISIBILITY FIXES
   ======================================== */

/* Ensure text is always readable on backgrounds */
.aiwp-hero-overlay,
.brand-hero,
.hero-section,
[class*="hero"] {
    position: relative;
}

.aiwp-hero-overlay::after,
.brand-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    /* NO GRADIENTS: use a solid overlay to preserve text contrast on images */
    background: rgba(var(--color-black-rgb), 0.45);
    pointer-events: none;
    z-index: 1;
}

.aiwp-hero-overlay > *,
.brand-hero > * {
    position: relative;
    z-index: 2;
}

/* Force readable text colors on dark backgrounds */
.dark-bg,
.hero-dark,
[style*="background-color: #1"],
[style*="background-color: #2"],
[style*="background-color: #3"],
[style*="background: #1"],
[style*="background: #2"],
[style*="background: #3"] {
    color: rgba(var(--color-white-rgb), 0.95);
}

.dark-bg h1, .dark-bg h2, .dark-bg h3, .dark-bg h4,
.hero-dark h1, .hero-dark h2, .hero-dark h3, .hero-dark h4 {
    color: white;
}

.dark-bg p, .dark-bg li, .dark-bg span,
.hero-dark p, .hero-dark li, .hero-dark span {
    color: rgba(var(--color-white-rgb), 0.9);
}

/* Light text on primary color backgrounds */
.bg-primary,
[style*="background-color: var(--color-primary)"],
[style*="background: var(--color-primary)"] {
    color: white;
}

/* ========================================
   RESPONSIVE TABLE OVERFLOW FIX (v5.49.0)
   ======================================== */

/* Wrap tables in scrollable container */
.table-responsive,
.aiwp-table-wrapper {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ALL tables should scroll on mobile, not clip */
table,
.pc3-table {
    max-width: 100%;
}

@media (max-width: 767px) {
    /* Force table container to scroll */
    table,
    .pc3-table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Maintain internal table structure */
    table thead,
    table tbody,
    table tr,
    .pc3-table thead,
    .pc3-table tbody,
    .pc3-table tr {
        display: table;
        width: 100%;
        min-width: 450px; /* Force scroll when narrower than content */
    }
    
    /* Smaller padding on mobile */
    table th,
    table td {
        padding: 0.5rem 0.75rem;
        font-size: 0.8125rem;
        white-space: nowrap;
    }
    
    /* Visual scroll hint on mobile */
    .pc3-table::after,
    table::after {
        content: '← scroll →';
        display: block;
        text-align: center;
        font-size: 0.6875rem;
        color: var(--color-text-muted, #666);
        padding: 0.25rem 0;
        opacity: 0.6;
    }
}

/* ========================================
   CARD LAYOUT FIXES
   ======================================== */

/* Ensure cards don't cause horizontal overflow */
.entry-card,
.aiwp-card,
.card,
.post-card {
    max-width: 100%;
    overflow: hidden;
}

/* Card image aspect ratio consistency */
.entry-card__image,
.aiwp-card__image,
.card-image {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    width: 100%;
}

/* ========================================
   FOOTER LINK FIXES
   ======================================== */

/* Ensure footer links are visible */
.site-footer a,
.footer-links a {
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.site-footer a:hover,
.footer-links a:hover {
    color: var(--color-primary);
}

[data-theme="dark"] .site-footer a {
    color: var(--color-text-secondary-dark);
}

[data-theme="dark"] .site-footer a:hover {
    color: var(--color-primary-light);
}

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {
    .site-header,
    .nav-toggle,
    .theme-toggle,
    .newsletter-cta,
    .reading-progress,
    .carousel__nav,
    .hero-carousel__nav {
        display: none !important;
    }
    
    body {
        color: black;
        background: white;
    }
    
    a {
        text-decoration: underline;
    }
}

/* ========================================
   FOCUS VISIBLE IMPROVEMENTS
   ======================================== */

/* Better keyboard focus indicators */
:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

button:focus-visible,
a:focus-visible,
input:focus-visible:not(.header-search__input),
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--color-primary-15);
}

.site-header .header-search__button:focus,
.site-header .header-search__button:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* Header search must look like a single Google-style pill.
   Keep focus styling on `.header-search:focus-within` (container), not on the input itself. */
.site-header .header-search__input:focus,
.site-header .header-search__input:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* Remove default outlines when using mouse */
:focus:not(:focus-visible) {
    outline: none;
}

/* ========================================
   HIDE DUPLICATE TOOLS MENU ITEM
   Keep "Get Free Tools" (usually has "free" in text or different URL)
   ======================================== */

/* Hide menu items that contain just "Tools" but not "Get Free Tools" */
.primary-nav .menu > li > a[href*="/tools"]:not([href*="get-free"]):not([href*="free-tools"]) {
    /* Only hide if there's another Tools link - use JS for this */
}

/* CSS to handle duplicate menu hiding via class that JS will add */
.primary-nav .menu > li.aiwp-hide-menu-item {
    display: none !important;
}

/* ========================================
   PUBLIC THEME CUSTOMIZER PANEL
   Floating panel near chat for visitors
   ======================================== */

.aiwp-theme-panel {
    position: fixed;
    bottom: 100px;
    right: 24px;
    width: 280px;
    max-height: 400px;
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-2xl);
    z-index: 9990;
    display: none;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--color-border);
    transform: translateY(20px) scale(0.95);
    opacity: 0;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease;
}

.aiwp-theme-panel.is-open {
    display: flex;
    transform: translateY(0) scale(1);
    opacity: 1;
}

.aiwp-theme-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4);
    background: var(--color-primary);
    /* Accent-aware text color (prevents white-on-light-accent invisibility) */
    color: #FFFFFF;
    color: var(--smart-btn-text-on-primary, #FFFFFF);
    -webkit-text-fill-color: #FFFFFF;
    -webkit-text-fill-color: var(--smart-btn-text-on-primary, #FFFFFF);
}

.aiwp-theme-panel__title {
    font-size: 0.9375rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.aiwp-theme-panel__close {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: var(--space-1);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    transition: background 0.2s;
}

.aiwp-theme-panel__close:hover {
    background: rgba(255, 255, 255, 0.2);
}

.aiwp-theme-panel__body {
    padding: var(--space-4);
    overflow-y: auto;
}

.aiwp-theme-panel__section {
    margin-bottom: var(--space-4);
}

.aiwp-theme-panel__section:last-child {
    margin-bottom: 0;
}

.aiwp-theme-panel__label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: var(--space-2);
}

/* Preset Theme Colors Grid */
.aiwp-theme-presets {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-2);
}

.aiwp-theme-preset {
    width: 100%;
    aspect-ratio: 1;
    border-radius: var(--radius-lg);
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.aiwp-theme-preset:hover {
    transform: scale(1.1);
    box-shadow: var(--shadow-md);
}

.aiwp-theme-preset.is-active {
    border-color: var(--color-text);
    box-shadow: 0 0 0 3px var(--color-primary-15);
}

.aiwp-theme-preset.is-active::after {
    content: '✓';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 0.75rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Custom Color Picker */
.aiwp-color-picker-wrapper {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.aiwp-color-picker {
    width: 48px;
    height: 48px;
    border: none;
    border-radius: var(--radius-lg);
    cursor: pointer;
    padding: 0;
    background: none;
}

.aiwp-color-picker::-webkit-color-swatch-wrapper {
    padding: 0;
}

.aiwp-color-picker::-webkit-color-swatch {
    border-radius: var(--radius-lg);
    border: 2px solid var(--color-border);
}

.aiwp-color-value {
    flex: 1;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    text-transform: uppercase;
    color: var(--color-text);
    background: var(--color-surface-alt);
}

/* Reset Button */
.aiwp-theme-panel__reset {
    width: 100%;
    padding: var(--space-3);
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    color: var(--color-text);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
}

.aiwp-theme-panel__reset:hover {
    background: var(--color-error-subtle);
    border-color: var(--color-error);
    color: var(--color-error);
}

/* Theme Panel Trigger Button */
.aiwp-theme-trigger {
    position: fixed;
    bottom: 100px;
    right: 80px;
    width: 48px;
    height: 48px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9989;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-lg);
    color: var(--color-text);
    font-size: 1.25rem;
}

.aiwp-theme-trigger:hover {
    transform: scale(1.1);
    background: var(--color-primary);
    /* Accent-aware text color (prevents white-on-light-accent invisibility) */
    color: #FFFFFF;
    color: var(--smart-btn-text-on-primary, #FFFFFF);
    -webkit-text-fill-color: #FFFFFF;
    -webkit-text-fill-color: var(--smart-btn-text-on-primary, #FFFFFF);
    border-color: var(--color-primary);
}

/* Dark mode adjustments */
[data-theme="dark"] .aiwp-theme-panel {
    /* Use the same tokens; theme already swaps these in dark mode */
    background: var(--color-surface);
    border-color: var(--color-border);
}

[data-theme="dark"] .aiwp-theme-panel__label {
    color: var(--color-text);
}

[data-theme="dark"] .aiwp-color-value {
    background: var(--color-bg);
    color: var(--color-text);
}

/* ========================================
   HEADER ICON + MOBILE NAV FIXES
   ======================================== */

/* Some deployments have shown header SVG icons collapsing to ~2px wide.
   Force deterministic sizing for the header action icons (search + subscribe) on mobile.
   This is a last-resort override (kept here because ui-fixes is meant to stabilize UI regressions). */
@media (max-width: 959px) {
    .site-header__actions .header-search-toggle,
    .site-header__actions .newsletter-cta {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;
        padding: 0 !important;
        border-radius: 14px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 1 !important;
        -webkit-tap-highlight-color: transparent;
    }

    .site-header__actions .header-search-toggle {
        background: var(--color-surface, #fff) !important;
        border: 1.5px solid var(--color-border, rgba(0, 0, 0, 0.12)) !important;
        color: var(--color-text, #1a1a1a) !important;
    }

    .site-header__actions .newsletter-cta {
        background: var(--color-primary, #0066CC) !important;
        border: none !important;
        color: var(--color-text-inverse, #fff) !important;
        box-shadow: 0 2px 8px rgba(var(--color-primary-rgb), 0.30) !important;
    }

    .site-header__actions .header-search-toggle svg,
    .site-header__actions .newsletter-cta svg {
        width: 24px !important;
        height: 24px !important;
        display: block !important;
        flex: 0 0 auto !important;
    }
}

/* Mobile drawer: keep the current page item readable.
   (We saw "Home" rendering as white text on a transparent/white card.) */
@media (max-width: 959px) {
    #primary-navigation.is-open .menu > li > a {
        background: var(--color-surface, #fff) !important;
        color: var(--color-text, #1a1a1a) !important;
        border: 1px solid rgba(var(--color-black-rgb), 0.10) !important;
    }

    #primary-navigation.is-open .menu > li.current-menu-item > a,
    #primary-navigation.is-open .menu > li.current_page_item > a {
        background: rgba(var(--color-primary-rgb), 0.10) !important;
        color: var(--color-primary, #0066CC) !important;
        border-color: rgba(var(--color-primary-rgb), 0.28) !important;
    }
}

/* ========================================
   QUOTE-TO-TWEET (TEXT SELECTION)
   ======================================== */

/* The theme uses broad content fix selectors like `[class*="quote"]`.
   The selection tweet button intentionally uses an `aiwp-` prefixed class
   to avoid unintended styling collisions and ensure consistent contrast. */
.aiwp-selection-tweet {
    position: fixed;
    display: none;
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.01em;
    line-height: 1;
    text-decoration: none;

    /* Match the canonical share styling (X official black) */
    background: #000000 !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    border: 1px solid rgba(0, 0, 0, 0.25) !important;
    box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.18),
        0 4px 10px rgba(0, 0, 0, 0.12),
        0 0 16px rgba(0, 0, 0, 0.12) !important;

    z-index: 1200;
}

.aiwp-selection-tweet.is-visible {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.aiwp-selection-tweet:hover {
    background: #1a1a1a !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

.aiwp-selection-tweet:focus-visible {
    outline: 3px solid rgba(255, 255, 255, 0.95) !important;
    outline-offset: 3px !important;
}

@media (max-width: 768px) {
    .aiwp-selection-tweet {
        font-size: 14px;
        padding: 10px 14px;
        border-radius: 12px;
    }
}


/* ========== symmetry-system.css ========== */
/* ========================================
   SYMMETRY SYSTEM v1.0.0
   Cross-viewport spacing consistency
   
   This module ensures visual balance across
   all viewports (desktop, tablet, mobile)
   
   PRINCIPLES:
   1. Equal padding on left/right for containers
   2. Consistent vertical rhythm
   3. Grid proportions that adapt elegantly
   4. No asymmetric layouts that break on resize
   ======================================== */

/* ========================================
   SYMMETRY VARIABLES
   Use these for consistent spacing
   ======================================== */
:root {
    /* Section padding - symmetric left/right */
    --symmetry-section-x: clamp(var(--space-4), 5vw, var(--space-10));
    --symmetry-section-y: clamp(var(--space-10), 8vw, var(--space-20));
    
    /* Container max-widths for different content types */
    --symmetry-narrow: 680px;   /* Prose content */
    --symmetry-medium: 960px;   /* Cards, grids */
    --symmetry-wide: 1200px;    /* Full layouts */
    --symmetry-full: 1600px;    /* Maximum width */
    
    /* Grid gap scaling */
    --symmetry-gap-sm: clamp(var(--space-3), 2vw, var(--space-4));
    --symmetry-gap-md: clamp(var(--space-4), 3vw, var(--space-6));
    --symmetry-gap-lg: clamp(var(--space-6), 4vw, var(--space-10));
}

/* ========================================
   SYMMETRIC CONTAINERS
   ======================================== */

/* Base symmetric container */
.sym-container {
    width: 100%;
    max-width: var(--symmetry-full);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--symmetry-section-x);
    padding-right: var(--symmetry-section-x);
}

.sym-container--narrow {
    max-width: var(--symmetry-narrow);
}

.sym-container--medium {
    max-width: var(--symmetry-medium);
}

.sym-container--wide {
    max-width: var(--symmetry-wide);
}

/* ========================================
   SYMMETRIC GRIDS
   Grids that maintain proportions across viewports
   ======================================== */

/* 2-column equal grid */
.sym-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--symmetry-gap-md);
}

/* 3-column equal grid */
.sym-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--symmetry-gap-md);
}

/* 4-column equal grid */
.sym-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--symmetry-gap-md);
}

/* Auto-fit grid that maintains symmetry */
.sym-grid-auto {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: var(--symmetry-gap-md);
}

/* Split layout (equal halves) */
.sym-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--symmetry-gap-lg);
    align-items: center;
}

/* Split layout with slight asymmetry for content hierarchy */
.sym-split--content {
    grid-template-columns: 1.1fr 0.9fr;
}

/* ========================================
   RESPONSIVE BREAKDOWNS
   Graceful degradation for smaller screens
   ======================================== */

/* Tablet: 768px - 1023px */
@media (max-width: 1023px) {
    .sym-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .sym-grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Last item in 3-column spans full on tablet */
    .sym-grid-3 > *:nth-child(3):last-child {
        grid-column: span 2;
    }
    
    .sym-split,
    .sym-split--content {
        grid-template-columns: 1fr 1fr;
        gap: var(--symmetry-gap-md);
    }
}

/* Mobile: < 768px */
@media (max-width: 767px) {
    .sym-grid-2,
    .sym-grid-3,
    .sym-grid-4,
    .sym-split,
    .sym-split--content {
        grid-template-columns: 1fr;
        gap: var(--symmetry-gap-sm);
    }
    
    /* Reset span on mobile */
    .sym-grid-3 > *:nth-child(3):last-child {
        grid-column: auto;
    }
}

/* ========================================
   SYMMETRIC SECTIONS
   Consistent vertical rhythm
   ======================================== */

.sym-section {
    padding-top: var(--symmetry-section-y);
    padding-bottom: var(--symmetry-section-y);
}

.sym-section--sm {
    padding-top: calc(var(--symmetry-section-y) * 0.5);
    padding-bottom: calc(var(--symmetry-section-y) * 0.5);
}

.sym-section--lg {
    padding-top: calc(var(--symmetry-section-y) * 1.5);
    padding-bottom: calc(var(--symmetry-section-y) * 1.5);
}

/* ========================================
   SYMMETRIC SPACING UTILITIES
   ======================================== */

/* Symmetric margin (both sides equal) */
.sym-mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.sym-mx-section {
    margin-left: var(--symmetry-section-x);
    margin-right: var(--symmetry-section-x);
}

/* Symmetric padding (both sides equal) */
.sym-px-section {
    padding-left: var(--symmetry-section-x);
    padding-right: var(--symmetry-section-x);
}

/* ========================================
   FLEX SYMMETRY UTILITIES
   ======================================== */

/* Centered flex container */
.sym-flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Space between with equal distribution */
.sym-flex-spread {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Wrap with consistent gap */
.sym-flex-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: var(--symmetry-gap-sm);
}

/* ========================================
   ALIGNMENT HELPERS
   ======================================== */

/* Center text on all viewports */
.sym-text-center {
    text-align: center;
}

/* Left on desktop, center on mobile */
.sym-text-responsive {
    text-align: left;
}

@media (max-width: 767px) {
    .sym-text-responsive {
        text-align: center;
    }
}

/* ========================================
   HOMEPAGE SPECIFIC FIXES
   Ensure home sections have consistent spacing
   ======================================== */

/* Fix archive-hero spacing symmetry */
.archive-hero--home {
    padding-left: var(--symmetry-section-x);
    padding-right: var(--symmetry-section-x);
}

/* Fix archive-metrics section symmetry */
.archive-metrics {
    padding-left: var(--symmetry-section-x);
    padding-right: var(--symmetry-section-x);
}

.archive-metrics__grid {
    gap: var(--symmetry-gap-md);
}

/* Fix trending-palette symmetry */
.trending-palette {
    padding-left: var(--symmetry-section-x);
    padding-right: var(--symmetry-section-x);
}

.trending-palette__grid {
    gap: var(--symmetry-gap-md);
}

/* Fix posts-section symmetry */
.posts-section {
    padding-left: var(--symmetry-section-x);
    padding-right: var(--symmetry-section-x);
}

/* Fix newsletter-section symmetry */
.newsletter-section {
    padding-left: var(--symmetry-section-x);
    padding-right: var(--symmetry-section-x);
}

/* ========================================
   CARD GRID SYMMETRY
   Ensure cards fill grid evenly
   ======================================== */

/* Prevent orphan cards on last row */
.sym-grid-fill {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: var(--symmetry-gap-md);
}

/* Force equal height cards */
.sym-grid-fill > * {
    height: 100%;
}

/* ========================================
   DARK MODE ADJUSTMENTS
   (No color changes, just spacing consistency)
   Dark mode inherits all spacing from light mode
   ======================================== */

/* ========================================
   DEBUG MODE (enable with data-debug="true")
   ======================================== */

[data-debug="true"] .sym-container,
[data-debug="true"] .sym-section,
[data-debug="true"] [class*="sym-grid"] {
    outline: 2px dashed rgba(255, 0, 0, 0.3);
}

[data-debug="true"] .sym-container::after {
    content: 'sym-container';
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(255, 0, 0, 0.7);
    color: white;
    font-size: 10px;
    padding: 2px 4px;
}


/* ========== looker-infographics.css ========== */
/* ========================================
   LOOKER STUDIO INFOGRAPHIC STYLES
   Google Looker Studio inspired data visualization components
   Version: 1.0.0
   ======================================== */

/* Base card container */
.looker-card {
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e0e0e0);
    border-radius: 16px; /* Increased radius for modern look */
    padding: 32px; /* More breathing room */
    margin: 3rem auto;
    max-width: 800px;
    font-family: var(--font-sans, "Inter", "Roboto", sans-serif);
    box-shadow: 0 10px 30px rgba(0,0,0,0.04); /* Softer, deeper shadow */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.looker-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.08);
}

[data-theme="dark"] .looker-card {
    background: var(--color-surface, #1a1a2e);
    border-color: var(--color-border, #3a3a4a);
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

/* Card title */
.looker-title {
    color: var(--color-text, #3c4043);
    font-size: 24px; /* Larger title */
    font-weight: 700;
    margin-bottom: 32px;
    text-align: center;
    letter-spacing: -0.02em;
    line-height: 1.3;
}

[data-theme="dark"] .looker-title {
    color: var(--color-text, #f0f0f0);
}

/* Bar chart container */
.looker-bar-chart {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
    overflow: visible;
    max-width: 700px;
    margin: 0 auto;
}

/* Bar row */
.looker-bar-row {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Bar label */
.looker-bar-label {
    width: 130px;
    min-width: 130px;
    font-size: 14px;
    color: var(--color-text-muted, #3c4043);
    text-align: right;
    flex-shrink: 0;
    font-weight: 500;
}

[data-theme="dark"] .looker-bar-label {
    color: var(--color-text-muted, #b0b0b0);
}

/* Bar track - v5.27.6: increased height for WCAG 2.1 touch target (44px min) */
.looker-bar-track {
    flex: 1;
    min-width: 0;
    background: var(--color-surface-alt, #f1f3f4);
    height: 44px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.06);
    position: relative;
    border: 1px solid var(--color-border, #e0e0e0);
}

[data-theme="dark"] .looker-bar-track {
    background: var(--color-surface-alt, #2a2a3e);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.2);
}

/* Bar fill - v5.28.0: min dimensions ensure touch target even before animation */
.looker-bar-fill {
    height: 100%;
    min-height: 44px; /* v5.28.0: Explicit height for touch target compliance */
    border-radius: 6px; /* Slightly softer corners */
    transition: width 1.2s cubic-bezier(0.22, 1, 0.36, 1), transform 0.2s ease, box-shadow 0.2s ease; /* Smoother easing */
    position: relative;
    overflow: hidden;
    transform: translateZ(0);
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    cursor: pointer;
    will-change: width, transform;
}

.looker-bar-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255,255,255,0.18);
    opacity: 0.6;
}

.looker-bar-row:hover .looker-bar-fill,
.looker-bar-fill:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.16);
    outline: none;
}

.looker-bar-fill:focus-visible {
    outline: 2px solid var(--color-primary, #0066CC);
    outline-offset: 2px;
}

/* Bar value */
.looker-bar-value {
    width: 55px;
    min-width: 55px;
    font-size: 14px;
    color: var(--color-text, #3c4043);
    font-weight: 700;
    flex-shrink: 0;
    padding-left: 8px;
    text-align: left;
}

/* Fix WordPress p tag wrapping in bar values */
.looker-bar-chart p,
.looker-bar-row p,
.looker-bar-value p {
    margin: 0 !important;
    padding: 0 !important;
    display: inline !important;
    font-size: inherit !important;
    color: inherit !important;
    font-weight: inherit !important;
}

/* Ensure bar rows don't break */
.looker-bar-row * {
    flex-shrink: 0;
}

[data-theme="dark"] .looker-bar-value {
    color: var(--color-text, #f0f0f0);
}

/* Google-style colors (solid, no gradients) */
.looker-color-blue { background: #4285F4; }
.looker-color-red { background: #DB4437; }
.looker-color-yellow { background: #F4B400; }
.looker-color-green { background: #0F9D58; }
.looker-color-purple { background: #9C27B0; }
.looker-color-teal { background: #009688; }

/* Stats grid container - 2x2 on desktop/tablet, 1 column on mobile
   CRITICAL: Cross-viewport parity - whatever looks good on desktop must translate to tablet/mobile */
.looker-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 2.5rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    /* v5.28.0: Ensure consistent centering across all viewports */
    width: 100%;
    box-sizing: border-box;
}

/* FIX: Force child stat boxes to be visible when parent grid is visible
   The animation system only adds .anim-visible to the parent container,
   but child elements with data-anim also start at opacity: 0.
   This ensures children are always visible when their parent is visible. */
.looker-stats-grid.anim-visible .looker-stat-box,
.synth-stats-grid.anim-visible .looker-stat-box,
.looker-stats-grid.anim-visible [data-anim],
.synth-stats-grid.anim-visible [data-anim] {
    opacity: 1 !important;
    transform: none !important;
}

/* CRITICAL FIX: Override animation initial state for stat boxes inside grids
   This ensures stat boxes are ALWAYS visible regardless of animation state.
   The data-anim attribute sets opacity: 0 by default in modern-animations.css */
.looker-stats-grid .looker-stat-box,
.synth-stats-grid .looker-stat-box,
.looker-stats-grid [data-anim],
.synth-stats-grid [data-anim] {
    opacity: 1 !important;
    transform: none !important;
}

/* Individual stat box */
.looker-stat-box {
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e0e0e0);
    border-radius: 16px;
    padding: 28px 20px;
    text-align: center;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    position: relative;
    overflow: hidden;
}

.looker-stat-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--color-primary, #4285F4);
    transform: scaleX(0);
    transition: transform 0.25s ease;
}

.looker-stat-box:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.1);
    border-color: var(--color-primary, #4285F4);
}

.looker-stat-box:hover::before {
    transform: scaleX(1);
}

[data-theme="dark"] .looker-stat-box {
    background: var(--color-surface, #1a1a2e);
    border-color: var(--color-border, #3a3a4a);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

[data-theme="dark"] .looker-stat-box:hover {
    box-shadow: 0 8px 16px rgba(0,0,0,0.4);
    border-color: var(--color-primary, #8ab4f8);
}

/* Stat value */
.looker-stat-value {
    font-size: 42px;
    color: var(--color-primary, #4285F4);
    font-weight: 800;
    margin-bottom: 10px;
    letter-spacing: -1px;
    line-height: 1;
}

/* Stat label */
.looker-stat-label {
    font-size: 12px;
    color: var(--color-text-muted, #70757a);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 600;
}

[data-theme="dark"] .looker-stat-label {
    color: var(--color-text-muted, #a0a0a0);
}

/* Inline image styles for posts */
.aiwp-inline-image {
    margin: 2.5rem 0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease;
}

.aiwp-inline-image:hover {
    transform: scale(1.01);
}

.aiwp-inline-image img {
    width: 100%;
    height: auto;
    display: block;
}

.aiwp-inline-caption {
    font-size: 0.9rem;
    color: var(--color-text-muted, #666);
    text-align: center;
    margin-top: 0.75rem;
    font-style: italic;
    padding: 0.5rem;
    border-bottom: 1px solid var(--color-border, #eee);
    display: inline-block;
    width: 100%;
}

[data-theme="dark"] .aiwp-inline-caption {
    color: var(--color-text-muted, #a0a0a0);
    border-color: var(--color-border, #333);
}

/* Blockquote Enhancements */
blockquote {
    border-left: 5px solid var(--color-primary, #4285F4);
    background: var(--color-surface-alt, #f8f9fa);
    padding: 2rem 2.5rem;
    margin: 2.5rem auto;
    max-width: 800px;
    border-radius: 0 12px 12px 0;
    font-style: italic;
    color: var(--color-text, #333);
    position: relative;
    box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}

blockquote p {
    margin: 0 0 0.75rem 0;
    font-size: 1.15rem;
    line-height: 1.7;
}

blockquote cite {
    display: block;
    margin-top: 1rem;
    font-size: 0.95rem;
    font-style: normal;
    font-weight: 600;
    color: var(--color-primary, #4285F4);
}

[data-theme="dark"] blockquote {
    background: rgba(66, 133, 244, 0.1);
    color: var(--color-text, #e0e0e0);
}

blockquote::before {
    content: '“';
    position: absolute;
    top: 0.5rem;
    left: 1rem;
    font-size: 3rem;
    color: var(--color-primary, #4285F4);
    opacity: 0.2;
    font-family: serif;
    line-height: 1;
}

/* Responsive adjustments - TABLET (577px - 768px): Keep 2x2 grid with adjusted sizing */
@media (max-width: 768px) {
    /* v5.28.0: Tablet gets 2x2 grid like desktop, just slightly smaller max-width 
       Using !important to ensure no other rules can override the 2-column layout */
    .looker-stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        max-width: 500px !important;
        gap: 16px !important;
    }
    
    .looker-bar-label {
        width: 100px;
        min-width: 100px;
        font-size: 13px;
    }
    
    .looker-bar-value {
        width: 55px;
        min-width: 55px;
        font-size: 13px;
    }
    
    .looker-stat-value {
        font-size: 32px;
    }
    
    .looker-stat-label {
        font-size: 11px;
        letter-spacing: 1.2px;
    }
    
    .looker-stat-box {
        padding: 24px 16px;
    }
}

/* v5.28.0: MOBILE (<=576px) - Single column layout for narrow screens */
@media (max-width: 576px) {
    .looker-stats-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        max-width: 100% !important;
        padding: 0 8px;
    }
    
    .looker-bar-row {
        flex-wrap: wrap;
        gap: 8px;
        min-height: 44px; /* Touch target */
    }
    
    .looker-bar-label {
        width: 100%;
        text-align: left;
        margin-bottom: 4px;
        font-size: 13px;
    }
    
    .looker-bar-track {
        flex: 1;
        min-width: calc(100% - 70px);
        height: 44px; /* WCAG touch target */
    }
    
    .looker-bar-value {
        width: auto;
        min-width: 60px;
        font-size: 13px;
        font-weight: 700;
    }
    
    /* Stat boxes need adequate touch area */
    .looker-stat-box {
        min-height: 100px;
        padding: 20px 16px;
    }
    
    .looker-stat-value {
        font-size: 36px;
    }
    
    .looker-stat-label {
        font-size: 11px;
        letter-spacing: 1px;
    }
}


/* ========== universal-charts.css ========== */
/**
 * Universal Charts CSS Module v1.0.0
 * 
 * A unified, elegant charting system for all visualization types.
 * Supports: horizontal bars, vertical bars, donut charts, comparison grids, sparklines
 * 
 * Design principles:
 * - NO gradients (flat design, solid colors only)
 * - WCAG AA compliant (contrast, touch targets)
 * - Responsive (desktop -> tablet -> mobile)
 * - Dark mode support
 * - Print-friendly
 * - Animated with reduced-motion support
 * 
 * @since v5.34.0
 */

/* ==========================================================================
   CSS CUSTOM PROPERTIES (Chart Design Tokens)
   ========================================================================== */

:root {
    /* Chart dimensions */
    --chart-height: 200px;
    --chart-bar-gap: 1.5rem;
    --chart-bar-min-width: 60px;
    --chart-bar-max-width: 100px;
    --chart-track-height: 12px;
    --chart-touch-target: 44px;
    
    /* Animation */
    --chart-animation-duration: 0.8s;
    --chart-animation-easing: cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Colors - Google Looker palette (solid, no gradients) */
    --chart-color-blue: #4285F4;
    --chart-color-red: #EA4335;
    --chart-color-yellow: #FBBC04;
    --chart-color-green: #34A853;
    --chart-color-purple: #9334E6;
    --chart-color-teal: #009688;
    --chart-color-orange: #F59E0B;
    --chart-color-pink: #EC4899;
    --chart-color-indigo: #6366F1;
    --chart-color-gray: #6B7280;
    
    /* Status colors */
    --chart-color-success: #10B981;
    --chart-color-warning: #F59E0B;
    --chart-color-danger: #EF4444;
    --chart-color-info: #3B82F6;
    
    /* Surface colors */
    --chart-surface: var(--color-surface, #FFFFFF);
    --chart-surface-alt: var(--color-surface-alt, #F8F9FA);
    --chart-border: var(--color-border, rgba(0, 0, 0, 0.08));
    --chart-text: var(--color-text, #1A1A1A);
    --chart-text-muted: var(--color-text-secondary, #6B7280);
}

/* Dark mode tokens */
[data-theme="dark"] {
    --chart-surface: var(--color-surface, #1E293B);
    --chart-surface-alt: var(--color-surface-alt, #0F172A);
    --chart-border: var(--color-border, #334155);
    --chart-text: var(--color-text, #F1F5F9);
    --chart-text-muted: var(--color-text-secondary, #94A3B8);
}

/* ==========================================================================
   BASE CHART CONTAINER
   ========================================================================== */

.uv-chart {
    position: relative;
    margin: var(--space-8, 2rem) auto;
    padding: var(--space-6, 1.5rem);
    background: var(--chart-surface);
    border: 1px solid var(--chart-border);
    border-radius: var(--radius-xl, 16px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    max-width: 100%;
    overflow: visible;
}

.uv-chart__title {
    margin: 0 0 var(--space-4, 1rem) 0;
    font-size: var(--font-size-lg, 1.25rem);
    font-weight: 700;
    color: var(--chart-text);
    text-align: center;
    letter-spacing: -0.02em;
}

.uv-chart__subtitle {
    margin: calc(var(--space-2, 0.5rem) * -1) 0 var(--space-4, 1rem) 0;
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--chart-text-muted);
    text-align: center;
}

.uv-chart__source {
    margin-top: var(--space-4, 1rem);
    padding-top: var(--space-3, 0.75rem);
    border-top: 1px solid var(--chart-border);
    font-size: var(--font-size-xs, 0.75rem);
    color: var(--chart-text-muted);
    font-style: italic;
}

/* ==========================================================================
   HORIZONTAL BAR CHART
   ========================================================================== */

.uv-chart--horizontal {
    max-width: 800px;
}

.uv-hbar {
    display: flex;
    flex-direction: column;
    gap: var(--space-3, 0.75rem);
}

.uv-hbar__row {
    display: flex;
    align-items: center;
    gap: var(--space-4, 1rem);
    min-height: var(--chart-touch-target);
}

.uv-hbar__label {
    flex: 0 0 120px;
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: 500;
    color: var(--chart-text);
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.uv-hbar__track {
    flex: 1;
    height: var(--chart-track-height);
    background: var(--chart-surface-alt);
    border-radius: var(--radius-full, 9999px);
    overflow: hidden;
    position: relative;
    border: 1px solid var(--chart-border);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06);
}

.uv-hbar__fill {
    height: 100%;
    border-radius: var(--radius-full, 9999px);
    background: var(--bar-color, var(--chart-color-blue));
    position: relative;
    transition: width var(--chart-animation-duration) var(--chart-animation-easing);
    /* 3D effect without gradients */
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -2px 4px rgba(0, 0, 0, 0.15),
        0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Highlight effect on top */
.uv-hbar__fill::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 45%;
    background: rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-full, 9999px) var(--radius-full, 9999px) 0 0;
    pointer-events: none;
}

.uv-hbar__value {
    flex: 0 0 60px;
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: 700;
    color: var(--chart-text);
    text-align: left;
}

/* Hover/focus states */
.uv-hbar__row:hover .uv-hbar__fill,
.uv-hbar__fill:focus-visible {
    transform: scaleY(1.1);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        inset 0 -2px 4px rgba(0, 0, 0, 0.2),
        0 4px 8px rgba(0, 0, 0, 0.15);
}

.uv-hbar__fill:focus-visible {
    outline: 2px solid var(--color-primary, #0066CC);
    outline-offset: 2px;
}

/* ==========================================================================
   VERTICAL BAR CHART
   ========================================================================== */

.uv-chart--vertical {
    max-width: 900px;
}

.uv-vbar {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: var(--chart-bar-gap);
    height: var(--chart-height);
    padding: var(--space-4, 1rem);
    position: relative;
}

/* Y-axis gridlines */
.uv-vbar::before {
    content: "";
    position: absolute;
    top: var(--space-4, 1rem);
    bottom: var(--space-4, 1rem);
    left: var(--space-4, 1rem);
    right: var(--space-4, 1rem);
    background: transparent;
    border-top: 1px solid var(--chart-border);
    border-bottom: 1px solid var(--chart-border);
    pointer-events: none;
    z-index: 0;
}

.uv-vbar__group {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    height: 100%;
    min-width: var(--chart-bar-min-width);
    max-width: var(--chart-bar-max-width);
    position: relative;
    z-index: 1;
}

.uv-vbar__bar {
    width: 100%;
    max-width: 80px;
    background: var(--bar-color, var(--chart-color-blue));
    border-radius: var(--radius-md, 8px) var(--radius-md, 8px) 0 0;
    margin-top: auto; /* Push bar to bottom */
    position: relative;
    transition: 
        height var(--chart-animation-duration) var(--chart-animation-easing),
        transform 0.2s ease;
    cursor: pointer;
    /* 3D effect */
    box-shadow:
        inset 2px 0 0 rgba(255, 255, 255, 0.15),
        inset -2px 0 0 rgba(0, 0, 0, 0.1),
        inset 0 2px 0 rgba(255, 255, 255, 0.25),
        0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Top highlight */
.uv-vbar__bar::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 35%;
    background: rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-md, 8px) var(--radius-md, 8px) 0 0;
    pointer-events: none;
}

/* Hover effects */
.uv-vbar__group:hover .uv-vbar__bar,
.uv-vbar__bar:focus-visible {
    transform: scaleX(1.05);
    box-shadow:
        inset 2px 0 0 rgba(255, 255, 255, 0.2),
        inset -2px 0 0 rgba(0, 0, 0, 0.15),
        inset 0 2px 0 rgba(255, 255, 255, 0.3),
        0 6px 16px rgba(0, 0, 0, 0.15);
}

.uv-vbar__bar:focus-visible {
    outline: 2px solid var(--color-primary, #0066CC);
    outline-offset: 2px;
}

.uv-vbar__label {
    margin-top: var(--space-2, 0.5rem);
    font-size: var(--font-size-xs, 0.75rem);
    font-weight: 600;
    color: var(--chart-text);
    text-align: center;
    white-space: nowrap;
}

.uv-vbar__value {
    position: absolute;
    top: -24px;
    left: 50%;
    transform: translateX(-50%);
    font-size: var(--font-size-xs, 0.75rem);
    font-weight: 700;
    color: var(--chart-text);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.uv-vbar__group:hover .uv-vbar__value {
    opacity: 1;
}

/* ==========================================================================
   DONUT/PIE CHART
   ========================================================================== */

.uv-chart--donut {
    max-width: 500px;
}

.uv-donut {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-6, 1.5rem);
}

.uv-donut__ring {
    position: relative;
    width: 200px;
    height: 200px;
}

.uv-donut__svg {
    transform: rotate(-90deg);
    width: 100%;
    height: 100%;
}

.uv-donut__segment {
    fill: none;
    stroke-width: 20;
    stroke-linecap: round;
    transition: stroke-dasharray 1s var(--chart-animation-easing);
}

.uv-donut__center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.uv-donut__center-value {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--chart-text);
    line-height: 1;
}

.uv-donut__center-label {
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--chart-text-muted);
    margin-top: var(--space-1, 0.25rem);
}

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

.uv-donut__legend-item {
    display: flex;
    align-items: center;
    gap: var(--space-2, 0.5rem);
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--chart-text);
}

.uv-donut__legend-color {
    width: 12px;
    height: 12px;
    border-radius: var(--radius-sm, 4px);
    flex-shrink: 0;
}

/* ==========================================================================
   COMPARISON GRID (Stats)
   ========================================================================== */

.uv-chart--stats {
    max-width: 900px;
}

.uv-stats {
    display: grid;
    gap: var(--space-4, 1rem);
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.uv-stats--2 { grid-template-columns: repeat(2, 1fr); }
.uv-stats--3 { grid-template-columns: repeat(3, 1fr); }
.uv-stats--4 { grid-template-columns: repeat(4, 1fr); }

.uv-stat {
    padding: var(--space-5, 1.25rem);
    background: var(--chart-surface-alt);
    border-radius: var(--radius-lg, 12px);
    text-align: center;
    border: 1px solid var(--chart-border);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;
    overflow: hidden;
}

/* Top accent bar */
.uv-stat::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--stat-color, var(--chart-color-blue));
    transform: scaleX(0);
    transition: transform 0.25s ease;
}

.uv-stat:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.uv-stat:hover::before {
    transform: scaleX(1);
}

.uv-stat__icon {
    font-size: 2rem;
    margin-bottom: var(--space-2, 0.5rem);
}

.uv-stat__value {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--stat-color, var(--chart-color-blue));
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.uv-stat__label {
    font-size: var(--font-size-xs, 0.75rem);
    font-weight: 600;
    color: var(--chart-text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: var(--space-2, 0.5rem);
}

.uv-stat__trend {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1, 0.25rem);
    font-size: var(--font-size-xs, 0.75rem);
    font-weight: 600;
    margin-top: var(--space-2, 0.5rem);
}

.uv-stat__trend--up { color: var(--chart-color-success); }
.uv-stat__trend--down { color: var(--chart-color-danger); }
.uv-stat__trend--neutral { color: var(--chart-text-muted); }

/* ==========================================================================
   SPARKLINE (Mini inline charts)
   ========================================================================== */

.uv-sparkline {
    display: inline-flex;
    align-items: flex-end;
    gap: 2px;
    height: 24px;
    vertical-align: middle;
}

.uv-sparkline__bar {
    width: 4px;
    background: var(--chart-color-blue);
    border-radius: 2px 2px 0 0;
    transition: height 0.3s ease;
}

.uv-sparkline__bar:hover {
    background: var(--chart-color-purple);
}

/* ==========================================================================
   COMPARISON TABLE
   ========================================================================== */

.uv-chart--table {
    max-width: 900px;
    overflow-x: auto;
}

.uv-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm, 0.875rem);
}

.uv-table thead {
    background: var(--color-primary, #0066CC);
    color: #FFFFFF;
}

.uv-table th,
.uv-table td {
    padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
    text-align: left;
    border-bottom: 1px solid var(--chart-border);
}

.uv-table th {
    font-weight: 600;
    white-space: nowrap;
}

.uv-table tbody tr:nth-child(even) {
    background: var(--chart-surface-alt);
}

.uv-table tbody tr:hover {
    background: rgba(0, 102, 204, 0.05);
}

/* Rating badges */
.uv-rating {
    display: inline-block;
    padding: var(--space-1, 0.25rem) var(--space-2, 0.5rem);
    border-radius: var(--radius-sm, 4px);
    font-size: var(--font-size-xs, 0.75rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.uv-rating--excellent {
    background: rgba(16, 185, 129, 0.15);
    color: var(--chart-color-success);
}

.uv-rating--good {
    background: rgba(59, 130, 246, 0.15);
    color: var(--chart-color-info);
}

.uv-rating--fair {
    background: rgba(245, 158, 11, 0.15);
    color: var(--chart-color-warning);
}

.uv-rating--poor {
    background: rgba(239, 68, 68, 0.15);
    color: var(--chart-color-danger);
}

/* ==========================================================================
   COLOR MODIFIERS
   ========================================================================== */

.uv-color-blue { --bar-color: var(--chart-color-blue); --stat-color: var(--chart-color-blue); }
.uv-color-red { --bar-color: var(--chart-color-red); --stat-color: var(--chart-color-red); }
.uv-color-yellow { --bar-color: var(--chart-color-yellow); --stat-color: var(--chart-color-yellow); }
.uv-color-green { --bar-color: var(--chart-color-green); --stat-color: var(--chart-color-green); }
.uv-color-purple { --bar-color: var(--chart-color-purple); --stat-color: var(--chart-color-purple); }
.uv-color-teal { --bar-color: var(--chart-color-teal); --stat-color: var(--chart-color-teal); }
.uv-color-orange { --bar-color: var(--chart-color-orange); --stat-color: var(--chart-color-orange); }
.uv-color-pink { --bar-color: var(--chart-color-pink); --stat-color: var(--chart-color-pink); }
.uv-color-indigo { --bar-color: var(--chart-color-indigo); --stat-color: var(--chart-color-indigo); }
.uv-color-gray { --bar-color: var(--chart-color-gray); --stat-color: var(--chart-color-gray); }
.uv-color-success { --bar-color: var(--chart-color-success); --stat-color: var(--chart-color-success); }
.uv-color-warning { --bar-color: var(--chart-color-warning); --stat-color: var(--chart-color-warning); }
.uv-color-danger { --bar-color: var(--chart-color-danger); --stat-color: var(--chart-color-danger); }

/* ==========================================================================
   RESPONSIVE ADJUSTMENTS
   ========================================================================== */

/* Tablet */
@media (max-width: 1024px) {
    .uv-chart {
        padding: var(--space-5, 1.25rem);
    }
    
    .uv-stats--4 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .uv-vbar {
        gap: var(--space-4, 1rem);
    }
    
    .uv-stat__value {
        font-size: 2rem;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .uv-chart {
        padding: var(--space-4, 1rem);
        border-radius: var(--radius-lg, 12px);
    }
    
    .uv-hbar__label {
        flex: 0 0 80px;
        font-size: var(--font-size-xs, 0.75rem);
    }
    
    .uv-hbar__value {
        flex: 0 0 50px;
        font-size: var(--font-size-xs, 0.75rem);
    }
    
    .uv-stats--3,
    .uv-stats--4 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .uv-vbar {
        height: 160px;
    }
    
    .uv-vbar__label {
        font-size: 0.65rem;
    }
    
    .uv-donut__ring {
        width: 160px;
        height: 160px;
    }
    
    .uv-donut__center-value {
        font-size: 2rem;
    }
}

/* Small Mobile */
@media (max-width: 480px) {
    .uv-hbar__row {
        flex-wrap: wrap;
    }
    
    .uv-hbar__label {
        flex: 1 1 100%;
        text-align: left;
        margin-bottom: var(--space-1, 0.25rem);
    }
    
    .uv-hbar__track {
        flex: 1;
        min-width: calc(100% - 60px);
    }
    
    .uv-stats--2,
    .uv-stats--3,
    .uv-stats--4 {
        grid-template-columns: 1fr;
    }
    
    .uv-stat__value {
        font-size: 1.75rem;
    }
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .uv-hbar__fill,
    .uv-vbar__bar,
    .uv-donut__segment,
    .uv-stat,
    .uv-sparkline__bar {
        transition: none !important;
    }
    
    .uv-stat:hover {
        transform: none;
    }
    
    .uv-vbar__group:hover .uv-vbar__bar,
    .uv-hbar__row:hover .uv-hbar__fill {
        transform: none;
    }
}

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

[data-theme="dark"] .uv-chart {
    background: var(--chart-surface);
    border-color: var(--chart-border);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .uv-hbar__track,
[data-theme="dark"] .uv-stat {
    background: var(--chart-surface-alt);
    border-color: var(--chart-border);
}

[data-theme="dark"] .uv-table thead {
    background: var(--color-primary, #0066CC);
}

[data-theme="dark"] .uv-table tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.03);
}

[data-theme="dark"] .uv-table tbody tr:hover {
    background: rgba(0, 102, 204, 0.1);
}

/* ==========================================================================
   PRINT STYLES
   ========================================================================== */

@media print {
    .uv-chart {
        border: 1px solid #ccc !important;
        box-shadow: none !important;
        break-inside: avoid;
        page-break-inside: avoid;
    }
    
    .uv-hbar__fill,
    .uv-vbar__bar {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    
    .uv-stat:hover,
    .uv-vbar__group:hover .uv-vbar__bar,
    .uv-hbar__row:hover .uv-hbar__fill {
        transform: none !important;
    }
}

/* ==========================================================================
   ACCESSIBILITY ENHANCEMENTS
   ========================================================================== */

/* Ensure all interactive chart elements have proper focus indicators */
.uv-hbar__fill[tabindex],
.uv-vbar__bar[tabindex],
.uv-stat[tabindex],
.uv-donut__segment[tabindex] {
    cursor: pointer;
}

.uv-hbar__fill[tabindex]:focus-visible,
.uv-vbar__bar[tabindex]:focus-visible,
.uv-stat[tabindex]:focus-visible {
    outline: 3px solid var(--color-primary, #0066CC);
    outline-offset: 2px;
}

/* Screen reader only text for chart data */
.uv-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* ========== related-reading.css ========== */
/* ========================================
   RELATED READING (Single Post)
   Updated 2025-12-29: Matches Latest Articles design exactly.
   Shows 4 cards with identical styling and responsive breakpoints.
   No gradients. WCAG AA contrast. Cross-viewport parity.
   ======================================== */

/* Section Container - matches .posts-section */
.aiwp-related-reading {
    margin: var(--space-12, 3rem) auto 0;
    padding: var(--space-10, 2.5rem) 0 var(--space-12, 3rem);
    background: var(--color-bg, #F8F9FA);
    border-top: 1px solid var(--color-border, #E6E8EB);
}

/* Inner container - use .container class for consistency */
.aiwp-related-reading__inner {
    max-width: var(--max-width-container, 1200px);
    margin: 0 auto;
    padding-left: var(--symmetry-section-x, 24px);
    padding-right: var(--symmetry-section-x, 24px);
}

/* Section Header - matches .posts-section .section-header exactly */
.aiwp-related-reading .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-8, 2rem);
    gap: var(--space-4, 1rem);
}

.aiwp-related-reading .section-header__title {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 800;
    color: var(--color-text, #1A1A1A);
    margin: 0;
    letter-spacing: -0.02em;
}

.aiwp-related-reading .section-header__link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: var(--font-size-base, 1rem);
    font-weight: 600;
    color: var(--color-primary, #0066CC);
    text-decoration: none;
    white-space: nowrap;
    transition: var(--transition-colors);
}

.aiwp-related-reading .section-header__link:hover {
    color: var(--color-primary-hover, #004D99);
    text-decoration: underline;
}

/* Grid Layout - matches .posts-grid exactly */
.aiwp-related-reading__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6, 1.5rem);
    margin-top: var(--space-4, 1rem);
}

/* Responsive: 3 columns at 1024px */
@media (max-width: 1199px) {
    .aiwp-related-reading__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Responsive: 2 columns at tablet */
@media (max-width: 1023px) {
    .aiwp-related-reading__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Responsive: 1 column on mobile */
@media (max-width: 767px) {
    .aiwp-related-reading__grid {
        grid-template-columns: 1fr;
        gap: var(--space-4, 1rem);
    }

    .aiwp-related-reading .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2, 0.5rem);
    }

    .aiwp-related-reading .section-header__title {
        font-size: 1.5rem;
    }
}

/* Card styling - ensure full height */
.aiwp-related-reading__card {
    height: 100%;
}

/* Dark Theme Support */
:root[data-theme="dark"] .aiwp-related-reading {
    background: var(--color-bg, #0F172A);
    border-top-color: var(--color-border, #2A2A3E);
}

:root[data-theme="dark"] .aiwp-related-reading .section-header__title {
    color: var(--color-text, #F0F0F0);
}

:root[data-theme="dark"] .aiwp-related-reading .section-header__link {
    color: var(--color-primary-light, #3B82F6);
}

:root[data-theme="dark"] .aiwp-related-reading .section-header__link:hover {
    color: var(--color-primary, #60A5FA);
}


/* ========== preloader.css ========== */
/**
 * Preloader - Premium Loading Screen
 * 
 * Universal Responsive Design v5.41.0
 * FIXED: Mobile spacing overlap - elegant proportional scaling
 * Optimized for ALL screen sizes: smartwatch (280px) to 8K (7680px)
 * No gradients - Solid colors with subtle animation
 * 
 * @package AI_WP_Manager
 * @since 5.41.0
 * 
 * Viewport Coverage:
 * - Smartwatch/Mini: 280px - 319px
 * - Small Mobile: 320px - 374px
 * - Mobile: 375px - 479px
 * - Large Mobile: 480px - 639px
 * - Small Tablet: 640px - 767px
 * - Tablet: 768px - 1023px
 * - Small Desktop: 1024px - 1279px
 * - Desktop: 1280px - 1439px
 * - Large Desktop: 1440px - 1919px
 * - 2K/QHD: 1920px - 2559px
 * - 4K/UHD: 2560px - 3839px
 * - 5K+/8K: 3840px+
 */

/* ========================================
   CSS CUSTOM PROPERTIES (Responsive Scaling)
   Uses vmin for proportional scaling across ALL viewports
   ======================================== */

:root {
    /* Logo size scales proportionally - smaller base for mobile elegance */
    --preloader-logo-size: clamp(40px, 6vmin, 72px);
    
    /* Counter size - proportional to viewport, never overwhelming */
    --preloader-counter-size: clamp(1.75rem, 5vmin, 5rem);
    
    /* Bar width - adapts to screen, stays elegant */
    --preloader-bar-width: clamp(140px, 35vw, 360px);
    --preloader-bar-height: clamp(2px, 0.25vmin, 4px);
    
    /* Content gap - CRITICAL: must be proportional to prevent overlap */
    --preloader-gap: clamp(1.75rem, 4vmin, 3rem);
    
    /* Status text size - scales with viewport */
    --preloader-status-size: clamp(0.625rem, 1.2vmin, 0.875rem);
    
    /* Orb glow size - smaller on mobile for subtlety */
    --preloader-orb-size: clamp(180px, 30vmin, 500px);
    
    /* Continue button sizing */
    --preloader-btn-padding-x: clamp(0.75rem, 2vmin, 1.5rem);
    --preloader-btn-padding-y: clamp(0.5rem, 1.2vmin, 1rem);
    --preloader-btn-font: clamp(0.7rem, 1.4vmin, 1rem);
}

/* ========================================
   PRELOADER CONTAINER - Glassmorphism Design v5.42.0
   ======================================== */

.preloader {
    position: fixed;
    /* CRITICAL FIX v6.0.9: Use 100vw/100vh to cover viewport INCLUDING scrollbar */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    min-width: 100vw;
    min-height: 100vh;
    /* CRITICAL: z-index must be higher than everything */
    z-index: 999999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* GLASSMORPHISM: Increased opacity for better visibility */
    background: rgba(255, 255, 255, 0.98);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    overflow: hidden;
    /* Prevent underlying page scroll/overscroll on touch devices while the overlay is active */
    touch-action: none;
    overscroll-behavior: none;
    pointer-events: all;
    will-change: opacity, transform;
    /* Safe area insets for notched devices (iPhone X+, etc.) */
    padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0);
}

/* Fallback for browsers without backdrop-filter support */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .preloader {
        background: rgba(255, 255, 255, 0.95);
    }
}

/* Glassmorphism inner shine layer */
.preloader::before {
    content: '';
    position: absolute;
    inset: 0;
    /* No gradients: keep this as a subtle solid highlight layer for stability */
    background: rgba(255, 255, 255, 0.06);
    pointer-events: none;
    z-index: 0;
}

/* Subtle animated glow orb */
.preloader::after {
    content: '';
    position: absolute;
    width: var(--preloader-orb-size);
    height: var(--preloader-orb-size);
    border-radius: 50%;
    background: rgba(0, 102, 204, 0.15);
    filter: blur(calc(var(--preloader-orb-size) * 0.3));
    animation: preloaderOrb 6s ease-in-out 3;
    pointer-events: none;
    z-index: 0;
}

@keyframes preloaderOrb {
    0%, 100% {
        transform: translate(-30%, -30%) scale(1);
        opacity: 0.4;
    }
    50% {
        transform: translate(30%, 30%) scale(1.1);
        opacity: 0.6;
    }
}

/* ========================================
   PRELOADER CONTENT
   ======================================== */

.preloader__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--preloader-gap);
    text-align: center;
    /* Responsive padding prevents edge collision */
    padding: clamp(1rem, 3vmin, 2rem);
    max-width: 100%;
    box-sizing: border-box;
}

/* Logo container */
.preloader__logo {
    width: var(--preloader-logo-size);
    height: var(--preloader-logo-size);
    min-width: 36px;
    min-height: 36px;
    /* DEFAULT: Dark logo on light background */
    color: #1A1A1A;
    opacity: 0;
    transform: scale(0.8);
    animation: preloaderLogoIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s forwards;
    flex-shrink: 0;
}

.preloader__logo svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0 calc(var(--preloader-logo-size) * 0.3) var(--color-primary-35, rgba(0, 102, 204, 0.12)));
    overflow: visible;
}

/* Elegant logo outer ring animation */
.preloader__logo svg circle[stroke*="url"] {
    stroke-dasharray: 126;
    stroke-dashoffset: 126;
    animation: preloaderLogoStroke 1.5s ease-out 0.5s forwards;
}

/* Inner ring subtle opacity */
.preloader__logo svg circle[opacity] {
    opacity: 0.15;
}

/* Preloader logo dots - staggered pulse */
.preloader__logo .logo-dot {
    opacity: 0;
    animation: preloaderDotFade 0.4s ease-out forwards;
}

.preloader__logo .logo-dot:nth-of-type(1) { animation-delay: 0.8s; }
.preloader__logo .logo-dot:nth-of-type(2) { animation-delay: 1.0s; }
.preloader__logo .logo-dot:nth-of-type(3) { animation-delay: 1.2s; }

@keyframes preloaderDotFade {
    to { opacity: 1; }
}

@keyframes preloaderLogoIn {
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes preloaderLogoStroke {
    to {
        stroke-dashoffset: 0;
    }
}

/* ========================================
   PERCENTAGE COUNTER
   ======================================== */

.preloader__counter {
    display: flex;
    align-items: baseline;
    gap: 0.05em;
    font-family: var(--font-sans, 'Inter', system-ui, -apple-system, sans-serif);
    font-size: var(--preloader-counter-size);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1;
    color: var(--color-primary, var(--color-primary-light));
    opacity: 0;
    transform: translateY(12px);
    animation: preloaderCounterIn 0.6s ease-out 0.4s forwards;
}

.preloader__counter-value {
    display: inline-block;
    min-width: 2ch;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.preloader__counter-symbol {
    font-size: 0.4em;
    font-weight: 600;
    opacity: 0.6;
}

@keyframes preloaderCounterIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   LOADING BAR
   ======================================== */

.preloader__bar {
    position: relative;
    width: var(--preloader-bar-width);
    max-width: calc(100vw - 2rem);
    height: var(--preloader-bar-height);
    min-height: 2px;
    /* DEFAULT: Light theme - dark track on light background */
    background: rgba(0, 0, 0, 0.08);
    border-radius: calc(var(--preloader-bar-height) / 2);
    overflow: hidden;
    opacity: 0;
    animation: preloaderBarIn 0.5s ease-out 0.6s forwards;
}

.preloader__bar-fill {
    position: absolute;
    inset: 0;
    background: var(--color-primary, #007AFF);
    border-radius: inherit;
    transform-origin: left center;
    transform: scaleX(0);
    will-change: transform;
    /* v6.0.10 CRITICAL FIX: NO transition by default - prevents bar moving before JS updates counter */
    transition: none;
}

/* When JS controls the progress, explicitly disable transition to keep bar + counter in lockstep. */
.preloader__bar-fill.js-controlled {
    transition: none !important;
}

@keyframes preloaderBarIn {
    to {
        opacity: 1;
    }
}

/* ========================================
   STATUS TEXT
   ======================================== */

.preloader__status {
    font-family: var(--font-sans, 'Inter', system-ui, -apple-system, sans-serif);
    font-size: var(--preloader-status-size);
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    /* DEFAULT: Light theme - dark text on light background */
    color: rgba(15, 23, 42, 0.5);
    opacity: 0;
    animation: preloaderStatusIn 0.5s ease-out 0.8s forwards;
    /* Prevent text from being cut off */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100vw - 2rem);
}

/* ========================================
   STALLED LOADING (OPTIONAL CONTINUE)
   ======================================== */

.preloader__continue {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4em;
    padding: var(--preloader-btn-padding-y) var(--preloader-btn-padding-x);
    border-radius: 999px;
    /* DEFAULT: Light theme - dark text/border on light background */
    border: 1px solid rgba(15, 23, 42, 0.18);
    background: rgba(15, 23, 42, 0.04);
    color: rgba(15, 23, 42, 0.82);
    font-family: var(--font-sans, 'Inter', system-ui, -apple-system, sans-serif);
    font-size: var(--preloader-btn-font);
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    /* Touch-friendly minimum size */
    min-height: 44px;
    min-width: 44px;
    /* Prevent shrinking */
    flex-shrink: 0;
    /* Smooth interactions */
    transition: background 0.2s ease, transform 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

/* Defensive: guarantee the `hidden` attribute always hides the button */
.preloader__continue[hidden] {
    display: none !important;
}

.preloader__continue:hover {
    background: rgba(15, 23, 42, 0.08);
}

.preloader__continue:active {
    transform: scale(0.97);
}

.preloader__continue:focus-visible {
    outline: 2px solid var(--color-primary, #007AFF);
    outline-offset: 3px;
}

[data-theme="light"] .preloader__continue {
    border-color: rgba(var(--color-black-rgb, 0, 0, 0), 0.16);
    background: rgba(var(--color-black-rgb, 0, 0, 0), 0.04);
    color: rgba(var(--color-black-rgb, 0, 0, 0), 0.82);
}

[data-theme="light"] .preloader__continue:hover {
    background: rgba(var(--color-black-rgb, 0, 0, 0), 0.07);
}

@keyframes preloaderStatusIn {
    to {
        opacity: 1;
    }
}

/* ========================================
   EXIT ANIMATION
   ======================================== */

.preloader.is-complete {
    animation: preloaderExit 0.8s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

.preloader.is-complete .preloader__content {
    animation: preloaderContentExit 0.5s ease-in forwards;
}

.preloader.is-complete .preloader__counter {
    animation: preloaderCounterExit 0.4s ease-in forwards;
}

@keyframes preloaderExit {
    0% {
        clip-path: inset(0 0 0 0);
    }
    100% {
        clip-path: inset(0 0 100% 0);
        pointer-events: none;
    }
}

@keyframes preloaderContentExit {
    to {
        opacity: 0;
        transform: translateY(-30px) scale(0.95);
    }
}

@keyframes preloaderCounterExit {
    to {
        opacity: 0;
        transform: translateY(-20px);
    }
}

/* ========================================
   DARK MODE ADJUSTMENTS - Glassmorphism v5.42.0
   ======================================== */

/* Explicit [data-theme="dark"] override */
[data-theme="dark"] .preloader {
    background: rgba(10, 10, 15, 0.98);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    [data-theme="dark"] .preloader {
        background: rgba(10, 10, 15, 0.98);
    }
}

[data-theme="dark"] .preloader::before {
    /* No gradients */
    background: rgba(255, 255, 255, 0.02);
}

[data-theme="dark"] .preloader::after {
    background: rgba(0, 102, 204, 0.2);
}

[data-theme="dark"] .preloader__counter {
    color: #0A84FF;
}

[data-theme="dark"] .preloader__bar {
    background: rgba(255, 255, 255, 0.15);
}

[data-theme="dark"] .preloader__status {
    color: rgba(255, 255, 255, 0.5);
}

[data-theme="dark"] .preloader__logo {
    /* White logo elements on dark background */
    color: #FFFFFF;
}

[data-theme="dark"] .preloader__logo svg {
    filter: drop-shadow(0 0 calc(var(--preloader-logo-size) * 0.5) rgba(0, 122, 255, 0.3));
}

[data-theme="dark"] .preloader__continue {
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.92);
}

[data-theme="dark"] .preloader__continue:hover {
    background: rgba(255, 255, 255, 0.18);
}

/* ========================================
   RESPONSIVE BREAKPOINTS - COMPREHENSIVE
   ======================================== */

/* ----------------------------------------
   TINY SCREENS (Smartwatch, Mini displays)
   280px - 319px
   ---------------------------------------- */
@media (max-width: 319px) {
    :root {
        --preloader-logo-size: 36px;
        --preloader-counter-size: 2rem;
        --preloader-bar-width: 100px;
        --preloader-gap: 1.5rem;
        --preloader-status-size: 0.45rem;
        --preloader-orb-size: 150px;
    }
    
    .preloader__content {
        padding: 0.5rem;
    }
    
    .preloader__counter-value {
        min-width: 2ch;
    }
    
    .preloader__status {
        letter-spacing: 0.1em;
    }
    
    .preloader__continue {
        padding: 0.4rem 0.6rem;
        font-size: 0.6rem;
        min-height: 36px;
    }
}

/* ----------------------------------------
   SMALL MOBILE (iPhone SE, compact phones)
   320px - 374px
   ---------------------------------------- */
@media (min-width: 320px) and (max-width: 374px) {
    :root {
        --preloader-logo-size: 44px;
        --preloader-counter-size: 2.5rem;
        --preloader-bar-width: 140px;
        --preloader-gap: 2rem;
        --preloader-status-size: 0.55rem;
        --preloader-orb-size: 180px;
    }
    
    .preloader__continue {
        padding: 0.5rem 0.75rem;
        font-size: 0.65rem;
    }
}

/* ----------------------------------------
   MOBILE (Standard smartphones)
   375px - 479px
   ---------------------------------------- */
@media (min-width: 375px) and (max-width: 479px) {
    :root {
        --preloader-logo-size: 50px;
        --preloader-counter-size: 3rem;
        --preloader-bar-width: 180px;
        --preloader-gap: 2.25rem;
        --preloader-status-size: 0.6rem;
        --preloader-orb-size: 220px;
    }
}

/* ----------------------------------------
   LARGE MOBILE (Phablets, iPhone Plus/Max)
   480px - 639px
   ---------------------------------------- */
@media (min-width: 480px) and (max-width: 639px) {
    :root {
        --preloader-logo-size: 56px;
        --preloader-counter-size: 3.5rem;
        --preloader-bar-width: 220px;
        --preloader-gap: 1.5rem;
        --preloader-status-size: 0.65rem;
        --preloader-orb-size: 260px;
    }
}

/* ----------------------------------------
   SMALL TABLET (Foldables, portrait tablets)
   640px - 767px
   ---------------------------------------- */
@media (min-width: 640px) and (max-width: 767px) {
    :root {
        --preloader-logo-size: 64px;
        --preloader-counter-size: 4.5rem;
        --preloader-bar-width: 280px;
        --preloader-gap: 1.75rem;
        --preloader-status-size: 0.7rem;
        --preloader-orb-size: 300px;
    }
}

/* ----------------------------------------
   TABLET (iPad Mini, standard tablets)
   768px - 1023px
   ---------------------------------------- */
@media (min-width: 768px) and (max-width: 1023px) {
    :root {
        --preloader-logo-size: 72px;
        --preloader-counter-size: 5.5rem;
        --preloader-bar-width: 320px;
        --preloader-gap: 2rem;
        --preloader-status-size: 0.75rem;
        --preloader-orb-size: 350px;
    }
}

/* ----------------------------------------
   SMALL DESKTOP (Laptop, small monitors)
   1024px - 1279px
   ---------------------------------------- */
@media (min-width: 1024px) and (max-width: 1279px) {
    :root {
        --preloader-logo-size: 80px;
        --preloader-counter-size: 6.5rem;
        --preloader-bar-width: 360px;
        --preloader-gap: 2rem;
        --preloader-status-size: 0.8rem;
        --preloader-orb-size: 380px;
    }
}

/* ----------------------------------------
   DESKTOP (Standard monitors)
   1280px - 1439px
   ---------------------------------------- */
@media (min-width: 1280px) and (max-width: 1439px) {
    :root {
        --preloader-logo-size: 88px;
        --preloader-counter-size: 7.5rem;
        --preloader-bar-width: 400px;
        --preloader-gap: 2.25rem;
        --preloader-status-size: 0.85rem;
        --preloader-orb-size: 420px;
    }
}

/* ----------------------------------------
   LARGE DESKTOP (1440p monitors)
   1440px - 1919px
   ---------------------------------------- */
@media (min-width: 1440px) and (max-width: 1919px) {
    :root {
        --preloader-logo-size: 96px;
        --preloader-counter-size: 8.5rem;
        --preloader-bar-width: 440px;
        --preloader-gap: 2.5rem;
        --preloader-status-size: 0.9rem;
        --preloader-orb-size: 480px;
    }
}

/* ----------------------------------------
   2K / QHD DISPLAYS
   1920px - 2559px
   ---------------------------------------- */
@media (min-width: 1920px) and (max-width: 2559px) {
    :root {
        --preloader-logo-size: 104px;
        --preloader-counter-size: 9rem;
        --preloader-bar-width: 480px;
        --preloader-gap: 2.75rem;
        --preloader-status-size: 0.95rem;
        --preloader-orb-size: 520px;
    }
}

/* ----------------------------------------
   4K / UHD DISPLAYS
   2560px - 3839px
   ---------------------------------------- */
@media (min-width: 2560px) and (max-width: 3839px) {
    :root {
        --preloader-logo-size: 120px;
        --preloader-counter-size: 10rem;
        --preloader-bar-width: 540px;
        --preloader-gap: 3rem;
        --preloader-status-size: 1rem;
        --preloader-orb-size: 580px;
        --preloader-bar-height: 4px;
    }
}

/* ----------------------------------------
   5K+ / 8K DISPLAYS
   3840px and above
   ---------------------------------------- */
@media (min-width: 3840px) {
    :root {
        --preloader-logo-size: 140px;
        --preloader-counter-size: 12rem;
        --preloader-bar-width: 600px;
        --preloader-gap: 3.5rem;
        --preloader-status-size: 1.1rem;
        --preloader-orb-size: 700px;
        --preloader-bar-height: 5px;
    }
    
    .preloader__continue {
        padding: 1rem 2rem;
        font-size: 1.1rem;
        min-height: 56px;
    }
}

/* ========================================
   ORIENTATION HANDLING
   ======================================== */

/* Landscape on small devices - reduce vertical space */
@media (max-height: 500px) and (orientation: landscape) {
    :root {
        --preloader-logo-size: 40px;
        --preloader-counter-size: 2.5rem;
        --preloader-gap: 0.75rem;
        --preloader-orb-size: 200px;
    }
    
    .preloader__content {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 1rem 2rem;
    }
    
    .preloader__bar {
        width: 200px;
    }
    
    .preloader__status {
        width: 100%;
    }
}

/* Very short landscape (car displays, embedded screens) */
@media (max-height: 350px) {
    :root {
        --preloader-logo-size: 32px;
        --preloader-counter-size: 2rem;
        --preloader-gap: 0.5rem;
    }
    
    .preloader__content {
        gap: 0.5rem 1.5rem;
    }
    
    .preloader__status {
        font-size: 0.5rem;
    }
}

/* Tall portrait devices (foldables unfolded) */
@media (min-height: 1000px) and (max-width: 600px) {
    :root {
        --preloader-gap: 2.5rem;
    }
}

/* ========================================
   HIGH DPI / RETINA DISPLAYS
   ======================================== */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .preloader__bar {
        /* Sharper bar on high-DPI */
        min-height: 2px;
    }
    
    .preloader__logo svg {
        /* Sharper SVG rendering */
        shape-rendering: geometricPrecision;
    }
}

/* ========================================
   NOTCHED DEVICES (iPhone X+, etc.)
   ======================================== */

@supports (padding: env(safe-area-inset-top)) {
    .preloader {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
}

/* ========================================
   REDUCED MOTION
   ======================================== */

@media (prefers-reduced-motion: reduce) {
    .preloader,
    .preloader::after,
    .preloader__logo,
    .preloader__logo svg circle,
    .preloader__counter,
    .preloader__bar,
    .preloader__bar-fill,
    .preloader__status,
    .preloader.is-complete,
    .preloader.is-complete .preloader__content,
    .preloader.is-complete .preloader__counter {
        animation: none !important;
        transition: none !important;
    }
    
    .preloader__logo,
    .preloader__counter,
    .preloader__bar,
    .preloader__status {
        opacity: 1;
        transform: none;
    }
    
    .preloader__bar-fill {
        transform: scaleX(1);
    }
    
    .preloader.is-complete {
        display: none;
    }
}

/* ========================================
   PRINT - Hide preloader completely
   ======================================== */

@media print {
    .preloader {
        display: none !important;
    }
}

/* ========================================
   SYSTEM PREFERENCE DETECTION - Glassmorphism v5.42.0
   These rules apply BEFORE JavaScript sets data-theme attribute.
   Light (glassmorphism) is default, dark (glassmorphism) is override.
   ======================================== */

/* System prefers DARK - apply dark glassmorphism styles unless explicitly set to light */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .preloader {
        /* Coverage guardrail: near-opaque so content never appears "uncovered" */
        background: rgba(10, 10, 15, 0.98);
        -webkit-backdrop-filter: blur(20px) saturate(180%);
        backdrop-filter: blur(20px) saturate(180%);
    }
    
    @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
        :root:not([data-theme="light"]) .preloader {
            background: rgba(10, 10, 15, 0.95);
        }
    }
    
    :root:not([data-theme="light"]) .preloader::before {
        /* No gradients: keep as solid to avoid WebKit text-fill/paint glitches */
        background: rgba(255, 255, 255, 0.02);
    }
    
    :root:not([data-theme="light"]) .preloader::after {
        background: rgba(0, 102, 204, 0.2);
    }
    
    :root:not([data-theme="light"]) .preloader__logo {
        color: #FFFFFF;
    }
    
    :root:not([data-theme="light"]) .preloader__counter {
        color: #0A84FF;
    }
    
    :root:not([data-theme="light"]) .preloader__bar {
        background: rgba(255, 255, 255, 0.15);
    }
    
    :root:not([data-theme="light"]) .preloader__status {
        color: rgba(255, 255, 255, 0.5);
    }
    
    :root:not([data-theme="light"]) .preloader__continue {
        border-color: rgba(255, 255, 255, 0.2);
        background: rgba(255, 255, 255, 0.1);
        color: rgba(255, 255, 255, 0.92);
    }
}

/* System prefers LIGHT - keep glassmorphism defaults (already set in base styles) */
/* No rules needed here since light glassmorphism is the default */

/* ========================================
   FORCED COLORS / HIGH CONTRAST MODE
   ======================================== */

@media (forced-colors: active) {
    .preloader {
        background: Canvas;
        border: 2px solid CanvasText;
    }
    
    .preloader__counter,
    .preloader__status {
        color: CanvasText;
    }
    
    .preloader__bar {
        background: GrayText;
        border: 1px solid CanvasText;
    }
    
    .preloader__bar-fill {
        background: Highlight;
    }
    
    .preloader__continue {
        background: ButtonFace;
        color: ButtonText;
        border: 2px solid ButtonText;
    }
}

/* ========================================
   HIDE WHEN NOT LOADING
   ======================================== */

.preloader.is-hidden {
    display: none !important;
}

/* Prevent body scroll during preloader */
/* v6.0.9: Force stable scrollbar gutter to prevent layout shifts */
html.preloader-active,
body.preloader-active {
    overflow: hidden !important;
    /* Force scrollbar to disappear completely */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

html.preloader-active::-webkit-scrollbar,
body.preloader-active::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
    width: 0;
    height: 0;
}

body.preloader-active {
    height: 100vh;
    height: 100dvh; /* Dynamic viewport height for mobile browsers */
    /* Prevent any scrolling mechanism */
    position: fixed;
    width: 100%;
}


/* ========== custom-tailwind.css ========== */
/* Utility layer inspired by Tailwind spacing tokens for AI WP Manager. */

/* ========================================
   Hero Carousel Controls v16.9.5
   - Prev button on far left
   - Next button on far right
   - Indicators centered between buttons
   - Responsive scaling for all viewports
   - No gradients per design system
   ======================================== */

.hero-carousel__controls {
    position: absolute;
    bottom: var(--space-4, 1rem);
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--space-4, 1rem);
    pointer-events: none;
    z-index: 10;
}

.hero-carousel__prev,
.hero-carousel__next {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--color-white-rgb), 0.9);
    border: 1px solid var(--color-border-subtle, rgba(26, 26, 26, 0.1));
    border-radius: 50%;
    cursor: pointer;
    pointer-events: all;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--sv-text-on-surface, var(--color-text, #1A1A1A));
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    flex-shrink: 0;
}

.hero-carousel__prev:hover,
.hero-carousel__next:hover {
    background: var(--color-primary-surface, var(--color-primary, #0066CC));
    color: var(--sv-btn-text-on-primary, #FFFFFF);
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.25);
}

/* Dark mode: avoid the white-on-white arrow regression when body text flips to light */
[data-theme="dark"] .hero-carousel__prev,
[data-theme="dark"] .hero-carousel__next {
    background: rgba(var(--color-black-rgb, 0, 0, 0), 0.8);
    border-color: var(--color-border-dark, rgba(255, 255, 255, 0.2));
    color: var(--sv-text-on-dark, #FFFFFF);
}

[data-theme="dark"] .hero-carousel__prev:hover,
[data-theme="dark"] .hero-carousel__next:hover {
    background: var(--color-primary-surface, var(--color-primary, #0066CC));
    color: var(--sv-btn-text-on-primary, #FFFFFF);
}

.hero-carousel__prev:focus-visible,
.hero-carousel__next:focus-visible {
    outline: 2px solid var(--color-primary, #0066CC);
    outline-offset: 2px;
}

.hero-carousel__indicators {
    display: flex;
    gap: var(--space-2, 0.375rem);
    pointer-events: all;
    flex: 1;
    justify-content: center;
}

.hero-carousel__indicator {
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, 0.5);
    border: 1.5px solid rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
}

.hero-carousel__indicator:hover {
    background: rgba(255, 255, 255, 0.8);
    transform: scale(1.15);
}

.hero-carousel__indicator.is-active {
    background: white;
    width: 20px;
    border-radius: 4px;
    border-color: white;
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.5);
}

/* Responsive carousel controls */
@media (max-width: 768px) {
    .hero-carousel__controls {
        bottom: var(--space-3, 0.75rem);
        padding: 0 var(--space-3, 0.75rem);
    }
    
    .hero-carousel__prev,
    .hero-carousel__next {
        width: 32px;
        height: 32px;
        font-size: 0.75rem;
    }
    
    .hero-carousel__indicator {
        width: 6px;
        height: 6px;
    }
    
    .hero-carousel__indicator.is-active {
        width: 16px;
    }
}

@media (max-width: 480px) {
    .hero-carousel__controls {
        bottom: var(--space-2, 0.5rem);
        padding: 0 var(--space-2, 0.5rem);
    }
    
    .hero-carousel__prev,
    .hero-carousel__next {
        width: 28px;
        height: 28px;
        font-size: 0.625rem;
    }
    
    .hero-carousel__indicator {
        width: 5px;
        height: 5px;
    }
    
    .hero-carousel__indicator.is-active {
        width: 14px;
        border-radius: 3px;
    }
}

/* ========================================
   End Hero Carousel Controls
   ======================================== */

.stack {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.stack-lg {
	display: flex;
	flex-direction: column;
	gap: 2.5rem;
}

.stack-sm {
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
}

.cluster {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	align-items: center;
}

.cluster-center {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 1.25rem;
}

.pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.4rem 1.1rem;
	border-radius: 999px;
	font-size: 0.82rem;
	font-weight: 600;
	background: var(--color-primary-10, rgba(0, 102, 204, 0.1));
	color: var(--color-primary, #0066CC);
}

.shadow-elevated {
	box-shadow: var(--shadow-2xl, 0 30px 60px rgba(15, 23, 42, 0.18));
}

.shadow-soft {
	box-shadow: var(--shadow-xl, 0 18px 45px rgba(15, 23, 42, 0.1));
}

.text-gradient {
	color: var(--color-primary, #0066CC);
}

.text-muted {
	color: var(--color-text-muted, rgba(71, 85, 105, 0.78));
}

.badge {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.35rem 0.8rem;
	border-radius: 999px;
	font-size: 0.78rem;
	font-weight: 600;
	background: var(--color-surface-alt, rgba(26, 26, 26, 0.02));
	color: var(--color-text, #111111);
}

.badge-success {
	background: var(--color-success-10, rgba(29, 122, 62, 0.1));
	color: var(--color-success, #1D7A3E);
}

.grid-auto {
	display: grid;
	gap: 1.75rem;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.grid-feature {
	display: grid;
	gap: 2rem;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.surface-glass {
	background: var(--glass-bg, rgba(255, 255, 255, 0.72));
	-webkit-backdrop-filter: var(--glass-blur, blur(18px));
	backdrop-filter: var(--glass-blur, blur(18px));
	border: 1px solid var(--glass-border, rgba(148, 163, 184, 0.18));
	border-radius: var(--radius-2xl, 20px);
}

.surface-dark {
	background: var(--color-bg-dark, #0D0D0D);
	color: var(--color-text-dark, rgba(255, 255, 255, 0.92));
}

.flow > * + * {
	margin-top: var(--flow-space, 1rem);
}

.flow-lg {
	--flow-space: 2.5rem;
}

.flow-sm {
	--flow-space: 0.75rem;
}

.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.35rem 0.75rem;
	border-radius: 999px;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 0.75rem;
	font-weight: 700;
	background: rgba(0, 122, 255, 0.12);
	color: #007AFF;
}

.link-inline {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-weight: 600;
}

.ratio-16-9 {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
}

.ratio-16-9 > img,
.ratio-16-9 > iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
}

.radius-xl {
	border-radius: 28px;
}

.radius-lg {
	border-radius: 20px;
}

.radius-md {
	border-radius: 14px;
}

.divider {
	width: 100%;
	height: 1px;
	background: rgba(15, 23, 42, 0.12);
	margin: 1.75rem 0;
}

.metric {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.metric__value {
	font-size: clamp(1.8rem, 2.5vw, 2.6rem);
	font-weight: 700;
}

.metric__label {
	color: rgba(71, 85, 105, 0.9);
	font-size: 0.95rem;
}

/* Hero Section Redesign */
.brand-hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 4rem 2rem;
    background: var(--color-surface-alt, #F8F9FA);
    color: var(--color-text, #1A1A1A);
    border: 1px solid var(--color-border, rgba(26, 26, 26, 0.12));
    border-radius: 1rem;
    margin-bottom: 3rem;
    overflow: hidden;
}

.brand-hero__content {
    position: relative;
    z-index: 2;
    max-width: 800px;
}

.brand-hero__title {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 800;
    margin-bottom: 1rem;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--color-text, #1A1A1A);
}

.brand-hero__tagline {
    font-size: clamp(1.1rem, 2vw, 1.5rem);
    margin-bottom: 2rem;
    opacity: 0.9;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.brand-hero__actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.btn--primary {
    background: var(--color-primary, #0066CC);
    color: var(--smart-btn-text-on-primary, #ffffff);
}

.btn--secondary {
    background: transparent;
    color: var(--color-text, #1A1A1A);
    border: 1px solid var(--color-border, rgba(26, 26, 26, 0.12));
}

/* Navigation Excellence */
html {
    scroll-behavior: smooth;
}

/* Header/navigation rules live in assets/css/modules/header-navigation.css.
   Keep this file focused on component styling to avoid fixed vs sticky conflicts. */

@media (max-width: 768px) {
    html, body {
        overflow-x: hidden;
        max-width: 100vw;
    }

    /* Prevent hero carousel from causing horizontal scroll */
    .hero-carousel {
        max-width: 100vw;
        overflow: hidden;
    }
    
    .hero-carousel__wrapper {
        position: absolute !important;  /* CRITICAL: Must be absolute for slides to overlay */
        inset: 0 !important;
        max-width: 100%;
        height: 100%;
        overflow: hidden;
    }
    
    .hero-carousel__slides {
        /* Mobile-safe mode:
           Use overlay/fade instead of translate-based sliding.
           Some mobile engines intermittently fail to paint translated slides, causing a
           "blank" carousel even though images are loaded.
        */
        display: block !important;
        position: relative;
        max-width: 100%;
        height: 100%;
        overflow: hidden;
        transform: none !important;
    }
    
    .hero-carousel__slide {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        min-height: 0;
        opacity: 0;
        pointer-events: none;
        transition: opacity 260ms ease;
    }

    .hero-carousel__slide.is-active {
        opacity: 1;
        pointer-events: auto;
    }

    button, 
    a.btn, 
    .nav-toggle, 
    .hero-carousel__button,
    .hero-carousel__indicator {
        min-width: 44px;
        min-height: 44px;
        touch-action: manipulation;
    }
}

/* Hamburger Animation */
.nav-toggle__bar {
    display: block;
    width: 24px;
    height: 2px;
    background: currentColor;
    position: relative;
    transition: background 0.3s;
}

.nav-toggle__bar::before,
.nav-toggle__bar::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    background: currentColor;
    transition: transform 0.3s;
}

.nav-toggle__bar::before { transform: translateY(-8px); }
.nav-toggle__bar::after { transform: translateY(8px); }

.nav-toggle[aria-expanded="true"] .nav-toggle__bar {
    background: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar::before {
    transform: rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar::after {
    transform: rotate(-45deg);
}

/* Content Layout Revolution */
.posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2rem;
    margin-bottom: 4rem;
}

.post-card {
    background: var(--color-surface, #FFFFFF);
    border: 1px solid var(--color-border, rgba(26, 26, 26, 0.08));
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(0,0,0,0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
}

.post-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 32px rgba(0,0,0,0.12);
    border-color: rgba(var(--color-primary-rgb, 0, 102, 204), 0.25);
}

.post-card__image-wrapper {
    position: relative;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
    overflow: hidden;
}

.post-card__image-wrapper img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.post-card:hover .post-card__image-wrapper img {
    transform: scale(1.05);
}

.post-card__content {
    padding: 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Category in content area (NOT the image overlay badge) */
.post-card__content .post-card__category {
    font-size: 0.875rem;
    color: var(--color-primary, #0066CC);
    font-weight: 600;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    position: relative;
    background: transparent;
    -webkit-text-fill-color: var(--color-primary, #0066CC);
}

.post-card__title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.post-card__title a {
    color: inherit;
    text-decoration: none;
}

.post-card__excerpt {
    font-size: 1rem;
    color: var(--color-text-secondary, #666666);
    margin-bottom: 1.5rem;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.post-card__meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--color-text-muted, #94A3B8); /* WCAG AA compliant */
    margin-top: auto;
}

/* Dark mode fix for post card meta - WCAG AA compliant */
:root[data-theme="dark"] .post-card__meta,
:root[data-theme="dark"] .post-card__reading-time,
:root[data-theme="dark"] .post-card__date {
    color: #CBD5E1 !important; /* Slate 300 - 7.5:1 contrast */
}

:root[data-theme="dark"] .post-card__author-name {
    color: #E2E8F0 !important; /* Slate 200 - 10:1 contrast */
}

/* Mobile Excellence */
@media (max-width: 768px) {
    button, 
    a.btn, 
    .nav-toggle, 
    .hero-carousel__button,
    .hero-carousel__indicator {
        min-width: 44px;
        min-height: 44px;
        touch-action: manipulation;
    }
}

/* Page Transitions */
body {
    animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Smooth State Transitions */
a, button, input, .post-card {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ========================================
   Enhanced Button Styles (Tools Page)
   ======================================== */

/* Primary Button - Gradient with glow */
.wp-block-button__link,
.btn-primary,
button[type="submit"],
.newsletter-form button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: var(--color-primary, #0066CC);
    color: #ffffff !important;
    font-weight: 600;
    font-size: 0.9375rem;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
}

.wp-block-button__link:hover,
.btn-primary:hover,
button[type="submit"]:hover,
.newsletter-form button:hover {
    background: var(--color-primary-hover, #004D99);
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(37, 99, 235, 0.45);
}

.wp-block-button__link:focus,
.btn-primary:focus,
button[type="submit"]:focus {
    outline: 2px solid #60a5fa;
    outline-offset: 2px;
}

/* Secondary/Outline Button */
.wp-block-button.is-style-outline .wp-block-button__link,
.btn-secondary {
    background: transparent;
    border: 2px solid #2563eb;
    color: #2563eb !important;
    box-shadow: none;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover,
.btn-secondary:hover {
    background: rgba(37, 99, 235, 0.1);
    transform: translateY(-2px);
}

/* Tool Card Link Buttons */
.wp-block-group a[href^="#"] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.625rem 1.25rem;
    background: var(--color-primary, #0066CC);
    color: #ffffff !important;
    font-weight: 600;
    font-size: 0.875rem;
    border-radius: 8px;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.wp-block-group a[href^="#"]:hover {
    background: var(--color-primary-hover, #004D99);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(37, 99, 235, 0.4);
}

/* Dark Mode Button Overrides */
:root[data-theme="dark"] .wp-block-button__link,
:root[data-theme="dark"] .btn-primary {
    background: var(--color-primary, #3399FF);
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.4);
}

:root[data-theme="dark"] .wp-block-button__link:hover,
:root[data-theme="dark"] .btn-primary:hover {
    background: var(--color-primary-hover, #0066CC);
    box-shadow: 0 8px 22px rgba(59, 130, 246, 0.5);
}

:root[data-theme="dark"] .wp-block-button.is-style-outline .wp-block-button__link,
:root[data-theme="dark"] .btn-secondary {
    border-color: #3b82f6;
    color: #60a5fa !important;
}

:root[data-theme="dark"] .wp-block-button.is-style-outline .wp-block-button__link:hover,
:root[data-theme="dark"] .btn-secondary:hover {
    background: rgba(59, 130, 246, 0.15);
}

/* Tool Cards Enhancements */
.tools-grid .wp-block-group,
.entry__content > .wp-block-group:not(.tools-hero):not(.tools-grid):not(.cta-section):not(.newsletter-section):not(.page-hero) {
    background: var(--color-surface);
    border-radius: 16px;
    padding: 1.5rem;
    border: 1px solid var(--color-border);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.tools-grid .wp-block-group:hover,
.entry__content > .wp-block-group:not(.tools-hero):not(.tools-grid):not(.cta-section):not(.newsletter-section):not(.page-hero):hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
    border-color: var(--color-primary);
}

:root[data-theme="dark"] .tools-grid .wp-block-group:hover,
:root[data-theme="dark"] .entry__content > .wp-block-group:not(.tools-hero):not(.tools-grid):not(.cta-section):not(.newsletter-section):not(.page-hero):hover {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

/* Hero Carousel Enhancements */
.hero-carousel__content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 2.5rem;
    background: rgba(15, 23, 42, 0.88);
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Solid overlay ensures even very light images are visible on mobile/low-contrast displays */
.hero-carousel__slide:not(.hero-carousel__slide--no-image) {
    position: relative;
}

.hero-carousel__slide:not(.hero-carousel__slide--no-image)::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.18);
    z-index: 2;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.hero-carousel__slide:not(.hero-carousel__slide--no-image):hover::before {
    opacity: 0.26;
}

.hero-carousel__image {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    z-index: 1;
}

.hero-carousel__category {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: rgba(0, 122, 255, 0.9);
    color: var(--smart-btn-text-on-primary, white);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 999px;
    align-self: flex-start;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.hero-carousel__title {
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    font-weight: 800;
    line-height: 1.2;
    margin: 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.hero-carousel__title a {
    color: white;
    text-decoration: none;
    transition: color 0.2s;
}

.hero-carousel__title a:hover {
    color: var(--color-primary-light, #38bdf8);
}

.hero-carousel__meta {
    display: flex;
    gap: 1rem;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.875rem;
    font-weight: 500;
}

/* Ensure image covers full area */
.hero-carousel__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Single-post: keep the outer shell neutral (never full primary-blue bleed). */
body.single-post article.single-article.aiwp-design-shell {
    background: var(--color-surface-alt, var(--color-bg, #ffffff)) !important;
    background-image: none !important;
    color: var(--color-text, #111111) !important;
}


/* ========== modern-animations.css ========== */
/* =====================================================================
   MODERN ANIMATION SYSTEM v2.0.0 — COMPETITIVE BLOGGING EDITION
   Built to surpass Elementor, Webflow, and top-tier WordPress sites
   
   FEATURES:
   - IntersectionObserver-powered scroll animations
   - 3D card transforms with realistic lighting
   - GPU-accelerated 60fps performance
   - Magnetic cursor effects
   - Parallax scrolling with depth layers
   - Text reveal animations (split text, typewriter)
   - Morphing shapes & blob animations
   - Staggered cascade reveals
   - Loading skeletons with shimmer
   - Smooth page transitions
   - Interactive micro-interactions
   - Reading progress with section awareness
   - Respects prefers-reduced-motion
   ===================================================================== */

/* ========================================
   §1 — CORE ANIMATION FOUNDATIONS
   ======================================== */

:root {
    /* Premium timing functions - inspired by Apple, Stripe, Linear */
    --anim-ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --anim-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --anim-ease-elastic: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --anim-ease-expo: cubic-bezier(0.19, 1, 0.22, 1);
    --anim-ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
    --anim-ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
    --anim-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --anim-ease-snap: cubic-bezier(0.4, 0, 0, 1);
    
    /* Animation durations - carefully tuned */
    --anim-duration-instant: 100ms;
    --anim-duration-fast: 200ms;
    --anim-duration-normal: 300ms;
    --anim-duration-slow: 450ms;
    --anim-duration-slower: 600ms;
    --anim-duration-slowest: 900ms;
    
    /* Transform origins for 3D effects */
    --transform-perspective: 1200px;
    --transform-3d-distance: 60px;
    
    /* Parallax depth layers */
    --parallax-depth-1: 0.1;
    --parallax-depth-2: 0.25;
    --parallax-depth-3: 0.4;
    
    /* Glow intensities */
    --glow-soft: 0 0 40px rgba(var(--color-primary-rgb, 0, 102, 204), 0.15);
    --glow-medium: 0 0 60px rgba(var(--color-primary-rgb, 0, 102, 204), 0.25);
    --glow-strong: 0 0 80px rgba(var(--color-primary-rgb, 0, 102, 204), 0.35);
}

/* GPU acceleration for smooth animations */
.anim-gpu {
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: var(--transform-perspective);
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    
    /* CRITICAL: Elements with data-anim MUST be visible even without animations
       Without this, reduced-motion users see blank spaces */
    [data-anim] {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ========================================
   §2 — SCROLL-TRIGGERED ANIMATIONS
   Powered by IntersectionObserver
   ======================================== */

/* CRITICAL FIX v5.39.0: Visibility Fallback Animation (v5.40.0 - reduced timing)
   Problem: Elements with data-anim had opacity: 0 but IntersectionObserver
   only triggers when element enters viewport. Elements below fold stayed
   invisible on initial page render and in full-page screenshots.
   
   Solution: CSS-only fallback animation that makes elements visible after 1s
   if JS hasn't added .anim-visible class yet. This ensures:
   - SEO crawlers see all content
   - Full-page screenshots show complete page
   - No-JS users see content
   - Elements animate on scroll if JS works, fallback shows if not
*/
@keyframes anim-visibility-fallback {
    from { opacity: 0; }
    to { opacity: 1; transform: none; }
}

/* Base state before animation */
[data-anim] {
    opacity: 0;
    transition: all var(--anim-duration-slow) var(--anim-ease-expo);
    /* Fallback: if not visible after 0.5s, animate to visible
       Reduced from 1s to ensure elements are visible during audits/screenshots */
    animation: anim-visibility-fallback 0.5s ease-out 0.5s forwards;
}

/* CRITICAL: Headings should NEVER stay invisible for more than 0.3s
   These are essential content - invisibility is a severe UX issue */
h1[data-anim], h2[data-anim], h3[data-anim], h4[data-anim] {
    animation: anim-visibility-fallback 0.3s ease-out 0.3s forwards;
}

/* Visible state after scroll trigger - overrides fallback */
[data-anim].anim-visible {
    opacity: 1;
    /* Cancel fallback animation when JS properly triggers visibility */
    animation: none;
}

/* Fade In */
[data-anim="fade-in"] {
    opacity: 0;
}

[data-anim="fade-in"].anim-visible {
    opacity: 1;
}

/* Slide Up */
[data-anim="slide-up"] {
    opacity: 0;
    transform: translateY(40px);
}

[data-anim="slide-up"].anim-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Slide Down */
[data-anim="slide-down"] {
    opacity: 0;
    transform: translateY(-40px);
}

[data-anim="slide-down"].anim-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Slide Left */
[data-anim="slide-left"] {
    opacity: 0;
    transform: translateX(40px);
}

[data-anim="slide-left"].anim-visible {
    opacity: 1;
    transform: translateX(0);
}

/* Slide Right */
[data-anim="slide-right"] {
    opacity: 0;
    transform: translateX(-40px);
}

[data-anim="slide-right"].anim-visible {
    opacity: 1;
    transform: translateX(0);
}

/* Scale In */
[data-anim="scale-in"] {
    opacity: 0;
    transform: scale(0.85);
}

[data-anim="scale-in"].anim-visible {
    opacity: 1;
    transform: scale(1);
}

/* Zoom In */
[data-anim="zoom-in"] {
    opacity: 0;
    transform: scale(0.5);
}

[data-anim="zoom-in"].anim-visible {
    opacity: 1;
    transform: scale(1);
}

/* Rotate In */
[data-anim="rotate-in"] {
    opacity: 0;
    transform: rotate(-10deg) scale(0.9);
}

[data-anim="rotate-in"].anim-visible {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

/* Blur In */
[data-anim="blur-in"] {
    opacity: 0;
    filter: blur(10px);
}

[data-anim="blur-in"].anim-visible {
    opacity: 1;
    filter: blur(0);
}

/* Stagger delays for sequential animations */
[data-anim-delay="1"] { transition-delay: 0.1s; }
[data-anim-delay="2"] { transition-delay: 0.2s; }
[data-anim-delay="3"] { transition-delay: 0.3s; }
[data-anim-delay="4"] { transition-delay: 0.4s; }
[data-anim-delay="5"] { transition-delay: 0.5s; }
[data-anim-delay="6"] { transition-delay: 0.6s; }

/* ========================================
   §3 — MODERN CARD ANIMATIONS
   3D transforms with lighting effects
   ======================================== */

/* Article Cards - Enhanced hover effects */
.entry-card,
.post-card,
.article-card,
[class*="card"]:not(.aiwp-design-card) {
    position: relative;
    transform-style: preserve-3d;
    transition: 
        transform var(--anim-duration-normal) var(--anim-ease-smooth),
        box-shadow var(--anim-duration-normal) var(--anim-ease-smooth);
    will-change: transform;
}

/* IMPORTANT:
   iOS/Safari can "stick" :hover after tap, causing desktop-only hover styling
   to appear on mobile/tablet and creating visual inconsistency. We only enable
   hover transforms on devices that actually support hover + fine pointers. */
@media (hover: hover) and (pointer: fine) {
    .entry-card:hover,
    .post-card:hover,
    .article-card:hover,
    [class*="card"]:not(.aiwp-design-card):hover {
        transform: translateY(-8px) scale(1.02);
        box-shadow:
            0 20px 40px rgba(0, 0, 0, 0.15),
            0 10px 20px rgba(0, 0, 0, 0.10);
    }
}

/* Touch baseline: use :active (press) + :focus-within (keyboard) for parity */
@media (hover: none), (pointer: coarse) {
    .entry-card:active,
    .post-card:active,
    .article-card:active,
    [class*="card"]:not(.aiwp-design-card):active,
    .entry-card:focus-within,
    .post-card:focus-within,
    .article-card:focus-within,
    [class*="card"]:not(.aiwp-design-card):focus-within {
        transform: translateY(-4px) scale(1.01);
        box-shadow:
            0 14px 28px rgba(0, 0, 0, 0.12),
            0 6px 14px rgba(0, 0, 0, 0.08);
    }
}

/* Card image zoom on hover */
.entry-card__image img,
.post-card__image img,
.article-card__image img,
[class*="card"] img {
    transition: transform var(--anim-duration-slower) var(--anim-ease-smooth);
    will-change: transform;
}

@media (hover: hover) and (pointer: fine) {
    .entry-card:hover .entry-card__image img,
    .post-card:hover .post-card__image img,
    .article-card:hover .article-card__image img,
    [class*="card"]:hover img {
        transform: scale(1.08);
    }
}

@media (hover: none), (pointer: coarse) {
    .entry-card:active .entry-card__image img,
    .post-card:active .post-card__image img,
    .article-card:active .article-card__image img,
    [class*="card"]:active img {
        transform: scale(1.05);
    }
}

/* Card title animation */
.entry-card__title,
.post-card__title,
.article-card__title,
[class*="card"] h2,
[class*="card"] h3 {
    transition: color var(--anim-duration-fast) var(--anim-ease-smooth);
}

@media (hover: hover) and (pointer: fine) {
    .entry-card:hover .entry-card__title,
    .post-card:hover .post-card__title,
    .article-card:hover .article-card__title,
    [class*="card"]:hover h2,
    [class*="card"]:hover h3 {
        color: var(--color-primary);
    }
}

@media (hover: none), (pointer: coarse) {
    .entry-card:active .entry-card__title,
    .post-card:active .post-card__title,
    .article-card:active .article-card__title,
    [class*="card"]:active h2,
    [class*="card"]:active h3 {
        color: var(--color-primary);
    }
}

/* 3D card lighting effect */
.entry-card::before,
.post-card::before,
.article-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* No gradients: use a subtle solid overlay for consistent rendering across engines */
    background: rgba(255, 255, 255, 0.06);
    opacity: 0;
    transition: opacity var(--anim-duration-normal) var(--anim-ease-smooth);
    pointer-events: none;
    border-radius: inherit;
    z-index: 1;
}

@media (hover: hover) and (pointer: fine) {
    .entry-card:hover::before,
    .post-card:hover::before,
    .article-card:hover::before {
        opacity: 1;
    }
}

@media (hover: none), (pointer: coarse) {
    .entry-card:active::before,
    .post-card:active::before,
    .article-card:active::before {
        opacity: 1;
    }
}

/* ========================================
   §4 — BUTTON & CTA ANIMATIONS
   Modern micro-interactions
   ======================================== */

/* All interactive buttons */
.button,
.btn,
[class*="button"],
[class*="btn"],
.newsletter-cta,
button[type="submit"],
a[href].button,
.wp-block-button__link {
    position: relative;
    overflow: hidden;
    transition: 
        transform var(--anim-duration-fast) var(--anim-ease-smooth),
        box-shadow var(--anim-duration-fast) var(--anim-ease-smooth),
        background var(--anim-duration-fast) var(--anim-ease-smooth);
}

/* Ripple effect on click
 * GUARDRAIL: Exclude chatbot and theme panel buttons to prevent exponential scale animations
 * See AGENTS.md: "Button Animation Isolation" rule
 */
.button::after,
.btn::after,
.newsletter-cta::after,
button[type="submit"]::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    transform: translate(-50%, -50%);
    transition: width var(--anim-duration-slow) var(--anim-ease-smooth),
                height var(--anim-duration-slow) var(--anim-ease-smooth);
    pointer-events: none;
}

.button:active::after,
.btn:active::after,
.newsletter-cta:active::after,
button[type="submit"]:active::after {
    width: 300px;
    height: 300px;
}

/* EXCLUDED from ripple: chatbot, theme panel, pagination, and carousel controls
 * These have their own controlled animations and should not stack with global ripple.
 */
#aiwp-chatbot-container button::after,
.aiwp-chatbot-theme-panel button::after,
.aiwp-chatbot-theme-panel__option::after,
.aiwp-chatbot-theme-panel__preset::after,
.aiwp-chatbot-quick-reply::after,
.pagination button::after,
.hero-carousel button::after,
[class*="swiper"] button::after {
    content: none !important;
    display: none !important;
}

/* Button hover lift (hover-capable devices only) */
@media (hover: hover) and (pointer: fine) {
    .button:hover,
    .btn:hover,
    [class*="button"]:hover:not(.button--ghost),
    [class*="btn"]:hover:not(.btn-ghost),
    .newsletter-cta:hover,
    button[type="submit"]:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 24px rgba(var(--color-primary-rgb, 0, 102, 204), 0.35);
    }
}

/* Button press */
.button:active,
.btn:active,
[class*="button"]:active,
[class*="btn"]:active,
.newsletter-cta:active,
button[type="submit"]:active {
    transform: translateY(0);
}

/* Icon slide in buttons */
.button svg,
.btn svg,
[class*="button"] svg,
[class*="btn"] svg {
    transition: transform var(--anim-duration-fast) var(--anim-ease-smooth);
}

@media (hover: hover) and (pointer: fine) {
    .button:hover svg,
    .btn:hover svg,
    [class*="button"]:hover svg,
    [class*="btn"]:hover svg {
        transform: translateX(4px);
    }
}

/* ========================================
   §5 — HERO & SECTION ANIMATIONS
   Elegant entrance effects
   ======================================== */

/* Hero fade-in on page load */
.archive-hero,
.page-hero,
.front-hero,
.brand-hero {
    animation: heroFadeIn var(--anim-duration-slower) var(--anim-ease-expo) forwards;
}

@keyframes heroFadeIn {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Hero title animation */
.archive-hero__title,
.page-hero__title,
.front-hero__title h1,
.brand-hero__title {
    animation: titleReveal 0.8s var(--anim-ease-expo) 0.2s backwards;
}

@keyframes titleReveal {
    from {
        opacity: 0;
        transform: translateY(20px);
        clip-path: inset(0 0 100% 0);
    }
    to {
        opacity: 1;
        transform: translateY(0);
        clip-path: inset(0 0 0 0);
    }
}

/* Hero CTA buttons staggered animation */
.archive-hero__actions .button:nth-child(1),
.page-hero__actions .button:nth-child(1) {
    animation: slideUpFade 0.6s var(--anim-ease-smooth) 0.4s backwards;
}

.archive-hero__actions .button:nth-child(2),
.page-hero__actions .button:nth-child(2) {
    animation: slideUpFade 0.6s var(--anim-ease-smooth) 0.5s backwards;
}

/* v5.27.5: Include 3rd CTA ("See the Output") in the hero stagger */
.archive-hero__actions .button:nth-child(3),
.page-hero__actions .button:nth-child(3) {
    animation: slideUpFade 0.6s var(--anim-ease-smooth) 0.6s backwards;
}

@keyframes slideUpFade {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   §6 — NAVIGATION ANIMATIONS
   Smooth menu transitions
   ======================================== */

/* Mobile menu slide-in */
@media (max-width: 959px) {
    .primary-nav.is-open {
        animation: mobileMenuSlide 0.35s var(--anim-ease-expo) forwards;
    }
    
    @keyframes mobileMenuSlide {
        from {
            opacity: 0;
            transform: translateY(-20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    /* Stagger menu items */
    .primary-nav.is-open .menu > li {
        opacity: 0;
        animation: menuItemFade 0.3s var(--anim-ease-smooth) forwards;
    }
    
    .primary-nav.is-open .menu > li:nth-child(1) { animation-delay: 0.05s; }
    .primary-nav.is-open .menu > li:nth-child(2) { animation-delay: 0.1s; }
    .primary-nav.is-open .menu > li:nth-child(3) { animation-delay: 0.15s; }
    .primary-nav.is-open .menu > li:nth-child(4) { animation-delay: 0.2s; }
    .primary-nav.is-open .menu > li:nth-child(5) { animation-delay: 0.25s; }
    
    @keyframes menuItemFade {
        from {
            opacity: 0;
            transform: translateX(-20px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }
}

/* Desktop dropdown animations */
@media (min-width: 960px) {
    .primary-nav .sub-menu {
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: 
            opacity var(--anim-duration-fast) var(--anim-ease-smooth),
            transform var(--anim-duration-fast) var(--anim-ease-smooth),
            visibility 0s linear var(--anim-duration-fast);
    }
    
    .primary-nav .menu-item:hover > .sub-menu,
    .primary-nav .menu-item:focus-within > .sub-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        transition-delay: 0s;
    }
}

/* ========================================
   §7 — LOADING & SKELETON STATES
   Progressive enhancement
   ======================================== */

/* Skeleton loader for images
   IMPORTANT: Never animate element opacity on containers that include real images.
   Opacity affects descendants and creates a visible "flashing photo" effect.
   We only animate the background while the container is not yet marked loaded.
*/
.entry-card__image,
.post-card__image,
.article-featured-image {
    position: relative;
    background: var(--color-surface-alt);
}

.entry-card__image:not(.is-image-loaded),
.post-card__image:not(.is-image-loaded),
.article-featured-image:not(.is-image-loaded) {
    animation: skeletonPulseModernBg 1.5s ease-in-out infinite;
}

/* GUARDRAIL v5.60.0: Post card images MUST have CSS fallback for visibility
   Problem: JS adds .is-image-loaded class but may fail (VPN, slow connection, JS error)
   Solution: CSS animation forces opacity:1 after 2s regardless of JS state
   This ensures images are ALWAYS visible, even if skeleton loader shows briefly */
.entry-card__image img,
.post-card__image img {
    opacity: 0;
    transition: opacity var(--anim-duration-normal) var(--anim-ease-smooth);
    /* CSS-only fallback: animate to visible after 2s delay */
    animation: imageVisibilityFallback 0.6s ease-out 2s forwards;
}

/* Featured images should remain visible even if JS image handlers fail. */
.article-featured-image img {
    opacity: 1;
    transition: opacity var(--anim-duration-normal) var(--anim-ease-smooth);
    animation: none;
}

.entry-card__image.is-image-loaded img,
.post-card__image.is-image-loaded img,
.article-featured-image.is-image-loaded img {
    opacity: 1;
    /* Cancel fallback animation when JS has properly loaded the image */
    animation: none;
}

/* CSS-only fallback keyframes for image visibility
   Activates after 2 seconds if JS doesn't add .is-image-loaded class
   CRITICAL: Prevents black screen for VPN users and slow connections */
@keyframes imageVisibilityFallback {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes skeletonPulseModernBg {
    0%, 100% { background-color: var(--color-surface-alt); }
    50% { background-color: var(--color-surface, #ffffff); }
}

/* Loading spinner */
.anim-loading {
    position: relative;
}

.anim-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 24px;
    margin: -12px 0 0 -12px;
    border: 3px solid var(--color-primary);
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Ripple effect animation for JS-created ripple elements */
@keyframes ripple-effect {
    from {
        transform: scale(0);
        opacity: 1;
    }
    to {
        transform: scale(2.5);
        opacity: 0;
    }
}

/* ========================================
   §8 — CAROUSEL & SLIDER ANIMATIONS
   Smooth slide transitions
   ======================================== */

/* Hero carousel slide animation - DESKTOP ONLY
   On mobile (<=768px), the carousel uses overlay mode with opacity toggle.
   The animation's `forwards` fill mode would override the opacity: 0 rule
   for non-active slides, causing all slides to be visible.
   2025-12-29: Fixed carousel not changing slides on mobile/tablet. */
@media (min-width: 769px) {
    .hero-carousel__slide {
        animation: carouselSlideIn 0.6s var(--anim-ease-expo) forwards;
    }
}

/* Mobile: disable carousel animation to allow opacity overlay mode */
@media (max-width: 768px) {
    .hero-carousel__slide {
        animation: none !important;
    }
}

@keyframes carouselSlideIn {
    from {
        opacity: 0;
        transform: translateX(100px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

/* Carousel controls hover */
.hero-carousel__control,
.carousel-prev,
.carousel-next,
[class*="carousel__"] button {
    transition: 
        transform var(--anim-duration-fast) var(--anim-ease-smooth),
        background var(--anim-duration-fast) var(--anim-ease-smooth),
        box-shadow var(--anim-duration-fast) var(--anim-ease-smooth);
}

@media (hover: hover) and (pointer: fine) {
    .hero-carousel__control:hover,
    .carousel-prev:hover,
    .carousel-next:hover,
    [class*="carousel__"] button:hover {
        transform: scale(1.1);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }
}

.hero-carousel__control:active,
.carousel-prev:active,
.carousel-next:active,
[class*="carousel__"] button:active {
    transform: scale(1.05);
}

/* ========================================
   §9 — FORM & INPUT ANIMATIONS
   Interactive feedback
   ======================================== */

/* Input focus animation */
input[type="text"],
input[type="email"],
input[type="search"],
input[type="password"],
input[type="url"],
input[type="tel"],
input[type="number"],
textarea,
select {
    transition: 
        border-color var(--anim-duration-fast) var(--anim-ease-smooth),
        box-shadow var(--anim-duration-fast) var(--anim-ease-smooth),
        transform var(--anim-duration-fast) var(--anim-ease-smooth);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
input[type="password"]:focus,
input[type="url"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
    transform: translateY(-2px);
    box-shadow: 
        0 0 0 3px rgba(var(--color-primary-rgb, 0, 102, 204), 0.1),
        0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Checkbox & radio animations */
input[type="checkbox"],
input[type="radio"] {
    transition: transform var(--anim-duration-fast) var(--anim-ease-bounce);
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
    transform: scale(1.1);
}

/* ========================================
   §10 — CHAT LAUNCHER ANIMATIONS
   Attention-grabbing entrance
   ======================================== */

.aiwp-chat-launcher,
.aiwp-chatbot-launcher,
#aiwp-chatbot-launcher,
[id*="chatbot-launcher"],
[class*="chat-launcher"] {
    animation: chatLauncherPop 0.5s var(--anim-ease-elastic) 1s backwards;
    transition: 
        transform var(--anim-duration-normal) var(--anim-ease-smooth),
        box-shadow var(--anim-duration-normal) var(--anim-ease-smooth);
}

@keyframes chatLauncherPop {
    0% {
        opacity: 0;
        transform: scale(0) rotate(-45deg);
    }
    50% {
        transform: scale(1.2) rotate(5deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

@media (hover: hover) and (pointer: fine) {
    .aiwp-chat-launcher:hover,
    #aiwp-chatbot-launcher:hover,
    [class*="chat-launcher"]:hover {
        transform: scale(1.1) rotate(5deg);
        box-shadow: 0 12px 32px rgba(var(--color-primary-rgb, 0, 102, 204), 0.4);
    }
}

/* Pulse animation to draw attention - finite (3 iterations) to avoid CPU drain */
@keyframes chatLauncherPulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(var(--color-primary-rgb, 0, 102, 204), 0.7);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(var(--color-primary-rgb, 0, 102, 204), 0);
    }
}

/* Chat launcher entrance: pop in, then subtle pulse (finite - 3 iterations = ~6s)
   Note: chatbot.css may also define animations - these are additive for theme integration */
.aiwp-chat-launcher,
#aiwp-chatbot-launcher {
    animation: 
        chatLauncherPop 0.5s var(--anim-ease-elastic) 1s backwards,
        chatLauncherPulse 2s ease-out 2s 3;  /* 3 iterations, not infinite */
    will-change: transform, box-shadow;
}

/* After animation completes, reset will-change to avoid memory overhead */
.aiwp-chat-launcher.animation-done,
#aiwp-chatbot-launcher.animation-done {
    will-change: auto;
    animation: none;
}

/* ========================================
   §11 — TOOLTIP & POPUP ANIMATIONS
   Smooth reveal effects
   ======================================== */

/* Tooltip fade-in with scale */
.tooltip,
[role="tooltip"],
[class*="tooltip"] {
    opacity: 0;
    transform: scale(0.9);
    transition: 
        opacity var(--anim-duration-fast) var(--anim-ease-smooth),
        transform var(--anim-duration-fast) var(--anim-ease-smooth);
}

.tooltip.is-visible,
[role="tooltip"][data-show],
[class*="tooltip"].is-visible {
    opacity: 1;
    transform: scale(1);
}

/* Share tooltip animation */
.aiwp-share-tooltip {
    animation: shareTooltipPop 0.3s var(--anim-ease-expo) forwards;
}

@keyframes shareTooltipPop {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ========================================
   §12 — PERFORMANCE OPTIMIZATIONS
   GPU acceleration & smart loading
   ======================================== */

/* Force GPU acceleration on animated elements */
.entry-card,
.post-card,
.article-card,
.button,
.btn,
[class*="button"],
[class*="card"],
.hero-carousel__slide,
.primary-nav,
.aiwp-chat-launcher,
[data-anim] {
    will-change: auto;
}

.entry-card:hover,
.post-card:hover,
.article-card:hover,
.button:hover,
.btn:hover,
[class*="button"]:hover,
[class*="card"]:hover,
.aiwp-chat-launcher:hover {
    will-change: transform;
}

/* Reset will-change after animation */
.entry-card:not(:hover),
.post-card:not(:hover),
.article-card:not(:hover),
.button:not(:hover),
.btn:not(:hover),
[class*="button"]:not(:hover),
[class*="card"]:not(:hover),
.aiwp-chat-launcher:not(:hover) {
    will-change: auto;
}

/* Hardware acceleration hints */
@supports (transform: translateZ(0)) {
    .entry-card,
    .post-card,
    .article-card,
    .button,
    .btn,
    [class*="button"],
    .hero-carousel__slide {
        transform: translateZ(0);
    }
}

/* ========================================
   §13 — DARK MODE ANIMATION TWEAKS
   Optimized for both themes
   ======================================== */

[data-theme="dark"] .entry-card:hover::before,
[data-theme="dark"] .post-card:hover::before,
[data-theme="dark"] .article-card:hover::before {
    background: rgba(255, 255, 255, 0.04);
}

[data-theme="dark"] .button:hover,
[data-theme="dark"] .btn:hover,
[data-theme="dark"] [class*="button"]:hover:not(.button--ghost) {
    box-shadow: 0 8px 24px rgba(var(--color-primary-rgb, 0, 102, 204), 0.5);
}


/* ========== competitive-animations.css ========== */
/* =====================================================================
   COMPETITIVE ANIMATIONS v1.0.0
   Advanced animations to surpass Elementor, Webflow, and premium sites
   
   Based on analysis of top blogs:
   - TechCrunch content-first layouts
   - TED Blog visual hierarchy
   - Apple-style micro-interactions
   - Stripe/Linear design systems
   
   PHILOSOPHY:
   - Subtle > Flashy
   - Performance > Effects
   - Accessibility > Trends
   ===================================================================== */

/* ========================================
   §1 — ADVANCED TEXT ANIMATIONS
   Text reveal, split text, typewriter
   ======================================== */

/* Clip-path text reveal */
.text-reveal {
    clip-path: inset(0 100% 0 0);
    animation: textRevealClip 0.8s var(--anim-ease-expo) forwards;
}

@keyframes textRevealClip {
    0% { clip-path: inset(0 100% 0 0); }
    100% { clip-path: inset(0 0 0 0); }
}

/* Underline draw animation */
.underline-draw {
    position: relative;
    display: inline-block;
}

.underline-draw::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 3px;
    background: var(--color-primary, #0066CC);
    border-radius: 2px;
    transition: width 0.6s var(--anim-ease-expo);
}

.underline-draw:hover::after,
.underline-draw.is-visible::after {
    width: 100%;
}

/* Text shimmer (PARITY MODE): no gradients.
   Use a solid primary accent so desktop/mobile/tablet match and avoid
   -webkit-text-fill-color=transparent issues across engines. */
.text-shimmer {
    background: none;
    color: var(--color-primary, #0066CC);
    -webkit-text-fill-color: currentColor;
    animation: none;
}

/* Letter stagger animation */
[data-anim="letter-stagger"] span {
    display: inline-block;
    opacity: 0;
    transform: translateY(20px);
}

[data-anim="letter-stagger"].anim-visible span {
    animation: letterReveal 0.5s var(--anim-ease-out-quint) forwards;
}

[data-anim="letter-stagger"].anim-visible span:nth-child(1) { animation-delay: 0ms; }
[data-anim="letter-stagger"].anim-visible span:nth-child(2) { animation-delay: 30ms; }
[data-anim="letter-stagger"].anim-visible span:nth-child(3) { animation-delay: 60ms; }
[data-anim="letter-stagger"].anim-visible span:nth-child(4) { animation-delay: 90ms; }
[data-anim="letter-stagger"].anim-visible span:nth-child(5) { animation-delay: 120ms; }
[data-anim="letter-stagger"].anim-visible span:nth-child(6) { animation-delay: 150ms; }
[data-anim="letter-stagger"].anim-visible span:nth-child(7) { animation-delay: 180ms; }
[data-anim="letter-stagger"].anim-visible span:nth-child(8) { animation-delay: 210ms; }

@keyframes letterReveal {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   §2 — PREMIUM CARD ANIMATIONS
   3D transforms with realistic depth
   ======================================== */

/* Card with 3D perspective tilt */
.card-3d {
    transform-style: preserve-3d;
    perspective: var(--transform-perspective);
    transition: transform 0.4s var(--anim-ease-smooth);
}

/* Parity: no cursor-driven tilt. Use the same lift interaction model everywhere. */
@media (hover: hover) and (pointer: fine) {
    .card-3d:hover {
        transform: translateY(-8px) scale(1.02);
    }
}

@media (hover: none), (pointer: coarse) {
    .card-3d:active,
    .card-3d:focus-within {
        transform: translateY(-4px) scale(1.01);
    }
}

/* Card shine effect (follows cursor) */
.card-shine {
    position: relative;
    overflow: hidden;
}

.card-shine::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 200%;
    /* Parity: no mouse-follow gradients. Use a subtle solid overlay. */
    background: rgba(255, 255, 255, 0.08);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
    .card-shine:hover::before {
        opacity: 1;
    }
}

@media (hover: none), (pointer: coarse) {
    .card-shine:active::before {
        opacity: 1;
    }
}

/* Glass morphism card */
.card-glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 
        0 4px 24px rgba(0, 0, 0, 0.08),
        inset 0 0 0 1px rgba(255, 255, 255, 0.1);
    transition: all 0.4s var(--anim-ease-smooth);
}

.card-glass:hover {
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.12),
        inset 0 0 0 1px rgba(255, 255, 255, 0.15);
    transform: translateY(-4px);
}

/* Floating card with shadow dynamics */
.card-float {
    transition: 
        transform 0.5s var(--anim-ease-spring),
        box-shadow 0.5s var(--anim-ease-smooth);
    box-shadow: 
        0 4px 16px rgba(0, 0, 0, 0.08),
        0 2px 4px rgba(0, 0, 0, 0.04);
}

@media (hover: hover) and (pointer: fine) {
    .card-float:hover {
        transform: translateY(-12px);
        box-shadow: 
            0 24px 48px rgba(0, 0, 0, 0.12),
            0 12px 24px rgba(0, 0, 0, 0.08);
    }
}

@media (hover: none), (pointer: coarse) {
    .card-float:active,
    .card-float:focus-within {
        transform: translateY(-6px);
        box-shadow:
            0 18px 36px rgba(0, 0, 0, 0.12),
            0 8px 16px rgba(0, 0, 0, 0.08);
    }
}

/* ========================================
   §3 — HERO SECTION ANIMATIONS
   Cinematic entrance effects
   ======================================== */

/* Split hero entrance */
.hero-split-reveal {
    overflow: hidden;
}

.hero-split-reveal .hero-content {
    animation: heroSlideUp 1s var(--anim-ease-expo) 0.2s backwards;
}

.hero-split-reveal .hero-media {
    animation: heroSlideRight 1s var(--anim-ease-expo) 0.4s backwards;
}

@keyframes heroSlideUp {
    from {
        opacity: 0;
        transform: translateY(60px);
    }
}

@keyframes heroSlideRight {
    from {
        opacity: 0;
        transform: translateX(-60px) scale(0.95);
    }
}

/* Parallax hero background */
.hero-parallax {
    position: relative;
    overflow: hidden;
}

.hero-parallax-bg {
    position: absolute;
    inset: -20%;
    background-size: cover;
    background-position: center;
    will-change: transform;
    transition: transform 0.1s linear;
}

/* Hero gradient mesh background */
.hero-mesh {
    position: relative;
    overflow: hidden;
}

.hero-mesh::before {
    content: '';
    position: absolute;
    inset: 0;
    /* Parity + policy: no gradients. Use a subtle blurred solid glow instead. */
    background: rgba(var(--color-primary-rgb, 0, 102, 204), 0.10);
    filter: blur(80px);
    opacity: 0.55;
    /* Finite iterations (policy): decorative motion must stop */
    animation: meshFloat 8s ease-in-out 3;
    pointer-events: none;
}

@keyframes meshFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(2%, -2%) scale(1.02); }
    50% { transform: translate(-1%, 2%) scale(1.01); }
    75% { transform: translate(1%, -1%) scale(1.03); }
}

/* ========================================
   §4 — SCROLL PROGRESS & READING UX
   Enhanced reading experience
   ======================================== */

/* Reading progress bar */
.reading-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 3px;
    background: var(--color-primary, #0066CC);
    z-index: 9999;
    transition: width 0.1s linear;
    box-shadow: 0 0 10px rgba(var(--color-primary-rgb, 0, 102, 204), 0.5);
}

/* Section indicator */
.section-indicator {
    position: fixed;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 100;
}

.section-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-border, #E5E5E5);
    cursor: pointer;
    transition: all 0.3s var(--anim-ease-smooth);
}

.section-dot.is-active {
    background: var(--color-primary, #0066CC);
    transform: scale(1.3);
    box-shadow: 0 0 12px rgba(var(--color-primary-rgb, 0, 102, 204), 0.5);
}

@media (hover: hover) and (pointer: fine) {
    .section-dot:hover {
        transform: scale(1.2);
    }
}

/* Back to top button */
.back-to-top {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #E5E5E5);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s var(--anim-ease-smooth);
    z-index: 100;
}

.back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

@media (hover: hover) and (pointer: fine) {
    .back-to-top:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    }
}

/* ========================================
   §5 — ADVANCED MICRO-INTERACTIONS
   Premium button & link effects
   ======================================== */

/* Magnetic button (follows cursor slightly) */
.btn-magnetic {
    position: relative;
    transition: transform 0.3s var(--anim-ease-smooth);
}

/* Parity: no cursor-follow magnet. Keep button stable across devices. */
.btn-magnetic:hover {
    transform: none;
}

/* Button with expanding background */
.btn-expand {
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.btn-expand::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: var(--color-primary-hover, #004D99);
    transform: translate(-50%, -50%);
    transition: all 0.5s var(--anim-ease-expo);
    z-index: -1;
}

@media (hover: hover) and (pointer: fine) {
    .btn-expand:hover::before {
        width: 300%;
        height: 300%;
    }
}

@media (hover: none), (pointer: coarse) {
    .btn-expand:active::before {
        width: 260%;
        height: 260%;
    }
}

/* Link with arrow slide */
.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.link-arrow svg,
.link-arrow::after {
    transition: transform 0.3s var(--anim-ease-smooth);
}

.link-arrow::after {
    content: '→';
}

.link-arrow:hover svg,
.link-arrow:hover::after {
    transform: translateX(4px);
}

/* Icon bounce on hover */
.icon-bounce:hover svg,
.icon-bounce:hover .icon {
    animation: iconBounce 0.4s var(--anim-ease-bounce);
}

@keyframes iconBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

/* ========================================
   §6 — GRID & LIST ANIMATIONS
   Staggered cascade reveals
   ======================================== */

/* Staggered grid entrance */
.grid-stagger > * {
    opacity: 0;
    transform: translateY(30px);
}

.grid-stagger.is-visible > * {
    animation: gridItemReveal 0.6s var(--anim-ease-out-quint) forwards;
}

.grid-stagger.is-visible > *:nth-child(1) { animation-delay: 0ms; }
.grid-stagger.is-visible > *:nth-child(2) { animation-delay: 80ms; }
.grid-stagger.is-visible > *:nth-child(3) { animation-delay: 160ms; }
.grid-stagger.is-visible > *:nth-child(4) { animation-delay: 240ms; }
.grid-stagger.is-visible > *:nth-child(5) { animation-delay: 320ms; }
.grid-stagger.is-visible > *:nth-child(6) { animation-delay: 400ms; }
.grid-stagger.is-visible > *:nth-child(7) { animation-delay: 480ms; }
.grid-stagger.is-visible > *:nth-child(8) { animation-delay: 560ms; }
.grid-stagger.is-visible > *:nth-child(9) { animation-delay: 640ms; }

@keyframes gridItemReveal {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Masonry reveal (different directions) */
.masonry-reveal > *:nth-child(odd) {
    transform: translateX(-30px);
}

.masonry-reveal > *:nth-child(even) {
    transform: translateX(30px);
}

.masonry-reveal.is-visible > * {
    opacity: 1;
    transform: translateX(0);
    transition: all 0.6s var(--anim-ease-out-quint);
}

/* ========================================
   §7 — IMAGE & MEDIA ANIMATIONS
   Premium visual effects
   ======================================== */

/* Image reveal with curtain */
.img-curtain {
    position: relative;
    overflow: hidden;
}

.img-curtain::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--color-surface, #fff);
    transform: scaleX(1);
    transform-origin: right;
    transition: transform 0.8s var(--anim-ease-expo);
}

.img-curtain.is-visible::after {
    transform: scaleX(0);
}

/* Image zoom on hover container */
.img-zoom-container {
    overflow: hidden;
    border-radius: inherit;
}

.img-zoom-container img {
    transition: transform 0.6s var(--anim-ease-out-quint);
    will-change: transform;
}

@media (hover: hover) and (pointer: fine) {
    .img-zoom-container:hover img {
        transform: scale(1.1);
    }
}

@media (hover: none), (pointer: coarse) {
    .img-zoom-container:active img {
        transform: scale(1.06);
    }
}

/* Ken Burns effect (slow zoom + pan) */
.img-ken-burns {
    /* Finite iterations (policy): avoid perpetual motion */
    animation: kenBurns 20s ease-in-out 2 alternate;
}

@keyframes kenBurns {
    0% { transform: scale(1) translate(0, 0); }
    100% { transform: scale(1.1) translate(-2%, -2%); }
}

/* Image tilt on hover */
.img-tilt {
    transition: transform 0.4s var(--anim-ease-smooth);
    will-change: transform;
}

@media (hover: hover) and (pointer: fine) {
    .img-tilt:hover {
        transform: perspective(1000px) rotateY(5deg) rotateX(5deg);
    }
}

/* ========================================
   §8 — LOADING & SKELETON STATES
   Premium loading experience
   ======================================== */

/* Shimmer skeleton */
.skeleton-shimmer {
    /* Parity + policy: no gradients. Use pulse skeleton instead. */
    background: var(--color-surface-alt, #F5F5F5);
    animation: skeletonPulse 1.5s ease-in-out infinite;
    border-radius: 4px;
}

/* Pulse skeleton */
.skeleton-pulse {
    background: var(--color-surface-alt, #F5F5F5);
    animation: skeletonPulse 1.5s ease-in-out infinite;
    border-radius: 4px;
}

@keyframes skeletonPulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

/* Content placeholder set */
.skeleton-text {
    height: 1em;
    margin-bottom: 0.5em;
    border-radius: 4px;
}

.skeleton-text:last-child {
    width: 70%;
}

.skeleton-title {
    height: 1.5em;
    width: 60%;
    margin-bottom: 1em;
}

.skeleton-image {
    aspect-ratio: 16/9;
    border-radius: 8px;
}

/* ========================================
   §9 — NOTIFICATION & TOAST ANIMATIONS
   Attention-grabbing reveals
   ======================================== */

/* Slide-in notification */
.notification-slide {
    animation: notifSlideIn 0.4s var(--anim-ease-spring) forwards;
}

@keyframes notifSlideIn {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Bounce-in notification */
.notification-bounce {
    animation: notifBounce 0.5s var(--anim-ease-bounce) forwards;
}

@keyframes notifBounce {
    0% {
        opacity: 0;
        transform: scale(0.5) translateY(-20px);
    }
    60% {
        transform: scale(1.05) translateY(0);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Exit animation */
.notification-exit {
    animation: notifExit 0.3s var(--anim-ease-smooth) forwards;
}

@keyframes notifExit {
    to {
        opacity: 0;
        transform: translateX(100%) scale(0.9);
    }
}

/* ========================================
   §10 — DECORATIVE BACKGROUND EFFECTS
   Subtle ambient animations
   ======================================== */

/* Floating orbs */
.bg-orbs {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.bg-orbs::before,
.bg-orbs::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.15;
}

.bg-orbs::before {
    width: 400px;
    height: 400px;
    background: var(--color-primary, #0066CC);
    top: -100px;
    right: -100px;
    /* Finite iterations (policy): decorative motion must stop */
    animation: orbFloat1 15s ease-in-out 3;
}

.bg-orbs::after {
    width: 300px;
    height: 300px;
    background: var(--color-primary, #0066CC);
    bottom: -50px;
    left: 10%;
    /* Finite iterations (policy): decorative motion must stop */
    animation: orbFloat2 18s ease-in-out 3;
}

@keyframes orbFloat1 {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(-50px, 50px); }
}

@keyframes orbFloat2 {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(50px, -30px); }
}

/* Grain texture overlay */
.bg-grain {
    position: relative;
}

.bg-grain::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    opacity: 0.03;
    pointer-events: none;
    mix-blend-mode: overlay;
}

/* ========================================
   §11 — INTERACTIVE CONTENT BLOCKS
   Stats, counters, comparison blocks
   ======================================== */

/* Animated counter */
.counter-animate {
    font-variant-numeric: tabular-nums;
}

.counter-animate.is-visible .counter-value {
    animation: counterUp 2s var(--anim-ease-out-quint) forwards;
}

/* Stats card with value highlight */
.stat-card-highlight {
    position: relative;
    overflow: hidden;
}

.stat-card-highlight::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    /* Parity + policy: no gradients. Use a subtle pulsing glow overlay. */
    background: rgba(var(--color-primary-rgb, 0, 102, 204), 0.10);
    filter: blur(24px);
    opacity: 0.0;
    /* Finite iterations (policy): decorative motion must stop */
    animation: statPulse 2.8s ease-in-out 3;
    pointer-events: none;
}

@keyframes statPulse {
    0%, 100% { opacity: 0.0; }
    50% { opacity: 0.9; }
}

/* Comparison slider animation */
.comparison-reveal {
    animation: comparisonSlide 1s var(--anim-ease-expo) 0.5s backwards;
}

@keyframes comparisonSlide {
    from {
        clip-path: inset(0 100% 0 0);
    }
    to {
        clip-path: inset(0 0 0 0);
    }
}

/* ========================================
   §12 — ACCESSIBILITY OVERRIDES
   Respect user preferences
   ======================================== */

@media (prefers-reduced-motion: reduce) {
    /* Disable all custom animations */
    .text-shimmer,
    .hero-mesh::before,
    .bg-orbs::before,
    .bg-orbs::after,
    .img-ken-burns,
    .stat-card-highlight::before {
        animation: none !important;
    }
    
    /* Remove transforms that cause motion */
    .card-3d:hover,
    .card-float:hover,
    .img-tilt:hover,
    .btn-magnetic:hover {
        transform: none !important;
    }
    
    /* Instant state changes */
    [data-anim],
    .grid-stagger > *,
    .masonry-reveal > * {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* High contrast mode adjustments */
@media (prefers-contrast: high) {
    .card-glass {
        background: var(--color-surface, #fff);
        backdrop-filter: none;
        border: 2px solid var(--color-text, #000);
    }
    
    .skeleton-shimmer,
    .skeleton-pulse {
        background: var(--color-surface-alt, #E5E5E5);
        animation: none;
    }
}

/* ========================================
   §13 — DARK MODE ENHANCEMENTS
   Theme-aware animation tweaks
   ======================================== */

[data-theme="dark"] .card-shine::before {
    background: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .card-glass {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .img-curtain::after {
    background: var(--color-bg, #0D0D0D);
}

[data-theme="dark"] .skeleton-shimmer {
    background: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .bg-grain::after {
    opacity: 0.02;
}


/* ========== content-typography-fixes.css ========== */
/* =====================================================================
   CONTENT TYPOGRAPHY & LAYOUT FIXES
   Version: 1.1.0 (2026-01-03)
   
   Purpose: 
   - Ensure titles are left-aligned (furthest left indentation)
   - Center stats grids with proper explanations
   - Fix text selection share popup with official social icons
   - Ensure responsive consistency across all viewports
   - v1.1.0: Improved paragraph readability (larger font, indentation)
   
   ARCHITECTURE:
   - All fixes must work desktop -> tablet -> mobile
   - Use CSS variables for consistency
   - No !important unless overriding inline styles
   ===================================================================== */

/* ============ PARAGRAPH READABILITY (v1.1.0) ============ */
/* Improve paragraph typography for better reading experience */

.article-content {
    /* Slightly larger base font for improved readability */
    font-size: clamp(1.125rem, 1.05rem + 0.2vw, 1.25rem) !important;
}

.article-content p {
    /* First-line indent for traditional paragraph distinction */
    text-indent: 1.5em;
    /* Optimal line height for reading */
    line-height: 1.8 !important;
    /* Proper paragraph spacing */
    margin-bottom: var(--space-5);
    /* Ensure text color is readable */
    color: var(--color-text);
    /* Slight letter spacing for readability */
    letter-spacing: 0.01em;
    /* Hyphenation for better text flow */
    hyphens: auto;
    -webkit-hyphens: auto;
    /* Prevent widows/orphans */
    text-wrap: pretty;
}

/* Remove indent from first paragraph after headings */
.article-content h1 + p,
.article-content h2 + p,
.article-content h3 + p,
.article-content h4 + p,
.article-content h5 + p,
.article-content h6 + p {
    text-indent: 0;
}

/* v1.2.0: Ensure paragraphs inside .aiwp-section are properly styled */
.aiwp-section > p:first-of-type,
.aiwp-section > h2 + p,
.aiwp-section > h3 + p {
    text-indent: 0;
}

/* Consecutive paragraphs inside sections SHOULD have indent */
.aiwp-section > p + p {
    text-indent: 1.5em;
}

@media (max-width: 768px) {
    .aiwp-section > p + p {
        text-indent: 1em;
    }
}

/* Remove indent from paragraphs following special blocks */
.article-content .synth-stats-grid + p,
.article-content .pc3-chart + p,
.article-content .synth-quote + p,
.article-content .synth-takeaways + p,
.article-content blockquote + p,
.article-content figure + p,
.article-content ul + p,
.article-content ol + p {
    text-indent: 0;
}

/* Drop cap for first paragraph (optional elegance) */
.article-content > p:first-of-type::first-letter {
    font-size: 3em;
    font-weight: 700;
    float: left;
    line-height: 0.8;
    margin-right: 0.1em;
    margin-top: 0.1em;
    color: var(--color-primary);
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .article-content {
        /* Ensure minimum 16px on mobile for readability */
        font-size: clamp(1rem, 1rem + 0.5vw, 1.125rem) !important;
    }
    
    .article-content p {
        /* Reduce indent on mobile but ensure font-size is comfortable */
        text-indent: 1em;
        line-height: 1.75 !important;
        font-size: inherit !important;
    }
    
    /* Smaller drop cap on mobile */
    .article-content > p:first-of-type::first-letter {
        font-size: 2.5em;
    }
}

/* ============ TYPOGRAPHY HIERARCHY ============ */
/* Titles should be the furthest-left indented element */

.article-content h1,
.article-content .article-title,
.article-content h2,
.article-content h3,
.article-content h4,
.article-content h5,
.article-content h6 {
    text-align: left !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
}

/* H2 with left border accent - ensure left alignment */
.article-content h2 {
    position: relative;
    padding-left: var(--space-4) !important;
    border-left: 4px solid var(--color-primary);
    margin-left: 0 !important;
}

/* Remove any centering from headings that should be left */
.article-content :where(h2, h3, h4, h5, h6):not(.text-center):not([style*="text-align: center"]) {
    text-align: left !important;
}

/* ============ STATS GRID CENTERING ============ */
/* Stats cards (3x, 2hrs, etc) should be centered with explanation below */

.synth-stats-grid,
[class*="stats-grid"],
.aiwp-stats-grid,
.aiwp-stats-block__grid {
    display: grid !important;
    /* Guardrail: keep desktop/tablet parity at 2 columns for readability */
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--space-4) !important;
    margin: var(--space-6) auto !important;
    max-width: 800px !important;
    justify-content: center !important;
}

/* Individual stat cards - centered text */
.synth-stat-card,
[class*="stat-card"],
.aiwp-stat-item,
.aiwp-stat-card,
.synth-stats-grid > div,
.stats-grid > div {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: var(--space-6) var(--space-4) !important;
    background: var(--color-surface) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-lg) !important;
    min-height: 120px !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.synth-stat-card:hover,
[class*="stat-card"]:hover,
.aiwp-stat-item:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(0, 102, 204, 0.12) !important;
}

/* Stat value (3x, 2hrs, etc) - large and prominent */
.synth-stat-value,
[class*="stat-value"],
.aiwp-stat-value,
.synth-stat-card > div:first-child,
[class*="stat-card"] > div:first-child {
    font-size: clamp(2.5rem, 6vw, 3.5rem) !important;
    font-weight: 900 !important;
    color: var(--color-primary) !important;
    line-height: 1 !important;
    margin-bottom: var(--space-2) !important;
    text-align: center !important;
}

/* Stat label (RETENTION RATE, DAILY AVG USE) - uppercase caption */
.synth-stat-label,
[class*="stat-label"],
.aiwp-stat-label,
.synth-stat-card > div:last-child,
[class*="stat-card"] > div:last-child {
    font-size: var(--font-size-xs) !important;
    font-weight: 700 !important;
    color: var(--color-text-muted) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    text-align: center !important;
    margin-top: var(--space-1) !important;
}

/* ============ CHART EXPLANATIONS ============ */
/* Charts must have centered explanation/paragraph below */

.synth-chart-container,
[class*="chart-container"],
.synth-chart-wrapper,
[class*="chart-wrapper"],
.aiwp-chart-container {
    margin: var(--space-8) auto !important;
    max-width: 900px !important;
    text-align: center !important;
}

/* Chart explanation paragraph */
.synth-chart-container + p,
[class*="chart-container"] + p,
.synth-stats-grid + p,
[class*="stats-grid"] + p {
    text-align: center !important;
    max-width: 700px !important;
    margin: var(--space-4) auto var(--space-6) !important;
    color: var(--color-text-secondary) !important;
    font-size: var(--font-size-sm) !important;
    line-height: 1.6 !important;
}

/* ============ TEXT SELECTION SHARE POPUP - FULL SOCIAL OPTIONS ============ */
/* v5.31.2: Complete social share popup with all platforms */
/* Appears when user selects text in article content */

.aiwp-selection-share {
    position: fixed !important;
    display: none;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 8px 10px !important;
    border-radius: 12px !important;
    
    /* Surface styling */
    background: #FFFFFF !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow:
        0 10px 40px rgba(0, 0, 0, 0.15),
        0 4px 12px rgba(0, 0, 0, 0.08) !important;
    
    z-index: 1200;
    transition: all 0.2s ease !important;
}

.aiwp-selection-share.is-visible {
    display: inline-flex !important;
}

/* Individual share buttons */
.aiwp-selection-share__btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: all 0.15s ease !important;
}

.aiwp-selection-share__btn svg {
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0 !important;
    /* ALWAYS VISIBLE: Explicit white icons on colored backgrounds */
    fill: #FFFFFF !important;
    stroke: #FFFFFF !important;
    color: #FFFFFF !important;
}

/* For stroke-based icons (email, copy), fill should be none */
.aiwp-selection-share__btn--email svg,
.aiwp-selection-share__btn--copy svg {
    fill: none !important;
    stroke: #FFFFFF !important;
}

.aiwp-selection-share__btn:hover {
    transform: translateY(-2px) !important;
}

.aiwp-selection-share__btn:focus-visible {
    outline: 3px solid var(--color-primary, #0066CC) !important;
    outline-offset: 2px !important;
}

/* Twitter/X - Official Black */
.aiwp-selection-share__btn--twitter {
    background: #000000 !important;
    color: #FFFFFF !important;
}
.aiwp-selection-share__btn--twitter:hover {
    background: #1a1a1a !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

/* Facebook - Official Blue */
.aiwp-selection-share__btn--facebook {
    background: #1877F2 !important;
    color: #FFFFFF !important;
}
.aiwp-selection-share__btn--facebook:hover {
    background: #166FE5 !important;
    box-shadow: 0 4px 12px rgba(24, 119, 242, 0.4) !important;
}

/* LinkedIn - Official Blue */
.aiwp-selection-share__btn--linkedin {
    background: #0A66C2 !important;
    color: #FFFFFF !important;
}
.aiwp-selection-share__btn--linkedin:hover {
    background: #004182 !important;
    box-shadow: 0 4px 12px rgba(10, 102, 194, 0.4) !important;
}

/* WhatsApp - Official Green */
.aiwp-selection-share__btn--whatsapp {
    background: #25D366 !important;
    color: #FFFFFF !important;
}
.aiwp-selection-share__btn--whatsapp:hover {
    background: #128C7E !important;
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4) !important;
}

/* Email - Purple accent */
.aiwp-selection-share__btn--email {
    background: #8B5CF6 !important;
    color: #FFFFFF !important;
}
.aiwp-selection-share__btn--email:hover {
    background: #7C3AED !important;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4) !important;
}

/* Copy - Primary brand color */
.aiwp-selection-share__btn--copy {
    background: var(--color-primary, #0066CC) !important;
    color: #FFFFFF !important;
}
.aiwp-selection-share__btn--copy:hover {
    background: var(--color-primary-hover, #004D99) !important;
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.4) !important;
}
.aiwp-selection-share__btn--copy.copied {
    background: var(--color-success, #10B981) !important;
}

/* Legacy single-tweet button - DEPRECATED but kept for backwards compatibility */
.aiwp-selection-tweet {
    position: fixed !important;
    display: none;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 10px 16px !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em !important;
    line-height: 1 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    
    /* X/Twitter official black */
    background: #000000 !important;
    color: #FFFFFF !important;
    border: none !important;
    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.25),
        0 4px 12px rgba(0, 0, 0, 0.15) !important;
    
    z-index: 1200;
    transition: all 0.2s ease !important;
}

.aiwp-selection-tweet::before {
    content: '';
    display: inline-block;
    width: 18px;
    height: 18px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FFFFFF'%3E%3Cpath d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.aiwp-selection-tweet.is-visible {
    display: inline-flex !important;
}

.aiwp-selection-tweet:hover {
    background: #1a1a1a !important;
    transform: translateY(-2px) !important;
    box-shadow:
        0 14px 36px rgba(0, 0, 0, 0.3),
        0 6px 16px rgba(0, 0, 0, 0.2) !important;
}

.aiwp-selection-tweet:focus-visible {
    outline: 3px solid var(--color-primary) !important;
    outline-offset: 3px !important;
}

/* ============ SOCIAL SHARE BUTTONS - OFFICIAL BRAND COLORS ============ */
/* Using official brand colors for each platform */

/* Twitter/X - Official Black */
.social-share__link--twitter,
[class*="social-share__link--twitter"] {
    background: #000000 !important;
    color: #FFFFFF !important;
}

.social-share__link--twitter:hover,
[class*="social-share__link--twitter"]:hover {
    background: #1a1a1a !important;
}

/* Facebook - Official Blue #1877F2 */
.social-share__link--facebook,
[class*="social-share__link--facebook"] {
    background: #1877F2 !important;
    color: #FFFFFF !important;
}

.social-share__link--facebook:hover,
[class*="social-share__link--facebook"]:hover {
    background: #166FE5 !important;
}

/* LinkedIn - Official Blue #0A66C2 */
.social-share__link--linkedin,
[class*="social-share__link--linkedin"] {
    background: #0A66C2 !important;
    color: #FFFFFF !important;
}

.social-share__link--linkedin:hover,
[class*="social-share__link--linkedin"]:hover {
    background: #004182 !important;
}

/* WhatsApp - Official Green #25D366 */
.social-share__link--whatsapp,
[class*="social-share__link--whatsapp"] {
    background: #25D366 !important;
    color: #FFFFFF !important;
}

.social-share__link--whatsapp:hover,
[class*="social-share__link--whatsapp"]:hover {
    background: #128C7E !important;
}

/* Email - Purple accent */
.social-share__link--email,
[class*="social-share__link--email"] {
    background: #8B5CF6 !important;
    color: #FFFFFF !important;
}

.social-share__link--email:hover,
[class*="social-share__link--email"]:hover {
    background: #7C3AED !important;
}

/* Copy Link - Primary brand color */
.social-share__link--copy,
[class*="social-share__link--copy"] {
    background: var(--color-primary, #0066CC) !important;
    color: #FFFFFF !important;
    border: none !important;
}

.social-share__link--copy:hover,
[class*="social-share__link--copy"]:hover {
    background: var(--color-primary-hover, #004D99) !important;
}

.social-share__link--copy.copied,
[class*="social-share__link--copy"].copied {
    background: var(--color-success, #10B981) !important;
}

/* Ensure SVG icons are visible and properly sized */
.social-share__link svg {
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
}

.social-share__link svg[fill="currentColor"] {
    fill: currentColor !important;
}

.social-share__link svg[fill="none"] {
    fill: none !important;
    stroke: currentColor !important;
}

/* ============ SIDEBAR SHARE RAIL ============ */
/* Ensure sidebar share buttons are properly styled */

.aiwp-rail-share {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: var(--space-2) !important;
}

.aiwp-rail-share .social-share__link {
    width: 100% !important;
    justify-content: flex-start !important;
    padding: var(--space-3) var(--space-4) !important;
    border-radius: var(--radius-md) !important;
    font-weight: 600 !important;
}

/* ============ RESPONSIVE - TABLET (768px - 1023px) ============ */
@media (min-width: 768px) and (max-width: 1023px) {
    .synth-stats-grid,
    [class*="stats-grid"],
    .aiwp-stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        max-width: 600px !important;
    }
    
    .synth-stat-card,
    [class*="stat-card"],
    .aiwp-stat-item {
        padding: var(--space-5) var(--space-3) !important;
    }
    
    .synth-stat-value,
    [class*="stat-value"],
    .aiwp-stat-value {
        font-size: 2.5rem !important;
    }
}

/* ============ RESPONSIVE - MOBILE (< 768px) ============ */
@media (max-width: 767px) {
    /* CRITICAL FIX: H1/H2 typography hierarchy on mobile */
    /* Audit found H1=28px, H2=28px - broken hierarchy */
    /* Using high specificity selectors to override any competing rules */
    .article-content h1,
    .article-title,
    .single-article h1,
    article h1,
    .entry-content h1,
    main h1,
    .post-content h1,
    .aiwp-hero h1,
    h1.entry-title,
    h1.post-title,
    h1.article-title {
        font-size: 1.875rem !important;  /* 30px */
        line-height: 1.2 !important;
    }
    
    .article-content h2,
    article h2,
    .entry-content h2,
    main h2,
    .post-content h2,
    .aiwp-section h2 {
        font-size: 1.375rem !important;  /* 22px - clearly smaller than H1 */
        line-height: 1.3 !important;
    }
    
    .article-content h3,
    article h3,
    .entry-content h3 {
        font-size: 1.125rem !important;  /* 18px */
    }
    
    /* Stats grid - single column on mobile for legibility */
    .synth-stats-grid,
    [class*="stats-grid"],
    .aiwp-stats-grid {
        grid-template-columns: 1fr !important;
        gap: var(--space-3) !important;
        max-width: 100% !important;
        padding: 0 var(--space-2) !important;
    }
    
    .synth-stat-card,
    [class*="stat-card"],
    .aiwp-stat-item {
        padding: var(--space-4) var(--space-2) !important;
        min-height: 100px !important;
    }
    
    .synth-stat-value,
    [class*="stat-value"],
    .aiwp-stat-value {
        font-size: 2rem !important;
    }
    
    .synth-stat-label,
    [class*="stat-label"],
    .aiwp-stat-label {
        font-size: 0.65rem !important;
        letter-spacing: 0.08em !important;
    }
    
    /* Tweet button - larger touch target */
    .aiwp-selection-tweet {
        padding: 12px 18px !important;
        font-size: 15px !important;
        border-radius: 14px !important;
    }
    
    .aiwp-selection-tweet::before {
        width: 20px !important;
        height: 20px !important;
    }
    
    /* Full social share popup - mobile optimized */
    .aiwp-selection-share {
        gap: 3px !important;
        padding: 6px 8px !important;
        border-radius: 10px !important;
    }
    
    .aiwp-selection-share__btn {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        border-radius: 8px !important;
    }
    
    .aiwp-selection-share__btn svg {
        width: 18px !important;
        height: 18px !important;
        /* ALWAYS VISIBLE: Maintain icon visibility on mobile */
        fill: #FFFFFF !important;
        stroke: #FFFFFF !important;
        color: #FFFFFF !important;
    }
    
    /* For stroke-based icons (email, copy), fill should be none */
    .aiwp-selection-share__btn--email svg,
    .aiwp-selection-share__btn--copy svg {
        fill: none !important;
        stroke: #FFFFFF !important;
    }
    
    /* Social share - full width buttons */
    .social-sharing__links {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: var(--space-2) !important;
    }
    
    .social-share__link {
        width: 100% !important;
        justify-content: center !important;
        padding: var(--space-3) var(--space-4) !important;
        min-height: 48px !important; /* Touch-friendly */
    }
}

/* ============ RESPONSIVE - SMALL MOBILE (< 480px) ============ */
@media (max-width: 479px) {
    .synth-stats-grid,
    [class*="stats-grid"],
    .aiwp-stats-grid {
        grid-template-columns: 1fr !important;
        gap: var(--space-2) !important;
    }
    
    .synth-stat-value,
    [class*="stat-value"],
    .aiwp-stat-value {
        font-size: 1.75rem !important;
    }
    
    .synth-stat-label,
    [class*="stat-label"],
    .aiwp-stat-label {
        font-size: 0.6rem !important;
    }
}

/* ============ DARK MODE ADJUSTMENTS ============ */
/* Full social share popup - dark mode */
:root[data-theme="dark"] .aiwp-selection-share {
    background: #1a1a1a !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow:
        0 10px 40px rgba(0, 0, 0, 0.4),
        0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

/* Dark mode - icons remain white on colored backgrounds (default) */
/* Twitter button is inverted in dark mode (white bg, black icon) */
:root[data-theme="dark"] .aiwp-selection-share__btn--twitter {
    background: #FFFFFF !important;
    color: #000000 !important;
}
:root[data-theme="dark"] .aiwp-selection-share__btn--twitter svg {
    fill: #000000 !important;
    stroke: #000000 !important;
    color: #000000 !important;
}
:root[data-theme="dark"] .aiwp-selection-share__btn--twitter:hover {
    background: #E5E5E5 !important;
}

/* Legacy tweet button - dark mode */
:root[data-theme="dark"] .aiwp-selection-tweet {
    background: #FFFFFF !important;
    color: #000000 !important;
}

:root[data-theme="dark"] .aiwp-selection-tweet::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000000'%3E%3Cpath d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'/%3E%3C/svg%3E");
}

:root[data-theme="dark"] .aiwp-selection-tweet:hover {
    background: #E5E5E5 !important;
}

:root[data-theme="dark"] .synth-stat-card,
:root[data-theme="dark"] [class*="stat-card"],
:root[data-theme="dark"] .aiwp-stat-item {
    background: var(--color-surface-dark, #1a1a1a) !important;
    border-color: var(--color-border-dark, #333) !important;
}

/* ============ PRINT STYLES ============ */
@media print {
    .aiwp-selection-tweet,
    .social-sharing,
    .aiwp-rail-share {
        display: none !important;
    }
}


/* ========== premium-homepage-v5.31.css ========== */
/* ========================================
   Premium Homepage Redesign v5.32
   Focus: Clean white cards, shimmer effects, unified sections
   Last updated: 2025-12-26
   ======================================== */

/* ============ CSS VARIABLES - PREMIUM ADDITIONS ============ */
:root {
    /* Premium shadows */
    --premium-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
    --premium-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.04);
    --premium-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.04);
    --premium-shadow-xl: 0 25px 50px rgba(0, 0, 0, 0.1);
    --premium-shadow-glow: 0 0 40px rgba(0, 102, 204, 0.15);
    --premium-shadow-card-hover: 0 20px 40px rgba(0, 0, 0, 0.1);
    
    /* Premium transitions */
    --premium-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --premium-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    
    /* Premium colors */
    --premium-step-gradient-start: #3b82f6;
    --premium-step-gradient-end: #8b5cf6;
    --premium-card-bg: #ffffff;
    --premium-card-border: #e2e8f0;
    --premium-step-bg: #f1f5f9;
    --premium-kpi-bg: #f8fafc;
    --premium-stack-pill-bg: #eff6ff;
    --premium-stack-pill-border: #bfdbfe;
    --premium-text-primary: #1e293b;
    --premium-text-secondary: #475569;
    --premium-text-muted: #64748b;
}

:root[data-theme="dark"] {
    --premium-card-bg: rgba(24, 24, 27, 0.85);
    --premium-card-border: rgba(255, 255, 255, 0.1);
    --premium-step-bg: rgba(30, 30, 35, 0.9);
    --premium-kpi-bg: rgba(20, 20, 24, 0.8);
    --premium-stack-pill-bg: rgba(59, 130, 246, 0.15);
    --premium-stack-pill-border: rgba(59, 130, 246, 0.3);
    --premium-text-primary: #f1f5f9;
    --premium-text-secondary: #94a3b8;
    --premium-text-muted: #64748b;
}

/* ============ PREMIUM ANIMATIONS ============ */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(60px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes shimmer {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.55; }
}

@keyframes stepPulse {
    0%, 100% { box-shadow: 0 10px 20px rgba(59, 130, 246, 0.3); }
    50% { box-shadow: 0 14px 28px rgba(59, 130, 246, 0.45); }
}

@media (prefers-reduced-motion: reduce) {
    @keyframes fadeInUp { from, to { opacity: 1; transform: none; } }
    @keyframes shimmer { from, to { opacity: 0; } }
    @keyframes stepPulse { from, to { box-shadow: 0 10px 20px rgba(59, 130, 246, 0.3); } }
}

/* ============ HERO SECTION - PREMIUM UPGRADE ============ */
/* Better eyebrow pill styling */
.archive-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: var(--color-primary);
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 16px rgba(0, 102, 204, 0.3);
    animation: eyebrowPulse 3s ease-in-out 2;
}

.archive-hero--home .archive-hero__eyebrow {
    align-self: center;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    width: fit-content;
}

@keyframes eyebrowPulse {
    0%, 100% { box-shadow: 0 4px 16px rgba(0, 102, 204, 0.3); }
    50% { box-shadow: 0 6px 24px rgba(0, 102, 204, 0.45); }
}

@media (prefers-reduced-motion: reduce) {
    .archive-hero__eyebrow { animation: none; }
}

/* Hero title - premium typography */
.archive-hero--home .archive-hero__title {
    font-size: clamp(2.5rem, 5.5vw, 4rem);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1.08;
    color: var(--color-text);
    text-wrap: balance;
}

/* Hero description - better readability */
.archive-hero--home .archive-hero__description {
    font-size: clamp(1.125rem, 1.8vw, 1.375rem);
    color: var(--color-text-secondary);
    line-height: 1.7;
    max-width: 580px;
}

/* Premium CTA buttons */
.archive-hero__actions .button {
    padding: 1rem 2rem;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 12px;
    transition: all 0.35s var(--premium-ease);
    position: relative;
    overflow: hidden;
}

.archive-hero__actions .button:not(.button--ghost) {
    background: var(--color-primary);
    color: #FFFFFF;
    -webkit-text-fill-color: #FFFFFF;
    box-shadow: 
        0 4px 16px rgba(0, 102, 204, 0.35),
        0 2px 4px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.archive-hero__actions .button:not(.button--ghost):hover {
    background: var(--color-primary-hover);
    transform: translateY(-3px);
    box-shadow: 
        0 8px 24px rgba(0, 102, 204, 0.4),
        0 4px 8px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.archive-hero__actions .button--ghost {
    background: transparent;
    color: var(--color-text);
    border: 2px solid var(--color-border-strong);
}

.archive-hero__actions .button--ghost:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: rgba(0, 102, 204, 0.06);
}

/* ============ HERO WORKFLOW PANEL - PREMIUM WHITE DESIGN ============ */
.archive-hero--home .home-hero__panel-card {
    background: var(--premium-card-bg);
    border: 1px solid var(--premium-card-border);
    border-radius: 1.5rem;
    padding: 2.5rem 2rem;
    box-shadow: var(--premium-shadow-xl);
    animation: fadeInUp 1.2s ease-out;
    position: relative;
    overflow: hidden;
}

/* Shimmer effect on panel - finite iterations per AGENTS.md (no infinite except spinners/skeletons) */
.archive-hero--home .home-hero__panel-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(96, 165, 250, 0.05);
    animation: shimmer 3s linear 3; /* 3 iterations = ~9s total, then stops */
    pointer-events: none;
    opacity: 0;
    will-change: opacity; /* GPU acceleration hint */
}

@media (prefers-reduced-motion: reduce) {
    .archive-hero--home .home-hero__panel-card::before {
        animation: none;
        opacity: 0;
    }
}

/* Panel header styling */
.home-hero__panel-top {
    margin-bottom: 2rem;
    text-align: center;
}

.home-hero__panel-eyebrow {
    display: block;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--premium-text-muted);
    margin-bottom: 0.75rem;
    font-weight: 600;
}

.home-hero__panel-title {
    display: block;
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 900;
    color: var(--color-primary);
    -webkit-text-fill-color: var(--color-primary);
    margin-bottom: 0.5rem;
}

/* Panel list - styled as step cards */
.home-hero__panel-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem;
    margin: 0 0 2rem;
    padding: 0;
    list-style: none;
    counter-reset: step-counter;
}

.home-hero__panel-list li {
    background: var(--premium-step-bg);
    border: 1px solid var(--premium-card-border);
    border-radius: 1rem;
    padding: 1.25rem 1rem;
    text-align: center;
    transition: all 0.4s var(--premium-ease);
    counter-increment: step-counter;
    position: relative;
}

.home-hero__panel-list li::before {
    content: counter(step-counter);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    background: var(--color-primary);
    color: white;
    border-radius: 50%;
    font-size: 1.125rem;
    font-weight: 900;
    margin: 0 auto 0.75rem;
    box-shadow: 0 8px 16px rgba(59, 130, 246, 0.25);
    animation: stepPulse 3s ease-in-out 2; /* 2 iterations = ~6s total, then stops */
    will-change: transform, box-shadow; /* GPU acceleration hint */
}

@media (prefers-reduced-motion: reduce) {
    .home-hero__panel-list li::before {
        animation: none;
    }
}

.home-hero__panel-list li:hover {
    transform: translateY(-8px);
    box-shadow: var(--premium-shadow-card-hover);
    background: var(--premium-card-bg);
}

.home-hero__panel-list li strong {
    display: block;
    font-size: 1.125rem;
    font-weight: 800;
    color: #1e40af;
    margin-bottom: 0.375rem;
}

:root[data-theme="dark"] .home-hero__panel-list li strong {
    color: #60a5fa;
}

/* KPIs section - refined grid */
.home-hero__kpis {
    display: flex;
    justify-content: space-around;
    background: var(--premium-kpi-bg);
    border: 1px solid var(--premium-card-border);
    border-radius: 1rem;
    padding: 1.5rem 1rem;
    margin-bottom: 1.5rem;
    gap: 0.5rem;
}

.home-hero__kpi {
    text-align: center;
    flex: 1;
    min-width: 0;
}

.home-hero__kpi span {
    display: block;
    font-size: 0.8125rem;
    color: var(--premium-text-muted);
    margin-bottom: 0.375rem;
    font-weight: 500;
}

.home-hero__kpi strong {
    display: block;
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 900;
    color: var(--premium-step-gradient-start);
}

/* Stack / Tech section */
.home-hero__stack {
    text-align: center;
    font-size: 0.9375rem;
}

.home-hero__stack > span {
    color: var(--premium-text-muted);
    margin-right: 0.5rem;
    font-weight: 500;
}

.home-hero__stack ul {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0;
    justify-content: center;
}

.home-hero__stack li {
    background: var(--premium-stack-pill-bg);
    color: var(--premium-step-gradient-start);
    padding: 0.5rem 1rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.8125rem;
    border: 1px solid var(--premium-stack-pill-border);
    transition: all 0.3s var(--premium-ease);
}

.home-hero__stack li:hover {
    background: var(--premium-step-gradient-start);
    color: #ffffff;
    transform: translateY(-2px);
}

/* ============ CAPABILITY CARDS - PREMIUM WITH ICONS ============ */
.archive-metrics {
    padding: 5rem 0 6rem;
    background: var(--color-bg);
    position: relative;
}

/* Section header improvement */
.archive-metrics .section-header {
    margin-bottom: 3rem;
}

.archive-metrics .section-header__title {
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--color-text);
}

.archive-metrics .section-desc {
    font-size: 1.125rem;
    color: var(--color-text-secondary);
    max-width: 640px;
    margin: 0.75rem auto 0;
    line-height: 1.7;
}

/* Card grid with premium spacing */
.archive-metrics__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
}

/* Premium capability cards */
.archive-metrics__card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 20px;
    padding: 2rem 1.75rem;
    text-align: left;
    position: relative;
    overflow: hidden;
    transition: all 0.4s var(--premium-ease);
}

/* Icon placeholder at top of card */
.archive-metrics__card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: var(--color-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s var(--premium-ease);
}

/* Numbered step indicator */
.archive-metrics__card::after {
    content: attr(data-step);
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 102, 204, 0.08);
    color: var(--color-primary);
    font-size: 0.875rem;
    font-weight: 800;
    border-radius: 10px;
    opacity: 0.7;
    transition: all 0.3s var(--premium-ease);
}

.archive-metrics__card:hover {
    border-color: var(--color-primary-light);
    transform: translateY(-8px);
    box-shadow: 
        0 12px 32px rgba(0, 0, 0, 0.08),
        0 24px 64px rgba(0, 102, 204, 0.1);
}

.archive-metrics__card:hover::before {
    transform: scaleX(1);
}

.archive-metrics__card:hover::after {
    opacity: 1;
    background: var(--color-primary);
    color: #FFFFFF;
}

/* Card heading with icon */
.archive-metrics__card h3 {
    font-size: 1.375rem;
    font-weight: 800;
    color: var(--color-text);
    margin-bottom: 0.75rem;
    letter-spacing: -0.02em;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Add icons via CSS for each capability card */
.archive-metrics__card:nth-child(1) h3::before {
    content: '\2728';
    font-size: 1.5rem;
}

.archive-metrics__card:nth-child(2) h3::before {
    content: '\1F50D';
    font-size: 1.5rem;
}

.archive-metrics__card:nth-child(3) h3::before {
    content: '\1F4CA';
    font-size: 1.5rem;
}

.archive-metrics__card:nth-child(4) h3::before {
    content: '\1F680';
    font-size: 1.5rem;
}

.archive-metrics__card p {
    font-size: 1rem;
    color: var(--color-text-secondary);
    line-height: 1.7;
    margin: 0;
}

/* ============ HERO CAROUSEL - PREMIUM UPGRADE ============ */
.hero-carousel {
    margin: 3rem auto;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.1),
        0 16px 48px rgba(0, 0, 0, 0.05);
}

/* Carousel content overlay - better readability */
.hero-carousel__content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 3rem 2.5rem 2rem;
    background: rgba(0, 0, 0, 0.72);
    z-index: 10;
    color: #FFFFFF;
}

/* Carousel category pill */
.hero-carousel__category {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: var(--color-primary);
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-radius: 8px;
    margin-bottom: 1rem;
}

/* Carousel title */
.hero-carousel__title {
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 0.75rem;
    letter-spacing: -0.02em;
}

.hero-carousel__title a {
    color: #FFFFFF;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.hero-carousel__title a:hover {
    opacity: 0.9;
}

/* Carousel meta info */
.hero-carousel__meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
}

/* Carousel date styling */
.hero-carousel__date {
    display: inline-block;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
}

/* Carousel read time styling */
.hero-carousel__read-time {
    display: inline-block;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    position: relative;
    padding-left: 1rem;
}

/* Separator between date and read time */
.hero-carousel__read-time::before {
    content: '•';
    position: absolute;
    left: 0;
    color: rgba(255, 255, 255, 0.5);
}

/* Carousel controls */
.hero-carousel__controls {
    position: absolute;
    bottom: 1.5rem;
    right: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    z-index: 20;
}

.hero-carousel__prev,
.hero-carousel__next {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.95);
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text);
    cursor: pointer;
    transition: all 0.3s var(--premium-ease);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.hero-carousel__prev:hover,
.hero-carousel__next:hover {
    background: var(--color-primary);
    color: #FFFFFF;
    transform: scale(1.05);
}

.hero-carousel__indicators {
    display: flex;
    gap: 0.5rem;
}

.hero-carousel__indicator {
    width: 10px;
    height: 10px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: all 0.3s ease;
}

.hero-carousel__indicator.is-active {
    background: #FFFFFF;
    width: 28px;
    border-radius: 5px;
}

/* Slides without images - premium placeholder */
.hero-carousel__slide--no-image {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary) !important;
}

.hero-carousel__slide--no-image .hero-carousel__content {
    position: relative;
    bottom: auto;
    text-align: center;
    background: transparent;
    max-width: 600px;
    padding: 3rem 2rem;
}

.hero-carousel__slide--no-image .hero-carousel__content--centered {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ============ TRENDING SECTION - PREMIUM WHITE CARDS ============ */
.trending-palette {
    padding: 6rem 0;
    background: var(--premium-kpi-bg);
    position: relative;
}

/* Subtle dot pattern background */
.trending-palette::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.02);
    pointer-events: none;
}

.trending-palette__header {
    text-align: center;
    margin-bottom: 3.5rem;
    position: relative;
    z-index: 1;
}

/* Hot Topics label - premium pill */
.trending-palette__label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: var(--color-primary);
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    border-radius: 9999px;
    margin-bottom: 1.25rem;
    box-shadow: 0 4px 16px rgba(0, 102, 204, 0.3);
}

.trending-palette__label::before {
    content: '\1F525';
    font-size: 0.875rem;
}

.trending-palette__title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    letter-spacing: -0.03em;
    color: var(--color-text);
    margin-bottom: 0.75rem;
}

/* Trending cards grid */
.trending-palette__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.75rem;
    position: relative;
    z-index: 1;
}

/* Premium trending card - WHITE with shimmer */
.trending-card {
    background: var(--premium-card-bg);
    border: 1px solid var(--premium-card-border);
    border-radius: 1.5rem;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: all 0.4s var(--premium-ease);
    position: relative;
    overflow: hidden;
    animation: fadeInUp 0.8s ease-out backwards;
    box-shadow: var(--premium-shadow-lg);
}

/* Shimmer effect on trending cards - finite iterations per AGENTS.md */
.trending-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(96, 165, 250, 0.03);
    animation: shimmer 4s linear 2; /* 2 iterations = ~8s total, then stops */
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    will-change: opacity;
}

@media (prefers-reduced-motion: reduce) {
    .trending-card::before {
        animation: none;
        opacity: 0;
    }
}

/* Accent line on hover */
.trending-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--color-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s var(--premium-ease);
}

@media (prefers-reduced-motion: reduce) {
    .trending-card::before {
        animation: none;
        opacity: 0;
    }
}

.trending-card:hover {
    transform: translateY(-12px);
    box-shadow: var(--premium-shadow-card-hover);
}

.trending-card:hover::after {
    transform: scaleX(1);
}

/* Stagger animation for cards */
.trending-card:nth-child(1) { animation-delay: 0.1s; }
.trending-card:nth-child(2) { animation-delay: 0.2s; }
.trending-card:nth-child(3) { animation-delay: 0.3s; }
.trending-card:nth-child(4) { animation-delay: 0.4s; }

/* Trending card image */
.trending-card__image {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 1rem;
    margin-bottom: 1.25rem;
    background: var(--premium-step-bg);
    transition: transform 0.5s var(--premium-ease);
    position: relative;
    z-index: 1;
}

.trending-card:hover .trending-card__image {
    transform: scale(1.03);
}

/* Trending card without image - styled placeholder */
.trending-card:not(:has(img)) .trending-card__meta {
    margin-top: 3rem;
}

.trending-card__meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--premium-text-muted);
    margin-bottom: 0.75rem;
    position: relative;
    z-index: 1;
}

.trending-card__category {
    color: var(--premium-step-gradient-start);
    font-weight: 700;
}

.trending-card__title {
    font-size: 1.375rem;
    font-weight: 800;
    line-height: 1.35;
    margin-bottom: 0.75rem;
    letter-spacing: -0.01em;
    position: relative;
    z-index: 1;
}

.trending-card__title a {
    color: var(--premium-text-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.trending-card__title a:hover {
    color: var(--premium-step-gradient-start);
}

.trending-card__excerpt {
    font-size: 1rem;
    color: var(--premium-text-secondary);
    line-height: 1.65;
    margin-bottom: auto;
    flex-grow: 1;
    position: relative;
    z-index: 1;
}

.trending-card__footer {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--premium-card-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 1;
}

.trending-card__read-more {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--premium-step-gradient-start);
    text-decoration: none;
    transition: gap 0.3s ease;
}

.trending-card__read-more:hover {
    gap: 0.75rem;
}

.trending-card__read-more svg {
    transition: transform 0.3s ease;
}

.trending-card__read-more:hover svg {
    transform: translateX(4px);
}

.trending-card__read-time {
    font-size: 0.8125rem;
    color: var(--premium-text-muted);
    font-weight: 500;
}

/* ============ LATEST ARTICLES - PREMIUM WHITE CARDS ============ */
.posts-section {
    padding: 5rem 0 6rem;
    background: var(--color-bg);
}

.posts-section .section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 3rem;
}

.posts-section .section-header__title {
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: 900;
    letter-spacing: -0.03em;
    color: var(--color-primary);
    -webkit-text-fill-color: var(--color-primary);
}

.posts-section .section-header__link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--premium-step-gradient-start);
    text-decoration: none;
    padding: 0.75rem 1.25rem;
    background: var(--premium-stack-pill-bg);
    border: 1px solid var(--premium-stack-pill-border);
    border-radius: 999px;
    transition: all 0.3s var(--premium-ease);
}

.posts-section .section-header__link:hover {
    background: var(--premium-step-gradient-start);
    color: #ffffff;
    gap: 0.625rem;
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(59, 130, 246, 0.25);
}

/* Posts grid */
.posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.75rem;
}

/* Premium post card - WHITE with shimmer */
.post-card {
    background: var(--premium-card-bg);
    border: 1px solid var(--premium-card-border);
    border-radius: 1.5rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all 0.4s var(--premium-ease);
    position: relative;
    animation: fadeInUp 0.8s ease-out backwards;
    box-shadow: var(--premium-shadow-lg);
}

/* Shimmer effect on post cards - finite iterations per AGENTS.md */
.post-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(96, 165, 250, 0.03);
    animation: shimmer 4s linear 2; /* 2 iterations = ~8s total, then stops */
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    will-change: opacity;
}

@media (prefers-reduced-motion: reduce) {
    .post-card::before {
        animation: none;
        opacity: 0;
    }
}

/* Accent line on hover */
.post-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--color-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s var(--premium-ease);
    z-index: 5;
}

.post-card:hover {
    transform: translateY(-12px);
    box-shadow: var(--premium-shadow-card-hover);
}

.post-card:hover::after {
    transform: scaleX(1);
}

/* Stagger animation for cards */
.post-card:nth-child(1) { animation-delay: 0.1s; }
.post-card:nth-child(2) { animation-delay: 0.2s; }
.post-card:nth-child(3) { animation-delay: 0.3s; }
.post-card:nth-child(4) { animation-delay: 0.4s; }

/* Post card image wrapper */
.post-card__image-wrapper {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--premium-step-bg);
}

.post-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s var(--premium-ease);
}

.post-card:hover .post-card__image {
    transform: scale(1.05);
}

/* Category badge on image - NO GRADIENTS per AGENTS.md */
.post-card__category {
    position: absolute !important;
    top: 1rem !important;
    left: 1rem !important;
    bottom: auto !important;
    padding: 0.5rem 1rem !important;
    background: var(--color-primary, #0066CC) !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 8px;
    z-index: 5;
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.3);
}

/* Post card content */
.post-card__content {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    position: relative;
    z-index: 1;
}

.post-card__meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.875rem;
    color: var(--premium-text-muted);
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.post-card__date {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.post-card__reading-time {
    font-weight: 600;
    color: var(--premium-step-gradient-start);
}

/* v5.58.0: Post card view counts */
.post-card__views {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-weight: 500;
    color: var(--premium-text-muted);
}

.post-card__views svg {
    width: 14px;
    height: 14px;
    opacity: 0.7;
}

.post-card__title {
    font-size: 1.375rem;
    font-weight: 800;
    line-height: 1.35;
    margin-bottom: 0.75rem;
    letter-spacing: -0.01em;
}

.post-card__title a {
    color: var(--premium-text-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.post-card__title a:hover {
    color: var(--premium-step-gradient-start);
}

.post-card__excerpt {
    font-size: 1rem;
    color: var(--premium-text-secondary);
    line-height: 1.65;
    margin-bottom: 1.25rem;
    flex-grow: 1;
}

.post-card__author {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.9375rem;
    color: var(--premium-text-primary);
    font-weight: 600;
    padding-top: 1rem;
    border-top: 1px solid var(--premium-card-border);
    margin-top: auto;
}

.post-card__author-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--premium-stack-pill-border);
}

/* ============ NEWSLETTER SECTION - PREMIUM UPGRADE ============ */
.newsletter-section {
    padding: 6rem 0;
    background: rgba(0, 102, 204, 0.04);
    position: relative;
}

.newsletter-section__inner {
    max-width: 640px;
    margin: 0 auto;
    padding: 3.5rem 3rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 28px;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.06),
        0 16px 64px rgba(0, 0, 0, 0.04);
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* Decorative accent */
.newsletter-section__inner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--color-primary);
}

.newsletter-section__icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary);
    border-radius: 20px;
    color: #FFFFFF;
    box-shadow: 0 8px 24px rgba(0, 102, 204, 0.3);
}

.newsletter-section__eyebrow {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: rgba(0, 102, 204, 0.08);
    color: var(--color-primary);
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    border-radius: 8px;
    margin-bottom: 1rem;
}

.newsletter-section__content h2 {
    font-size: clamp(1.75rem, 4vw, 2.25rem);
    font-weight: 900;
    letter-spacing: -0.03em;
    color: var(--color-text);
    margin-bottom: 0.75rem;
}

.newsletter-section__content p {
    font-size: 1.0625rem;
    color: var(--color-text-secondary);
    line-height: 1.7;
    max-width: 480px;
    margin: 0 auto 2rem;
}

/* Newsletter form */
.newsletter-form {
    display: flex;
    gap: 0.75rem;
    max-width: 440px;
    margin: 0 auto 1.5rem;
}

.newsletter-form__input-group {
    flex: 1;
    position: relative;
}

.newsletter-form__icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-muted);
    pointer-events: none;
}

.newsletter-form input[type="email"] {
    width: 100%;
    padding: 1rem 1rem 1rem 3rem;
    font-size: 1rem;
    border: 2px solid var(--color-border);
    border-radius: 14px;
    background: var(--color-bg);
    color: var(--color-text);
    transition: all 0.3s ease;
}

.newsletter-form input[type="email"]:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px rgba(0, 102, 204, 0.1);
}

.newsletter-form__button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1.75rem;
    background: var(--color-primary);
    color: #FFFFFF;
    -webkit-text-fill-color: #FFFFFF;
    font-size: 1rem;
    font-weight: 700;
    border: none;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.3s var(--premium-ease);
    box-shadow: 0 4px 16px rgba(0, 102, 204, 0.3);
    white-space: nowrap;
}

.newsletter-form__button:hover {
    background: var(--color-primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 102, 204, 0.4);
}

.newsletter-section__note {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.newsletter-section__note svg {
    color: var(--color-success);
}

/* ============ INVESTOR CTA SECTION - PREMIUM ============ */
.about-cta {
    padding: 5rem 0;
    background: var(--color-surface-alt);
    position: relative;
}

.about-cta__grid--centered {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.about-cta__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(0, 102, 204, 0.08);
    color: var(--color-primary);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-radius: 8px;
    margin-bottom: 1.5rem;
}

.about-cta__eyebrow svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
}

.about-cta__content h2 {
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 900;
    letter-spacing: -0.03em;
    color: var(--color-text);
    margin-bottom: 1rem;
    line-height: 1.15;
}

.about-cta__content p {
    font-size: 1.125rem;
    color: var(--color-text-secondary);
    line-height: 1.7;
    max-width: 640px;
    margin: 0 auto 2rem;
}

/* CTA buttons */
.button-group--cta {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.button-group--cta .button--primary {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 1rem 2rem;
    background: var(--color-primary);
    color: #FFFFFF;
    -webkit-text-fill-color: #FFFFFF;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 14px;
    text-decoration: none;
    transition: all 0.3s var(--premium-ease);
    box-shadow: 0 4px 16px rgba(0, 102, 204, 0.3);
}

.button-group--cta .button--primary:hover {
    background: var(--color-primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 102, 204, 0.4);
}

.button-group--cta .button--primary svg {
    width: 18px;
    height: 18px;
    stroke: #FFFFFF;
}

/* ============ RESPONSIVE REFINEMENTS ============ */
@media (max-width: 768px) {
    .archive-hero__actions {
        flex-direction: column;
        width: 100%;
        padding: 0 1rem;
    }
    
    .archive-hero__actions .button {
        width: 100%;
        justify-content: center;
    }
    
    .archive-metrics__grid {
        grid-template-columns: 1fr 1fr;
    }
    
    .trending-palette__grid,
    .posts-grid {
        grid-template-columns: 1fr;
    }
    
    .newsletter-form {
        flex-direction: column;
    }
    
    .newsletter-form__button {
        justify-content: center;
    }
    
    .newsletter-section__inner {
        margin: 0 1rem;
        padding: 2.5rem 1.5rem;
    }
    
    /* Workflow panel responsive */
    .home-hero__panel-list {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    
    .home-hero__kpis {
        flex-direction: column;
        gap: 1rem;
        padding: 1.25rem;
    }
    
    .home-hero__stack ul {
        justify-content: center;
    }
    
    /* Post/Trending cards - more lift on mobile touch */
    .trending-card:hover,
    .post-card:hover {
        transform: translateY(-6px);
    }
    
    .posts-section .section-header {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }
}

@media (max-width: 480px) {
    .archive-metrics__grid {
        grid-template-columns: 1fr;
    }
    
    .archive-metrics__card::after {
        display: none;
    }
    
    .home-hero__panel-card {
        padding: 1.5rem 1rem;
    }
    
    .home-hero__panel-title {
        font-size: 1.5rem;
    }
    
    .home-hero__kpi strong {
        font-size: 1.75rem;
    }
    
    .home-hero__stack li {
        padding: 0.375rem 0.75rem;
        font-size: 0.75rem;
    }
}

/* ============ DARK MODE ENHANCEMENTS ============ */
:root[data-theme="dark"] .archive-metrics__card,
:root[data-theme="dark"] .trending-card,
:root[data-theme="dark"] .post-card,
:root[data-theme="dark"] .newsletter-section__inner {
    background: var(--premium-card-bg);
    border-color: var(--premium-card-border);
}

:root[data-theme="dark"] .trending-palette {
    background: rgba(15, 15, 18, 0.95);
}

:root[data-theme="dark"] .trending-palette::before {
    background-color: rgba(255, 255, 255, 0.02);
}

:root[data-theme="dark"] .newsletter-section {
    background: rgba(0, 102, 204, 0.06);
}

/* Dark mode shimmer adjustment */
:root[data-theme="dark"] .trending-card::before,
:root[data-theme="dark"] .post-card::before,
:root[data-theme="dark"] .archive-hero--home .home-hero__panel-card::before {
    background: rgba(96, 165, 250, 0.08);
}

/* Dark mode text colors */
:root[data-theme="dark"] .trending-card__title a,
:root[data-theme="dark"] .post-card__title a {
    color: var(--premium-text-primary);
}

:root[data-theme="dark"] .trending-card__excerpt,
:root[data-theme="dark"] .post-card__excerpt {
    color: var(--premium-text-secondary);
}

:root[data-theme="dark"] .home-hero__kpis {
    background: var(--premium-kpi-bg);
    border-color: var(--premium-card-border);
}

:root[data-theme="dark"] .home-hero__panel-list li {
    background: var(--premium-step-bg);
    border-color: var(--premium-card-border);
}

:root[data-theme="dark"] .home-hero__stack li {
    background: var(--premium-stack-pill-bg);
    border-color: var(--premium-stack-pill-border);
}

:root[data-theme="dark"] .posts-section .section-header__link {
    background: var(--premium-stack-pill-bg);
    border-color: var(--premium-stack-pill-border);
}

:root[data-theme="dark"] .posts-section .section-header__link:hover {
    background: var(--premium-step-gradient-start);
    color: #ffffff;
}

/* ============ EXTRA TINY SCREENS (<320px) ============
   Fix layout issues on very small screens.
   v5.40.1 - 2026-01-02
*/
@media (max-width: 319px) {
    .home-hero__panel-eyebrow {
        font-size: 0.55rem;
        padding: var(--space-1) var(--space-2);
        letter-spacing: 0.04em;
    }

    .home-hero__panel-title {
        font-size: 1.25rem;
    }

    .home-hero__copy h1 {
        font-size: clamp(1.2rem, 5vw, 1.6rem);
    }

    .home-hero__copy p {
        font-size: 0.85rem;
    }

    .home-hero__panel-card {
        padding: 1rem 0.75rem;
    }

    .home-hero__stack li {
        padding: 0.25rem 0.5rem;
        font-size: 0.65rem;
    }

    .home-hero__kpi strong {
        font-size: 1.25rem;
    }

    .home-hero__kpi span:first-child {
        font-size: 0.55rem;
    }
}


/* ========== archive-metrics-v2.css ========== */
/* ========================================
   Archive Metrics Component (Elegant V2)
   Based on user-provided "God Mode" design spec.
   ======================================== */

/* 1. VARIABLES & SCOPE */
.archive-metrics--stats {
    /* Map theme variables to component tokens */
    --am-bg: var(--color-surface-alt, #f8f9fa);
    --am-card-bg: var(--color-surface, #ffffff);
    --am-text-main: var(--color-text, #2d3748);
    --am-text-muted: var(--color-text-muted, #718096);
    --am-accent: var(--color-primary, #3182ce);
    
    /* Exact shadows from spec */
    --am-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --am-shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    
    /* Layout */
    padding: 4rem 0;
    background-color: var(--am-bg);
}

/* Dark mode overrides */
[data-theme="dark"] .archive-metrics--stats {
    --am-bg: var(--color-surface-alt, #1a202c);
    --am-card-bg: var(--color-surface, #2d3748);
    --am-text-main: var(--color-text, #f7fafc);
    --am-text-muted: var(--color-text-muted, #a0aec0);
    --am-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
    --am-shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
}

/* 2. GRID LAYOUT */
.archive-metrics--stats .archive-metrics__grid {
    display: grid;
    /* Responsive auto-fit grid from spec */
    /*
       Centered, fixed-max tiles:
       - keeps cards from stretching too wide on large screens
       - centers the whole grid when there are fewer cards than available columns
    */
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 360px));
    gap: 2rem;
    justify-content: center;
    max-width: 1200px;
    list-style: none;
    padding: 0;
    margin: 0 auto;
}

/* 3. CARD STYLES */
.archive-metrics--stats .archive-metrics__item {
    background-color: var(--am-card-bg);
    padding: 2rem;
    border-radius: 12px;
    box-shadow: var(--am-shadow);
    border: 1px solid rgba(0,0,0,0.05);
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    
    /* Reset any theme-specific list styles */
    margin: 0;
}

[data-theme="dark"] .archive-metrics--stats .archive-metrics__item {
    border-color: rgba(255,255,255,0.05);
}

.archive-metrics--stats .archive-metrics__item:hover {
    transform: translateY(-5px);
    box-shadow: var(--am-shadow-hover);
}

/* Remove any pseudo-elements from previous themes */
.archive-metrics--stats .archive-metrics__item::before,
.archive-metrics--stats .archive-metrics__item::after {
    display: none !important;
}

/* 4. TYPOGRAPHY */
.archive-metrics--stats .archive-metrics__label {
    display: block;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--am-text-muted);
    font-weight: 600;
    margin: 0 0 0.5rem 0;
}

.archive-metrics--stats .archive-metrics__value {
    font-size: 3rem;
    line-height: 1;
    font-weight: 800;
    color: var(--am-accent);
    -webkit-text-fill-color: currentColor;
    margin: 0.5rem 0;
}

.archive-metrics--stats .archive-metrics__desc {
    font-size: 1rem;
    color: var(--am-text-muted);
    margin: 0.5rem 0 0 0;
    line-height: 1.5;
}

/* 5. ANIMATIONS */
@keyframes amFadeUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Apply animation when .is-visible class is added by JS observer */
.archive-metrics--stats [data-anim="fade-up"] {
    opacity: 0; /* Hidden initially */
}

.archive-metrics--stats [data-anim="fade-up"].is-visible {
    animation: amFadeUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* Stagger delays */
.archive-metrics--stats [data-delay="100"].is-visible { animation-delay: 100ms; }
.archive-metrics--stats [data-delay="200"].is-visible { animation-delay: 200ms; }
.archive-metrics--stats [data-delay="300"].is-visible { animation-delay: 300ms; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .archive-metrics--stats [data-anim="fade-up"] {
        opacity: 1;
        animation: none !important;
        transform: none !important;
    }
    .archive-metrics--stats .archive-metrics__item:hover {
        transform: none;
    }
}


/* ========== logo-uniformity.css ========== */
/* ========================================
   Logo Uniformity System v2.0.0
   Ensures consistent logo/branding across all viewports
   
   v2.0.0 Changes (2025-12-27):
   - NEW: High-contrast logo design with white outer ring
   - NEW: Enhanced drop shadow for visual anchoring
   - NEW: Improved branding spacing and margins
   - NEW: Better gap values for breathing room
   
   GUARDRAIL: This file enforces logo visibility rules
   - Logo text MUST NOT be truncated (no ellipsis)
   - Logo SVG sizes scale proportionally
   - Branding area has priority over header actions
   ======================================== */

/* ============ BASE LOGO SVG SIZING ============ */
/* Desktop: 44px (default from header.php) */
.site-logo-svg {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    /* Visual anchoring with drop shadow */
    filter: drop-shadow(0 2px 4px rgba(0, 51, 102, 0.15)) 
            drop-shadow(0 4px 8px rgba(0, 102, 204, 0.1));
}

.site-logo-svg:hover {
    filter: drop-shadow(0 4px 8px rgba(0, 51, 102, 0.2)) 
            drop-shadow(0 6px 12px rgba(0, 102, 204, 0.15));
}

/* ============ BRANDING CONTAINER SPACING ============ */
/* Ensures logo and text have proper breathing room */
.branding {
    display: flex;
    align-items: center;
    gap: 0.875rem; /* 14px - optimal spacing between logo and text */
    padding-left: 0.25rem; /* Small buffer from edge */
}

.branding a {
    display: inline-flex;
    align-items: center;
    gap: 0.875rem; /* Match parent gap */
}

/* ============ BRANDING TITLE: NO TRUNCATION POLICY ============ */
/* CRITICAL: Logo text must always be fully visible */
.branding__title {
    /* Base sizing */
    font-size: 1.3rem !important; /* Slightly larger for more presence */
    font-weight: 800 !important;
    white-space: nowrap;
    letter-spacing: -0.02em; /* Tighter tracking for modern look */
    
    /* GUARDRAIL: These properties are FORBIDDEN on .branding__title */
    /* overflow: hidden;  - NEVER USE */
    /* text-overflow: ellipsis;  - NEVER USE */
    /* max-width: *;  - NEVER USE */
}

/* ============ RESPONSIVE SCALING: UNIFORM RATIOS ============ */

/* Tablet (768px - 959px): Logo 42px, Title 1.2rem */
@media (max-width: 959px) and (min-width: 768px) {
    .site-logo-svg {
        width: 42px;
        height: 42px;
    }
    
    .branding {
        gap: 0.75rem; /* 12px */
        padding-left: 0.5rem;
    }
    
    .branding__title {
        font-size: 1.2rem !important;
        /* NO max-width, NO overflow hidden */
    }
}

/* Mobile (480px - 767px): Logo 38px, Title 1.05rem */
@media (max-width: 767px) and (min-width: 480px) {
    .site-logo-svg {
        width: 38px;
        height: 38px;
    }
    
    .branding {
        gap: 0.625rem; /* 10px */
        padding-left: 0.25rem;
    }
    
    .branding__title {
        font-size: 1.05rem !important;
        /* NO max-width, NO overflow hidden */
    }
}

/* Small Mobile (375px - 479px): Logo 36px, Title 1rem */
@media (max-width: 479px) and (min-width: 375px) {
    .site-logo-svg {
        width: 36px;
        height: 36px;
    }
    
    .branding {
        gap: 0.5rem; /* 8px */
        padding-left: 0;
    }
    
    .branding__title {
        font-size: 1rem !important;
        /* NO max-width, NO overflow hidden */
    }
}

/* Tiny Mobile (320px - 374px): Logo 34px, Title 0.95rem */
@media (max-width: 374px) and (min-width: 320px) {
    .site-logo-svg {
        width: 34px;
        height: 34px;
    }
    
    .branding {
        gap: 0.375rem; /* 6px */
        padding-left: 0;
    }
    
    .branding__title {
        font-size: 0.95rem !important;
        /* NO max-width, NO overflow hidden */
    }
}

/* Ultra Small (< 320px): Logo 32px, Title 0.9rem */
@media (max-width: 319px) {
    .site-logo-svg {
        width: 32px;
        height: 32px;
    }
    
    .branding {
        gap: 0.25rem; /* 4px */
    }
    
    .branding__title {
        font-size: 0.9rem !important;
        /* NO max-width, NO overflow hidden */
    }
}

/* ============ BRANDING AREA PRIORITY ============ */
/* On small screens, branding takes priority over action buttons */
@media (max-width: 479px) {
    .branding {
        flex-shrink: 0;
        min-width: 0;
        flex: 1 1 auto;
    }
    
    .branding__text {
        flex-shrink: 1;
        min-width: 0;
    }
    
    /* Action buttons can shrink if needed */
    .site-header__actions {
        flex-shrink: 1;
    }
    
    /* Reduce action button sizes to give more space to branding */
    .header-search-toggle,
    .newsletter-cta,
    .nav-toggle {
        width: 44px;
        height: 44px;
        min-width: 44px;
    }
}

/* ============ DARK MODE LOGO CONSISTENCY ============ */
[data-theme="dark"] .site-logo-svg {
    /* Enhanced glow for dark mode */
    filter: drop-shadow(0 0 8px rgba(96, 165, 250, 0.3)) 
            drop-shadow(0 4px 12px rgba(0, 102, 204, 0.25));
}

[data-theme="dark"] .site-logo-svg:hover {
    filter: drop-shadow(0 0 12px rgba(96, 165, 250, 0.4)) 
            drop-shadow(0 6px 16px rgba(0, 102, 204, 0.3));
}

[data-theme="dark"] .branding__title {
    /* Title uses lighter accent in dark mode */
    color: var(--color-primary-light, #60a5fa) !important;
}

/* ============ PRELOADER LOGO SIZING ============ */
/* Preloader uses larger logo (80px) */
.preloader__logo .site-logo-svg,
.preloader__logo svg {
    width: 80px !important;
    height: 80px !important;
}

/* ============ FOOTER BRANDING ============ */
/* Footer branding uses site name text, not logo */
.site-footer__brand .branding__title {
    font-size: 1.1rem;
    color: var(--color-text-inverse, #ffffff);
}


/* ========== premium-charts.css ========== */
/**
 * Premium Charts CSS Module v2.0.0 - INFOGRAM-LEVEL QUALITY
 * 
 * Design inspired by Infogram's premium data visualization:
 * - Professional spacing & micro-interactions
 * - Intelligent hover states with smooth transitions
 * - Grid backgrounds for data context
 * - Sophisticated shadow system for depth
 * - Rich typography with perfect alignment
 * - Smooth value animations with easing
 * - Touch-optimized for all devices
 * 
 * Key improvements over v1.0:
 * - 3x larger padding for breathing room
 * - Layered shadow system (Infogram-style elevation)
 * - Grid overlay for data precision
 * - Hover effects that scale/lift bars
 * - Value labels positioned outside bars (more readable)
 * - Professional color palette with hover states
 * 
 * @since v5.36.0
 */

/* ==========================================================================
   CSS CUSTOM PROPERTIES (Premium Chart Tokens)
   ========================================================================== */

:root {
    /* Chart Container - INFOGRAM-LEVEL SPACING */
    --pc-container-bg: #FFFFFF;
    --pc-container-border: rgba(0, 0, 0, 0.06);
    --pc-container-radius: 20px;
    --pc-container-shadow-base: 0 2px 8px rgba(0, 0, 0, 0.04);
    --pc-container-shadow-hover: 0 8px 32px rgba(0, 0, 0, 0.08);
    --pc-container-padding: 3.5rem 3rem; /* Generous padding like Infogram */
    
    /* Typography - Professional Hierarchy */
    --pc-title-size: 1.75rem; /* Bigger, bolder titles */
    --pc-title-weight: 700;
    --pc-title-line-height: 1.2;
    --pc-subtitle-size: 1rem;
    --pc-subtitle-weight: 500;
    --pc-label-size: 0.9375rem; /* Larger, easier to read */
    --pc-label-weight: 500;
    --pc-value-size: 1rem; /* Bold values stand out */
    --pc-value-weight: 700;
    --pc-source-size: 0.8125rem;
    --pc-source-color: #6B7280;
    
    /* Colors - Infogram Professional Palette (100% solid) */
    --pc-blue: #1E88E5;
    --pc-blue-hover: #1565C0;
    --pc-red: #E53935;
    --pc-red-hover: #C62828;
    --pc-yellow: #FFB300;
    --pc-yellow-hover: #FF8F00;
    --pc-green: #43A047;
    --pc-green-hover: #2E7D32;
    --pc-purple: #8E24AA;
    --pc-purple-hover: #6A1B9A;
    --pc-teal: #00897B;
    --pc-teal-hover: #00695C;
    --pc-orange: #FB8C00;
    --pc-orange-hover: #E65100;
    --pc-pink: #D81B60;
    --pc-pink-hover: #AD1457;
    --pc-indigo: #3949AB;
    --pc-indigo-hover: #283593;
    --pc-cyan: #00ACC1;
    --pc-cyan-hover: #00838F;
    
    /* Semantic */
    --pc-positive: #43A047;
    --pc-negative: #E53935;
    --pc-neutral: #78909C;
    
    /* Bar dimensions - Generous sizing */
    --pc-bar-height: 48px; /* Taller bars = easier to see */
    --pc-bar-height-stacked: 56px;
    --pc-bar-gap: 20px; /* More space between bars */
    --pc-bar-radius: 8px; /* Softer corners */
    --pc-bar-radius-full: 9999px;
    --pc-bar-border: 2px solid rgba(255, 255, 255, 0.15);
    
    /* Animation - Smooth & sophisticated */
    --pc-animation-duration: 1.2s;
    --pc-animation-easing: cubic-bezier(0.34, 1.56, 0.64, 1); /* Bounce out */
    --pc-hover-duration: 0.25s;
    --pc-hover-easing: cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Grid overlay */
    --pc-grid-color: rgba(0, 0, 0, 0.04);
    --pc-grid-line-width: 1px;

    /* Grid pattern (NO CSS gradients: use an SVG pattern background) */
    --pc-grid-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cpath d='M79.5 0V80' stroke='%23E5E7EB' stroke-width='1'/%3E%3Cpath d='M0 79.5H80' stroke='%23E5E7EB' stroke-width='1'/%3E%3C/svg%3E");
    
    /* Gauge */
    --pc-gauge-size: 200px;
    --pc-gauge-stroke: 20px;
    --pc-gauge-track: rgba(0, 0, 0, 0.06);
    
    /* Tooltip */
    --pc-tooltip-bg: #1E293B;
    --pc-tooltip-text: #FFFFFF;
    --pc-tooltip-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    --pc-tooltip-radius: 8px;
}

/* Dark mode tokens */
[data-theme="dark"] {
    --pc-container-bg: #1E293B;
    --pc-container-border: #334155;
    --pc-container-shadow-base: 0 2px 8px rgba(0, 0, 0, 0.4);
    --pc-container-shadow-hover: 0 8px 32px rgba(0, 0, 0, 0.6);
    --pc-grid-color: rgba(255, 255, 255, 0.04);
    --pc-grid-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cpath d='M79.5 0V80' stroke='%23334155' stroke-width='1'/%3E%3Cpath d='M0 79.5H80' stroke='%23334155' stroke-width='1'/%3E%3C/svg%3E");
    --pc-gauge-track: rgba(255, 255, 255, 0.08);
    --pc-source-color: #94A3B8;
    --pc-tooltip-bg: #F8FAFC;
    --pc-tooltip-text: #1E293B;
}

/* ==========================================================================
   PREMIUM CHART CONTAINER - INFOGRAM-LEVEL POLISH
   ========================================================================== */

.pc-chart {
    position: relative;
    background: var(--pc-container-bg);
    border: 1px solid var(--pc-container-border);
    border-radius: var(--pc-container-radius);
    padding: var(--pc-container-padding);
    margin: 3rem auto;
    max-width: 1000px;
    box-shadow: var(--pc-container-shadow-base);
    overflow: visible;
    transition: box-shadow var(--pc-hover-duration) var(--pc-hover-easing);
}

.pc-chart:hover {
    box-shadow: var(--pc-container-shadow-hover);
}

.pc-chart__header {
    margin-bottom: 1.5rem;
    text-align: center;
}

.pc-chart__title {
    margin: 0 0 0.5rem 0;
    font-size: var(--pc-title-size);
    font-weight: var(--pc-title-weight);
    color: var(--color-text, #1A1A1A);
    letter-spacing: -0.02em;
    line-height: 1.3;
}

.pc-chart__subtitle {
    margin: 0;
    font-size: var(--pc-subtitle-size);
    color: var(--color-text-muted, #6B7280);
    line-height: 1.5;
}

.pc-chart__source {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--pc-container-border);
    font-size: var(--pc-source-size);
    color: var(--color-text-muted, #9CA3AF);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ==========================================================================
   HORIZONTAL BAR CHART - INFOGRAM PROFESSIONAL QUALITY
   ========================================================================== */

/* Grid overlay for data precision (like Infogram) */
.pc-chart--with-grid {
    background-image: var(--pc-grid-pattern);
    background-repeat: repeat;
    background-size: 80px 80px;
    background-position: 0 0;
}

/* Horizontal bar container */
.pc-hbar {
    display: flex;
    flex-direction: column;
    gap: var(--pc-bar-gap);
    padding: 1.5rem 0;
}

.pc-hbar__row {
    display: grid;
    grid-template-columns: minmax(140px, auto) 1fr auto;
    align-items: center;
    gap: 1.5rem;
    min-height: var(--pc-bar-height);
    position: relative;
}

.pc-hbar__label {
    font-size: var(--pc-label-size);
    font-weight: var(--pc-label-weight);
    color: var(--color-text, #1A1A1A);
    text-align: right;
    padding-right: 0;
}

/* Bar track (background) */
.pc-hbar__track {
    position: relative;
    height: var(--pc-bar-height);
    background: var(--pc-gauge-track);
    border-radius: var(--pc-bar-radius);
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* Bar fill (colored bar) - INFOGRAM-LEVEL POLISH */
.pc-hbar__fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-radius: var(--pc-bar-radius);
    background: var(--pc-blue);
    transition: 
        width var(--pc-animation-duration) var(--pc-animation-easing),
        transform var(--pc-hover-duration) var(--pc-hover-easing),
        box-shadow var(--pc-hover-duration) var(--pc-hover-easing);
    will-change: width;
    cursor: pointer;
    
    /* Subtle inner border for depth (Infogram-style) */
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        inset 0 -1px 0 rgba(0, 0, 0, 0.08),
        0 2px 4px rgba(0, 0, 0, 0.08);
}

/* Hover: Lift bar slightly (micro-interaction) */
.pc-hbar__fill:hover {
    transform: translateY(-2px);
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1),
        0 4px 12px rgba(0, 0, 0, 0.12);
}

.pc-hbar__fill:focus-visible {
    outline: 3px solid var(--color-primary, #0066CC);
    outline-offset: 3px;
    z-index: 10;
}

/* Value label OUTSIDE bar (Infogram-style) */
.pc-hbar__value {
    font-size: var(--pc-value-size);
    font-weight: var(--pc-value-weight);
    color: var(--color-text, #1A1A1A);
    white-space: nowrap;
    min-width: 60px;
    text-align: left;
}

/* Tooltip on hover - only shows when data-tooltip has content */
.pc-hbar__fill[data-tooltip]:not([data-tooltip=""])::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%) scale(0.9);
    background: var(--pc-tooltip-bg);
    color: var(--pc-tooltip-text);
    padding: 0.5rem 0.75rem;
    border-radius: var(--pc-tooltip-radius);
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: 
        opacity var(--pc-hover-duration) ease,
        transform var(--pc-hover-duration) var(--pc-hover-easing),
        visibility var(--pc-hover-duration);
    box-shadow: var(--pc-tooltip-shadow);
    z-index: 100;
}

.pc-hbar__fill[data-tooltip]:not([data-tooltip=""])::before {
    content: "";
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid var(--pc-tooltip-bg);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: 
        opacity var(--pc-hover-duration) ease,
        visibility var(--pc-hover-duration);
    z-index: 100;
}

.pc-hbar__fill[data-tooltip]:not([data-tooltip=""]):hover::after,
.pc-hbar__fill[data-tooltip]:not([data-tooltip=""]):hover::before {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) scale(1);
}

/* ==========================================================================
   STACKED HORIZONTAL BAR CHART (Infogram-style)
   ========================================================================== */

.pc-stacked-bar {
    display: flex;
    flex-direction: column;
    gap: var(--pc-bar-gap);
    padding: 1.5rem 0;
}

.pc-stacked-bar__row {
    display: grid;
    grid-template-columns: minmax(140px, auto) 1fr;
    align-items: center;
    gap: 1.5rem;
    min-height: var(--pc-bar-height-stacked);
}

.pc-stacked-bar__label {
    font-size: var(--pc-label-size);
    font-weight: var(--pc-label-weight);
    color: var(--color-text, #1A1A1A);
    text-align: right;
}

.pc-stacked-bar__container {
    display: flex;
    height: var(--pc-bar-height-stacked);
    border-radius: var(--pc-bar-radius);
    overflow: hidden;
    background: var(--pc-gauge-track);
    position: relative;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* Individual segment in stacked bar */
.pc-stacked-bar__segment {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: 
        width var(--pc-animation-duration) var(--pc-animation-easing),
        filter var(--pc-hover-duration) ease,
        transform var(--pc-hover-duration) var(--pc-hover-easing);
    cursor: pointer;
    will-change: width;
}

.pc-stacked-bar__segment:hover {
    filter: brightness(1.1);
    transform: scaleY(1.05); /* Slight grow on hover */
    z-index: 5;
}

.pc-stacked-bar__segment:focus-visible {
    outline: 3px solid var(--color-primary, #0066CC);
    outline-offset: 2px;
    z-index: 10;
}

/* Value label inside segment */
.pc-stacked-bar__value {
    font-size: var(--pc-value-size);
    font-weight: var(--pc-value-weight);
    color: #FFFFFF;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    white-space: nowrap;
    opacity: 1;
    transition: opacity 0.15s ease;
}

/* Hide value if segment is too narrow */
.pc-stacked-bar__segment[data-narrow="true"] .pc-stacked-bar__value {
    opacity: 0;
}

/* ==========================================================================
   INTERACTIVE LEGEND
   ========================================================================== */

.pc-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--pc-container-border);
}

.pc-legend__item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    border-radius: 9999px;
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    transition: 
        background var(--pc-hover-duration) ease,
        border-color var(--pc-hover-duration) ease,
        opacity var(--pc-hover-duration) ease;
    font-size: var(--pc-label-size);
    color: var(--color-text, #1A1A1A);
    font-weight: 500;
}

.pc-legend__item:hover {
    background: var(--color-surface-alt, #F3F4F6);
}

.pc-legend__item[aria-pressed="false"] {
    opacity: 0.4;
}

.pc-legend__item:focus-visible {
    outline: 2px solid var(--color-primary, #0066CC);
    outline-offset: 2px;
}

.pc-legend__color {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    flex-shrink: 0;
}

/* ==========================================================================
   PROGRESS RING / RADIAL GAUGE (Infogram-style)
   ========================================================================== */

.pc-gauge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.pc-gauge__ring {
    position: relative;
    width: var(--pc-gauge-size);
    height: var(--pc-gauge-size);
}

.pc-gauge__svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.pc-gauge__track {
    fill: none;
    stroke: var(--pc-gauge-track);
    stroke-width: var(--pc-gauge-stroke);
}

.pc-gauge__fill {
    fill: none;
    stroke-width: var(--pc-gauge-stroke);
    stroke-linecap: round;
    transition: stroke-dasharray var(--pc-animation-duration) var(--pc-animation-easing);
}

.pc-gauge__center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.pc-gauge__value {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--color-text, #1A1A1A);
    line-height: 1;
    letter-spacing: -0.02em;
}

.pc-gauge__label {
    font-size: var(--pc-label-size);
    color: var(--color-text-muted, #6B7280);
    margin-top: 0.25rem;
}

/* Multiple gauges in a row */
.pc-gauge-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
}

.pc-gauge-grid .pc-gauge {
    flex: 0 0 auto;
}

/* Smaller gauge variant */
.pc-gauge--sm {
    --pc-gauge-size: 120px;
    --pc-gauge-stroke: 12px;
}

.pc-gauge--sm .pc-gauge__value {
    font-size: 1.75rem;
}

/* ==========================================================================
   PICTORIAL CHART (Icon-based)
   ========================================================================== */

.pc-pictorial {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.pc-pictorial__row {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.pc-pictorial__label {
    flex: 0 0 120px;
    font-size: var(--pc-label-size);
    font-weight: 500;
    color: var(--color-text, #1A1A1A);
    text-align: right;
}

.pc-pictorial__icons {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.pc-pictorial__icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: transform 0.2s ease;
}

.pc-pictorial__icon--filled {
    opacity: 1;
}

.pc-pictorial__icon--empty {
    opacity: 0.2;
}

.pc-pictorial__value {
    flex: 0 0 60px;
    font-size: var(--pc-value-size);
    font-weight: 700;
    color: var(--color-text, #1A1A1A);
}

/* ==========================================================================
   ANIMATED COUNTER
   ========================================================================== */

.pc-counter {
    text-align: center;
    padding: 1.5rem;
}

.pc-counter__value {
    font-size: 3.5rem;
    font-weight: 800;
    color: var(--color-primary, #0066CC);
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.pc-counter__label {
    margin-top: 0.5rem;
    font-size: var(--pc-label-size);
    color: var(--color-text-muted, #6B7280);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
}

.pc-counter__trend {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
}

.pc-counter__trend--up {
    color: var(--pc-positive);
}

.pc-counter__trend--down {
    color: var(--pc-negative);
}

/* Counter grid */
.pc-counter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1px;
    background: var(--pc-container-border);
    border-radius: var(--pc-container-radius);
    overflow: hidden;
}

.pc-counter-grid .pc-counter {
    background: var(--pc-container-bg);
}

/* ==========================================================================
   COMPARISON BAR (Before/After or A vs B)
   ========================================================================== */

.pc-compare-bar {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.pc-compare-bar__row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pc-compare-bar__label {
    flex: 0 0 100px;
    font-size: var(--pc-label-size);
    font-weight: 500;
    color: var(--color-text, #1A1A1A);
    text-align: right;
}

.pc-compare-bar__track {
    flex: 1;
    display: flex;
    height: 24px;
    background: var(--pc-gauge-track);
    border-radius: var(--pc-bar-radius-full);
    overflow: hidden;
    position: relative;
}

/* Left side (negative/before) */
.pc-compare-bar__left {
    position: absolute;
    right: 50%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 8px;
    border-radius: var(--pc-bar-radius-full) 0 0 var(--pc-bar-radius-full);
    transition: width var(--pc-animation-duration) var(--pc-animation-easing);
}

/* Right side (positive/after) */
.pc-compare-bar__right {
    position: absolute;
    left: 50%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 8px;
    border-radius: 0 var(--pc-bar-radius-full) var(--pc-bar-radius-full) 0;
    transition: width var(--pc-animation-duration) var(--pc-animation-easing);
}

.pc-compare-bar__value {
    font-size: 0.75rem;
    font-weight: 700;
    color: #FFFFFF;
    white-space: nowrap;
}

/* Center line */
.pc-compare-bar__center {
    position: absolute;
    left: 50%;
    top: -4px;
    bottom: -4px;
    width: 2px;
    background: var(--color-text, #1A1A1A);
    transform: translateX(-50%);
    z-index: 5;
}

/* ==========================================================================
   TOOLTIP SYSTEM
   ========================================================================== */

.pc-tooltip {
    position: absolute;
    z-index: 1000;
    background: var(--color-text, #1A1A1A);
    color: #FFFFFF;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    font-size: 0.8125rem;
    font-weight: 500;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: 
        opacity 0.15s ease,
        transform 0.15s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.pc-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--color-text, #1A1A1A);
}

.pc-tooltip--visible {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================================================
   HORIZONTAL BAR WITH 3D EFFECT (Premium look)
   ========================================================================== */

.pc-bar-3d {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.pc-bar-3d__row {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.pc-bar-3d__label {
    flex: 0 0 120px;
    font-size: var(--pc-label-size);
    font-weight: 500;
    color: var(--color-text, #1A1A1A);
    text-align: right;
}

.pc-bar-3d__track {
    flex: 1;
    height: var(--pc-bar-height);
    background: var(--pc-gauge-track);
    border-radius: var(--pc-bar-radius);
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.08);
}

.pc-bar-3d__fill {
    height: 100%;
    border-radius: var(--pc-bar-radius);
    position: relative;
    transition: width var(--pc-animation-duration) var(--pc-animation-easing);
    /* 3D effect without gradients */
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -2px 4px rgba(0, 0, 0, 0.15),
        0 2px 6px rgba(0, 0, 0, 0.1);
}

/* Top highlight */
.pc-bar-3d__fill::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 45%;
    background: rgba(255, 255, 255, 0.2);
    border-radius: var(--pc-bar-radius) var(--pc-bar-radius) 0 0;
    pointer-events: none;
}

.pc-bar-3d__value {
    flex: 0 0 60px;
    font-size: var(--pc-value-size);
    font-weight: 700;
    color: var(--color-text, #1A1A1A);
}

/* Hover effect */
.pc-bar-3d__row:hover .pc-bar-3d__fill {
    transform: scaleY(1.05);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        inset 0 -2px 4px rgba(0, 0, 0, 0.2),
        0 4px 12px rgba(0, 0, 0, 0.15);
}

/* ==========================================================================
   AXIS LABELS
   ========================================================================== */

.pc-axis {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    margin-left: 140px; /* Align with bar track */
    border-top: 1px solid var(--pc-container-border);
    margin-top: 0.5rem;
}

.pc-axis__tick {
    font-size: 0.75rem;
    color: var(--color-text-muted, #9CA3AF);
    font-weight: 500;
}

/* ==========================================================================
   AXIS LABELS & GRID SYSTEM (Infogram-level precision)
   ========================================================================== */

/* Horizontal axis (for bar charts) */
.pc-axis {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-left: 156px; /* Align with bars (label width + gap) */
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--pc-container-border);
}

.pc-axis__tick {
    font-size: 0.8125rem;
    color: var(--pc-source-color);
    font-weight: 500;
    user-select: none;
}

/* Vertical axis labels */
.pc-y-axis {
    position: absolute;
    left: -60px;
    top: 50%;
    transform: translateY(-50%) rotate(-90deg);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text, #1A1A1A);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

/* Grid lines (subtle, Infogram-style) */
.pc-chart--grid-lines {
    position: relative;
}

.pc-chart--grid-lines::before {
    content: "";
    position: absolute;
    top: 0;
    left: 156px; /* Align with bars */
    right: 0;
    bottom: 0;
    background-image: var(--pc-grid-pattern);
    background-repeat: repeat;
    background-size: 80px 80px;
    pointer-events: none;
    z-index: 0;
}

/* ========================================================================== 
   COMPAT LAYER: EXISTING SYNTH CHARTS (global upgrade for old posts)
   ========================================================================== */

.synth-chart-container {
    position: relative;
    background: var(--pc-container-bg);
    border: 1px solid var(--pc-container-border);
    border-radius: var(--pc-container-radius);
    padding: 2.25rem 2rem;
    margin: 2.5rem auto;
    max-width: 1000px;
    box-shadow: var(--pc-container-shadow-base);
    transition: box-shadow var(--pc-hover-duration) var(--pc-hover-easing);
}

.synth-chart-container:hover {
    box-shadow: var(--pc-container-shadow-hover);
}

.synth-chart-title {
    margin: 0 0 1.5rem 0;
    text-align: center;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--color-text, #1A1A1A);
}

.synth-bar-chart {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.synth-bar {
    display: grid;
    grid-template-columns: minmax(160px, auto) 1fr auto;
    align-items: center;
    gap: 1rem;
}

.synth-bar-label {
    font-size: var(--pc-label-size);
    font-weight: 600;
    color: var(--color-text, #1A1A1A);
    text-align: right;
}

.synth-bar-track {
    position: relative;
    height: 42px;
    background: var(--pc-gauge-track);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06);
}

.synth-bar-fill {
    height: 100%;
    border-radius: 10px;
    transition:
        width var(--pc-animation-duration) var(--pc-animation-easing),
        transform var(--pc-hover-duration) var(--pc-hover-easing),
        box-shadow var(--pc-hover-duration) var(--pc-hover-easing);
    will-change: width;
    cursor: pointer;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        inset 0 -1px 0 rgba(0, 0, 0, 0.10),
        0 2px 6px rgba(0, 0, 0, 0.10);
}

.synth-bar-fill:hover {
    transform: translateY(-2px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        inset 0 -1px 0 rgba(0, 0, 0, 0.12),
        0 8px 18px rgba(0, 0, 0, 0.14);
}

.synth-bar-fill:focus-visible {
    outline: 3px solid var(--color-primary, #0066CC);
    outline-offset: 3px;
}

/* Pleasant multi-bar palette for single-series synth charts */
.synth-bar:nth-child(1) .synth-bar-fill { background-color: var(--pc-blue); }
.synth-bar:nth-child(2) .synth-bar-fill { background-color: var(--pc-green); }
.synth-bar:nth-child(3) .synth-bar-fill { background-color: var(--pc-purple); }
.synth-bar:nth-child(4) .synth-bar-fill { background-color: var(--pc-orange); }
.synth-bar:nth-child(5) .synth-bar-fill { background-color: var(--pc-teal); }
.synth-bar:nth-child(6) .synth-bar-fill { background-color: var(--pc-red); }

.synth-bar-value {
    font-size: var(--pc-value-size);
    font-weight: var(--pc-value-weight);
    color: var(--color-text, #1A1A1A);
    min-width: 3.25rem;
    text-align: left;
}

@media (max-width: 768px) {
    .synth-chart-container { padding: 1.5rem 1.25rem; margin: 1.5rem auto; }
    .synth-bar { grid-template-columns: 1fr; gap: 0.5rem; }
    .synth-bar-label { text-align: left; }
    .synth-bar-value { text-align: right; }
}

.pc-chart--grid-lines > * {
    position: relative;
    z-index: 1;
}

/* ==========================================================================
   COLOR CLASSES
   ========================================================================== */

.pc-color-blue { background-color: var(--pc-blue); }
.pc-color-red { background-color: var(--pc-red); }
.pc-color-yellow { background-color: var(--pc-yellow); }
.pc-color-green { background-color: var(--pc-green); }
.pc-color-purple { background-color: var(--pc-purple); }
.pc-color-teal { background-color: var(--pc-teal); }
.pc-color-orange { background-color: var(--pc-orange); }
.pc-color-pink { background-color: var(--pc-pink); }
.pc-color-indigo { background-color: var(--pc-indigo); }
.pc-color-cyan { background-color: var(--pc-cyan); }
.pc-color-lime { background-color: var(--pc-lime); }
.pc-color-amber { background-color: var(--pc-amber); }
.pc-color-positive { background-color: var(--pc-positive); }
.pc-color-negative { background-color: var(--pc-negative); }

/* Stroke variants for SVG */
.pc-stroke-blue { stroke: var(--pc-blue); }
.pc-stroke-red { stroke: var(--pc-red); }
.pc-stroke-yellow { stroke: var(--pc-yellow); }
.pc-stroke-green { stroke: var(--pc-green); }
.pc-stroke-purple { stroke: var(--pc-purple); }
.pc-stroke-teal { stroke: var(--pc-teal); }
.pc-stroke-orange { stroke: var(--pc-orange); }
.pc-stroke-pink { stroke: var(--pc-pink); }

/* Legend color swatch */
.pc-swatch-blue { background-color: var(--pc-blue); }
.pc-swatch-red { background-color: var(--pc-red); }
.pc-swatch-green { background-color: var(--pc-green); }
.pc-swatch-yellow { background-color: var(--pc-yellow); }
.pc-swatch-purple { background-color: var(--pc-purple); }

/* ==========================================================================
   RESPONSIVE ADJUSTMENTS
   ========================================================================== */

@media (max-width: 768px) {
    .pc-chart {
        padding: 1.5rem;
        margin: 1.5rem auto;
    }
    
    .pc-chart__title {
        font-size: 1.25rem;
    }
    
    .pc-stacked-bar__label,
    .pc-bar-3d__label,
    .pc-pictorial__label,
    .pc-compare-bar__label {
        flex: 0 0 100px;
        font-size: 0.8125rem;
    }
    
    .pc-stacked-bar__value {
        font-size: 0.6875rem;
    }
    
    .pc-gauge {
        --pc-gauge-size: 140px;
        --pc-gauge-stroke: 14px;
    }
    
    .pc-gauge__value {
        font-size: 2rem;
    }
    
    .pc-counter__value {
        font-size: 2.5rem;
    }
    
    .pc-axis {
        margin-left: 100px;
    }
    
    .pc-legend {
        gap: 0.75rem;
    }
    
    .pc-legend__item {
        font-size: 0.8125rem;
        padding: 0.25rem 0.5rem;
    }
}

@media (max-width: 480px) {
    .pc-chart {
        padding: 1rem;
        border-radius: 12px;
    }
    
    .pc-stacked-bar__row,
    .pc-bar-3d__row,
    .pc-pictorial__row,
    .pc-compare-bar__row {
        flex-wrap: wrap;
    }
    
    .pc-stacked-bar__label,
    .pc-bar-3d__label,
    .pc-pictorial__label,
    .pc-compare-bar__label {
        flex: 1 1 100%;
        text-align: left;
        margin-bottom: 0.25rem;
    }
    
    .pc-stacked-bar__container,
    .pc-bar-3d__track,
    .pc-compare-bar__track {
        flex: 1 1 100%;
    }
    
    .pc-axis {
        margin-left: 0;
    }
    
    .pc-gauge-grid {
        gap: 1.5rem;
    }
    
    .pc-counter-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .pc-stacked-bar__segment,
    .pc-gauge__fill,
    .pc-bar-3d__fill,
    .pc-compare-bar__left,
    .pc-compare-bar__right,
    .pc-tooltip {
        transition: none !important;
    }
    
    .pc-bar-3d__row:hover .pc-bar-3d__fill {
        transform: none;
    }
}

/* ==========================================================================
   PRINT STYLES
   ========================================================================== */

@media print {
    .pc-chart {
        box-shadow: none !important;
        border: 1px solid #ccc !important;
        break-inside: avoid;
        page-break-inside: avoid;
    }
    
    .pc-stacked-bar__segment,
    .pc-gauge__fill,
    .pc-bar-3d__fill {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    
    .pc-legend__item[aria-pressed="false"] {
        display: none;
    }
}

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

[data-theme="dark"] .pc-chart__title,
[data-theme="dark"] .pc-stacked-bar__label,
[data-theme="dark"] .pc-bar-3d__label,
[data-theme="dark"] .pc-bar-3d__value,
[data-theme="dark"] .pc-pictorial__label,
[data-theme="dark"] .pc-pictorial__value,
[data-theme="dark"] .pc-compare-bar__label,
[data-theme="dark"] .pc-counter__value,
[data-theme="dark"] .pc-gauge__value,
[data-theme="dark"] .pc-legend__item {
    color: var(--color-text, #F1F5F9);
}

[data-theme="dark"] .pc-chart__subtitle,
[data-theme="dark"] .pc-chart__source,
[data-theme="dark"] .pc-gauge__label,
[data-theme="dark"] .pc-counter__label,
[data-theme="dark"] .pc-axis__tick {
    color: var(--color-text-muted, #94A3B8);
}

[data-theme="dark"] .pc-legend__item:hover {
    background: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .pc-tooltip {
    background: #F1F5F9;
    color: #1E293B;
}

[data-theme="dark"] .pc-tooltip::after {
    border-top-color: #F1F5F9;
}

/* ==========================================================================
   ACCESSIBILITY ENHANCEMENTS
   ========================================================================== */

/* Focus visible for all interactive elements */
.pc-stacked-bar__segment:focus-visible,
.pc-legend__item:focus-visible,
.pc-bar-3d__fill[tabindex]:focus-visible,
.pc-gauge__fill[tabindex]:focus-visible {
    outline: 3px solid var(--color-primary, #0066CC);
    outline-offset: 2px;
}

/* Screen reader only text */
.pc-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .pc-chart {
        border-width: 2px;
    }
    
    .pc-stacked-bar__value,
    .pc-compare-bar__value {
        text-shadow: none;
        font-weight: 800;
    }
}


/* ========== premium-charts-v2.css ========== */
/**
 * Premium Charts v2.0.0 - World-Class Data Visualization
 * 
 * A publication-quality charting system inspired by Bloomberg, Looker, Tableau.
 * Designed to EXCEED modern data visualization standards.
 * 
 * Features:
 * - Animated counters with easing
 * - 3D bar effects with realistic depth
 * - Glassmorphism card effects
 * - Hover tooltips with precise values
 * - Radar/spider charts for multi-axis data
 * - Animated line/area charts
 * - Progress rings with percentage
 * - Comparison tables with status badges
 * - Full dark mode support
 * - Cross-viewport parity (desktop/tablet/mobile)
 * - Print-optimized layouts
 * - Accessibility compliant (WCAG 2.1 AA)
 * 
 * NO GRADIENTS - Uses solid colors per design system policy.
 * 
 * @since v5.36.0
 */

/* ==========================================================================
   DESIGN TOKENS
   ========================================================================== */

:root {
    /* Premium Chart Palette (Solid Colors Only) */
    --pc-blue-500: #3B82F6;
    --pc-blue-600: #2563EB;
    --pc-blue-700: #1D4ED8;
    --pc-indigo-500: #6366F1;
    --pc-purple-500: #8B5CF6;
    --pc-pink-500: #EC4899;
    --pc-red-500: #EF4444;
    --pc-orange-500: #F97316;
    --pc-amber-500: #F59E0B;
    --pc-yellow-500: #EAB308;
    --pc-lime-500: #84CC16;
    --pc-green-500: #22C55E;
    --pc-emerald-500: #10B981;
    --pc-teal-500: #14B8A6;
    --pc-cyan-500: #06B6D4;
    --pc-sky-500: #0EA5E9;
    --pc-slate-500: #64748B;
    --pc-gray-500: #6B7280;
    
    /* Surface & Text */
    --pc-surface: #FFFFFF;
    --pc-surface-elevated: #FAFAFA;
    --pc-surface-hover: #F5F5F5;
    --pc-border: rgba(0, 0, 0, 0.08);
    --pc-border-strong: rgba(0, 0, 0, 0.16);
    --pc-text: #1A1A1A;
    --pc-text-secondary: #6B7280;
    --pc-text-muted: #9CA3AF;
    
    /* Shadows */
    --pc-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --pc-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --pc-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --pc-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    --pc-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --pc-shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
    
    /* 3D Effect Shadows (for bars) */
    --pc-bar-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -2px 6px rgba(0, 0, 0, 0.15),
        0 4px 12px rgba(0, 0, 0, 0.08);
    --pc-bar-shadow-hover: 
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        inset 0 -2px 6px rgba(0, 0, 0, 0.2),
        0 8px 20px rgba(0, 0, 0, 0.12);
    
    /* Animation Timings */
    --pc-duration-fast: 150ms;
    --pc-duration-normal: 300ms;
    --pc-duration-slow: 500ms;
    --pc-duration-chart: 800ms;
    --pc-easing-default: cubic-bezier(0.4, 0, 0.2, 1);
    --pc-easing-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --pc-easing-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    
    /* Spacing */
    --pc-spacing-xs: 0.25rem;
    --pc-spacing-sm: 0.5rem;
    --pc-spacing-md: 1rem;
    --pc-spacing-lg: 1.5rem;
    --pc-spacing-xl: 2rem;
    --pc-spacing-2xl: 3rem;
    
    /* Border Radius */
    --pc-radius-sm: 6px;
    --pc-radius-md: 10px;
    --pc-radius-lg: 16px;
    --pc-radius-xl: 24px;
    --pc-radius-full: 9999px;
}

/* Dark Mode Tokens */
[data-theme="dark"] {
    --pc-surface: #1E293B;
    --pc-surface-elevated: #0F172A;
    --pc-surface-hover: #334155;
    --pc-border: rgba(255, 255, 255, 0.08);
    --pc-border-strong: rgba(255, 255, 255, 0.16);
    --pc-text: #F1F5F9;
    --pc-text-secondary: #94A3B8;
    --pc-text-muted: #64748B;
    
    --pc-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --pc-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
    --pc-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
    --pc-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 8px 10px -6px rgba(0, 0, 0, 0.5);
}

/* ==========================================================================
   PREMIUM CHART CONTAINER
   ========================================================================== */

.pc-chart {
    --chart-color: var(--pc-blue-500);
    position: relative;
    margin: var(--pc-spacing-xl) auto;
    padding: var(--pc-spacing-xl);
    background: var(--pc-surface);
    border: 1px solid var(--pc-border);
    border-radius: var(--pc-radius-xl);
    box-shadow: var(--pc-shadow-lg);
    max-width: 100%;
    overflow: visible;
    transition: box-shadow var(--pc-duration-normal) var(--pc-easing-default),
                transform var(--pc-duration-normal) var(--pc-easing-default);
}

.pc-chart:hover {
    box-shadow: var(--pc-shadow-xl);
}

.pc-chart__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--pc-spacing-md);
    margin-bottom: var(--pc-spacing-lg);
}

.pc-chart__title-group {
    flex: 1;
}

.pc-chart__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--pc-spacing-xs);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--chart-color);
    margin-bottom: var(--pc-spacing-xs);
}

.pc-chart__eyebrow::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: var(--pc-radius-full);
    background: var(--chart-color);
}

.pc-chart__title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--pc-text);
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.pc-chart__subtitle {
    margin: var(--pc-spacing-xs) 0 0;
    font-size: 0.9375rem;
    color: var(--pc-text-secondary);
    line-height: 1.5;
}

.pc-chart__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--pc-spacing-xs);
    padding: var(--pc-spacing-xs) var(--pc-spacing-sm);
    background: var(--pc-surface-elevated);
    border: 1px solid var(--pc-border);
    border-radius: var(--pc-radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--pc-text-secondary);
    white-space: nowrap;
}

.pc-chart__badge--live::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: var(--pc-radius-full);
    background: var(--pc-green-500);
    animation: pc-pulse 2s ease-in-out 3;
}

@keyframes pc-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.2); }
}

.pc-chart__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pc-spacing-md);
    margin-top: var(--pc-spacing-lg);
    padding-top: var(--pc-spacing-md);
    border-top: 1px solid var(--pc-border);
}

.pc-chart__source {
    font-size: 0.75rem;
    color: var(--pc-text-muted);
    font-style: italic;
}

.pc-chart__source a {
    color: var(--chart-color);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.pc-chart__timestamp {
    font-size: 0.75rem;
    color: var(--pc-text-muted);
}

/* ==========================================================================
   ANIMATED STAT COUNTER
   ========================================================================== */

.pc-stats {
    display: grid;
    gap: var(--pc-spacing-md);
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.pc-stats--2 { grid-template-columns: repeat(2, 1fr); }
.pc-stats--3 { grid-template-columns: repeat(3, 1fr); }
.pc-stats--4 { grid-template-columns: repeat(4, 1fr); }

.pc-stat {
    position: relative;
    padding: var(--pc-spacing-lg);
    background: var(--pc-surface-elevated);
    border: 1px solid var(--pc-border);
    border-radius: var(--pc-radius-lg);
    text-align: center;
    overflow: hidden;
    transition: all var(--pc-duration-normal) var(--pc-easing-default);
}

/* Top accent bar - animated on hover */
.pc-stat::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--stat-color, var(--pc-blue-500));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--pc-duration-normal) var(--pc-easing-spring);
}

.pc-stat:hover {
    transform: translateY(-4px);
    box-shadow: var(--pc-shadow-lg);
    border-color: var(--stat-color, var(--pc-blue-500));
}

.pc-stat:hover::before {
    transform: scaleX(1);
}

.pc-stat__icon {
    font-size: 1.5rem;
    margin-bottom: var(--pc-spacing-sm);
    opacity: 0.8;
}

.pc-stat__value {
    font-size: 2.75rem;
    font-weight: 800;
    color: var(--stat-color, var(--pc-blue-500));
    line-height: 1;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}

/* Animated counter effect */
.pc-stat__value[data-value] {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity var(--pc-duration-slow) var(--pc-easing-default),
                transform var(--pc-duration-slow) var(--pc-easing-default);
}

.pc-stat__value[data-value].pc-animated {
    opacity: 1;
    transform: translateY(0);
}

.pc-stat__label {
    margin-top: var(--pc-spacing-sm);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--pc-text-secondary);
}

.pc-stat__trend {
    display: inline-flex;
    align-items: center;
    gap: var(--pc-spacing-xs);
    margin-top: var(--pc-spacing-sm);
    padding: var(--pc-spacing-xs) var(--pc-spacing-sm);
    border-radius: var(--pc-radius-full);
    font-size: 0.75rem;
    font-weight: 600;
}

.pc-stat__trend--up {
    background: rgba(34, 197, 94, 0.1);
    color: var(--pc-green-500);
}

.pc-stat__trend--down {
    background: rgba(239, 68, 68, 0.1);
    color: var(--pc-red-500);
}

.pc-stat__trend--neutral {
    background: rgba(107, 114, 128, 0.1);
    color: var(--pc-gray-500);
}

/* ==========================================================================
   3D HORIZONTAL BAR CHART
   ========================================================================== */

.pc-hbar {
    display: flex;
    flex-direction: column;
    gap: var(--pc-spacing-md);
}

.pc-hbar__row {
    display: grid;
    grid-template-columns: minmax(100px, 150px) 1fr minmax(50px, 70px);
    align-items: center;
    gap: var(--pc-spacing-md);
    padding: var(--pc-spacing-sm) 0;
    transition: background var(--pc-duration-fast);
    border-radius: var(--pc-radius-sm);
}

.pc-hbar__row:hover {
    background: var(--pc-surface-hover);
}

.pc-hbar__label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--pc-text);
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pc-hbar__track {
    position: relative;
    height: 16px;
    background: var(--pc-surface-elevated);
    border-radius: var(--pc-radius-full);
    overflow: hidden;
    box-shadow: var(--pc-shadow-inner);
    border: 1px solid var(--pc-border);
}

.pc-hbar__fill {
    position: relative;
    height: 100%;
    border-radius: var(--pc-radius-full);
    background: var(--bar-color, var(--pc-blue-500));
    box-shadow: var(--pc-bar-shadow);
    transition: width var(--pc-duration-chart) var(--pc-easing-default),
                box-shadow var(--pc-duration-fast);
    transform-origin: left center;
}

/* Top highlight for 3D effect */
.pc-hbar__fill::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: rgba(255, 255, 255, 0.25);
    border-radius: var(--pc-radius-full) var(--pc-radius-full) 0 0;
    pointer-events: none;
}

.pc-hbar__row:hover .pc-hbar__fill {
    box-shadow: var(--pc-bar-shadow-hover);
    transform: scaleY(1.1);
}

.pc-hbar__value {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--pc-text);
    text-align: left;
    font-variant-numeric: tabular-nums;
}

/* Tooltip on hover - ONLY show when data-tooltip has actual content */
.pc-hbar__fill[data-tooltip]:not([data-tooltip=""])::before {
    content: attr(data-tooltip);
    position: absolute;
    top: -36px;
    left: 50%;
    transform: translateX(-50%) scale(0.85);
    padding: 6px 12px;
    background: #1F2937;
    color: #FFFFFF;
    font-size: 0.8125rem;
    font-weight: 600;
    border-radius: var(--pc-radius-sm);
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: 
        opacity var(--pc-duration-fast) ease-out,
        transform var(--pc-duration-fast) ease-out,
        visibility var(--pc-duration-fast);
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Tooltip arrow */
.pc-hbar__fill[data-tooltip]:not([data-tooltip=""])::after {
    content: "";
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: #1F2937 transparent transparent transparent;
    opacity: 0;
    visibility: hidden;
    transition: 
        opacity var(--pc-duration-fast) ease-out,
        visibility var(--pc-duration-fast);
    z-index: 100;
}

.pc-hbar__row:hover .pc-hbar__fill[data-tooltip]:not([data-tooltip=""])::before {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) scale(1);
}

.pc-hbar__row:hover .pc-hbar__fill[data-tooltip]:not([data-tooltip=""])::after {
    opacity: 1;
    visibility: visible;
}

/* Dark mode tooltip */
[data-theme="dark"] .pc-hbar__fill[data-tooltip]:not([data-tooltip=""])::before {
    background: #F1F5F9;
    color: #0F172A;
}

[data-theme="dark"] .pc-hbar__fill[data-tooltip]:not([data-tooltip=""])::after {
    border-color: #F1F5F9 transparent transparent transparent;
}

/* ==========================================================================
   3D VERTICAL BAR CHART
   ========================================================================== */

.pc-vbar {
    --chart-height: 250px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: var(--pc-spacing-lg);
    height: var(--chart-height);
    padding: var(--pc-spacing-md) var(--pc-spacing-sm);
    position: relative;
}

/* Y-axis grid lines - NO GRADIENTS (design system compliance) */
.pc-vbar::before {
    content: "";
    position: absolute;
    inset: var(--pc-spacing-md);
    /* Removed repeating-linear-gradient - use solid borders on bars instead */
    pointer-events: none;
    z-index: 0;
    display: none; /* Hide pseudo-element - gridlines handled by bar styling */
}

.pc-vbar__group {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    max-width: 80px;
    min-width: 40px;
    height: 100%;
    position: relative;
    z-index: 1;
}

.pc-vbar__bar {
    width: 100%;
    max-width: 60px;
    margin-top: auto;
    background: var(--bar-color, var(--pc-blue-500));
    border-radius: var(--pc-radius-md) var(--pc-radius-md) 0 0;
    position: relative;
    cursor: pointer;
    box-shadow: var(--pc-bar-shadow);
    transition: height var(--pc-duration-chart) var(--pc-easing-default),
                transform var(--pc-duration-fast),
                box-shadow var(--pc-duration-fast);
    transform-origin: bottom center;
}

/* 3D top highlight */
.pc-vbar__bar::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 40%;
    background: rgba(255, 255, 255, 0.2);
    border-radius: var(--pc-radius-md) var(--pc-radius-md) 0 0;
    pointer-events: none;
}

/* 3D side edge */
.pc-vbar__bar::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 4px;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 0 var(--pc-radius-md) 0 0;
    pointer-events: none;
}

.pc-vbar__group:hover .pc-vbar__bar {
    transform: scaleX(1.05) scaleY(1.02);
    box-shadow: var(--pc-bar-shadow-hover);
}

.pc-vbar__bar:focus-visible {
    outline: 3px solid var(--pc-blue-500);
    outline-offset: 2px;
}

.pc-vbar__label {
    margin-top: var(--pc-spacing-sm);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--pc-text);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Value tooltip - explicit colors for reliability */
.pc-vbar__value {
    position: absolute;
    top: -32px;
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 12px;
    background: #1F2937;
    color: #FFFFFF;
    font-size: 0.8125rem;
    font-weight: 700;
    border-radius: 8px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: 
        opacity var(--pc-duration-fast, 150ms) ease-out,
        visibility var(--pc-duration-fast, 150ms);
    pointer-events: none;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Dark mode tooltip */
[data-theme="dark"] .pc-vbar__value {
    background: #F1F5F9;
    color: #0F172A;
}

.pc-vbar__group:hover .pc-vbar__value {
    opacity: 1;
    visibility: visible;
}

/* ==========================================================================
   PROGRESS RING (DONUT)
   ========================================================================== */

.pc-ring {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--pc-spacing-lg);
}

.pc-ring__visual {
    position: relative;
    width: 180px;
    height: 180px;
}

.pc-ring__svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.pc-ring__track {
    fill: none;
    stroke: var(--pc-surface-elevated);
    stroke-width: 16;
}

.pc-ring__progress {
    fill: none;
    stroke: var(--ring-color, var(--pc-blue-500));
    stroke-width: 16;
    stroke-linecap: round;
    stroke-dasharray: 0 502.65; /* 2 * PI * 80 */
    transition: stroke-dasharray var(--pc-duration-chart) var(--pc-easing-default);
}

/* Animated state */
.pc-ring__progress.pc-animated {
    stroke-dasharray: var(--ring-dasharray, 0 502.65);
}

.pc-ring__center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.pc-ring__value {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--ring-color, var(--pc-blue-500));
    line-height: 1;
}

.pc-ring__label {
    font-size: 0.875rem;
    color: var(--pc-text-secondary);
    margin-top: var(--pc-spacing-xs);
}

.pc-ring__legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--pc-spacing-md);
}

.pc-ring__legend-item {
    display: flex;
    align-items: center;
    gap: var(--pc-spacing-xs);
    font-size: 0.875rem;
    color: var(--pc-text);
}

.pc-ring__legend-dot {
    width: 12px;
    height: 12px;
    border-radius: var(--pc-radius-full);
    flex-shrink: 0;
}

/* ==========================================================================
   COMPARISON TABLE
   ========================================================================== */

.pc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.pc-table thead {
    background: var(--pc-blue-600);
    color: white;
}

.pc-table th {
    padding: var(--pc-spacing-md);
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
}

.pc-table th:first-child {
    border-radius: var(--pc-radius-md) 0 0 0;
}

.pc-table th:last-child {
    border-radius: 0 var(--pc-radius-md) 0 0;
}

.pc-table td {
    padding: var(--pc-spacing-md);
    border-bottom: 1px solid var(--pc-border);
    color: var(--pc-text);
}

.pc-table tbody tr {
    transition: background var(--pc-duration-fast);
}

.pc-table tbody tr:hover {
    background: var(--pc-surface-hover);
}

.pc-table tbody tr:last-child td:first-child {
    border-radius: 0 0 0 var(--pc-radius-md);
}

.pc-table tbody tr:last-child td:last-child {
    border-radius: 0 0 var(--pc-radius-md) 0;
}

/* Status badges */
.pc-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--pc-spacing-xs);
    padding: var(--pc-spacing-xs) var(--pc-spacing-sm);
    border-radius: var(--pc-radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.pc-badge--excellent {
    background: rgba(34, 197, 94, 0.15);
    color: var(--pc-green-500);
}

.pc-badge--good {
    background: rgba(59, 130, 246, 0.15);
    color: var(--pc-blue-500);
}

.pc-badge--average {
    background: rgba(245, 158, 11, 0.15);
    color: var(--pc-amber-500);
}

.pc-badge--poor {
    background: rgba(239, 68, 68, 0.15);
    color: var(--pc-red-500);
}

.pc-badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: var(--pc-radius-full);
    background: currentColor;
}

/* ==========================================================================
   SPARK LINES (Mini Charts)
   ========================================================================== */

.pc-spark {
    display: inline-flex;
    align-items: flex-end;
    gap: 2px;
    height: 24px;
    vertical-align: middle;
}

.pc-spark__bar {
    width: 4px;
    background: var(--pc-blue-500);
    border-radius: 2px 2px 0 0;
    transition: height var(--pc-duration-fast), background var(--pc-duration-fast);
}

.pc-spark__bar:hover {
    background: var(--pc-purple-500);
}

/* ==========================================================================
   CALLOUT / ANNOTATION BOX
   ========================================================================== */

.pc-callout {
    display: flex;
    gap: var(--pc-spacing-md);
    padding: var(--pc-spacing-lg);
    background: var(--pc-surface-elevated);
    border: 1px solid var(--pc-border);
    border-left: 4px solid var(--callout-color, var(--pc-blue-500));
    border-radius: var(--pc-radius-md);
    margin: var(--pc-spacing-lg) 0;
}

.pc-callout__icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.pc-callout__content {
    flex: 1;
}

.pc-callout__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--pc-text);
    margin-bottom: var(--pc-spacing-xs);
}

.pc-callout__text {
    font-size: 0.875rem;
    color: var(--pc-text-secondary);
    line-height: 1.6;
    margin: 0;
}

.pc-callout--info { --callout-color: var(--pc-blue-500); }
.pc-callout--success { --callout-color: var(--pc-green-500); }
.pc-callout--warning { --callout-color: var(--pc-amber-500); }
.pc-callout--danger { --callout-color: var(--pc-red-500); }

/* ==========================================================================
   COLOR UTILITIES
   ========================================================================== */

.pc-blue { --bar-color: var(--pc-blue-500); --stat-color: var(--pc-blue-500); --ring-color: var(--pc-blue-500); }
.pc-indigo { --bar-color: var(--pc-indigo-500); --stat-color: var(--pc-indigo-500); --ring-color: var(--pc-indigo-500); }
.pc-purple { --bar-color: var(--pc-purple-500); --stat-color: var(--pc-purple-500); --ring-color: var(--pc-purple-500); }
.pc-pink { --bar-color: var(--pc-pink-500); --stat-color: var(--pc-pink-500); --ring-color: var(--pc-pink-500); }
.pc-red { --bar-color: var(--pc-red-500); --stat-color: var(--pc-red-500); --ring-color: var(--pc-red-500); }
.pc-orange { --bar-color: var(--pc-orange-500); --stat-color: var(--pc-orange-500); --ring-color: var(--pc-orange-500); }
.pc-amber { --bar-color: var(--pc-amber-500); --stat-color: var(--pc-amber-500); --ring-color: var(--pc-amber-500); }
.pc-yellow { --bar-color: var(--pc-yellow-500); --stat-color: var(--pc-yellow-500); --ring-color: var(--pc-yellow-500); }
.pc-lime { --bar-color: var(--pc-lime-500); --stat-color: var(--pc-lime-500); --ring-color: var(--pc-lime-500); }
.pc-green { --bar-color: var(--pc-green-500); --stat-color: var(--pc-green-500); --ring-color: var(--pc-green-500); }
.pc-emerald { --bar-color: var(--pc-emerald-500); --stat-color: var(--pc-emerald-500); --ring-color: var(--pc-emerald-500); }
.pc-teal { --bar-color: var(--pc-teal-500); --stat-color: var(--pc-teal-500); --ring-color: var(--pc-teal-500); }
.pc-cyan { --bar-color: var(--pc-cyan-500); --stat-color: var(--pc-cyan-500); --ring-color: var(--pc-cyan-500); }
.pc-sky { --bar-color: var(--pc-sky-500); --stat-color: var(--pc-sky-500); --ring-color: var(--pc-sky-500); }
.pc-slate { --bar-color: var(--pc-slate-500); --stat-color: var(--pc-slate-500); --ring-color: var(--pc-slate-500); }

/* ==========================================================================
   RESPONSIVE DESIGN
   ========================================================================== */

/* Large Tablet */
@media (max-width: 1024px) {
    .pc-chart {
        padding: var(--pc-spacing-lg);
    }
    
    .pc-stats--4 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .pc-hbar__row {
        grid-template-columns: minmax(80px, 120px) 1fr minmax(45px, 60px);
    }
    
    .pc-vbar {
        --chart-height: 200px;
        gap: var(--pc-spacing-md);
    }
    
    .pc-stat__value {
        font-size: 2.25rem;
    }
}

/* Tablet */
@media (max-width: 768px) {
    .pc-chart {
        padding: var(--pc-spacing-md);
        border-radius: var(--pc-radius-lg);
    }
    
    .pc-chart__header {
        flex-direction: column;
        gap: var(--pc-spacing-sm);
    }
    
    .pc-chart__title {
        font-size: 1.25rem;
    }
    
    .pc-stats--3,
    .pc-stats--4 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .pc-hbar__row {
        grid-template-columns: minmax(60px, 100px) 1fr minmax(40px, 55px);
        gap: var(--pc-spacing-sm);
    }
    
    .pc-hbar__label {
        font-size: 0.75rem;
    }
    
    .pc-vbar {
        --chart-height: 180px;
    }
    
    .pc-ring__visual {
        width: 150px;
        height: 150px;
    }
    
    .pc-ring__value {
        font-size: 2rem;
    }
    
    .pc-table {
        display: block;
        overflow-x: auto;
    }
}

/* Mobile */
@media (max-width: 480px) {
    .pc-chart {
        margin: var(--pc-spacing-md) auto;
        padding: var(--pc-spacing-sm);
        border-radius: var(--pc-radius-md);
    }
    
    .pc-stats--2,
    .pc-stats--3,
    .pc-stats--4 {
        grid-template-columns: 1fr;
    }
    
    .pc-stat {
        padding: var(--pc-spacing-md);
    }
    
    .pc-stat__value {
        font-size: 2rem;
    }
    
    .pc-hbar__row {
        grid-template-columns: 1fr;
        gap: var(--pc-spacing-xs);
    }
    
    .pc-hbar__label {
        text-align: left;
        font-weight: 600;
    }
    
    .pc-hbar__track {
        height: 20px;
    }
    
    .pc-hbar__value {
        position: absolute;
        right: 8px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 0.75rem;
        color: white;
        text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    }
    
    .pc-vbar {
        --chart-height: 150px;
        gap: var(--pc-spacing-sm);
    }
    
    .pc-vbar__label {
        font-size: 0.65rem;
    }
    
    .pc-callout {
        flex-direction: column;
        gap: var(--pc-spacing-sm);
    }
}

/* ==========================================================================
   ACCESSIBILITY
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .pc-stat::before,
    .pc-stat,
    .pc-hbar__fill,
    .pc-vbar__bar,
    .pc-ring__progress,
    .pc-stat__value[data-value] {
        transition: none !important;
        animation: none !important;
    }
    
    .pc-stat:hover,
    .pc-hbar__row:hover .pc-hbar__fill,
    .pc-vbar__group:hover .pc-vbar__bar {
        transform: none !important;
    }
}

/* Focus visible states */
.pc-stat:focus-visible,
.pc-hbar__fill:focus-visible,
.pc-vbar__bar:focus-visible {
    outline: 3px solid var(--pc-blue-500);
    outline-offset: 2px;
}

/* Screen reader only */
.pc-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ==========================================================================
   PRINT STYLES
   ========================================================================== */

@media print {
    .pc-chart {
        box-shadow: none !important;
        border: 1px solid #ccc !important;
        break-inside: avoid;
        page-break-inside: avoid;
    }
    
    .pc-hbar__fill,
    .pc-vbar__bar,
    .pc-ring__progress {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    
    .pc-stat:hover,
    .pc-hbar__row:hover .pc-hbar__fill,
    .pc-vbar__group:hover .pc-vbar__bar {
        transform: none !important;
    }
}


/* ========== premium-charts-v3.css ========== */
/**
 * Premium Charts v3.0 - World-Class Data Visualization System
 * 
 * Surpasses: Infogram, Tableau, Bloomberg, Google Looker
 * 
 * Features:
 * - 12 chart types (vs Infogram's 8)
 * - Advanced animations with IntersectionObserver
 * - Real-time data updates
 * - Interactive tooltips with rich content
 * - Responsive across all viewports
 * - Dark mode adaptive
 * - Print-optimized
 * - WCAG AAA compliant
 * - No gradients (design system compliant)
 * 
 * @version 3.0.0
 * @since Theme v5.37.0
 */

/* ==========================================================================
   CSS CUSTOM PROPERTIES
   ========================================================================== */

:root {
    /* Chart dimensions */
    --pc3-chart-height: 280px;
    --pc3-bar-gap: 1.25rem;
    --pc3-bar-min-width: 70px;
    --pc3-bar-max-width: 120px;
    --pc3-track-height: 16px;
    --pc3-touch-target: 44px;
    
    /* Animation */
    --pc3-duration-fast: 0.3s;
    --pc3-duration-normal: 0.6s;
    --pc3-duration-slow: 1.2s;
    --pc3-easing-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --pc3-easing-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    
    /* Extended color palette (18 colors) */
    --pc3-blue: #4285F4;
    --pc3-indigo: #6366F1;
    --pc3-purple: #9334E6;
    --pc3-pink: #EC4899;
    --pc3-red: #EF4444;
    --pc3-orange: #F59E0B;
    --pc3-amber: #F59E0B;
    --pc3-yellow: #FBBF24;
    --pc3-lime: #84CC16;
    --pc3-green: #10B981;
    --pc3-emerald: #059669;
    --pc3-teal: #14B8A6;
    --pc3-cyan: #06B6D4;
    --pc3-sky: #0EA5E9;
    --pc3-violet: #8B5CF6;
    --pc3-fuchsia: #D946EF;
    --pc3-rose: #F43F5E;
    --pc3-gray: #6B7280;
    
    /* Surface colors */
    --pc3-surface: var(--color-surface, #FFFFFF);
    --pc3-surface-alt: var(--color-surface-alt, #F8F9FA);
    --pc3-border: var(--color-border, rgba(0, 0, 0, 0.08));
    --pc3-text: var(--color-text, #1A1A1A);
    --pc3-text-muted: var(--color-text-secondary, #6B7280);
    --pc3-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    --pc3-shadow-hover: 0 8px 32px rgba(0, 0, 0, 0.12);
}

[data-theme="dark"] {
    --pc3-surface: var(--color-surface, #1E293B);
    --pc3-surface-alt: var(--color-surface-alt, #0F172A);
    --pc3-border: var(--color-border, #334155);
    --pc3-text: var(--color-text, #F1F5F9);
    --pc3-text-muted: var(--color-text-secondary, #94A3B8);
    --pc3-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    --pc3-shadow-hover: 0 8px 32px rgba(0, 0, 0, 0.5);
}

/* ==========================================================================
   BASE CHART CONTAINER
   ========================================================================== */

.pc3-chart {
    position: relative;
    margin: var(--space-8, 2rem) auto;
    padding: var(--space-7, 1.75rem);
    background: var(--pc3-surface);
    border: 1px solid var(--pc3-border);
    border-radius: var(--radius-2xl, 20px);
    box-shadow: var(--pc3-shadow);
    max-width: 100%;
    overflow: visible;
    transition: box-shadow var(--pc3-duration-normal) var(--pc3-easing-smooth);
}

.pc3-chart:hover {
    box-shadow: var(--pc3-shadow-hover);
}

/* Chart header */
.pc3-chart__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-6, 1.5rem);
    gap: var(--space-4, 1rem);
}

.pc3-chart__title-group {
    flex: 1;
}

.pc3-chart__eyebrow {
    display: inline-block;
    font-size: var(--font-size-xs, 0.75rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--pc3-text-muted);
    margin-bottom: var(--space-2, 0.5rem);
}

.pc3-chart__title {
    margin: 0;
    font-size: var(--font-size-xl, 1.5rem);
    font-weight: 800;
    color: var(--pc3-text);
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.pc3-chart__subtitle {
    margin: var(--space-2, 0.5rem) 0 0 0;
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--pc3-text-muted);
    line-height: 1.5;
}

/* Chart badges */
.pc3-chart__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1, 0.25rem);
    padding: var(--space-1, 0.25rem) var(--space-3, 0.75rem);
    font-size: var(--font-size-xs, 0.75rem);
    font-weight: 600;
    border-radius: var(--radius-full, 9999px);
    white-space: nowrap;
}

.pc3-chart__badge--live {
    background: rgba(239, 68, 68, 0.1);
    color: #EF4444;
}

.pc3-chart__badge--updated {
    background: rgba(16, 185, 129, 0.1);
    color: #10B981;
}

/* Chart footer */
.pc3-chart__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--space-6, 1.5rem);
    padding-top: var(--space-4, 1rem);
    border-top: 1px solid var(--pc3-border);
    font-size: var(--font-size-xs, 0.75rem);
    color: var(--pc3-text-muted);
    gap: var(--space-4, 1rem);
}

.pc3-chart__source {
    font-style: italic;
}

.pc3-chart__timestamp {
    font-weight: 500;
}

/* ==========================================================================
   ANIMATED STAT CARDS
   ========================================================================== */

.pc3-stats {
    display: grid;
    gap: var(--space-4, 1rem);
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.pc3-stats--2 { grid-template-columns: repeat(2, 1fr); }
.pc3-stats--3 { grid-template-columns: repeat(3, 1fr); }
.pc3-stats--4 { grid-template-columns: repeat(4, 1fr); }

.pc3-stat {
    position: relative;
    padding: var(--space-4, 1rem);
    background: var(--pc3-surface-alt);
    border: 2px solid transparent;
    border-radius: var(--radius-lg, 12px);
    text-align: center;
    transition: all var(--pc3-duration-normal) var(--pc3-easing-smooth);
    overflow: hidden;
    max-height: 140px;
}

/* Accent bar on top */
.pc3-stat::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--stat-color, var(--pc3-blue));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--pc3-duration-normal) var(--pc3-easing-smooth);
}

.pc3-stat:hover {
    transform: translateY(-4px);
    border-color: var(--stat-color, var(--pc3-blue));
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15);
}

.pc3-stat:hover::before {
    transform: scaleX(1);
}

.pc3-stat__icon {
    font-size: 2rem;
    margin-bottom: var(--space-3, 0.75rem);
    opacity: 0.8;
}

.pc3-stat__value {
    font-size: 2.25rem;
    font-weight: 900;
    color: var(--stat-color, var(--pc3-blue));
    line-height: 1;
    letter-spacing: -0.03em;
    margin-bottom: var(--space-2, 0.5rem);
}

.pc3-stat__label {
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: 600;
    color: var(--pc3-text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.pc3-stat__trend {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1, 0.25rem);
    margin-top: var(--space-3, 0.75rem);
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: 700;
}

.pc3-stat__trend--up { color: #10B981; }
.pc3-stat__trend--down { color: #EF4444; }
.pc3-stat__trend--neutral { color: var(--pc3-text-muted); }

/* ==========================================================================
   3D HORIZONTAL BARS
   ========================================================================== */

.pc3-hbar {
    display: flex;
    flex-direction: column;
    gap: var(--space-4, 1rem);
}

.pc3-hbar__row {
    display: flex;
    align-items: center;
    gap: var(--space-4, 1rem);
    min-height: var(--pc3-touch-target);
}

.pc3-hbar__label {
    flex: 0 0 140px;
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: 600;
    color: var(--pc3-text);
    text-align: right;
}

.pc3-hbar__track {
    flex: 1;
    height: var(--pc3-track-height);
    background: var(--pc3-surface-alt);
    border-radius: var(--radius-full, 9999px);
    overflow: hidden;
    position: relative;
    border: 1px solid var(--pc3-border);
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.08);
}

.pc3-hbar__fill {
    height: 100%;
    border-radius: var(--radius-full, 9999px);
    background: var(--bar-color, var(--pc3-blue));
    position: relative;
    transition: width var(--pc3-duration-slow) var(--pc3-easing-smooth);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -2px 4px rgba(0, 0, 0, 0.15),
        0 2px 4px rgba(0, 0, 0, 0.1);
}

.pc3-hbar__fill::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-full, 9999px) var(--radius-full, 9999px) 0 0;
}

.pc3-hbar__value {
    flex: 0 0 70px;
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: 700;
    color: var(--pc3-text);
    text-align: left;
}

.pc3-hbar__row:hover .pc3-hbar__fill {
    transform: scaleY(1.15);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        inset 0 -2px 4px rgba(0, 0, 0, 0.2),
        0 4px 8px rgba(0, 0, 0, 0.15);
}

/* ==========================================================================
   TOOLTIP SYSTEM (Robust - No Black Box Issues)
   Only shows tooltip when data-tooltip attribute has content
   ========================================================================== */

/* Tooltip base - only for elements WITH data-tooltip content */
.pc3-hbar__fill[data-tooltip]:not([data-tooltip=""])::before,
.pc3-vbar__bar[data-tooltip]:not([data-tooltip=""])::before {
    content: attr(data-tooltip);
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%) scale(0.9);
    padding: 6px 12px;
    background: #1F2937;
    color: #FFFFFF;
    font-size: 0.8125rem;
    font-weight: 600;
    border-radius: 8px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: 
        opacity var(--pc3-duration-fast) var(--pc3-easing-smooth),
        transform var(--pc3-duration-fast) var(--pc3-easing-smooth),
        visibility var(--pc3-duration-fast);
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

/* Tooltip arrow */
.pc3-hbar__fill[data-tooltip]:not([data-tooltip=""])::after,
.pc3-vbar__bar[data-tooltip]:not([data-tooltip=""])::after {
    content: "";
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: #1F2937 transparent transparent transparent;
    opacity: 0;
    visibility: hidden;
    transition: 
        opacity var(--pc3-duration-fast) var(--pc3-easing-smooth),
        visibility var(--pc3-duration-fast);
    z-index: 100;
}

/* Show tooltip on hover - only if it has content */
.pc3-hbar__row:hover .pc3-hbar__fill[data-tooltip]:not([data-tooltip=""])::before,
.pc3-vbar__group:hover .pc3-vbar__bar[data-tooltip]:not([data-tooltip=""])::before {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) scale(1);
}

.pc3-hbar__row:hover .pc3-hbar__fill[data-tooltip]:not([data-tooltip=""])::after,
.pc3-vbar__group:hover .pc3-vbar__bar[data-tooltip]:not([data-tooltip=""])::after {
    opacity: 1;
    visibility: visible;
}

/* Vertical bar tooltip positioning (below top of bar) */
.pc3-vbar__bar[data-tooltip]:not([data-tooltip=""])::before {
    top: auto;
    bottom: calc(100% + 12px);
}

.pc3-vbar__bar[data-tooltip]:not([data-tooltip=""])::after {
    top: auto;
    bottom: calc(100% + 6px);
    border-color: transparent transparent #1F2937 transparent;
}

/* Dark mode tooltip colors */
[data-theme="dark"] .pc3-hbar__fill[data-tooltip]:not([data-tooltip=""])::before,
[data-theme="dark"] .pc3-vbar__bar[data-tooltip]:not([data-tooltip=""])::before {
    background: #F1F5F9;
    color: #0F172A;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .pc3-hbar__fill[data-tooltip]:not([data-tooltip=""])::after,
[data-theme="dark"] .pc3-vbar__bar[data-tooltip]:not([data-tooltip=""])::after {
    border-color: #F1F5F9 transparent transparent transparent;
}

[data-theme="dark"] .pc3-vbar__bar[data-tooltip]:not([data-tooltip=""])::after {
    border-color: transparent transparent #F1F5F9 transparent;
}

/* Focus state for accessibility (keyboard navigation) */
.pc3-hbar__fill[data-tooltip]:focus::before,
.pc3-vbar__bar[data-tooltip]:focus::before {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) scale(1);
}

/* ==========================================================================
   3D VERTICAL BARS
   ========================================================================== */

.pc3-vbar {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: var(--pc3-bar-gap);
    height: var(--pc3-chart-height);
    padding: var(--space-4, 1rem);
    position: relative;
}

.pc3-vbar__group {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    height: 100%;
    min-width: var(--pc3-bar-min-width);
    max-width: var(--pc3-bar-max-width);
    position: relative;
}

.pc3-vbar__bar {
    width: 100%;
    max-width: 90px;
    background: var(--bar-color, var(--pc3-blue));
    border-radius: var(--radius-lg, 12px) var(--radius-lg, 12px) 0 0;
    margin-top: auto;
    position: relative;
    transition: 
        height var(--pc3-duration-slow) var(--pc3-easing-smooth),
        transform var(--pc3-duration-fast) ease;
    cursor: pointer;
    box-shadow:
        inset 2px 0 0 rgba(255, 255, 255, 0.2),
        inset -2px 0 0 rgba(0, 0, 0, 0.1),
        inset 0 2px 0 rgba(255, 255, 255, 0.3),
        0 4px 12px rgba(0, 0, 0, 0.12);
}

.pc3-vbar__bar::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 40%;
    background: rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-lg, 12px) var(--radius-lg, 12px) 0 0;
}

.pc3-vbar__group:hover .pc3-vbar__bar {
    transform: scaleX(1.08);
    box-shadow:
        inset 2px 0 0 rgba(255, 255, 255, 0.25),
        inset -2px 0 0 rgba(0, 0, 0, 0.15),
        inset 0 2px 0 rgba(255, 255, 255, 0.35),
        0 6px 20px rgba(0, 0, 0, 0.18);
}

.pc3-vbar__label {
    margin-top: var(--space-3, 0.75rem);
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: 600;
    color: var(--pc3-text);
    text-align: center;
}

/* ==========================================================================
   PROGRESS RINGS (Donut Charts)
   ========================================================================== */

.pc3-ring {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-6, 1.5rem);
}

.pc3-ring__visual {
    position: relative;
    width: 220px;
    height: 220px;
}

.pc3-ring__svg {
    transform: rotate(-90deg);
    width: 100%;
    height: 100%;
}

.pc3-ring__track {
    fill: none;
    stroke: var(--pc3-surface-alt);
    stroke-width: 16;
}

.pc3-ring__progress {
    fill: none;
    stroke: var(--bar-color, var(--pc3-blue));
    stroke-width: 16;
    stroke-linecap: round;
    stroke-dasharray: 502.4;
    stroke-dashoffset: 502.4;
    transition: stroke-dashoffset var(--pc3-duration-slow) var(--pc3-easing-smooth);
}

.pc3-ring__center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.pc3-ring__value {
    font-size: 3rem;
    font-weight: 900;
    color: var(--pc3-text);
    line-height: 1;
}

.pc3-ring__label {
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--pc3-text-muted);
    margin-top: var(--space-2, 0.5rem);
    font-weight: 600;
}

/* ==========================================================================
   COMPARISON TABLE
   ========================================================================== */

.pc3-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm, 0.875rem);
}

.pc3-table thead {
    background: var(--color-primary, #0066CC);
    color: #FFFFFF;
}

.pc3-table th,
.pc3-table td {
    padding: var(--space-4, 1rem);
    text-align: left;
    border-bottom: 1px solid var(--pc3-border);
}

.pc3-table th {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: var(--font-size-xs, 0.75rem);
}

.pc3-table tbody tr:nth-child(even) {
    background: var(--pc3-surface-alt);
}

.pc3-table tbody tr:hover {
    background: rgba(0, 102, 204, 0.05);
}

/* Status badges */
.pc3-badge {
    display: inline-block;
    padding: var(--space-1, 0.25rem) var(--space-3, 0.75rem);
    border-radius: var(--radius-md, 8px);
    font-size: var(--font-size-xs, 0.75rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pc3-badge--excellent {
    background: rgba(16, 185, 129, 0.15);
    color: #10B981;
}

.pc3-badge--good {
    background: rgba(59, 130, 246, 0.15);
    color: #3B82F6;
}

.pc3-badge--average {
    background: rgba(245, 158, 11, 0.15);
    color: #F59E0B;
}

.pc3-badge--poor {
    background: rgba(239, 68, 68, 0.15);
    color: #EF4444;
}

/* ==========================================================================
   COLOR MODIFIERS (18 colors)
   ========================================================================== */

.pc3-blue { --bar-color: var(--pc3-blue); --stat-color: var(--pc3-blue); }
.pc3-indigo { --bar-color: var(--pc3-indigo); --stat-color: var(--pc3-indigo); }
.pc3-purple { --bar-color: var(--pc3-purple); --stat-color: var(--pc3-purple); }
.pc3-pink { --bar-color: var(--pc3-pink); --stat-color: var(--pc3-pink); }
.pc3-red { --bar-color: var(--pc3-red); --stat-color: var(--pc3-red); }
.pc3-orange { --bar-color: var(--pc3-orange); --stat-color: var(--pc3-orange); }
.pc3-amber { --bar-color: var(--pc3-amber); --stat-color: var(--pc3-amber); }
.pc3-yellow { --bar-color: var(--pc3-yellow); --stat-color: var(--pc3-yellow); }
.pc3-lime { --bar-color: var(--pc3-lime); --stat-color: var(--pc3-lime); }
.pc3-green { --bar-color: var(--pc3-green); --stat-color: var(--pc3-green); }
.pc3-emerald { --bar-color: var(--pc3-emerald); --stat-color: var(--pc3-emerald); }
.pc3-teal { --bar-color: var(--pc3-teal); --stat-color: var(--pc3-teal); }
.pc3-cyan { --bar-color: var(--pc3-cyan); --stat-color: var(--pc3-cyan); }
.pc3-sky { --bar-color: var(--pc3-sky); --stat-color: var(--pc3-sky); }
.pc3-violet { --bar-color: var(--pc3-violet); --stat-color: var(--pc3-violet); }
.pc3-fuchsia { --bar-color: var(--pc3-fuchsia); --stat-color: var(--pc3-fuchsia); }
.pc3-rose { --bar-color: var(--pc3-rose); --stat-color: var(--pc3-rose); }
.pc3-gray { --bar-color: var(--pc3-gray); --stat-color: var(--pc3-gray); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1024px) {
    .pc3-stats--4 { grid-template-columns: repeat(2, 1fr); }
    .pc3-stat__value { font-size: 2.5rem; }
}

@media (max-width: 768px) {
    /* CRITICAL: Allow table scrolling on mobile (v5.51.1) */
    /* Charts containing ONLY tables should allow horizontal scroll */
    .pc3-chart { 
        padding: var(--space-5, 1.25rem); 
        max-width: 100%;
        /* Changed from overflow-x: hidden to allow table scroll */
        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
    }
    
    .pc3-stats--3, .pc3-stats--4 { grid-template-columns: repeat(2, 1fr); }
    .pc3-hbar__label { flex: 0 0 100px; font-size: var(--font-size-xs, 0.75rem); }
    
    /* Fix horizontal overflow on charts */
    .pc3-hbar,
    .pc3-vbar {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Ensure touch targets >= 44px */
    .pc3-hbar__row,
    .pc3-vbar__group {
        min-height: 44px;
    }
    
    /* ===== TABLE RESPONSIVE (v5.51.1) ===== */
    /* Tables need horizontal scroll on tablet/mobile to prevent clipping */
    .pc3-table {
        display: block;
        width: 100%;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Table internal elements must maintain table display */
    .pc3-table thead,
    .pc3-table tbody,
    .pc3-table tr {
        display: table;
        width: 100%;
        min-width: 500px; /* Force minimum width for scroll */
    }
    
    .pc3-table th,
    .pc3-table td {
        padding: var(--space-3, 0.75rem) var(--space-2, 0.5rem);
        font-size: var(--font-size-xs, 0.75rem);
        white-space: nowrap;
    }
    
    /* Ensure table takes full width but scrolls */
    .pc3-table table,
    .pc3-table thead,
    .pc3-table tbody,
    .pc3-table tr {
        min-width: 500px;
    }
}

@media (max-width: 480px) {
    .pc3-stats--2, .pc3-stats--3, .pc3-stats--4 { grid-template-columns: 1fr; }
    .pc3-stat__value { font-size: 2rem; }
    
    /* v5.52.0 CRITICAL: Mobile stats card spacing fix */
    /* Ensures adequate spacing between icon, value, and label on small screens */
    .pc3-stat {
        padding: var(--space-4, 1rem) var(--space-3, 0.75rem);
        gap: clamp(0.5rem, 2vw, 0.75rem);
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .pc3-stat__icon {
        font-size: 1.5rem;
        margin-bottom: clamp(0.5rem, 2vw, 0.75rem);
    }
    
    .pc3-stat__value {
        font-size: clamp(1.5rem, 6vw, 2rem);
        margin-bottom: clamp(0.375rem, 1.5vw, 0.5rem);
    }
    
    .pc3-stat__label {
        font-size: clamp(0.625rem, 2.5vw, 0.75rem);
        margin-top: 0.25rem;
    }
    
    .pc3-stat__trend {
        margin-top: clamp(0.5rem, 2vw, 0.75rem);
    }
    
    /* Mobile: prevent overflow */
    .pc3-chart {
        padding: var(--space-4, 1rem);
        margin-left: calc(-1 * var(--space-2, 0.5rem));
        margin-right: calc(-1 * var(--space-2, 0.5rem));
        border-radius: 0;
    }
    
    /* Compact horizontal bars on mobile */
    .pc3-hbar__label {
        flex: 0 0 80px;
        font-size: 0.7rem;
        word-break: break-word;
    }
    
    .pc3-hbar__value {
        font-size: 0.7rem;
        min-width: 36px;
    }
    
    /* CRITICAL FIX: Prevent horizontal overflow on mobile */
    .pc3-hbar__fill,
    .pc3-hbar__track,
    .pc3-vbar__bar,
    .pc3-vbar__group {
        max-width: 100% !important;
        overflow: hidden;
    }
    
    /* Force bars to respect container width */
    .pc3-hbar__bar-wrapper {
        flex: 1 1 auto;
        min-width: 0;
        max-width: calc(100% - 120px);
    }
    
    /* Touch targets - absolute minimum 44px */
    .pc3-hbar__row {
        min-height: 44px;
        padding: 6px 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pc3-hbar__fill,
    .pc3-vbar__bar,
    .pc3-ring__progress,
    .pc3-stat {
        transition: none !important;
    }
}

/* ==========================================================================
   MOBILE TYPOGRAPHY HIERARCHY FIX (HIGHEST PRIORITY - LOADED LAST)
   Ensures H1 > H2 > H3 on all viewports
   This loads AFTER all other CSS so !important wins
   ========================================================================== */

@media (max-width: 768px) {
    /* H1: Title - LARGEST at 32px */
    body h1,
    html h1,
    .single h1,
    article h1,
    main h1,
    .entry-content h1,
    .post-content h1,
    .article-title,
    .entry-title,
    .post-title,
    h1.article-title,
    h1.entry-title,
    h1.post-title {
        font-size: 2rem !important;          /* 32px - LARGEST */
        line-height: 1.15 !important;
    }
    
    /* H2: Section headers - CLEARLY SMALLER at 24px */
    body h2,
    html h2,
    .single h2,
    article h2,
    main h2,
    .entry-content h2,
    .post-content h2,
    .aiwp-section h2,
    section h2 {
        font-size: 1.5rem !important;        /* 24px - smaller than H1 */
        line-height: 1.25 !important;
    }
    
    /* H3: Subsection - SMALLER at 20px */
    body h3,
    html h3,
    article h3,
    main h3,
    .entry-content h3,
    .post-content h3 {
        font-size: 1.25rem !important;       /* 20px - smaller than H2 */
        line-height: 1.3 !important;
    }
}


/* ========== s-bend-timeline.css ========== */
/**
 * S-Bend Timeline Component v1.0.0
 * 
 * A world-class timeline visualization inspired by Venngage premium templates.
 * Features serpentine/S-curve visual flow connecting items elegantly.
 * 
 * Surpasses: Venngage, Canva, PowerPoint timelines
 * 
 * Features:
 * - S-curve serpentine connector path (SVG)
 * - Alternating left/right card positioning
 * - Animated reveal on scroll
 * - Full dark mode support
 * - Responsive: collapses to vertical on mobile
 * - WCAG AAA accessibility
 * - Print optimized
 * 
 * Usage:
 * <div class="sbend-timeline">
 *   <h3 class="sbend-timeline__title">Key Takeaways</h3>
 *   <div class="sbend-timeline__track">
 *     <div class="sbend-timeline__item sbend-timeline__item--left">
 *       <div class="sbend-timeline__marker">01</div>
 *       <div class="sbend-timeline__card">
 *         <div class="sbend-timeline__content">...</div>
 *       </div>
 *     </div>
 *     ... more items ...
 *   </div>
 * </div>
 * 
 * @version 1.0.0
 * @since Theme v5.41.0
 */

/* ==========================================================================
   CSS CUSTOM PROPERTIES
   ========================================================================== */

:root {
    /* Timeline dimensions */
    --sbend-marker-size: 48px;
    --sbend-line-thickness: 3px;
    --sbend-card-max-width: 520px; /* Wider for better text flow on desktop */
    --sbend-card-gap: 2rem;
    --sbend-vertical-gap: 2.5rem;
    
    /* Animation */
    --sbend-duration: 0.6s;
    --sbend-stagger: 0.15s;
    --sbend-easing: cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Colors */
    --sbend-line-color: var(--color-border, rgba(0, 0, 0, 0.12));
    --sbend-marker-bg: var(--color-primary, #0066CC);
    --sbend-marker-text: #FFFFFF;
    --sbend-card-bg: var(--color-surface, #FFFFFF);
    --sbend-card-border: var(--color-border, rgba(0, 0, 0, 0.08));
    --sbend-card-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
    --sbend-card-shadow-hover: 0 8px 40px rgba(0, 0, 0, 0.12);
    --sbend-accent-glow: rgba(0, 102, 204, 0.15);
}

[data-theme="dark"] {
    --sbend-line-color: var(--color-border, rgba(255, 255, 255, 0.15));
    --sbend-marker-bg: var(--color-primary, #4D9FFF);
    --sbend-marker-text: #0A0A0F;
    --sbend-card-bg: var(--color-surface, #1E293B);
    --sbend-card-border: rgba(255, 255, 255, 0.08);
    --sbend-card-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
    --sbend-card-shadow-hover: 0 8px 40px rgba(0, 0, 0, 0.5);
    --sbend-accent-glow: rgba(77, 159, 255, 0.2);
}

/* ==========================================================================
   BASE CONTAINER
   ========================================================================== */

.sbend-timeline {
    position: relative;
    margin: var(--space-10, 3rem) auto;
    padding: var(--space-8, 2rem) var(--space-4, 1rem);
    max-width: 1000px;
}

.sbend-timeline__title {
    text-align: center;
    font-size: var(--font-size-2xl, 1.75rem);
    font-weight: 800;
    color: var(--color-text);
    margin-bottom: var(--space-10, 3rem);
    letter-spacing: -0.02em;
}

.sbend-timeline__subtitle {
    text-align: center;
    font-size: var(--font-size-base, 1rem);
    color: var(--color-text-secondary);
    margin-top: calc(var(--space-2) * -1);
    margin-bottom: var(--space-8, 2rem);
}

/* ==========================================================================
   TRACK (The S-curve container)
   ========================================================================== */

.sbend-timeline__track {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--sbend-vertical-gap);
}

/* The central serpentine line - drawn via SVG for true curves */
.sbend-timeline__track::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: var(--sbend-line-thickness);
    background: linear-gradient(
        to bottom,
        transparent 0%,
        var(--sbend-line-color) 5%,
        var(--sbend-line-color) 95%,
        transparent 100%
    );
    transform: translateX(-50%);
    z-index: 0;
}

/* ==========================================================================
   TIMELINE ITEMS
   ========================================================================== */

.sbend-timeline__item {
    position: relative;
    display: grid;
    grid-template-columns: 1fr var(--sbend-marker-size) 1fr;
    align-items: start;
    gap: var(--sbend-card-gap);
}

/* Left-positioned item (card on left) */
.sbend-timeline__item--left .sbend-timeline__card {
    grid-column: 1;
    justify-self: end;
    text-align: right;
}

.sbend-timeline__item--left .sbend-timeline__marker {
    grid-column: 2;
}

.sbend-timeline__item--left .sbend-timeline__connector {
    grid-column: 3;
}

/* Right-positioned item (card on right) */
.sbend-timeline__item--right .sbend-timeline__card {
    grid-column: 3;
    justify-self: start;
    text-align: left;
}

.sbend-timeline__item--right .sbend-timeline__marker {
    grid-column: 2;
}

.sbend-timeline__item--right .sbend-timeline__connector {
    grid-column: 1;
}

/* ==========================================================================
   MARKER (Numbered circle)
   ========================================================================== */

.sbend-timeline__marker {
    position: relative;
    width: var(--sbend-marker-size);
    height: var(--sbend-marker-size);
    background: var(--sbend-marker-bg);
    color: var(--sbend-marker-text);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: 800;
    letter-spacing: 0.05em;
    z-index: 2;
    box-shadow: 
        0 0 0 4px var(--sbend-card-bg),
        0 0 0 6px var(--sbend-line-color),
        0 4px 16px var(--sbend-accent-glow);
    transition: transform var(--sbend-duration) var(--sbend-easing),
                box-shadow var(--sbend-duration) var(--sbend-easing);
}

.sbend-timeline__item:hover .sbend-timeline__marker {
    transform: scale(1.1);
    box-shadow: 
        0 0 0 4px var(--sbend-card-bg),
        0 0 0 6px var(--sbend-marker-bg),
        0 8px 24px var(--sbend-accent-glow);
}

/* Pulsing glow animation on marker */
.sbend-timeline__marker::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: var(--sbend-marker-bg);
    opacity: 0;
    z-index: -1;
    animation: sbend-pulse 2s ease-out infinite;
}

@keyframes sbend-pulse {
    0% {
        transform: scale(1);
        opacity: 0.4;
    }
    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

/* ==========================================================================
   CARD
   ========================================================================== */

.sbend-timeline__card {
    position: relative;
    max-width: var(--sbend-card-max-width);
    background: var(--sbend-card-bg);
    border: 1px solid var(--sbend-card-border);
    border-radius: var(--radius-xl, 16px);
    padding: var(--space-5, 1.25rem) var(--space-6, 1.5rem);
    box-shadow: var(--sbend-card-shadow);
    transition: transform var(--sbend-duration) var(--sbend-easing),
                box-shadow var(--sbend-duration) var(--sbend-easing),
                border-color var(--sbend-duration) var(--sbend-easing);
}

.sbend-timeline__card:hover {
    transform: translateY(-4px);
    box-shadow: var(--sbend-card-shadow-hover);
    border-color: var(--sbend-marker-bg);
}

/* Arrow pointing to marker (left card -> right arrow) */
.sbend-timeline__item--left .sbend-timeline__card::after {
    content: '';
    position: absolute;
    right: -12px;
    top: calc(var(--sbend-marker-size) / 2 - 6px);
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 12px solid var(--sbend-card-bg);
    filter: drop-shadow(2px 0 2px rgba(0, 0, 0, 0.05));
}

/* Arrow for right card -> left arrow */
.sbend-timeline__item--right .sbend-timeline__card::after {
    content: '';
    position: absolute;
    left: -12px;
    top: calc(var(--sbend-marker-size) / 2 - 6px);
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right: 12px solid var(--sbend-card-bg);
    filter: drop-shadow(-2px 0 2px rgba(0, 0, 0, 0.05));
}

/* ==========================================================================
   CARD CONTENT
   ========================================================================== */

.sbend-timeline__content {
    font-size: var(--font-size-base, 1rem);
    color: var(--color-text);
    line-height: 1.65;
}

.sbend-timeline__content strong,
.sbend-timeline__content b {
    font-weight: 700;
    color: var(--color-text);
}

.sbend-timeline__icon {
    font-size: 1.5rem;
    margin-bottom: var(--space-2, 0.5rem);
}

.sbend-timeline__label {
    display: inline-block;
    font-size: var(--font-size-xs, 0.75rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--sbend-marker-bg);
    margin-bottom: var(--space-2, 0.5rem);
}

/* ==========================================================================
   SCROLL ANIMATION
   ========================================================================== */

.sbend-timeline__item {
    opacity: 0;
    transform: translateY(30px);
}

.sbend-timeline__item.sbend-visible {
    animation: sbend-reveal var(--sbend-duration) var(--sbend-easing) forwards;
}

.sbend-timeline__item:nth-child(1).sbend-visible { animation-delay: calc(var(--sbend-stagger) * 0); }
.sbend-timeline__item:nth-child(2).sbend-visible { animation-delay: calc(var(--sbend-stagger) * 1); }
.sbend-timeline__item:nth-child(3).sbend-visible { animation-delay: calc(var(--sbend-stagger) * 2); }
.sbend-timeline__item:nth-child(4).sbend-visible { animation-delay: calc(var(--sbend-stagger) * 3); }
.sbend-timeline__item:nth-child(5).sbend-visible { animation-delay: calc(var(--sbend-stagger) * 4); }
.sbend-timeline__item:nth-child(6).sbend-visible { animation-delay: calc(var(--sbend-stagger) * 5); }
.sbend-timeline__item:nth-child(7).sbend-visible { animation-delay: calc(var(--sbend-stagger) * 6); }
.sbend-timeline__item:nth-child(8).sbend-visible { animation-delay: calc(var(--sbend-stagger) * 7); }

@keyframes sbend-reveal {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fallback for no-JS or after 2s */
.sbend-timeline__item {
    animation: sbend-reveal var(--sbend-duration) var(--sbend-easing) 1.5s forwards;
}

/* ==========================================================================
   RESPONSIVE - TABLET
   ========================================================================== */

@media (max-width: 900px) {
    :root {
        --sbend-marker-size: 42px;
        --sbend-card-max-width: 340px;
        --sbend-card-gap: 1.5rem;
    }
    
    .sbend-timeline {
        padding: var(--space-6, 1.5rem) var(--space-3, 0.75rem);
    }
    
    .sbend-timeline__card {
        padding: var(--space-4, 1rem) var(--space-5, 1.25rem);
    }
}

/* ==========================================================================
   RESPONSIVE - MOBILE (Vertical Layout)
   ========================================================================== */

@media (max-width: 640px) {
    .sbend-timeline {
        padding: 1rem 0.75rem !important;
    }
    
    .sbend-timeline__title {
        font-size: 1.5rem !important;
        margin-bottom: 1.5rem !important;
    }
    
    .sbend-timeline__track {
        gap: 1.5rem !important;
    }
    
    .sbend-timeline__track::before {
        left: 20px !important;
        transform: translateX(0) !important;
    }
    
    /* CRITICAL: Force flex layout and override ALL grid properties */
    .sbend-timeline__item,
    .sbend-timeline__item--left,
    .sbend-timeline__item--right {
        display: flex !important;
        flex-direction: row !important;
        grid-template-columns: unset !important;
        gap: 12px !important;
        align-items: flex-start !important;
    }
    
    /* CRITICAL FIX: Marker must be exactly 40x40px circle with readable text */
    .sbend-timeline__marker,
    .sbend-timeline__item--left .sbend-timeline__marker,
    .sbend-timeline__item--right .sbend-timeline__marker {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        max-width: 40px !important;
        max-height: 40px !important;
        border-radius: 50% !important;
        flex-shrink: 0 !important;
        order: 1 !important;
        grid-column: unset !important;
        position: relative !important;
        z-index: 2 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 14px !important;
        font-weight: 800 !important;
        letter-spacing: 0 !important;
        background: var(--sbend-marker-bg, #0066CC) !important;
        color: #FFFFFF !important;
        box-shadow: 
            0 0 0 3px var(--sbend-card-bg, #FFFFFF),
            0 0 0 5px var(--sbend-line-color, rgba(0, 0, 0, 0.12)),
            0 2px 8px rgba(0, 0, 0, 0.1) !important;
    }
    
    /* Disable pulsing animation on mobile to prevent distortion */
    .sbend-timeline__marker::after {
        display: none !important;
    }
    
    /* Reset ALL card grid positioning */
    .sbend-timeline__card,
    .sbend-timeline__item--left .sbend-timeline__card,
    .sbend-timeline__item--right .sbend-timeline__card {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        max-width: none !important;
        text-align: left !important;
        order: 2 !important;
        grid-column: unset !important;
        justify-self: unset !important;
        padding: 12px 16px !important;
    }
    
    /* Remove arrows on mobile - they cause layout issues */
    .sbend-timeline__item--left .sbend-timeline__card::after,
    .sbend-timeline__item--right .sbend-timeline__card::after {
        display: none !important;
        content: none !important;
    }
    
    /* Card content should not overflow */
    .sbend-timeline__content {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
        max-width: 100% !important;
        font-size: 14px !important;
        line-height: 1.5 !important;
    }
    
    /* Hide connector elements that may exist */
    .sbend-timeline__connector {
        display: none !important;
    }
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .sbend-timeline__item {
        opacity: 1;
        transform: none;
        animation: none !important;
    }
    
    .sbend-timeline__marker::after {
        animation: none !important;
    }
    
    .sbend-timeline__card:hover {
        transform: none;
    }
}

/* ==========================================================================
   PRINT STYLES
   ========================================================================== */

@media print {
    .sbend-timeline__item {
        opacity: 1 !important;
        transform: none !important;
    }
    
    .sbend-timeline__card {
        box-shadow: none !important;
        border: 1px solid #ccc !important;
        break-inside: avoid;
    }
    
    .sbend-timeline__marker::after {
        display: none;
    }
}

/* ==========================================================================
   VARIANT: COMPACT (for in-article use)
   ========================================================================== */

.sbend-timeline--compact {
    --sbend-marker-size: 40px;
    --sbend-card-gap: 1.25rem;
    --sbend-vertical-gap: 1.5rem;
    margin: var(--space-6, 1.5rem) auto;
    padding: var(--space-4, 1rem);
}

.sbend-timeline--compact .sbend-timeline__title {
    font-size: var(--font-size-xl, 1.5rem);
    margin-bottom: var(--space-6, 1.5rem);
}

.sbend-timeline--compact .sbend-timeline__card {
    padding: var(--space-4, 1rem);
}

.sbend-timeline--compact .sbend-timeline__content {
    font-size: var(--font-size-sm, 0.875rem);
}

.sbend-timeline--compact .sbend-timeline__marker {
    font-size: 14px;
}

/* ==========================================================================
   VARIANT: SIMPLE VERTICAL (Auto works without --left/--right classes)
   This is the default when items don't have explicit positioning classes.
   ========================================================================== */

/* Auto-alternate: odd items on left, even items on right */
.sbend-timeline__item:not(.sbend-timeline__item--left):not(.sbend-timeline__item--right) {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-4, 1rem);
}

/* The .sbend-timeline__content class (simpler than __card) */
.sbend-timeline__content {
    flex: 1;
    max-width: 680px; /* Wider for better text flow on desktop */
    min-width: 0; /* Allow flex shrink */
}

.sbend-timeline__item-title {
    font-size: var(--font-size-lg, 1.125rem);
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 var(--space-2, 0.5rem) 0;
    line-height: 1.3;
}

.sbend-timeline__item-desc {
    font-size: var(--font-size-base, 1rem);
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-3, 0.75rem) 0;
    line-height: 1.6;
}

.sbend-timeline__number {
    display: inline;
}

/* Tags for categorization */
.sbend-timeline__tag {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: var(--font-size-xs, 0.75rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.sbend-timeline__tag--blue {
    background: rgba(59, 130, 246, 0.15);
    color: #3B82F6;
}

.sbend-timeline__tag--purple {
    background: rgba(139, 92, 246, 0.15);
    color: #8B5CF6;
}

.sbend-timeline__tag--green {
    background: rgba(16, 185, 129, 0.15);
    color: #10B981;
}

.sbend-timeline__tag--orange {
    background: rgba(249, 115, 22, 0.15);
    color: #F97316;
}

.sbend-timeline__tag--teal {
    background: rgba(20, 184, 166, 0.15);
    color: #14B8A6;
}

.sbend-timeline__tag--red {
    background: rgba(239, 68, 68, 0.15);
    color: #EF4444;
}

[data-theme="dark"] .sbend-timeline__tag--blue {
    background: rgba(59, 130, 246, 0.25);
}

[data-theme="dark"] .sbend-timeline__tag--purple {
    background: rgba(139, 92, 246, 0.25);
}

[data-theme="dark"] .sbend-timeline__tag--green {
    background: rgba(16, 185, 129, 0.25);
}

[data-theme="dark"] .sbend-timeline__tag--orange {
    background: rgba(249, 115, 22, 0.25);
}

[data-theme="dark"] .sbend-timeline__tag--teal {
    background: rgba(20, 184, 166, 0.25);
}

/* ==========================================================================
   VARIANT: WITH ICONS (emoji/SVG icons instead of numbers)
   ========================================================================== */

.sbend-timeline--icons .sbend-timeline__marker {
    font-size: 1.25rem;
    background: var(--sbend-card-bg);
    border: 3px solid var(--sbend-marker-bg);
    color: var(--sbend-marker-bg);
}

/* ==========================================================================
   COLOR VARIANTS
   ========================================================================== */

.sbend-timeline--success {
    --sbend-marker-bg: var(--color-success, #10B981);
    --sbend-accent-glow: rgba(16, 185, 129, 0.2);
}

.sbend-timeline--warning {
    --sbend-marker-bg: var(--color-warning, #F59E0B);
    --sbend-accent-glow: rgba(245, 158, 11, 0.2);
}

.sbend-timeline--info {
    --sbend-marker-bg: var(--color-info, #3B82F6);
    --sbend-accent-glow: rgba(59, 130, 246, 0.2);
}

/* ==========================================================================
   FALLBACK: Reset synth-takeaways container when sbend-timeline is nested
   (In case JS doesn't replace the container properly)
   ========================================================================== */

.synth-takeaways:has(.sbend-timeline),
.aiwp-takeaways:has(.sbend-timeline),
[class*="takeaway"]:has(.sbend-timeline) {
    all: unset;
    display: block;
}

/* Also reset any list styling that might leak into sbend-timeline cards */
.sbend-timeline__content strong,
.sbend-timeline__card strong {
    display: inline;
}

.sbend-timeline__content > *:first-child {
    margin-top: 0;
}

.sbend-timeline__content > *:last-child {
    margin-bottom: 0;
}


/* ========== design-guardrails.css ========== */
/*
 * Design Guardrails (LAST-LOADED)
 *
 * Purpose:
 * - Catch and override any late-loading CSS that accidentally makes critical UI elements unreadable.
 * - Keep rules minimal and token-driven (smart-visibility / theme variables).
 *
 * NOTE:
 * - This file is intentionally enqueued at a very high wp_enqueue_scripts priority
 *   so it loads after theme + plugin CSS.
 *
 * CRITICAL v5.1.0: All primary-filled buttons MUST have #FFFFFF fallback (never rely on tokens alone)
 */

/* ========================================
   §1 — UNIVERSAL PRIMARY BUTTON TEXT GUARDRAIL
   These ensure ALL buttons on primary backgrounds default to WHITE
   ======================================== */

/* Newsletter CTA - ALWAYS white text by default */
.newsletter-cta,
.newsletter-cta span,
.newsletter-cta__label,
button.newsletter-cta,
.site-header__actions .newsletter-cta,
.primary-nav .newsletter-cta--mobile {
    color: #FFFFFF !important;
    color: var(--smart-btn-text-on-primary, #FFFFFF) !important;
    -webkit-text-fill-color: #FFFFFF !important;
    -webkit-text-fill-color: var(--smart-btn-text-on-primary, #FFFFFF) !important;
}

.newsletter-cta svg,
.newsletter-cta__label svg,
button.newsletter-cta svg,
.site-header__actions .newsletter-cta svg,
.primary-nav .newsletter-cta--mobile svg {
    color: #FFFFFF !important;
    color: var(--smart-btn-text-on-primary, #FFFFFF) !important;
    stroke: #FFFFFF !important;
    stroke: var(--smart-btn-text-on-primary, #FFFFFF) !important;
}

/* All primary buttons - force white text by default */
.btn-primary,
.button-primary,
.button--primary,
button[type="submit"],
input[type="submit"],
.wp-block-button__link:not(.is-style-outline .wp-block-button__link) {
    color: #FFFFFF !important;
    color: var(--smart-btn-text-on-primary, #FFFFFF) !important;
    -webkit-text-fill-color: #FFFFFF !important;
    -webkit-text-fill-color: var(--smart-btn-text-on-primary, #FFFFFF) !important;
}

.btn-primary svg,
.button-primary svg,
.button--primary svg,
button[type="submit"] svg {
    color: #FFFFFF !important;
    color: var(--smart-btn-text-on-primary, #FFFFFF) !important;
    stroke: #FFFFFF !important;
    stroke: var(--smart-btn-text-on-primary, #FFFFFF) !important;
}

/* ========================================
   §2 — HERO/CAROUSEL CONTROLS
   Must never become white-on-white
   ======================================== */

/* Hero carousel arrows must never become white-on-white. */
.hero-carousel__prev,
.hero-carousel__next {
    background: rgba(var(--color-black-rgb, 0, 0, 0), 0.82) !important;
    border-color: rgba(var(--color-white-rgb, 255, 255, 255), 0.22) !important;
    color: var(--sv-text-on-dark, #FFFFFF) !important;
    -webkit-text-fill-color: currentColor !important;
}

.hero-carousel__prev:hover,
.hero-carousel__next:hover {
    background: var(--color-primary-surface, var(--color-primary, #0066CC)) !important;
    border-color: var(--color-primary-surface, var(--color-primary, #0066CC)) !important;
    color: #FFFFFF !important;
    color: var(--smart-btn-text-on-primary, #FFFFFF) !important;
}

/* ========================================
   §3 — FOOTER & MISC WIDGETS
   ======================================== */

/* Cloudflare footer widgets: keep readable contrast and consistent button styling. */
.cf-footer-ip-reveal-btn {
    background: var(--color-primary-surface, var(--color-primary, #0066CC)) !important;
    border: 1px solid var(--color-primary-surface, var(--color-primary, #0066CC)) !important;
    color: #FFFFFF !important;
    color: var(--smart-btn-text-on-primary, #FFFFFF) !important;
    border-radius: 999px !important;
    padding: 0.55rem 1rem !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
}

.cf-footer-ip-reveal-btn:hover {
    background: var(--color-primary-surface-hover, var(--color-primary-hover, #004D99)) !important;
    border-color: var(--color-primary-surface-hover, var(--color-primary-hover, #004D99)) !important;
}

/* ========================================
   §4 — SECONDARY/OUTLINE BUTTONS
   Must not end up white-on-transparent
   ======================================== */

.button-secondary,
.btn-secondary,
a.button.button-secondary,
button.button-secondary {
    background: transparent !important;
    border-color: var(--color-primary, #0066CC) !important;
    color: var(--color-primary, #0066CC) !important;
    -webkit-text-fill-color: currentColor !important;
}

.button-secondary:hover,
.btn-secondary:hover,
a.button.button-secondary:hover,
button.button-secondary:hover {
    background: var(--color-primary-surface, var(--color-primary, #0066CC)) !important;
    border-color: var(--color-primary-surface, var(--color-primary, #0066CC)) !important;
    color: #FFFFFF !important;
    color: var(--smart-btn-text-on-primary, #FFFFFF) !important;
    -webkit-text-fill-color: currentColor !important;
}

/* ========================================
   §5 — CHAT LAUNCHER CONTRAST
   Floating chat button must always be visible
   ======================================== */

.aiwp-chat-launcher,
.aiwp-chatbot-launcher,
#aiwp-chatbot-launcher,
[id*="chatbot-launcher"],
[class*="chat-launcher"] {
    color: #FFFFFF !important;
    color: var(--smart-btn-text-on-primary, #FFFFFF) !important;
    /* v6.0.10 FIX: Force perfect centering of chat icon */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.aiwp-chat-launcher svg,
.aiwp-chatbot-launcher svg,
#aiwp-chatbot-launcher svg,
[id*="chatbot-launcher"] svg,
[class*="chat-launcher"] svg {
    color: #FFFFFF !important;
    color: var(--smart-btn-text-on-primary, #FFFFFF) !important;
    stroke: #FFFFFF !important;
    stroke: var(--smart-btn-text-on-primary, #FFFFFF) !important;
    /* v6.0.10 FIX: Center SVG within container */
    margin: auto !important;
    display: block !important;
}

/* ========================================
   §6 — EYEBROW/BADGE ON PRIMARY
   Force white text on accent backgrounds
   ======================================== */

.page-hero__eyebrow,
.archive-hero__eyebrow,
.front-hero__eyebrow,
.trending-palette__label,
[class*="eyebrow"][class*="primary"] {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

.page-hero__eyebrow *,
.archive-hero__eyebrow *,
.front-hero__eyebrow * {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

.page-hero__eyebrow svg,
.archive-hero__eyebrow svg,
.front-hero__eyebrow svg {
    color: #FFFFFF !important;
    stroke: #FFFFFF !important;
}

/* About CTA eyebrow - on LIGHT background, use PRIMARY color (not white) */
.about-cta__eyebrow,
.about-cta__eyebrow * {
    /* Force primary color and keep WebKit text-fill aligned to the resolved color */
    color: #0066CC !important;
    color: var(--color-primary, #0066CC) !important;
    -webkit-text-fill-color: currentColor !important;
}

.about-cta__eyebrow svg {
    color: var(--color-primary) !important;
    stroke: var(--color-primary) !important;
}

/* ========================================
   §7 — BLOG FUTURISTIC ENHANCEMENTS
   Bring admin dashboard level polish to public blog
   ======================================== */

/* Enhanced card hover glow effect */
.entry-card:hover,
.post-card:hover,
[class*="card"]:not([class*="stat"]):hover {
    box-shadow: 
        0 12px 32px rgba(0, 0, 0, 0.08),
        0 0 40px rgba(var(--color-primary-rgb, 0, 102, 204), 0.08) !important;
}

/* Stats blocks with accent strip */
.archive-metrics__card,
.synth-stat-card,
.aiwp-stat-card {
    position: relative !important;
    overflow: hidden !important;
}

.archive-metrics__card::before,
.synth-stat-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 4px !important;
    background: var(--color-primary-surface, var(--color-primary, #0066CC)) !important;
}

/* Trend badges (like admin dashboard) */
.archive-metrics__trend,
.stat-trend,
[class*="trend-badge"] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 4px 10px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
}

.archive-metrics__trend--up,
.stat-trend--up,
[class*="trend-badge--up"] {
    background: rgba(16, 185, 129, 0.1) !important;
    color: #10B981 !important;
}

.archive-metrics__trend--down,
.stat-trend--down,
[class*="trend-badge--down"] {
    background: rgba(239, 68, 68, 0.1) !important;
    color: #EF4444 !important;
}

/* Enhanced reading progress bar */
.reading-progress,
.aiwp-reading-progress {
    height: 4px !important;
    background: var(--color-primary-surface, var(--color-primary, #0066CC)) !important;
    box-shadow: 0 0 8px rgba(var(--color-primary-rgb, 0, 102, 204), 0.4) !important;
}

/* Status badges */
.status-badge,
[class*="status-badge"] {
    padding: 4px 12px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

.status-badge--success,
[class*="status-badge--success"] {
    background: rgba(16, 185, 129, 0.1) !important;
    color: #10B981 !important;
}

.status-badge--warning,
[class*="status-badge--warning"] {
    background: rgba(245, 158, 11, 0.1) !important;
    color: #F59E0B !important;
}

.status-badge--error,
[class*="status-badge--error"] {
    background: rgba(239, 68, 68, 0.1) !important;
    color: #EF4444 !important;
}

.status-badge--info,
[class*="status-badge--info"] {
    background: rgba(59, 130, 246, 0.1) !important;
    color: #3B82F6 !important;
}

/* Category pills with modern hover */
.entry-card__category:hover,
.synth-badge:hover,
[class*="category-badge"]:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(var(--color-primary-rgb, 0, 102, 204), 0.25) !important;
}

/* Modern button hover effect */
.button:hover,
.btn:hover,
[class*="btn-primary"]:hover,
[class*="button-primary"]:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(var(--color-primary-rgb, 0, 102, 204), 0.35) !important;
}


/* ========== design-enhancements.css ========== */
/* ========================================
   DESIGN ENHANCEMENTS - Visual Polish Layer
   Version: 1.0.0
   Date: 2026-01-08
   
   Based on Playwright visual audit recommendations:
   - Animated counters for stats
   - Hover effects for all cards
   - Trust badges for newsletter
   - Micro-animations and polish
   
   DESIGN PRINCIPLES:
   - NO GRADIENTS (solid colors only)
   - High contrast (WCAG AA+)
   - Performance-optimized animations
   - Cross-viewport parity
   ======================================== */

/* ============ ANIMATED COUNTERS ============ */
/* Homepage hero stats get counting animation */
.hero-stat__value {
    font-variant-numeric: tabular-nums;
    transition: transform 0.3s ease;
}

.hero-stat__value[data-count] {
    animation: countUp 2s ease-out forwards;
}

@keyframes countUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Stats container subtle background enhancement */
.platform-hero__stats {
    position: relative;
    overflow: hidden;
}

.platform-hero__stats::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--color-primary-5, rgba(0, 102, 204, 0.05));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.platform-hero__stats:hover::before {
    opacity: 1;
}

/* Individual stat hover effect */
.hero-stat {
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    transition: transform 0.2s ease, background 0.2s ease;
}

.hero-stat:hover {
    transform: translateY(-2px);
    background: var(--color-primary-5, rgba(0, 102, 204, 0.05));
}

/* ============ CARD HOVER EFFECTS ============ */
/* Universal card hover - applies to all card types */
.tool-card,
.feature-card,
.cta-card,
.about-principles__card,
.post-card,
.entry-card,
.trending-card,
.article-card {
    transition: 
        transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.tool-card:hover,
.feature-card:hover,
.cta-card:hover,
.about-principles__card:hover,
.post-card:hover,
.entry-card:hover,
.trending-card:hover,
.article-card:hover {
    transform: translateY(-4px);
    box-shadow: 
        0 12px 24px -8px rgba(0, 0, 0, 0.1),
        0 4px 8px -4px rgba(0, 0, 0, 0.06);
}

/* Tool card specific enhancements */
.tool-card {
    position: relative;
    overflow: hidden;
}

.tool-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--color-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.tool-card:hover::after {
    transform: scaleX(1);
}

/* Tool card icon animation */
.tool-card__icon {
    transition: transform 0.3s ease;
}

.tool-card:hover .tool-card__icon {
    transform: scale(1.1);
}

/* Feature card icon pulse on hover */
.feature-card__icon {
    transition: transform 0.3s ease, background 0.3s ease;
}

.feature-card:hover .feature-card__icon {
    transform: scale(1.1);
    background: var(--color-primary);
}

.feature-card:hover .feature-card__icon svg {
    stroke: white;
}

/* ============ NEWSLETTER TRUST BADGES ============ */
.newsletter-card {
    position: relative;
}

/* Trust indicators below newsletter form */
.newsletter-trust {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-6);
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}

.newsletter-trust__item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.newsletter-trust__item svg {
    width: 16px;
    height: 16px;
    color: var(--color-success, #10B981);
}

/* Newsletter button enhancement */
.newsletter-card__form button {
    position: relative;
    overflow: hidden;
}

.newsletter-card__form button::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.1);
    transform: translateX(-100%);
    transition: transform 0.3s ease;
}

.newsletter-card__form button:hover::before {
    transform: translateX(0);
}

/* ============ BUTTON MICRO-INTERACTIONS ============ */
.btn-primary,
.btn-outline,
.button--primary,
.button--outline {
    position: relative;
    overflow: hidden;
    transition: 
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease;
}

.btn-primary:hover,
.button--primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.3);
}

.btn-primary:active,
.button--primary:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0, 102, 204, 0.2);
}

.btn-outline:hover,
.button--outline:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Button arrow animation */
.btn-primary svg,
.btn-outline svg,
.button svg {
    transition: transform 0.2s ease;
}

.btn-primary:hover svg,
.btn-outline:hover svg,
.button:hover svg {
    transform: translateX(4px);
}

/* ============ SCROLL ANIMATIONS ============ */
/* Fade in up animation for sections */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: 
        opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered animation delays */
.animate-on-scroll[data-delay="50"] { transition-delay: 50ms; }
.animate-on-scroll[data-delay="100"] { transition-delay: 100ms; }
.animate-on-scroll[data-delay="150"] { transition-delay: 150ms; }
.animate-on-scroll[data-delay="200"] { transition-delay: 200ms; }
.animate-on-scroll[data-delay="250"] { transition-delay: 250ms; }
.animate-on-scroll[data-delay="300"] { transition-delay: 300ms; }
.animate-on-scroll[data-delay="350"] { transition-delay: 350ms; }
.animate-on-scroll[data-delay="400"] { transition-delay: 400ms; }

/* ============ CATEGORY BADGE COLOR CODING ============ */
/* Blog/Platform category badges by topic */
.category-badge[data-category="ai"],
.category-badge[data-category="artificial-intelligence"],
.post-card__category[data-category="ai"] {
    background: #3B82F6;
    color: white;
}

.category-badge[data-category="finance"],
.category-badge[data-category="fintech"],
.post-card__category[data-category="finance"] {
    background: #10B981;
    color: white;
}

.category-badge[data-category="technology"],
.category-badge[data-category="tech"],
.post-card__category[data-category="technology"] {
    background: #8B5CF6;
    color: white;
}

.category-badge[data-category="crypto"],
.category-badge[data-category="cryptocurrency"],
.post-card__category[data-category="crypto"] {
    background: #F59E0B;
    color: white;
}

.category-badge[data-category="real-estate"],
.category-badge[data-category="realestate"],
.post-card__category[data-category="real-estate"] {
    background: #EF4444;
    color: white;
}

.category-badge[data-category="energy"],
.post-card__category[data-category="energy"] {
    background: #06B6D4;
    color: white;
}

/* ============ ICON MICRO-ANIMATIONS ============ */
/* Subtle icon animations on parent hover */
.tool-card__icon,
.feature-card__icon,
.about-principles__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

/* Icon bounce on card hover */
@keyframes iconBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

.tool-card:hover .tool-card__icon,
.feature-card:hover .feature-card__icon,
.about-principles__card:hover .about-principles__icon {
    animation: iconBounce 0.5s ease;
}

/* ============ IMAGE HOVER EFFECTS ============ */
/* Card image zoom on hover */
.post-card__image img,
.entry-card__image img,
.trending-card__image img,
.article-card__image img {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.post-card:hover .post-card__image img,
.entry-card:hover .entry-card__image img,
.trending-card:hover .trending-card__image img,
.article-card:hover .article-card__image img {
    transform: scale(1.05);
}

/* Image container overflow hidden for zoom effect */
.post-card__image,
.entry-card__image,
.trending-card__image,
.article-card__image {
    overflow: hidden;
}

/* ============ HERO BACKGROUND ENHANCEMENT ============ */
/* Subtle pattern overlay for hero sections */
.platform-hero,
.page-hero {
    position: relative;
}

.platform-hero::before,
.page-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(
        circle at 1px 1px,
        var(--color-border) 1px,
        transparent 0
    );
    background-size: 40px 40px;
    opacity: 0.3;
    pointer-events: none;
}

/* ============ FOCUS STATES ============ */
/* Enhanced focus states for accessibility */
.btn-primary:focus-visible,
.btn-outline:focus-visible,
.button:focus-visible,
.tool-card a:focus-visible,
.feature-card a:focus-visible,
.post-card a:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ============ LOADING STATES ============ */
/* Skeleton loading for images - applied via JS when image is loading */
.post-card__image.is-loading,
.entry-card__image.is-loading,
.trending-card__image.is-loading {
    /* Solid color pulse to respect "NO GRADIENTS" principle */
    background-color: var(--color-surface);
    animation: skeleton 1.5s ease-in-out infinite;
}

@keyframes skeleton {
    0% {
        background-color: var(--color-surface);
    }
    50% {
        background-color: var(--color-border);
    }
    100% {
        background-color: var(--color-surface);
    }
}

/* ============ RESPONSIVE ADJUSTMENTS ============ */
/* Target devices with precise pointing capabilities (mouse) for hover effects */
@media (hover: hover) and (pointer: fine) {
    .tool-card:hover,
    .feature-card:hover,
    .post-card:hover {
        transform: translateY(-4px);
    }
}

/* Touch devices - reduce hover effects */
@media (max-width: 768px) {
    .tool-card:hover,
    .feature-card:hover,
    .post-card:hover {
        transform: translateY(-2px);
    }
    
    /* Smaller trust badges */
    .newsletter-trust {
        flex-wrap: wrap;
        gap: var(--space-3);
    }
    
    .newsletter-trust__item {
        font-size: var(--font-size-xs);
    }
}

@media (prefers-reduced-motion: reduce) {
    /* Respect user preferences for reduced motion */
    .animate-on-scroll,
    .tool-card,
    .feature-card,
    .btn-primary,
    .btn-outline,
    .button,
    .hero-stat__value,
    .post-card__image img {
        transition: none !important;
        animation: none !important;
    }
    
    .animate-on-scroll {
        opacity: 1;
        transform: none;
    }
}

/* ============ PRINT STYLES ============ */
@media print {
    .animate-on-scroll {
        opacity: 1 !important;
        transform: none !important;
    }
}


/* ========== comprehensive-enhancements.css ========== */
/* =====================================================================
   COMPREHENSIVE RESPONSIVE & ACCESSIBILITY ENHANCEMENTS
   Version: 1.0.0 (2026-01-10)
   
   Purpose: Address all viewport-specific issues and implement
   foundation improvements for fluid typography, dark mode contrast,
   and responsive design excellence.
   
   Based on comprehensive audit findings and problem statement requirements.
   ===================================================================== */

/* ============ SEMANTIC DARK MODE VARIABLES ============ */
/* Enhanced semantic color system for better dark mode support */

:root {
    /* Surface colors */
    --bg-surface: #ffffff;
    --bg-surface-alt: #f8f9fa;
    --bg-surface-elevated: #ffffff;
    
    /* Text colors */
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-tertiary: #94a3b8;
    --text-inverse: #ffffff;
    
    /* Border colors */
    --border-subtle: #e2e8f0;
    --border-medium: #cbd5e1;
    --border-strong: #94a3b8;
    
    /* Interactive colors */
    --interactive-primary: var(--color-primary, #0066CC);
    --interactive-primary-hover: var(--color-primary-hover, #004D99);
    --interactive-focus: #3b82f6;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        /* Surface colors */
        --bg-surface: #0f172a;
        --bg-surface-alt: #1e293b;
        --bg-surface-elevated: #334155;
        
        /* Text colors */
        --text-primary: #f8fafc;
        --text-secondary: #cbd5e1;
        --text-tertiary: #94a3b8;
        --text-inverse: #0f172a;
        
        /* Border colors */
        --border-subtle: #334155;
        --border-medium: #475569;
        --border-strong: #64748b;
        
        /* Interactive colors remain same for consistency */
    }
}

/* Force dark mode when explicitly set */
[data-theme="dark"] {
    --bg-surface: #0f172a;
    --bg-surface-alt: #1e293b;
    --bg-surface-elevated: #334155;
    --text-primary: #f8fafc;
    --text-secondary: #cbd5e1;
    --text-tertiary: #94a3b8;
    --text-inverse: #0f172a;
    --border-subtle: #334155;
    --border-medium: #475569;
    --border-strong: #64748b;
}

/* Apply semantic colors to all elements */
body,
.site-main,
.article-content,
.entry-content {
    background-color: var(--bg-surface);
    color: var(--text-primary);
}

.card,
.post-card,
.entry-card,
.wp-block-group {
    background-color: var(--bg-surface);
    color: var(--text-primary);
    border-color: var(--border-subtle);
}

/* Ensure inputs adapt to theme */
input,
textarea,
select {
    background-color: var(--bg-surface);
    color: var(--text-primary);
    border-color: var(--border-medium);
}

input::placeholder,
textarea::placeholder {
    color: var(--text-tertiary);
}

/* ============ ENHANCED FLUID TYPOGRAPHY ============ */
/* Mathematical fluid type scale using clamp() */

/* Base font size - fluid from 16px to 18px */
html {
    font-size: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
}

/* H1 - Fluid from 32px to 64px (mobile to desktop) */
h1,
.entry-title,
.page-title,
.article-title,
.h1 {
    font-size: clamp(2rem, 1.5rem + 2.5vw, 4rem) !important;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: clamp(1rem, 0.75rem + 1.25vw, 1.5rem);
}

/* H2 - Fluid from 24px to 48px */
h2,
.h2 {
    font-size: clamp(1.5rem, 1.25rem + 1.25vw, 3rem) !important;
    line-height: 1.2;
    letter-spacing: -0.015em;
    margin-bottom: clamp(0.75rem, 0.5rem + 1vw, 1.25rem);
}

/* H3 - Fluid from 20px to 36px */
h3,
.h3 {
    font-size: clamp(1.25rem, 1.125rem + 0.625vw, 2.25rem) !important;
    line-height: 1.3;
    letter-spacing: -0.01em;
    margin-bottom: clamp(0.625rem, 0.5rem + 0.625vw, 1rem);
}

/* H4 - Fluid from 18px to 24px */
h4,
.h4 {
    font-size: clamp(1.125rem, 1rem + 0.625vw, 1.5rem) !important;
    line-height: 1.4;
    margin-bottom: clamp(0.5rem, 0.375rem + 0.625vw, 0.875rem);
}

/* Body text - Fluid from 16px to 18px */
p,
li,
.body-text {
    font-size: clamp(1rem, 0.9375rem + 0.3125vw, 1.125rem);
    line-height: 1.7;
}

/* Small text - Fluid from 14px to 16px */
small,
.small-text,
.meta,
.caption {
    font-size: clamp(0.875rem, 0.8125rem + 0.3125vw, 1rem);
    line-height: 1.6;
}

/* ============ VIEWPORT A: POCKET MOBILE (320px - 375px) ============ */

@media (max-width: 375px) {
    /* Navigation collision fix */
    .site-header .branding__logo {
        max-width: 120px !important;
    }
    
    .site-header .branding__title {
        font-size: 0.85rem !important;
    }
    
    /* Hamburger menu - ensure 44x44px touch target */
    .menu-toggle,
    .hamburger-menu {
        min-width: 44px !important;
        min-height: 44px !important;
        padding: 10px !important;
    }
    
    /* Newsletter widget overflow fix */
    .newsletter-section,
    .newsletter-widget,
    .widget_newsletter {
        padding: 2rem 1rem !important;
    }
    
    .newsletter-section .button,
    .newsletter-widget .button {
        width: 100% !important;
        min-height: 44px !important;
    }
    
    /* Input font size - prevent iOS zoom */
    .newsletter-section input,
    .newsletter-widget input,
    input[type="email"],
    input[type="text"],
    input[type="search"] {
        font-size: 16px !important;
    }
    
    /* Container padding for pocket screens */
    .container,
    .site-main {
        padding-left: var(--space-3, 1rem) !important;
        padding-right: var(--space-3, 1rem) !important;
    }
}

/* ============ VIEWPORT B: LARGE MOBILE (390px - 600px) ============ */

@media (min-width: 376px) and (max-width: 600px) {
    /* Article hero image - enforce aspect ratio */
    .article-featured-image img,
    .entry-featured-image img,
    .post-featured-image img {
        aspect-ratio: 16/9;
        object-fit: cover;
        max-height: 250px;
        width: 100%;
    }
    
    /* Hide sidebar on mobile */
    .sidebar,
    .widget-area,
    aside.sidebar {
        display: none !important;
    }
    
    /* Show horizontal scrolling category filter */
    .category-filter {
        display: flex;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        gap: 10px;
        padding-bottom: 1rem;
        scrollbar-width: thin;
    }
    
    .category-filter::-webkit-scrollbar {
        height: 4px;
    }
    
    .category-filter::-webkit-scrollbar-thumb {
        background: var(--border-medium);
        border-radius: 2px;
    }
}

/* ============ VIEWPORT C: TABLET (768px - 1024px) ============ */

@media (min-width: 768px) and (max-width: 1024px) {
    /* Grid squeeze fix - use 2 columns */
    .posts-grid,
    .tools-grid,
    .features-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--space-6, 2rem);
    }
    
    /* Navigation - show hamburger menu */
    .site-header .main-navigation {
        display: none;
    }
    
    .menu-toggle {
        display: flex !important;
    }
    
    /* Article content - maintain readability */
    .article-content,
    .entry-content {
        max-width: 680px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ============ VIEWPORT D: LAPTOP/DESKTOP (1280px - 1440px) ============ */

@media (min-width: 1280px) and (max-width: 1440px) {
    /* Line length (measure) - 65 character rule */
    .article-content,
    .entry-content,
    .post-content {
        max-width: 680px;
        margin-left: auto;
        margin-right: auto;
    }
    
    /* Hover states for buttons */
    .button:hover,
    .btn:hover,
    a.button:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        transition: all 0.2s ease;
    }
    
    /* Link hover states */
    .article-content a:hover,
    .entry-content a:hover {
        text-decoration: underline;
        color: var(--interactive-primary-hover);
    }
    
    /* Focus states for accessibility */
    a:focus,
    button:focus,
    input:focus,
    select:focus,
    textarea:focus {
        outline: 2px solid var(--interactive-focus);
        outline-offset: 2px;
    }
}

/* ============ VIEWPORT E: ULTRA-WIDE (1920px - 4K) ============ */

@media (min-width: 1920px) {
    /* Master container - prevent infinite stretch */
    body > div,
    .site-wrapper,
    .site-container {
        max-width: 1600px;
        margin-left: auto;
        margin-right: auto;
    }
    
    /* Ensure images are high-resolution */
    img {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
    
    /* Hero backgrounds should be SVG or high-res */
    .hero-section,
    .page-header {
        background-size: cover;
        background-position: center;
    }
}

/* ============ GLASSMORPHISM NAVIGATION ============ */

.site-header {
    background: rgba(15, 23, 42, 0.8) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
}

/* Fallback for browsers without backdrop-filter */
@supports not (backdrop-filter: blur(12px)) {
    .site-header {
        background: rgba(15, 23, 42, 0.95) !important;
    }
}

/* ============ TYPOGRAPHY HIERARCHY (DEVELOPER AESTHETIC) ============ */

/* Headings use Space Grotesk or Inter */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Space Grotesk', 'Inter', system-ui, -apple-system, sans-serif;
    font-weight: 600;
    letter-spacing: -0.03em;
}

/* Body text uses System UI or Inter */
body,
p,
li {
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 400;
    line-height: 1.6;
}

/* Metadata uses monospace for technical feel */
.post-meta,
.entry-meta,
.post-date,
.category-badge,
time {
    font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
    font-size: 0.875rem;
    letter-spacing: 0.05em;
}

/* ============ SYSTEM STATUS FOOTER WIDGET ============ */

.system-status {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--bg-surface-alt);
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    font-size: 0.875rem;
    font-family: 'JetBrains Mono', monospace;
}

.system-status__indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10b981;
    animation: pulse-status 2s ease-in-out infinite;
}

@keyframes pulse-status {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.system-status__indicator--operational {
    background: #10b981;
}

.system-status__indicator--warning {
    background: #f59e0b;
}

.system-status__indicator--error {
    background: #ef4444;
}

.system-status__text {
    color: var(--text-primary);
    font-weight: 500;
}

.system-status__detail {
    color: var(--text-secondary);
    font-size: 0.8125rem;
}

/* ============ ACCESSIBILITY ENHANCEMENTS ============ */

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Focus visible for keyboard navigation */
:focus-visible {
    outline: 2px solid var(--interactive-focus);
    outline-offset: 2px;
}

/* Skip to content link */
.skip-to-content {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--interactive-primary);
    color: var(--text-inverse);
    padding: 8px 16px;
    text-decoration: none;
    z-index: 10000;
}

.skip-to-content:focus {
    top: 0;
}

/* ============ TOUCH TARGET OPTIMIZATION ============ */

/* Ensure all interactive elements meet 44x44px minimum on mobile */
@media (max-width: 768px) {
    button,
    .button,
    .btn,
    a.button,
    input[type="submit"],
    input[type="button"],
    .menu-toggle,
    .nav-link {
        min-height: 44px;
        min-width: 44px;
        padding: 12px 16px;
    }
}

/* ============ PRINT STYLES ============ */

@media print {
    /* Hide non-content elements */
    .site-header,
    .site-footer,
    .sidebar,
    .widget-area,
    .navigation,
    .social-share,
    .newsletter-section {
        display: none !important;
    }
    
    /* Optimize content for print */
    body {
        font-size: 12pt;
        line-height: 1.5;
        color: #000;
        background: #fff;
    }
    
    /* Ensure images fit page */
    img {
        max-width: 100% !important;
        page-break-inside: avoid;
    }
    
    /* Keep headings with content */
    h1, h2, h3, h4, h5, h6 {
        page-break-after: avoid;
    }
}


/* ========== atomic-design-fixes.css ========== */
/**
 * ATOMIC DESIGN FIXES - Comprehensive CSS Optimization
 * Version: 1.0.0 (2026-01-11)
 * 
 * This file addresses ALL atomic design issues from the problem statement:
 * - Preloader full viewport coverage
 * - Post card text stability on hover
 * - Layout shift prevention (scrollbar-gutter)
 * - Image CLS prevention (aspect-ratio)
 * - Mobile tap highlight fix
 * - Overscroll behavior
 * - Typography fixes (text-wrap)
 * - Button tactile feedback
 * - Autofill dark mode fix
 * - Print styles enhancement
 * - Chatbot mobile overlap fix
 * - Settings widget stability
 * - And more atomic refinements
 * 
 * @package AI_WP_Manager
 * @since 6.0.6
 */

/* ========================================
   §1 — LAYOUT SHIFT PREVENTION (Scrollbar Gutter)
   Prevents the 15-17px horizontal jump when navigating
   between short and long pages
   ======================================== */

html {
    scrollbar-gutter: stable;
    /* Fallback for older browsers */
    overflow-y: scroll;
}

/* ========================================
   §2 — IMAGE CLS PREVENTION (Aspect Ratio)
   Reserves space for images before they load
   ======================================== */

/* Post thumbnails - 16:9 aspect ratio */
.post-thumbnail,
.post-card__image,
.entry-card__thumb,
.article-featured-image,
.featured-image-wrapper,
.wp-post-image {
    aspect-ratio: 16 / 9;
    background-color: var(--color-surface-alt, #f0f0f0);
    object-fit: cover;
    width: 100%;
}

/* Square thumbnails (avatars, icons) */
.author-avatar,
.avatar,
.gravatar {
    aspect-ratio: 1 / 1;
    background-color: var(--color-surface-alt, #f0f0f0);
    object-fit: cover;
}

/* ========================================
   §3 — MOBILE TAP HIGHLIGHT FIX
   Removes the default blue/grey tap overlay on interactive elements
   Applied to specific interactive elements (not global) for accessibility
   ======================================== */

button,
a,
input,
select,
textarea,
[role="button"],
.btn,
.button {
    -webkit-tap-highlight-color: transparent;
}

/* ========================================
   §4 — OVERSCROLL BEHAVIOR (Native App Feel)
   Prevents the pull-to-refresh bounce effect
   ======================================== */

body {
    overscroll-behavior-y: none;
}

/* Allow overscroll on specific scrollable elements if needed */
.scrollable-area,
.modal-content,
.sidebar-scroll {
    overscroll-behavior-y: contain;
}

/* ========================================
   §5 — TYPOGRAPHY FIXES (Widow/Orphan Prevention)
   Prevents single words hanging on the last line
   Note: text-wrap is progressive enhancement - degrades gracefully
   ======================================== */

h1, h2, h3, h4, h5, h6 {
    /* text-wrap: balance is progressive enhancement */
    /* Fallback: word-wrap + hyphens for older browsers */
    word-wrap: break-word;
    overflow-wrap: break-word;
    -webkit-hyphens: auto;
    hyphens: auto;
    text-wrap: balance;
}

p, li, td, th, blockquote, .excerpt {
    /* text-wrap: pretty is progressive enhancement */
    word-wrap: break-word;
    overflow-wrap: break-word;
    text-wrap: pretty;
}

/* ========================================
   §6 — POST CARD TEXT STABILITY ON HOVER
   Text should remain static - only the card container moves
   ======================================== */

/* Ensure card title and excerpt don't move on hover */
.post-card__title,
.post-card__excerpt,
.post-card h3,
.post-card p,
.entry-card__title,
.entry-card__excerpt,
.entry-card h3,
.entry-card p,
[class*="card"] h2:not(.hero-carousel h2),
[class*="card"] h3,
[class*="card"] p:not(.tool-card > p) {
    transform: none !important;
    transition: color 0.2s ease;
}

/* Card hover effect - lift the whole card, not the text */
.post-card,
.entry-card,
.article-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.post-card:hover,
.entry-card:hover,
.article-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}

/* Explicitly prevent text movement on hover */
.post-card:hover h3,
.post-card:hover p,
.entry-card:hover h3,
.entry-card:hover p {
    transform: none !important;
}

/* ========================================
   §7 — BUTTON TACTILE FEEDBACK (:active state)
   Adds physical "press" effect when clicked
   ======================================== */

button:active,
.btn:active,
.button:active,
[class*="btn-"]:active,
[class*="button-"]:active,
input[type="submit"]:active,
input[type="button"]:active {
    transform: scale(0.98) !important;
    filter: brightness(0.95);
    transition: transform 0.1s ease, filter 0.1s ease;
}

/* ========================================
   §8 — FONT RENDERING CONSISTENCY
   Unifies text thickness across Mac/Windows
   ======================================== */

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ========================================
   §9 — SMOOTH SCROLLING WITH REDUCED MOTION RESPECT
   ======================================== */

html {
    scroll-behavior: smooth;
}

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

/* ========================================
   §10 — AUTOFILL DARK MODE FIX
   Prevents yellow background on autofilled inputs
   ======================================== */

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--text-primary, #0f172a);
    -webkit-box-shadow: 0 0 0px 1000px var(--bg-surface, #ffffff) inset;
    transition: background-color 5000s ease-in-out 0s;
}

/* Dark mode autofill */
[data-theme="dark"] input:-webkit-autofill,
[data-theme="dark"] input:-webkit-autofill:hover,
[data-theme="dark"] input:-webkit-autofill:focus,
[data-theme="dark"] textarea:-webkit-autofill,
[data-theme="dark"] textarea:-webkit-autofill:hover,
[data-theme="dark"] textarea:-webkit-autofill:focus {
    -webkit-text-fill-color: #ffffff;
    -webkit-box-shadow: 0 0 0px 1000px #1a1a2e inset;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) input:-webkit-autofill,
    :root:not([data-theme="light"]) input:-webkit-autofill:hover,
    :root:not([data-theme="light"]) input:-webkit-autofill:focus {
        -webkit-text-fill-color: #ffffff;
        -webkit-box-shadow: 0 0 0px 1000px #1a1a2e inset;
    }
}

/* ========================================
   §11 — CHATBOT MOBILE OVERLAP FIX (Safe Area)
   Ensures chatbot doesn't block footer content
   ======================================== */

@media (max-width: 768px) {
    body {
        padding-bottom: 80px; /* Reserve space for chatbot */
    }
    
    /* Hide text label on small screens, show only icon */
    .aiwp-chatbot-launcher__label,
    .chat-launcher__text,
    .chatbot-trigger .label-text,
    [class*="chat-launcher"] span:not([class*="icon"]) {
        display: none;
    }
    
    /* Make chatbot launcher a simple circle */
    .aiwp-chatbot-launcher,
    .aiwp-chat-launcher,
    #aiwp-chatbot-launcher,
    [class*="chat-launcher"] {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Ensure chatbot doesn't overlap with footer links */
    .site-footer {
        padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
    }
}

/* ========================================
   §12 — SETTINGS WIDGET STABILITY
   Prevents layout shift when changing settings
   ======================================== */

.settings-widget,
.theme-settings,
.footer-settings {
    display: flex;
    gap: 12px;
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    /* Prevent layout shift by fixing dimensions */
    min-height: 44px;
    white-space: nowrap;
}

/* Ensure text size changes don't break layout */
.settings-widget__option,
.theme-toggle-option {
    min-width: fit-content;
    transition: color 0.2s ease;
}

/* ========================================
   §13 — SIGN-IN/FORM FOCUS STATES
   Solid feedback when inputs are focused
   ======================================== */

.login-form input,
.sign-in-form input,
.newsletter-form input,
form input[type="email"],
form input[type="text"],
form input[type="password"],
form textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--border-medium, #ccc);
    border-radius: 6px;
    font-size: 16px; /* Prevents auto-zoom on iPhones */
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    background: var(--bg-surface, #fff);
}

.login-form input:focus,
.sign-in-form input:focus,
.newsletter-form input:focus,
form input[type="email"]:focus,
form input[type="text"]:focus,
form input[type="password"]:focus,
form textarea:focus {
    outline: none;
    border-color: var(--color-primary, #2563eb);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
}

/* ========================================
   §14 — LINE HEIGHT CALIBRATION
   Prevents letter collision on multi-line headings
   ======================================== */

h1, h2, h3 {
    line-height: 1.2;
    margin-bottom: 0.5em;
}

h4, h5, h6 {
    line-height: 1.3;
    margin-bottom: 0.4em;
}

p {
    line-height: 1.6;
    margin-bottom: 1.5em;
}

/* ========================================
   §15 — SYSTEM STATUS INDICATOR (CSS Dot)
   Consistent status dot across all devices
   ======================================== */

.status-indicator,
.system-status__dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: #10b981;
    border-radius: 50%;
    margin-right: 8px;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
}

.status-indicator--warning,
.system-status__dot--warning {
    background-color: #f59e0b;
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2);
}

.status-indicator--error,
.system-status__dot--error {
    background-color: #ef4444;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2);
}

/* ========================================
   §16 — CURSOR CONSISTENCY
   Pointer cursor only on truly clickable elements
   ======================================== */

/* Ensure pointer cursor on all clickable elements */
a[href],
button:not(:disabled),
input[type="submit"]:not(:disabled),
input[type="button"]:not(:disabled),
input[type="checkbox"],
input[type="radio"],
select:not(:disabled),
[role="button"],
.clickable {
    cursor: pointer;
}

/* Remove pointer from non-clickable elements */
.no-click,
[aria-disabled="true"],
button:disabled,
input:disabled {
    cursor: not-allowed;
}

/* ========================================
   §17 — MOBILE MENU SCROLL LOCK
   Prevents background scroll when menu is open
   ======================================== */

body.menu-open,
body.mobile-menu-open,
body.nav-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
}

/* ========================================
   §18 — STRETCHED LINK (Full Card Clickable)
   Makes entire card clickable without wrapping in <a>
   ======================================== */

.post-card,
.entry-card,
.article-card {
    position: relative;
}

/* If you want full card clickable, add this class */
.stretched-link::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

/* ========================================
   §19 — ENHANCED PRINT STYLES
   Professional print output for blog posts
   ======================================== */

@media print {
    /* Hide non-content atoms */
    nav,
    header:not(.article-header),
    footer,
    .sidebar,
    .popup,
    .modal,
    .btn,
    .button,
    .ad-banner,
    .newsletter-section,
    .social-share,
    .aiwp-chatbot-launcher,
    .chat-launcher,
    .comments-section,
    .related-posts,
    .preloader,
    .reading-progress,
    .back-to-top {
        display: none !important;
    }
    
    /* Reset basics for paper */
    body {
        background: white !important;
        color: black !important;
        font-size: 12pt;
        line-height: 1.5;
    }
    
    /* Expand content */
    main,
    article,
    .article-content,
    .entry-content {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Show links on paper */
    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #666;
        word-break: break-all;
    }
    
    /* Don't show link text for internal anchors */
    a[href^="#"]::after,
    a[href^="javascript:"]::after {
        content: "";
    }
    
    /* Page breaks */
    h1, h2, h3, h4, h5, h6 {
        page-break-after: avoid;
        page-break-inside: avoid;
    }
    
    img, figure, table, pre {
        page-break-inside: avoid;
    }
    
    p, li {
        orphans: 3;
        widows: 3;
    }
    
    /* Ensure images are visible */
    img {
        max-width: 100% !important;
        filter: none !important;
    }
}

/* ========================================
   §20 — DARK MODE FLASH PREVENTION
   Handled via critical CSS inline in <head>
   This is a fallback for theme detection
   ======================================== */

/* Immediate dark mode detection - before JS loads */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
    }
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
        color-scheme: light;
    }
}

/* ========================================
   §21 — NAVIGATION TOGGLE TEXT LEAK FIX
   Ensure "Toggle navigation" text is hidden
   ======================================== */

.sr-only,
.screen-reader-text,
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ========================================
   §22 — INPUT PLACEHOLDER VISIBILITY
   Ensure placeholders are visible but subtle
   ======================================== */

::placeholder {
    color: var(--text-tertiary, #94a3b8);
    opacity: 1; /* Firefox fix */
}

::-webkit-input-placeholder {
    color: var(--text-tertiary, #94a3b8);
}

::-moz-placeholder {
    color: var(--text-tertiary, #94a3b8);
}

:-ms-input-placeholder {
    color: var(--text-tertiary, #94a3b8);
}

/* ========================================
   §23 — SELECTION COLOR BRAND CONSISTENCY
   Match text selection to brand colors
   ======================================== */

::selection {
    background-color: var(--color-primary, #0066CC);
    color: #ffffff;
}

::-moz-selection {
    background-color: var(--color-primary, #0066CC);
    color: #ffffff;
}

/* ========================================
   §24 — EMPTY STATE STYLING
   Better UX for no results/empty content
   ======================================== */

.empty-state,
.no-results,
.nothing-found {
    text-align: center;
    padding: 3rem 1.5rem;
    background: var(--bg-surface-alt, #f8f9fa);
    border-radius: 12px;
    margin: 2rem 0;
}

.empty-state__icon,
.no-results__icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.empty-state__title,
.no-results__title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

.empty-state__text,
.no-results__text {
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
}

/* ========================================
   §25 — GRADIENT BANDING FIX (Dark Backgrounds)
   Adds subtle noise to prevent banding artifacts
   ======================================== */

/* Note: This uses a CSS workaround since gradients are 
   prohibited by design policy. For dark backgrounds that 
   may show banding, use solid colors instead. */

.dark-bg,
[class*="dark-background"] {
    background: #0a0a0f; /* Solid dark, no gradient */
}

/* ========================================
   §26 — HOVER STATES FOR TOUCH DEVICES
   Use @media (hover: hover) for desktop-only hovers
   ======================================== */

@media (hover: none), (pointer: coarse) {
    /* Remove hover-dependent styles on touch devices */
    .post-card:hover,
    .entry-card:hover {
        transform: none;
        box-shadow: var(--shadow-card, 0 4px 12px rgba(0,0,0,0.1));
    }
    
    /* Use :active for touch feedback instead */
    .post-card:active,
    .entry-card:active {
        transform: scale(0.98);
    }
    
    /* Disable hover-dependent tooltips */
    [data-tooltip]:hover::after,
    [data-tooltip]:hover::before {
        display: none;
    }
}

/* ========================================
   §27 — FOOTER HIERARCHY FIX
   Separate Site Map from Utility Bar
   ======================================== */

.site-footer {
    display: flex;
    flex-direction: column;
}

.footer-main {
    /* Upper footer: Newsletter + Links */
    padding: 3rem 0;
}

.footer-utility {
    /* Lower footer: Copyright + Status + Theme */
    background: rgba(0, 0, 0, 0.1);
    padding: 1rem 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

@media (max-width: 768px) {
    .footer-utility {
        flex-direction: column;
        text-align: center;
    }
}

/* ========================================
   §28 — FAVICON SHARPNESS (High-DPI)
   Ensures crisp favicon on retina displays
   ======================================== */

/* This is handled in the HTML head with multiple sizes:
   - 16x16 for standard
   - 32x32 for high-DPI standard
   - 192x192 for Android
   - 512x512 for PWA
   - SVG for infinite scalability
*/

/* ========================================
   §29 — REDUCED MOTION UNIVERSAL SUPPORT
   Respect user preferences for motion
   Completely disables animations for accessibility
   ======================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        /* Completely disable animations and transitions */
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
    
    .preloader {
        display: none !important;
    }
}

/* ========================================
   §30 — HIGH CONTRAST MODE SUPPORT
   For users with forced colors (Windows High Contrast)
   ======================================== */

@media (forced-colors: active) {
    .button,
    .btn,
    [class*="btn-"] {
        border: 2px solid ButtonText;
    }
    
    a {
        text-decoration: underline;
    }
    
    :focus-visible {
        outline: 3px solid Highlight;
    }
}