/* ========================================
           CSS Variables
           ======================================== */
        :root {
            --color-primary: #2563eb;
            --color-primary-dark: #1d4ed8;
            --color-good: #10b981;
            --color-good-bg: #ecfdf5;
            --color-ok: #f59e0b;
            --color-ok-bg: #fffbeb;
            --color-warn: #ef4444;
            --color-warn-bg: #fef2f2;
            --color-bg: #f8fafc;
            --color-surface: #ffffff;
            --color-border: #e2e8f0;
            --color-text: #1e293b;
            --color-text-muted: #64748b;
            --color-dark: #0f172a;
            --color-accent: #06b6d4;
            
            /* Mobile-first spacing */
            --space-xs: 0.25rem;
            --space-sm: 0.5rem;
            --space-md: 1rem;
            --space-lg: 1.25rem;
            --space-xl: 1.5rem;
            --space-2xl: 2rem;
            
            /* Mobile-first typography */
            --font-size-xs: 0.75rem;
            --font-size-sm: 0.875rem;
            --font-size-base: 1rem;
            --font-size-lg: 1.125rem;
            --font-size-xl: 1.25rem;
            --font-size-2xl: 1.5rem;
            
            --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            
            --radius-sm: 0.375rem;
            --radius-md: 0.5rem;
            --radius-lg: 0.75rem;
            --radius-xl: 1rem;
            
            /* Safe area for notched phones */
            --safe-area-top: env(safe-area-inset-top, 0px);
            --safe-area-bottom: env(safe-area-inset-bottom, 0px);
            --safe-area-left: env(safe-area-inset-left, 0px);
            --safe-area-right: env(safe-area-inset-right, 0px);
        }
        
        /* ========================================
           Base & Reset
           ======================================== */
        *, *::before, *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        
        html {
            font-size: 16px;
            -webkit-text-size-adjust: 100%;
            -webkit-tap-highlight-color: transparent;
            scroll-behavior: smooth;
        }
        
        body {
            font-family: var(--font-family);
            font-size: var(--font-size-base);
            line-height: 1.6;
            color: var(--color-text);
            background-color: var(--color-bg);
            -webkit-font-smoothing: antialiased;
            padding-bottom: var(--safe-area-bottom);
            overflow-x: hidden;
        }

        a {
            color: var(--color-primary);
            text-decoration: none;
            /* Larger touch target */
            -webkit-touch-callout: none;
        }
        
        a:active {
            opacity: 0.7;
        }
        
        img {
            max-width: 100%;
            height: auto;
            display: block;
        }
        
        /* ========================================
           Layout
           ======================================== */
        .container {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding-left: max(var(--space-md), var(--safe-area-left));
            padding-right: max(var(--space-md), var(--safe-area-right));
        }
        
        .article-wrapper {
            display: flex;
            flex-direction: column;
            gap: var(--space-lg);
            padding: var(--space-lg) 0;
        }
        
        /* ========================================
           Mobile Navigation (Table of Contents)
           ======================================== */
        .mobile-toc {
            display: block;
            visibility: visible;
            position: fixed;
            top: 62px; /* Position below main header */
            left: 0;
            right: 0;
            width: 100%;
            z-index: 999; /* Below main header (z-index: 1000) */
            background: rgba(255, 255, 255, 0.98);
            border-bottom: 1px solid var(--color-border);
            padding: var(--space-sm) var(--space-md);
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
            box-shadow: 0 6px 16px rgba(0,0,0,0.1);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }

        .mobile-toc::-webkit-scrollbar {
            display: none;
        }

        .mobile-toc-inner {
            display: flex;
            gap: var(--space-sm);
            white-space: nowrap;
            padding: var(--space-xs) 0;
        }

        .mobile-toc a {
            display: inline-block;
            padding: var(--space-sm) var(--space-md);
            background: var(--color-bg);
            border-radius: var(--radius-lg);
            font-size: var(--font-size-sm);
            font-weight: 500;
            color: var(--color-text-muted);
            /* Min touch target 44px */
            min-height: 44px;
            line-height: 28px;
        }

        .mobile-toc a:active {
            background: var(--color-primary);
            color: white;
        }

        /* Spacer to prevent content from hiding behind fixed mobile-toc nav */
        .mobile-toc-spacer {
            height: 58px; /* Height of mobile-toc + small buffer */
        }
        
        /* ========================================
           Header
           ======================================== */
        .article-header {
            background: linear-gradient(135deg, var(--color-dark) 0%, #1a365d 100%);
            padding: var(--space-xl) var(--space-md);
            padding-top: calc(var(--space-xl) + var(--safe-area-top));
            color: white;
        }
        
        .header-content {
            display: flex;
            flex-direction: column;
            gap: var(--space-lg);
        }
        
        .badges {
            display: flex;
            flex-wrap: wrap;
            gap: var(--space-sm);
        }
        
        .badge {
            display: inline-block;
            padding: var(--space-xs) var(--space-sm);
            font-size: var(--font-size-xs);
            font-weight: 600;
            text-transform: uppercase;
            border-radius: var(--radius-sm);
            letter-spacing: 0.02em;
        }
        
        .badge-budget { background: var(--color-ok); color: white; }
        .badge-category { background: rgba(255,255,255,0.2); color: white; }
        
        .title {
            font-size: var(--font-size-xl);
            font-weight: 800;
            line-height: 1.3;
        }

        /* Header Price & Rating Display */
        .header-price-rating {
            display: flex;
            align-items: center;
            gap: var(--space-lg);
            margin-top: var(--space-md);
            flex-wrap: wrap;
        }

        .header-rating {
            display: flex;
            align-items: baseline;
            gap: 0.25rem;
            background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
            padding: var(--space-sm) var(--space-md);
            border-radius: var(--radius-lg);
            box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
        }

        .header-rating-score {
            font-size: var(--font-size-2xl);
            font-weight: 800;
            color: white;
        }

        .header-rating-max {
            font-size: var(--font-size-sm);
            font-weight: 600;
            color: rgba(255, 255, 255, 0.85);
        }

        .header-price {
            background: rgba(255, 255, 255, 0.15);
            padding: var(--space-sm) var(--space-md);
            border-radius: var(--radius-lg);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .header-price-value {
            font-size: var(--font-size-xl);
            font-weight: 700;
            color: white;
        }

        .title-highlight {
            color: var(--color-accent);
            font-size: var(--font-size-base);
            font-weight: 600;
            margin-top: var(--space-sm);
        }
        
        .subtitle {
            color: #cbd5e1;
            font-size: var(--font-size-sm);
            line-height: 1.7;
            margin-top: var(--space-md);
        }
        
        .header-image {
            background: rgba(255,255,255,0.1);
            border-radius: var(--radius-lg);
            padding: var(--space-md);
            text-align: center;
        }
        
        .header-image img {
            max-height: 200px;
            margin: 0 auto;
        }
        
        /* Quick Specs - Horizontal scroll on mobile */
        .quick-specs {
            display: flex;
            flex-wrap: wrap;
            gap: var(--space-sm);
            margin-top: var(--space-lg);
            padding: var(--space-sm);
            border-top: 1px solid rgba(255,255,255,0.2);
            border-radius: var(--radius-lg);
            background: rgba(255,255,255,0.06);
        }
        
        .quick-specs::-webkit-scrollbar { display: none; }
        
        .quick-spec {
            flex: 1 1 calc(50% - var(--space-sm));
            min-width: 140px;
            text-align: left;
            padding: var(--space-sm) var(--space-md);
            background: rgba(255,255,255,0.1);
            border-radius: var(--radius-md);
        }
        
        .quick-spec-label {
            display: block;
            font-size: var(--font-size-xs);
            color: #94a3b8;
        }
        
        .quick-spec-value {
            display: block;
            font-size: var(--font-size-sm);
            font-weight: 700;
            color: white;
            margin-top: 2px;
        }
        
        /* ========================================
           Product Card (Mobile: Top of content)
           ======================================== */
        .product-card {
            background: var(--color-surface);
            border-radius: var(--radius-xl);
            padding: var(--space-lg);
            box-shadow: 0 4px 12px rgba(0,0,0,0.08);
        }
        
        .product-card-inner {
            display: flex;
            gap: var(--space-md);
            align-items: center;
        }
        
        .product-card-image {
            flex-shrink: 0;
            width: 100px;
            height: 100px;
            background: var(--color-bg);
            border-radius: var(--radius-md);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: var(--space-sm);
        }
        
        .product-card-image img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
        }
        
        .product-card-info {
            flex: 1;
            min-width: 0;
        }
        
        .product-card-title {
            font-size: var(--font-size-base);
            font-weight: 700;
            line-height: 1.3;
            margin-bottom: var(--space-xs);
        }
        
        .product-card-price {
            font-size: var(--font-size-xl);
            font-weight: 800;
            color: var(--color-primary);
        }
        
        .btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            padding: var(--space-md) var(--space-lg);
            margin-top: var(--space-md);
            font-size: var(--font-size-base);
            font-weight: 600;
            border-radius: var(--radius-lg);
            border: none;
            cursor: pointer;
            transition: transform 0.1s, opacity 0.1s;
            /* Minimum touch target */
            min-height: 48px;
        }
        
        .btn-primary {
            background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
            color: white;
        }
        
        .btn-primary:active {
            transform: scale(0.98);
            opacity: 0.9;
        }

        /* Price Disclaimer */
        .price-disclaimer {
            font-size: var(--font-size-xs);
            color: var(--color-text-muted);
            margin-top: var(--space-sm);
            text-align: center;
            line-height: 1.5;
        }

        /* Amazon Button Styling for Product Card */
        .product-card .pcf-btn-amazon {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            padding: var(--space-md) var(--space-lg);
            margin-top: var(--space-md);
            font-size: var(--font-size-base);
            font-weight: 600;
            border-radius: var(--radius-lg);
            border: none;
            cursor: pointer;
            min-height: 48px;
            background: linear-gradient(135deg, #8b5a2b 0%, #704214 100%);
            color: #fdf7f0;
            box-shadow: 0 10px 30px rgba(112, 66, 20, 0.35);
            text-decoration: none;
            transition: all 0.2s ease;
        }

        .product-card .pcf-btn-amazon:hover,
        .product-card .pcf-btn-amazon:active {
            background: linear-gradient(135deg, #a06834 0%, #8b5a2b 100%);
            color: #fffaf3;
        }

        /* ========================================
           Content Sections
           ======================================== */
        .section {
            background: var(--color-surface);
            border-radius: var(--radius-xl);
            padding: var(--space-lg);
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
        }
        
        .section-title {
            display: flex;
            align-items: center;
            gap: var(--space-sm);
            font-size: var(--font-size-lg);
            font-weight: 700;
            margin-bottom: var(--space-lg);
            line-height: 1.3;
        }
        
        .section-title-icon {
            flex-shrink: 0;
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
            border-radius: var(--radius-md);
            font-size: 1rem;
        }
        
        /* ========================================
           LLMO Summary Box
           ======================================== */
        .llmo-summary {
            background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
            border: 2px solid var(--color-primary);
            border-radius: var(--radius-xl);
            padding: var(--space-lg);
        }
        
        .llmo-summary h2 {
            font-size: var(--font-size-base);
            font-weight: 700;
            margin-bottom: var(--space-md);
            color: var(--color-primary);
        }
        
        .llmo-summary p {
            font-size: var(--font-size-sm);
            line-height: 1.7;
            margin-bottom: var(--space-md);
        }
        
        .llmo-summary p:last-child { margin-bottom: 0; }
        
        /* ========================================
           Conclusion Boxes
           ======================================== */
        .conclusion-grid {
            display: flex;
            flex-direction: column;
            gap: var(--space-md);
        }
        
        .conclusion-box {
            padding: var(--space-lg);
            border-radius: var(--radius-lg);
        }
        
        .conclusion-box.buy-ok {
            background: var(--color-good-bg);
            border-left: 4px solid var(--color-good);
        }
        
        .conclusion-box.skip {
            background: var(--color-warn-bg);
            border-left: 4px solid var(--color-warn);
        }
        
        .conclusion-box h3 {
            font-size: var(--font-size-base);
            font-weight: 700;
            margin-bottom: var(--space-md);
        }
        
        .conclusion-box.buy-ok h3 { color: var(--color-good); }
        .conclusion-box.skip h3 { color: var(--color-warn); }
        
        .conclusion-box ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }
        
        .conclusion-box li {
            position: relative;
            padding-left: var(--space-xl);
            margin-bottom: var(--space-sm);
            font-size: var(--font-size-sm);
            line-height: 1.6;
        }
        
        .conclusion-box.buy-ok li::before {
            content: "✓";
            position: absolute;
            left: 0;
            color: var(--color-good);
            font-weight: bold;
        }
        
        .conclusion-box.skip li::before {
            content: "✗";
            position: absolute;
            left: 0;
            color: var(--color-warn);
            font-weight: bold;
        }
        
        /* ========================================
           Collapsible Spec Table
           ======================================== */
        .spec-section {
            background: var(--color-surface);
            border-radius: var(--radius-xl);
            overflow: hidden;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
        }
        
        .spec-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: var(--space-lg);
            background: var(--color-dark);
            color: white;
            cursor: pointer;
            /* Touch target */
            min-height: 56px;
        }
        
        .spec-header h2 {
            font-size: var(--font-size-base);
            font-weight: 700;
            display: flex;
            align-items: center;
            gap: var(--space-sm);
        }
        
        .spec-toggle {
            font-size: var(--font-size-xl);
            transition: transform 0.3s;
        }
        
        .spec-header.active .spec-toggle {
            transform: rotate(180deg);
        }
        
        .spec-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease;
        }
        
        .spec-content.active {
            max-height: 2000px;
        }
        
        /* Mobile-friendly spec list (not table) */
        .spec-list {
            padding: 0;
            margin: 0;
            list-style: none;
        }
        
        .spec-item {
            display: flex;
            flex-direction: column;
            padding: var(--space-md) var(--space-lg);
            border-bottom: 1px solid var(--color-border);
        }
        
        .spec-item:last-child {
            border-bottom: none;
        }
        
        .spec-label {
            font-size: var(--font-size-xs);
            font-weight: 600;
            color: var(--color-text-muted);
            text-transform: uppercase;
            letter-spacing: 0.03em;
            margin-bottom: var(--space-xs);
        }
        
        .spec-value {
            font-size: var(--font-size-sm);
            color: var(--color-text);
            line-height: 1.5;
        }
        
        .spec-note {
            padding: var(--space-md) var(--space-lg);
            background: var(--color-ok-bg);
            font-size: var(--font-size-sm);
            line-height: 1.6;
            border-left: 3px solid var(--color-ok);
        }
        
        /* ========================================
           Pros & Cons
           ======================================== */
        .pros-cons-grid {
            display: flex;
            flex-direction: column;
            gap: var(--space-md);
        }
        
        .pros-box, .cons-box {
            padding: var(--space-lg);
            border-radius: var(--radius-lg);
        }
        
        .pros-box { background: var(--color-good-bg); }
        .cons-box { background: var(--color-warn-bg); }
        
        .pros-box h3, .cons-box h3 {
            font-size: var(--font-size-base);
            font-weight: 700;
            margin-bottom: var(--space-md);
        }
        
        .pros-box h3 { color: var(--color-good); }
        .cons-box h3 { color: var(--color-warn); }
        
        .pros-box ul, .cons-box ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }
        
        .pros-box li, .cons-box li {
            position: relative;
            padding-left: var(--space-xl);
            margin-bottom: var(--space-sm);
            font-size: var(--font-size-sm);
            line-height: 1.6;
        }
        
        .pros-box li::before {
            content: "+";
            position: absolute;
            left: 0;
            color: var(--color-good);
            font-weight: bold;
            font-size: var(--font-size-lg);
        }
        
        .cons-box li::before {
            content: "−";
            position: absolute;
            left: 0;
            color: var(--color-warn);
            font-weight: bold;
            font-size: var(--font-size-lg);
        }
        
        /* ========================================
           Use Case Cards (Mobile-friendly)
           ======================================== */
        .usecase-grid {
            display: flex;
            flex-direction: column;
            gap: var(--space-sm);
        }
        
        .usecase-card {
            display: flex;
            align-items: flex-start;
            gap: var(--space-md);
            padding: var(--space-md);
            background: var(--color-bg);
            border-radius: var(--radius-lg);
            cursor: pointer;
            transition: background 0.2s;
        }
        
        .usecase-card:active {
            background: var(--color-border);
        }
        
        .usecase-rating {
            flex-shrink: 0;
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            font-weight: 700;
            font-size: var(--font-size-base);
        }
        
        .usecase-rating.good { background: var(--color-good-bg); color: var(--color-good); }
        .usecase-rating.ok { background: var(--color-ok-bg); color: var(--color-ok); }
        .usecase-rating.warn { background: var(--color-warn-bg); color: var(--color-warn); }
        
        .usecase-info { flex: 1; min-width: 0; }
        
        .usecase-name {
            font-size: var(--font-size-sm);
            font-weight: 600;
            color: var(--color-text);
            margin-bottom: 2px;
        }
        
        .usecase-desc {
            font-size: var(--font-size-xs);
            color: var(--color-text-muted);
            line-height: 1.5;
            display: none;
        }
        
        .usecase-card.expanded .usecase-desc {
            display: block;
            margin-top: var(--space-sm);
        }
        
        .usecase-toggle {
            flex-shrink: 0;
            color: var(--color-text-muted);
            font-size: var(--font-size-sm);
            transition: transform 0.2s;
        }
        
        .usecase-card.expanded .usecase-toggle {
            transform: rotate(180deg);
        }
        
        /* ========================================
           FAQ Accordion
           ======================================== */
        .faq-list {
            display: flex;
            flex-direction: column;
            gap: var(--space-sm);
        }
        
        .faq-item {
            background: var(--color-bg);
            border-radius: var(--radius-lg);
            overflow: hidden;
        }
        
        .faq-question {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: var(--space-md);
            font-size: var(--font-size-sm);
            font-weight: 600;
            color: var(--color-text);
            cursor: pointer;
            /* Touch target */
            min-height: 52px;
        }
        
        .faq-question:active {
            background: rgba(0,0,0,0.03);
        }
        
        .faq-icon {
            flex-shrink: 0;
            font-size: var(--font-size-lg);
            color: var(--color-text-muted);
            transition: transform 0.2s;
        }
        
        .faq-item.active .faq-icon {
            transform: rotate(180deg);
        }
        
        .faq-answer {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease;
        }
        
        .faq-item.active .faq-answer {
            max-height: 500px;
        }
        
        .faq-answer-inner {
            padding: 0 var(--space-md) var(--space-md);
            font-size: var(--font-size-sm);
            color: var(--color-text-muted);
            line-height: 1.7;
        }
        
        /* ========================================
           Alternatives
           ======================================== */
        .alt-list {
            display: flex;
            flex-direction: column;
            gap: var(--space-md);
        }
        
        .alt-item {
            padding: var(--space-lg);
            background: var(--color-bg);
            border-radius: var(--radius-lg);
        }
        
        .alt-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: var(--space-sm);
        }
        
        .alt-name {
            font-size: var(--font-size-base);
            font-weight: 700;
            color: var(--color-text);
        }
        
        .alt-price {
            font-size: var(--font-size-sm);
            font-weight: 600;
            color: var(--color-primary);
            white-space: nowrap;
        }
        
        .alt-desc {
            font-size: var(--font-size-sm);
            color: var(--color-text-muted);
            line-height: 1.6;
        }
        
        /* ========================================
           Final Verdict
           ======================================== */
        .verdict-box {
            background: linear-gradient(135deg, var(--color-dark), #1e3a5f);
            border-radius: var(--radius-xl);
            padding: var(--space-xl);
            color: white;
        }
        
        .verdict-score {
            display: inline-block;
            background: var(--color-ok);
            color: white;
            padding: var(--space-sm) var(--space-lg);
            border-radius: var(--radius-lg);
            font-weight: 700;
            font-size: var(--font-size-lg);
            margin-bottom: var(--space-md);
        }
        
        .verdict-box h3 {
            font-size: var(--font-size-lg);
            font-weight: 700;
            margin-bottom: var(--space-md);
        }
        
        .verdict-box p {
            font-size: var(--font-size-sm);
            line-height: 1.7;
            margin-bottom: var(--space-md);
            opacity: 0.9;
        }
        
        .verdict-box p:last-child { margin-bottom: 0; }

        /* ========================================
           Glossary
           ======================================== */
        #glossary.section {
            background: var(--color-bg);
        }

        .glossary-list {
            display: flex;
            flex-direction: column;
            gap: var(--space-md);
        }
        
        .glossary-item {
            background: var(--color-surface);
            border-radius: var(--radius-lg);
            padding: var(--space-lg);
            border-left: 4px solid var(--color-primary);
        }
        
        .glossary-term {
            font-size: var(--font-size-sm);
            font-weight: 700;
            color: var(--color-primary);
            margin-bottom: var(--space-sm);
        }
        
        .glossary-desc {
            font-size: var(--font-size-sm);
            color: var(--color-text-muted);
            line-height: 1.6;
        }
        
        /* ========================================
           Section Note
           ======================================== */
        .section-note {
            margin-top: var(--space-lg);
            padding: var(--space-md);
            background: var(--color-bg);
            border-radius: var(--radius-md);
            border-left: 3px solid var(--color-text-muted);
            font-size: var(--font-size-sm);
            color: var(--color-text-muted);
            line-height: 1.6;
        }
        
        /* ========================================
           Floating CTA Button (Mobile)
           ======================================== */
        .floating-cta {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: var(--color-surface);
            padding: var(--space-md);
            padding-bottom: max(var(--space-md), var(--safe-area-bottom));
            box-shadow: 0 -4px 12px rgba(0,0,0,0.1);
            z-index: 100;
            display: flex;
            align-items: center;
            gap: var(--space-md);
        }
        
        .floating-cta-info {
            flex: 1;
            min-width: 0;
        }
        
        .floating-cta-title {
            font-size: var(--font-size-sm);
            font-weight: 600;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        .floating-cta-price {
            font-size: var(--font-size-base);
            font-weight: 700;
            color: var(--color-primary);
        }
        
        .floating-cta .btn {
            flex-shrink: 0;
            width: auto;
            margin: 0;
            padding: var(--space-sm) var(--space-lg);
        }

        /* Add padding to body for floating CTA */
        body {
            padding-bottom: calc(80px + var(--safe-area-bottom));
        }

        /* Mobile refinements */
        @media (max-width: 767px) {
            .title {
                font-size: 1.6rem;
            }

            .quick-specs {
                padding: var(--space-sm) var(--space-md);
            }

            .quick-spec {
                flex-basis: 100%;
                min-width: 0;
            }

            .sidebar .widget,
            .sidebar .product-card {
                display: none;
            }
        }

        /* Sidebar widget styling */
        .sidebar .widget {
            background: linear-gradient(135deg, #f8fafc 0%, #ffffff 60%);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-xl);
            padding: var(--space-lg);
            box-shadow: 0 10px 30px rgba(0,0,0,0.08);
            position: sticky;
            top: var(--space-lg);
        }

        .sidebar .widget h3 {
            display: flex;
            align-items: center;
            gap: var(--space-sm);
            font-size: var(--font-size-base);
            font-weight: 700;
            margin-bottom: var(--space-md);
            color: var(--color-dark);
        }

        .sidebar .widget h3::before {
            content: "🧭";
            display: inline-flex;
            width: 32px;
            height: 32px;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
            color: #fff;
            border-radius: var(--radius-md);
            font-size: 0.9rem;
        }

        .toc-list {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: var(--space-sm);
        }

        .toc-list a {
            display: block;
            padding: var(--space-sm) var(--space-md);
            border-radius: var(--radius-md);
            background: var(--color-bg);
            color: var(--color-text);
            font-size: var(--font-size-sm);
            font-weight: 600;
            transition: background 0.2s, transform 0.2s;
        }

        .toc-list a:hover,
        .toc-list a:focus-visible {
            background: linear-gradient(135deg, rgba(37,99,235,0.12), rgba(6,182,212,0.12));
            color: var(--color-primary);
            transform: translateY(-1px);
        }
        
        /* ========================================
           Desktop Styles (768px+)
           ======================================== */
        @media (min-width: 768px) {
            :root {
                --space-lg: 1.5rem;
                --space-xl: 2rem;
                --space-2xl: 3rem;
                --font-size-xl: 1.5rem;
                --font-size-2xl: 2rem;
            }
            
            .mobile-toc {
                display: none;
            }

            .mobile-toc-spacer {
                display: none;
            }

            .floating-cta {
                display: none;
            }

            body {
                padding-bottom: var(--safe-area-bottom);
            }

            .main-product-card {
                display: none;
            }
            
            .header-content {
                flex-direction: row;
                align-items: center;
            }
            
            .header-text {
                flex: 1;
            }
            
            .header-image {
                flex-shrink: 0;
                width: 300px;
            }
            
            .title {
                font-size: var(--font-size-2xl);
            }
            
            .quick-specs {
                margin-left: 0;
                margin-right: 0;
                padding-left: 0;
                padding-right: 0;
                overflow-x: visible;
                flex-wrap: wrap;
            }
            
            .article-wrapper {
                display: grid;
                grid-template-columns: 1fr 320px;
                gap: var(--space-xl);
                align-items: start;
            }
            
            .sidebar {
                position: sticky;
                top: var(--space-lg);
            }
            
            .product-card {
                padding: var(--space-xl);
            }
            
            .product-card-inner {
                flex-direction: column;
                text-align: center;
            }
            
            .product-card-image {
                width: 100%;
                height: auto;
                padding: var(--space-lg);
            }
            
            .conclusion-grid {
                flex-direction: row;
            }
            
            .conclusion-box {
                flex: 1;
            }
            
            .pros-cons-grid {
                flex-direction: row;
            }
            
            .pros-box, .cons-box {
                flex: 1;
            }
            
            /* Use table on desktop */
            .usecase-grid {
                display: none;
            }
            
            .usecase-table {
                display: table;
                width: 100%;
                border-collapse: collapse;
            }
            
            .usecase-table th {
                background: var(--color-dark);
                color: white;
                padding: var(--space-md);
                font-size: var(--font-size-sm);
                font-weight: 600;
                text-align: left;
            }
            
            .usecase-table td {
                padding: var(--space-md);
                font-size: var(--font-size-sm);
                border-bottom: 1px solid var(--color-border);
                vertical-align: top;
            }
            
            .usecase-table tr:nth-child(even) {
                background: var(--color-bg);
            }
        }
        
        /* Hide desktop table on mobile */
        .usecase-table {
            display: none;
        }
        
        @media (min-width: 768px) {
            .usecase-table {
                display: table;
            }
        }