/* Custom styles for PassiveMoneyIdea blog */\n\n/* Base styles */\n* {\n    box-sizing: border-box;\n}\n\nhtml {\n    scroll-behavior: smooth;\n}\n\nbody {\n    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n    line-height: 1.6;\n}\n\n/* Typography */\n.prose {\n    color: #374151;\n    max-width: none;\n}\n\n.prose h2 {\n    font-size: 1.875rem;\n    font-weight: 700;\n    margin-top: 2rem;\n    margin-bottom: 1rem;\n    color: #111827;\n}\n\n.prose h3 {\n    font-size: 1.5rem;\n    font-weight: 600;\n    margin-top: 1.5rem;\n    margin-bottom: 0.75rem;\n    color: #111827;\n}\n\n.prose p {\n    margin-bottom: 1.25rem;\n}\n\n.prose strong {\n    font-weight: 600;\n    color: #111827;\n}\n\n.prose a {\n    color: #2563eb;\n    text-decoration: none;\n    font-weight: 500;\n}\n\n.prose a:hover {\n    color: #1d4ed8;\n    text-decoration: underline;\n}\n\n.prose ul, .prose ol {\n    margin: 1.25rem 0;\n    padding-left: 1.5rem;\n}\n\n.prose li {\n    margin-bottom: 0.5rem;\n}\n\n.prose blockquote {\n    border-left: 4px solid #e5e7eb;\n    padding-left: 1rem;\n    margin: 1.5rem 0;\n    font-style: italic;\n    color: #6b7280;\n}\n\n/* Custom components */\n.gradient-text {\n    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n    -webkit-background-clip: text;\n    -webkit-text-fill-color: transparent;\n    background-clip: text;\n}\n\n.btn-primary {\n    @apply bg-blue-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-blue-700 transition-colors duration-200 inline-flex items-center;\n}\n\n.btn-secondary {\n    @apply bg-gray-100 text-gray-900 px-6 py-3 rounded-lg font-semibold hover:bg-gray-200 transition-colors duration-200 inline-flex items-center;\n}\n\n.btn-success {\n    @apply bg-green-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-green-700 transition-colors duration-200 inline-flex items-center;\n}\n\n/* Card hover effects */\n.card-hover {\n    transition: all 0.3s ease;\n}\n\n.card-hover:hover {\n    transform: translateY(-4px);\n    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);\n}\n\n/* Affiliate link styling */\n.affiliate-link {\n    position: relative;\n    background: linear-gradient(135deg, #f6f8fa 0%, #e9ecef 100%);\n    border: 2px solid #28a745;\n    border-radius: 8px;\n    padding: 1rem;\n    margin: 1rem 0;\n    transition: all 0.3s ease;\n}\n\n.affiliate-link:hover {\n    transform: translateY(-2px);\n    box-shadow: 0 8px 25px rgba(40, 167, 69, 0.15);\n    border-color: #20c997;\n}\n\n.affiliate-link::before {\n    content: '💰';\n    position: absolute;\n    top: -8px;\n    right: -8px;\n    background: #28a745;\n    color: white;\n    width: 24px;\n    height: 24px;\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 12px;\n}\n\n/* Money-making theme colors */\n.money-green {\n    color: #16a085;\n}\n\n.money-gold {\n    color: #f39c12;\n}\n\n.profit-gradient {\n    background: linear-gradient(135deg, #16a085 0%, #f39c12 100%);\n}\n\n/* Loading states */\n.loading {\n    opacity: 0.6;\n    pointer-events: none;\n}\n\n.spinner {\n    border: 2px solid #f3f3f3;\n    border-top: 2px solid #3498db;\n    border-radius: 50%;\n    width: 20px;\n    height: 20px;\n    animation: spin 1s linear infinite;\n    display: inline-block;\n    margin-right: 8px;\n}\n\n@keyframes spin {\n    0% { transform: rotate(0deg); }\n    100% { transform: rotate(360deg); }\n}\n\n/* Newsletter signup */\n.newsletter-form {\n    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n}\n\n/* Social proof elements */\n.social-proof {\n    background: linear-gradient(135deg, #fff5f5 0%, #fed7d7 50%, #fff5f5 100%);\n    border: 2px solid #feb2b2;\n}\n\n/* Success stories styling */\n.success-story {\n    background: linear-gradient(135deg, #f0fff4 0%, #c6f6d5 50%, #f0fff4 100%);\n    border-left: 4px solid #38a169;\n}\n\n/* Mobile optimizations */\n@media (max-width: 768px) {\n    .prose {\n        font-size: 16px;\n    }\n    \n    .prose h2 {\n        font-size: 1.5rem;\n    }\n    \n    .prose h3 {\n        font-size: 1.25rem;\n    }\n    \n    .affiliate-link {\n        margin: 0.5rem 0;\n        padding: 0.75rem;\n    }\n}\n\n/* Dark mode support */\n@media (prefers-color-scheme: dark) {\n    .prose {\n        color: #e5e7eb;\n    }\n    \n    .prose h2,\n    .prose h3,\n    .prose strong {\n        color: #f9fafb;\n    }\n}\n\n/* Print styles */\n@media print {\n    .no-print {\n        display: none !important;\n    }\n    \n    .affiliate-link::before {\n        display: none;\n    }\n    \n    body {\n        font-size: 12pt;\n        line-height: 1.4;\n    }\n}\n\n/* Accessibility improvements */\n.sr-only {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border: 0;\n}\n\n/* Focus styles */\na:focus,\nbutton:focus,\ninput:focus,\ntextarea:focus {\n    outline: 2px solid #2563eb;\n    outline-offset: 2px;\n}\n\n/* Smooth animations */\n.fade-in {\n    animation: fadeIn 0.5s ease-in;\n}\n\n@keyframes fadeIn {\n    from { opacity: 0; transform: translateY(20px); }\n    to { opacity: 1; transform: translateY(0); }\n}\n\n.slide-in-right {\n    animation: slideInRight 0.5s ease-out;\n}\n\n@keyframes slideInRight {\n    from { opacity: 0; transform: translateX(50px); }\n    to { opacity: 1; transform: translateX(0); }\n}\n\n/* Income calculator styling */\n.calculator {\n    background: linear-gradient(135deg, #e8f5e8 0%, #c8e6c9 100%);\n    border-radius: 12px;\n    padding: 2rem;\n    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n}\n\n.calculator-result {\n    font-size: 2rem;\n    font-weight: bold;\n    color: #2e7d32;\n    text-align: center;\n    margin-top: 1rem;\n}\n\n/* Testimonial styling */\n.testimonial {\n    background: white;\n    border-radius: 8px;\n    padding: 1.5rem;\n    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n    border-left: 4px solid #ffd700;\n}\n\n.testimonial-author {\n    font-weight: 600;\n    color: #2d3748;\n}\n\n.testimonial-role {\n    color: #718096;\n    font-size: 0.875rem;\n}\n\n/* Revenue highlight */\n.revenue-highlight {\n    background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);\n    border: 2px solid #fdcb6e;\n    border-radius: 8px;\n    padding: 1rem;\n    text-align: center;\n    font-weight: 600;\n    color: #856404;\n}\n\n/* CTA button animations */\n.cta-button {\n    position: relative;\n    overflow: hidden;\n    transform: translateZ(0);\n}\n\n.cta-button::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: -100%;\n    width: 100%;\n    height: 100%;\n    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);\n    transition: left 0.5s;\n}\n\n.cta-button:hover::before {\n    left: 100%;\n}\n\n/* Notification styles */\n.notification {\n    backdrop-filter: blur(10px);\n    -webkit-backdrop-filter: blur(10px);\n}\n\n/* Lazy loading images */\nimg.lazy {\n    filter: blur(5px);\n    transition: filter 0.3s;\n}\n\nimg.lazy.loaded {\n    filter: blur(0);\n}