.table-wrapper {
    overflow-x: auto;
    margin: 2rem 0;
    border: none;
}

.method-matrix {
    width: 100%;
    border-collapse: collapse;
    font-family: system-ui, sans-serif;
    font-size: 15px;
    min-width: 760px;
    background: #fff;
    border: 1px solid #ddd;
}

.method-matrix th {
    background: #1d3557;
    color: #fff;
    text-align: left;
    padding: 14px 16px;
    font-weight: 600;
}

.method-matrix td {
    padding: 12px 16px;
    border-top: 1px solid #e8e8e8;
    vertical-align: middle;
}

.method-matrix tbody tr:nth-child(even) {
    background: #fafafa;
}

.method-matrix tbody tr:hover {
    background: #f2f7ff;
}

.method-matrix td:first-child {
    font-weight: 600;
    white-space: nowrap;
}

/* Status badges */

.method-matrix span {
    display: inline-block;
    padding: .3em .7em;
    border-radius: 999px;
    font-size: .85rem;
    font-weight: 600;
    line-height: 1.2;
}

.standard {
    background: #d8f3dc;
    color: #1b5e20;
}

.yes {
    background: #e3f2fd;
    color: #1565c0;
}

.possible {
    background: #fff3cd;
    color: #856404;
}

.research {
    background: #f3e8ff;
    color: #6b21a8;
}

.synthetic {
    background: #ede9fe;
    color: #4c1d95;
}

.immersion {
    background: #dbeafe;
    color: #1e40af;
}

.no,
.not-used,
.na {
    background: #f5f5f5;
    color: #666;
}



/* comparison table */

.comparison-table {
    width: 100%;
    min-width: 1000px;
    border-collapse: collapse;
    font-family: system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.45;
    background: #fff;
    border: 1px solid #dcdcdc;
}

.comparison-table thead th {
    background: #1d3557;
    color: #fff;
    padding: 14px 16px;
    text-align: left;
    font-weight: 600;
}

.comparison-table tbody td {
    padding: 12px 16px;
    border-top: 1px solid #e8e8e8;
    border-right: 1px solid #efefef;
    vertical-align: top;
}

.comparison-table tbody td:last-child {
    border-right: none;
}

.comparison-table tbody tr:nth-child(even) {
    background: #fafafa;
}

.comparison-table tbody tr:hover {
    background: #f4f8ff;
}

.comparison-table tbody td:first-child {
    width: 220px;
    font-weight: 600;
    background: #f7f9fc;
    position: sticky;
    left: 0;
    z-index: 1;
}

.comparison-table thead th:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
}


/* Mobile */

@media (max-width: 768px) {
    .method-matrix {
        font-size: 14px;
    }

    .method-matrix th,
    .method-matrix td {
        padding: 10px;
    }

    .method-matrix span {
        font-size: .8rem;
    }


    .comparison-table {
        font-size: 13px;
    }

    .comparison-table th,
    .comparison-table td {
        padding: 10px 12px;
    }

}