* { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif; color: #333; line-height: 1.7; background: #f8f9fa; }
        a { color: #155DFC; text-decoration: none; }
        a:hover { text-decoration: underline; }

        /* FTC Banner */
        .ftc-banner { background: #f0f0f5; text-align: center; padding: 8px 16px; font-size: 12px; color: #666; border-bottom: 1px solid #e0e0e8; }

        /* Header */
        .header { background: var(--navy, #1a1a2e); padding: 0 24px; position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 16px rgba(0,0,0,0.15); }
        .header-inner { max-width: 1120px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; height: 68px; }
        .logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #fff; font-weight: 800; font-size: 22px; letter-spacing: -0.02em; }
        .logo-icon { width: 36px; height: 36px; background: var(--accent, #155DFC); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; color: #fff; position: relative; overflow: hidden; }
        .logo-icon::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, transparent 60%); }
        nav a { color: rgba(255,255,255,0.75); text-decoration: none; font-size: 14px; font-weight: 500; padding: 8px 16px; border-radius: 6px; transition: color 0.2s, background 0.2s; }
        nav a:hover { color: #fff; background: rgba(255,255,255,0.08); text-decoration: none; }
        .mobile-toggle { display: none; background: none; border: none; color: #fff; font-size: 24px; cursor: pointer; padding: 8px; }

        /* Article Container */
        .article-container { max-width: 780px; margin: 0 auto; padding: 40px 20px 60px; }

        /* FTC Disclosure */
        .ftc-disclosure { background: #fff3cd; border: 1px solid #ffc107; border-radius: 8px; padding: 14px 18px; margin-bottom: 32px; font-size: 0.85rem; color: #664d03; line-height: 1.5; }

        /* Breadcrumb */
        .breadcrumb { font-size: 0.85rem; color: #888; margin-bottom: 20px; }
        .breadcrumb a { color: #155DFC; }

        /* Article Header */
        .article-header h1 { font-size: 2.1rem; line-height: 1.25; color: #1a1a2e; margin-bottom: 16px; font-weight: 800; }
        .article-meta { display: flex; gap: 20px; flex-wrap: wrap; font-size: 0.88rem; color: #777; margin-bottom: 28px; padding-bottom: 20px; border-bottom: 2px solid #eee; }
        .article-meta span { display: flex; align-items: center; gap: 5px; }

        /* Content */
        .article-content h2 { font-size: 1.55rem; color: #1a1a2e; margin: 40px 0 16px; padding-top: 12px; border-top: 1px solid #eee; font-weight: 700; }
        .article-content h2:first-of-type { border-top: none; margin-top: 8px; }
        .article-content h3 { font-size: 1.2rem; color: #333; margin: 28px 0 12px; font-weight: 600; }
        .article-content p { margin-bottom: 16px; font-size: 1.02rem; }
        .article-content ul, .article-content ol { margin: 0 0 20px 24px; }
        .article-content li { margin-bottom: 8px; font-size: 1.02rem; }

        /* Calculator Form */
        .calc-form { background: #fff; border: 1px solid #e0e0e0; border-radius: 12px; padding: 32px; margin: 24px 0; box-shadow: 0 2px 12px rgba(0,0,0,0.06); }
        .form-group { margin-bottom: 28px; }
        .form-group label { display: block; font-weight: 700; font-size: 1.05rem; color: #1a1a2e; margin-bottom: 10px; }
        .form-group .label-hint { display: block; font-weight: 400; font-size: 0.88rem; color: #777; margin-top: 4px; }

        /* Slider */
        .slider-container { display: flex; align-items: center; gap: 16px; }
        .slider-container input[type="range"] { flex: 1; height: 8px; -webkit-appearance: none; appearance: none; background: #e0e0e0; border-radius: 4px; outline: none; }
        .slider-container input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; background: #155DFC; border-radius: 50%; cursor: pointer; box-shadow: 0 2px 6px rgba(21,93,252,0.3); }
        .slider-container input[type="range"]::-moz-range-thumb { width: 24px; height: 24px; background: #155DFC; border-radius: 50%; cursor: pointer; border: none; box-shadow: 0 2px 6px rgba(21,93,252,0.3); }
        .slider-value { font-size: 1.4rem; font-weight: 800; color: #155DFC; min-width: 50px; text-align: center; }

        /* Select / Dropdown */
        .form-select { width: 100%; padding: 12px 16px; border: 1px solid #d0d5dd; border-radius: 8px; font-size: 1rem; color: #333; background: #fff; cursor: pointer; }
        .form-select:focus { outline: none; border-color: #155DFC; box-shadow: 0 0 0 3px rgba(21,93,252,0.15); }

        /* Radio Buttons */
        .radio-group { display: grid; gap: 10px; }
        .radio-option { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border: 2px solid #e0e0e0; border-radius: 10px; cursor: pointer; transition: all 0.2s; }
        .radio-option:hover { border-color: #155DFC; background: #f0f5ff; }
        .radio-option.selected { border-color: #155DFC; background: #e8f0ff; }
        .radio-option input[type="radio"] { accent-color: #155DFC; width: 18px; height: 18px; cursor: pointer; }
        .radio-option .radio-label { font-size: 1rem; font-weight: 600; color: #1a1a2e; }
        .radio-option .radio-price { font-size: 0.88rem; color: #666; margin-left: auto; }

        /* Calculate Button */
        .calc-button { display: block; width: 100%; padding: 16px 32px; background: linear-gradient(135deg, #155DFC 0%, #1a1a2e 100%); color: #fff; border: none; border-radius: 10px; font-size: 1.15rem; font-weight: 700; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; letter-spacing: 0.3px; }
        .calc-button:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(21,93,252,0.35); }
        .calc-button:active { transform: translateY(0); }

        /* Results */
        .results-section { display: none; margin-top: 32px; }
        .results-section.visible { display: block; animation: fadeSlideIn 0.6s ease-out; }
        @keyframes fadeSlideIn {
            from { opacity: 0; transform: translateY(24px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .results-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 28px; }
        .result-card { background: #fff; border: 1px solid #e0e0e0; border-radius: 10px; padding: 20px; text-align: center; }
        .result-card .result-label { font-size: 0.85rem; color: #777; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px; }
        .result-card .result-value { font-size: 1.6rem; font-weight: 800; color: #1a1a2e; }
        .result-card.savings .result-value { color: #16a34a; }
        .result-card.annual .result-value { font-size: 2rem; color: #16a34a; }
        .result-card.roi .result-value { color: #155DFC; }

        /* Recommendation Box */
        .recommendation-box { background: #fff; border: 2px solid #155DFC; border-radius: 12px; padding: 28px; margin: 24px 0; }
        .recommendation-box h3 { color: #1a1a2e; font-size: 1.3rem; margin-bottom: 4px; }
        .recommendation-box .rec-subtitle { color: #666; font-size: 0.92rem; margin-bottom: 18px; }
        .rec-tool { display: flex; align-items: center; gap: 16px; padding: 18px; background: #f0f5ff; border-radius: 10px; margin-bottom: 16px; }
        .rec-tool .rec-badge { background: #155DFC; color: #fff; padding: 4px 12px; border-radius: 20px; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; white-space: nowrap; }
        .rec-tool .rec-badge.secondary { background: #6b7280; }
        .rec-tool-info { flex: 1; }
        .rec-tool-name { font-size: 1.15rem; font-weight: 700; color: #1a1a2e; }
        .rec-tool-price { font-size: 0.9rem; color: #666; }
        .rec-tool-desc { font-size: 0.9rem; color: #555; margin-top: 4px; }

        /* CTA Box */
        .cta-box { background: linear-gradient(135deg, #155DFC 0%, #1a1a2e 100%); border-radius: 12px; padding: 28px 32px; margin: 32px 0; text-align: center; color: #fff; }
        .cta-box h3 { color: #fff; font-size: 1.3rem; margin-bottom: 10px; }
        .cta-box p { color: rgba(255,255,255,0.9); margin-bottom: 18px; font-size: 0.98rem; }
        .cta-button { display: inline-block; background: #fff; color: #155DFC; padding: 13px 36px; border-radius: 8px; font-weight: 700; font-size: 1.05rem; transition: transform 0.2s, box-shadow 0.2s; }
        .cta-button:hover { transform: translateY(-2px); box-shadow: 0 4px 15px rgba(0,0,0,0.3); text-decoration: none; }

        /* Comparison Table */
        .comparison-table { width: 100%; border-collapse: collapse; margin: 20px 0 28px; font-size: 0.95rem; }
        .comparison-table th { background: #1a1a2e; color: #fff; padding: 12px 16px; text-align: left; }
        .comparison-table td { padding: 11px 16px; border-bottom: 1px solid #eee; }
        .comparison-table tr:nth-child(even) { background: #f8f9fa; }
        .comparison-table .highlight-row { background: #e8f0ff; font-weight: 600; }
        .comparison-table a { font-weight: 600; }

        /* Quick Answer */
        .quick-answer { background: #e8f4fd; border-left: 4px solid #155DFC; border-radius: 0 8px 8px 0; padding: 16px 20px; margin: 20px 0; }
        .quick-answer strong { color: #155DFC; }

        /* Review Links */
        .review-links { margin-top: 16px; padding-top: 12px; border-top: 1px solid #e0e0e0; }
        .review-links a { display: inline-block; margin-right: 16px; margin-bottom: 6px; font-size: 0.92rem; font-weight: 600; }

        /* Footer */
        .site-footer { background: #1a1a2e; color: #aaa; padding: 36px 20px; text-align: center; font-size: 0.88rem; }
        .site-footer a { color: #155DFC; }
        .footer-inner { max-width: 1100px; margin: 0 auto; }

        /* Responsive */
        @media (max-width: 640px) {
            .article-header h1 { font-size: 1.55rem; }
            .article-content h2 { font-size: 1.3rem; }
            nav { display: none; }
            .mobile-toggle { display: block; }
            .cta-box { padding: 22px 18px; }
            .calc-form { padding: 20px 16px; }
            .results-summary { grid-template-columns: 1fr 1fr; }
            .result-card .result-value { font-size: 1.3rem; }
            .result-card.annual .result-value { font-size: 1.5rem; }
            .rec-tool { flex-direction: column; align-items: flex-start; gap: 8px; }
            .comparison-table { font-size: 0.82rem; }
            .comparison-table th, .comparison-table td { padding: 8px 10px; }
        }
    
        /* Dark Mode */
        [data-theme="dark"] { --navy: #0d0d1a; --navy-light: #0a0f1e; --text-primary: #e4e4e8; --text-secondary: #a0a0b8; --text-muted: #6a6a86; --surface: #1a1a2e; --surface-alt: #16213e; --border: #2a2a4e; --accent: #4d8aff; --accent-hover: #3a75e8; --accent-light: #1a2a4e; }
        [data-theme="dark"] body { background: #1a1a2e; color: #e4e4e8; }
        [data-theme="dark"] .ftc-banner { background: #16213e; border-color: #2a2a4e; color: #6a6a86; }
        [data-theme="dark"] img { opacity: 0.9; }