/* Shared blog template CSS
   Hash: 88d5075e52a6
   Auto-extracted from inline <style> blocks across multiple blog posts.
   Edit and rerun scripts/dedup-blog-css.py to refresh, or edit posts and re-extract. */

        /* ============================================
           ULTRA PREMIUM BLOG TEMPLATE 2026
           SEO-Optimized | Mobile-First | Accessible
           ============================================ */
        
        :root {
            --color-bg: #050507;
            --color-text: #e4e4e7;
            --color-text-muted: #a1a1aa;
            --color-violet: #8b5cf6;
            --color-violet-light: #a78bfa;
            --color-cyan: #22d3ee;
            --color-success: #22c55e;
            --color-warning: #f59e0b;
            --font-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
            --line-height: 1.8;
            --content-width: 48rem;
        }
        
        body { 
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            font-size: var(--font-base);
            background: var(--color-bg);
            color: var(--color-text);
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
        
        /* ============================================
           BLOG CONTENT TYPOGRAPHY
           ============================================ */
        .blog-content { 
            line-height: var(--line-height);
            font-size: var(--font-base);
        }
        
        .blog-content h2 { 
            font-size: clamp(1.5rem, 1.3rem + 1vw, 2rem);
            font-weight: 700; 
            color: white; 
            margin-top: 3rem; 
            margin-bottom: 1.25rem;
            letter-spacing: -0.02em;
            position: relative;
            padding-bottom: 0.75rem;
        }
        .blog-content h2::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 60px;
            height: 3px;
            background: linear-gradient(90deg, var(--color-violet), var(--color-cyan));
            border-radius: 2px;
        }
        
        .blog-content h3 { 
            font-size: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
            font-weight: 600; 
            color: var(--color-violet-light); 
            margin-top: 2.5rem; 
            margin-bottom: 1rem;
            letter-spacing: -0.01em;
        }
        
        .blog-content h4 {
            font-size: 1.125rem;
            font-weight: 600;
            color: white;
            margin-top: 2rem;
            margin-bottom: 0.75rem;
        }
        
        .blog-content p { 
            color: var(--color-text-muted); 
            margin-bottom: 1.5rem;
        }
        
        .blog-content ul, .blog-content ol { 
            margin-bottom: 1.5rem; 
            padding-left: 1.75rem; 
            color: var(--color-text-muted);
        }
        .blog-content ul { list-style-type: none; }
        .blog-content ul li { position: relative; padding-left: 0.5rem; }
        .blog-content ul li::before {
            content: '';
            position: absolute;
            left: -1.25rem;
            top: 0.6em;
            width: 6px;
            height: 6px;
            background: linear-gradient(135deg, var(--color-violet), var(--color-cyan));
            border-radius: 50%;
        }
        .blog-content ol { list-style-type: decimal; }
        .blog-content ol li::marker { color: var(--color-violet-light); font-weight: 600; }
        .blog-content li { margin-bottom: 0.75rem; line-height: 1.7; }
        
        .blog-content a { 
            color: var(--color-cyan); 
            text-decoration: none;
            border-bottom: 1px solid transparent;
            transition: border-color 0.2s ease;
        }
        .blog-content a:hover { border-bottom-color: var(--color-cyan); }
        
        .blog-content strong { color: white; font-weight: 600; }
        
        /* ============================================
           PREMIUM KEYWORD HIGHLIGHT (FIXED - No Lines)
           ============================================ */
        .text-highlight {
            color: #fff;
            font-weight: 600;
            background: linear-gradient(135deg, rgba(139, 92, 246, 0.25), rgba(34, 211, 238, 0.2));
            padding: 0.15em 0.5em;
            border-radius: 0.375em;
            box-decoration-break: clone;
            -webkit-box-decoration-break: clone;
            display: inline;
            word-wrap: break-word;
            overflow-wrap: break-word;
            hyphens: auto;
        }
        
        /* ============================================
           STAT CARD - Premium Metrics Display
           ============================================ */
        .stat-card { 
            background: linear-gradient(135deg, rgba(139, 92, 246, 0.08), rgba(6, 182, 212, 0.06)); 
            border: 1px solid rgba(139, 92, 246, 0.15); 
            border-radius: 1.25rem; 
            padding: 2rem; 
            margin: 2rem 0; 
            text-align: center;
            position: relative;
            overflow: hidden;
        }
        .stat-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 100px;
            height: 2px;
            background: linear-gradient(90deg, transparent, var(--color-violet), transparent);
        }
        .stat-card .stat-number { 
            display: block; 
            font-size: clamp(2.5rem, 2rem + 2.5vw, 3.5rem);
            font-weight: 800; 
            background: linear-gradient(135deg, #a78bfa, #22d3ee); 
            -webkit-background-clip: text; 
            -webkit-text-fill-color: transparent;
            line-height: 1.2;
        }
        .stat-card .stat-label { 
            color: var(--color-text-muted); 
            font-size: 0.9rem;
            margin-top: 0.5rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }
        
        /* ============================================
           TIP & WARNING CARDS
           ============================================ */
        .tip-card { 
            display: flex; 
            gap: 1rem; 
            background: rgba(34, 197, 94, 0.06); 
            border: 1px solid rgba(34, 197, 94, 0.15); 
            border-radius: 1rem; 
            padding: 1.5rem; 
            margin: 2rem 0;
            align-items: flex-start;
        }
        .tip-card .tip-icon { 
            font-size: 1.5rem; 
            flex-shrink: 0;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(34, 197, 94, 0.1);
            border-radius: 0.75rem;
        }
        .tip-card .tip-content { flex: 1; }
        .tip-card strong { color: #4ade80; display: block; margin-bottom: 0.25rem; }
        .tip-card p { margin: 0; color: var(--color-text-muted); }
        
        .warning-card { 
            display: flex; 
            gap: 1rem; 
            background: rgba(251, 146, 60, 0.06); 
            border: 1px solid rgba(251, 146, 60, 0.15); 
            border-radius: 1rem; 
            padding: 1.5rem; 
            margin: 2rem 0;
            align-items: flex-start;
        }
        .warning-card .warn-icon { 
            font-size: 1.5rem;
            flex-shrink: 0;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(251, 146, 60, 0.1);
            border-radius: 0.75rem;
        }
        .warning-card .warn-content { flex: 1; }
        .warning-card strong { color: #fb923c; display: block; margin-bottom: 0.25rem; }
        .warning-card p { margin: 0; color: var(--color-text-muted); }
        
        /* ============================================
           QUOTE CARD - Expert Insights
           ============================================ */
        .quote-card { 
            background: linear-gradient(135deg, rgba(139, 92, 246, 0.06), rgba(139, 92, 246, 0.02)); 
            border-left: 4px solid var(--color-violet); 
            border-radius: 0 1.25rem 1.25rem 0; 
            padding: 2rem; 
            margin: 2.5rem 0;
            position: relative;
        }
        .quote-card::before {
            content: '"';
            position: absolute;
            top: 0.5rem;
            left: 1.5rem;
            font-size: 4rem;
            color: rgba(139, 92, 246, 0.2);
            font-family: Georgia, serif;
            line-height: 1;
        }
        .quote-card blockquote { 
            font-size: 1.15rem; 
            font-style: italic; 
            color: #d1d5db; 
            margin: 0 0 0.75rem 0;
            padding-left: 1rem;
        }
        .quote-card cite { 
            color: var(--color-violet-light); 
            font-size: 0.9rem;
            font-style: normal;
            display: block;
            padding-left: 1rem;
        }
        
        /* ============================================
           CODE STYLING
           ============================================ */
        .inline-code {
            font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
            background: rgba(139, 92, 246, 0.12);
            color: var(--color-cyan);
            padding: 0.2em 0.45em;
            border-radius: 0.375em;
            font-size: 0.875em;
        }
        
        .code-block {
            background: rgba(0, 0, 0, 0.5);
            border: 1px solid rgba(139, 92, 246, 0.15);
            border-radius: 1rem;
            padding: 1.5rem;
            overflow-x: auto;
            font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
            font-size: 0.875rem;
            color: #e2e8f0;
            margin: 2rem 0;
            line-height: 1.6;
        }
        
        /* ============================================
           CONTENT IMAGE - Mid-Article Visual (Premium)
           ============================================ */
        .content-image {
            margin: 4rem auto;
            max-width: 100%;
            border-radius: 1.5rem;
            overflow: hidden;
            background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(34, 211, 238, 0.06));
            padding: 0.5rem;
            border: 1px solid rgba(139, 92, 246, 0.2);
            box-shadow: 0 25px 50px -12px rgba(139, 92, 246, 0.15);
            position: relative;
        }
        .content-image::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 1.5rem;
            padding: 1px;
            background: linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(34, 211, 238, 0.2));
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            pointer-events: none;
        }
        .content-image img {
            width: 100%;
            border-radius: 1.25rem;
            display: block;
        }
        /* No figcaption - clean image presentation */
        .content-image figcaption {
            display: none;
        }
        
        /* ============================================
           PREMIUM VIDEO PLAYER - Award-Winning Design
           ============================================ */
        .content-video {
            margin: 4rem auto;
            max-width: 100%;
            border-radius: 1.5rem;
            overflow: hidden;
            background: linear-gradient(135deg, rgba(139, 92, 246, 0.12), rgba(34, 211, 238, 0.08));
            padding: 0.5rem;
            border: 1px solid rgba(139, 92, 246, 0.25);
            box-shadow: 
                0 25px 50px -12px rgba(139, 92, 246, 0.2),
                0 0 0 1px rgba(139, 92, 246, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
            position: relative;
        }
        .content-video::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 1.5rem;
            padding: 1px;
            background: linear-gradient(135deg, rgba(139, 92, 246, 0.4), rgba(34, 211, 238, 0.3));
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            pointer-events: none;
        }
        .content-video video {
            width: 100%;
            border-radius: 1.25rem;
            display: block;
            background: #000;
        }
        .content-video figcaption {
            text-align: center;
            padding: 1rem 0 0.5rem;
            color: rgba(255, 255, 255, 0.6);
            font-size: 0.875rem;
            font-style: italic;
        }
        
        /* Hero Video - Full-width cinematic */
        .hero-video {
            border-radius: 0;
            background: #000;
        }
        
        /* Video Controls Styling (browser native enhanced) */
        video::-webkit-media-controls-panel {
            background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
        }
        video::-webkit-media-controls-play-button,
        video::-webkit-media-controls-mute-button,
        video::-webkit-media-controls-fullscreen-button {
            filter: brightness(1.2);
        }
        video::-webkit-media-controls-current-time-display,
        video::-webkit-media-controls-time-remaining-display {
            color: white;
        }
        
        /* Video Responsive */
        @media (max-width: 768px) {
            .content-video {
                margin: 2.5rem auto;
                padding: 0.375rem;
                border-radius: 1rem;
            }
            .content-video video {
                border-radius: 0.875rem;
            }
            .content-video figcaption {
                font-size: 0.8125rem;
                padding: 0.75rem 0 0.25rem;
            }
        }
        
        /* ============================================
           FAQ SECTION - Schema-Ready
           ============================================ */
        .faq-section {
            margin: 4rem 0;
            padding: 2.5rem;
            background: linear-gradient(135deg, rgba(139, 92, 246, 0.06), rgba(34, 211, 238, 0.03));
            border-radius: 1.5rem;
            border: 1px solid rgba(139, 92, 246, 0.12);
        }
        .faq-section h2, .faq-section .faq-title {
            font-size: 1.5rem;
            font-weight: 700;
            color: white;
            margin-bottom: 1.5rem;
            text-align: center;
        }
        .faq-section h2::after { display: none; }
        .faq-item { margin-bottom: 0.75rem; }
        .faq-item details {
            background: rgba(255, 255, 255, 0.02);
            border: 1px solid rgba(255, 255, 255, 0.06);
            border-radius: 0.875rem;
            overflow: hidden;
            transition: all 0.2s ease;
        }
        .faq-item details[open] {
            background: rgba(139, 92, 246, 0.06);
            border-color: rgba(139, 92, 246, 0.2);
        }
        .faq-item summary {
            padding: 1.25rem 1.5rem;
            cursor: pointer;
            font-weight: 600;
            color: white;
            display: flex;
            justify-content: space-between;
            align-items: center;
            list-style: none;
            font-size: 1rem;
        }
        .faq-item summary::-webkit-details-marker { display: none; }
        .faq-item summary::after {
            content: '+';
            font-size: 1.25rem;
            color: var(--color-violet-light);
            font-weight: 300;
            transition: transform 0.2s ease;
        }
        .faq-item details[open] summary::after { transform: rotate(45deg); }
        .faq-answer {
            padding: 0 1.5rem 1.5rem;
            color: var(--color-text-muted);
            line-height: 1.7;
        }
        
        /* ============================================
           KEY TAKEAWAYS & CTA
           ============================================ */
        .key-takeaways { 
            background: linear-gradient(135deg, rgba(139, 92, 246, 0.06), rgba(6, 182, 212, 0.04)); 
            border: 1px solid rgba(139, 92, 246, 0.12); 
            border-radius: 1.25rem; 
            padding: 2rem; 
            margin: 2.5rem 0; 
        }
        .key-takeaways h4 { 
            color: white; 
            font-size: 1.125rem; 
            font-weight: 600; 
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        .key-takeaways h4::before {
            content: '✨';
        }
        .key-takeaways ul { margin-bottom: 0; }
        
        .cta-box { 
            background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(124, 58, 237, 0.06)); 
            border: 1px solid rgba(139, 92, 246, 0.2); 
            border-radius: 1.25rem; 
            padding: 2rem; 
            margin: 2.5rem 0; 
            text-align: center; 
        }
        .cta-box strong { color: white; font-size: 1.125rem; }
        .cta-box p { margin: 0.75rem 0; }
        .cta-box a { 
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            color: var(--color-violet-light); 
            font-weight: 600;
            padding: 0.75rem 1.5rem;
            background: rgba(139, 92, 246, 0.15);
            border-radius: 0.75rem;
            margin-top: 0.5rem;
            transition: all 0.2s ease;
        }
        .cta-box a:hover {
            background: rgba(139, 92, 246, 0.25);
            border-bottom: none;
        }
        
        /* ============================================
           UI ELEMENTS
           ============================================ */
        .category-badge { 
            display: inline-flex; 
            padding: 0.4rem 1rem; 
            font-size: 0.7rem; 
            font-weight: 600; 
            text-transform: uppercase; 
            letter-spacing: 0.08em; 
            border-radius: 9999px; 
            background: rgba(139, 92, 246, 0.12); 
            color: var(--color-violet-light);
        }
        
        .share-btn { 
            width: 44px; 
            height: 44px; 
            border-radius: 12px; 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            transition: all 0.2s; 
            cursor: pointer; 
            border: 1px solid rgba(255,255,255,0.08); 
            background: rgba(255,255,255,0.02); 
            color: var(--color-text-muted);
        }
        .share-btn:hover { 
            transform: translateY(-2px); 
            color: white;
            background: rgba(139, 92, 246, 0.15);
            border-color: rgba(139, 92, 246, 0.3);
        }
        .share-btn svg { width: 20px; height: 20px; }
        
        /* ============================================
           RESPONSIVE ADJUSTMENTS
           ============================================ */
        @media (max-width: 768px) {
            .blog-content h2 { margin-top: 2.5rem; }
            .blog-content h3 { margin-top: 2rem; }
            .stat-card { padding: 1.5rem; }
            .tip-card, .warning-card { flex-direction: column; gap: 0.75rem; }
            .tip-card .tip-icon, .warning-card .warn-icon { width: 36px; height: 36px; }
            .quote-card { padding: 1.5rem; }
            .quote-card::before { font-size: 3rem; top: 0.25rem; left: 1rem; }
            .faq-section { padding: 1.5rem; }
            .key-takeaways, .cta-box { padding: 1.5rem; }
        }
        
        /* ============================================
           PRINT STYLES
           ============================================ */
        @media print {
            body { background: white; color: black; }
            .blog-content a { color: black; text-decoration: underline; }
            nav, footer, .share-btn, #readNextSection { display: none !important; }
        }