.vs-strip {
            display: grid;
            grid-template-columns: 1fr auto 1fr;
            gap: 0;
            border-radius: 12px;
            overflow: hidden;
            margin: 2rem 0 2.5rem;
            box-shadow: 0 2px 16px rgba(0,0,0,.08);
            background: #fff;
        }
        .vs-panel {
            padding: 1.5rem 1.5rem;
            display: flex;
            flex-direction: column;
        }
        .vs-panel.clean { background: #ebf8ff; border-left: 4px solid #4299e1; }
        .vs-panel.small { background: #fff5f5; border-right: 4px solid #e53e3e; text-align: right; }
        .vs-divider {
            background: #2d3748;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 1rem;
            font-weight: 800;
            font-size: 1.1rem;
            letter-spacing: .05em;
            white-space: nowrap;
            writing-mode: vertical-rl;
            font-family: 'Inter', sans-serif;
        }
        .vs-name { font-weight: 800; font-size: 1.1rem; margin-bottom: 4px; }
        .vs-panel.clean .vs-name { color: #2b6cb0; }
        .vs-panel.small .vs-name { color: #c53030; }
        .vs-tagline { font-size: 0.9rem; color: #4a5568; line-height: 1.5; }
        .pill {
            display: inline-block;
            padding: 3px 12px;
            border-radius: 20px;
            font-weight: 700;
            font-size: 0.75rem;
            margin-top: 8px;
            font-family: 'Inter', sans-serif;
        }
        .pill-clean { background: #4299e1; color: #fff; }
        .pill-small { background: #e53e3e; color: #fff; }

        .arch-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1rem;
            margin: 1.5rem 0;
        }
        .arch-card {
            border-radius: 10px;
            overflow: hidden;
            border: 1px solid #e2e8f0;
            background: #fff;
        }
        .arch-header {
            padding: 0.75rem 1rem;
            font-weight: 700;
            font-size: 0.9rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-family: 'Inter', sans-serif;
        }
        .arch-card.clean .arch-header { background: #4299e1; color: #fff; }
        .arch-card.small .arch-header { background: #e53e3e; color: #fff; }
        .arch-body { padding: 1rem; }
        .flow-step {
            display: flex;
            align-items: flex-start;
            gap: 0.5rem;
            margin-bottom: 0.75rem;
            font-size: 0.9rem;
            color: #4a5568;
            font-family: 'Inter', sans-serif;
        }
        .flow-step:last-child { margin-bottom: 0; }
        .flow-num {
            width: 22px;
            height: 22px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 800;
            font-size: 0.7rem;
            flex-shrink: 0;
            margin-top: 1px;
        }
        .arch-card.clean .flow-num { background: #ebf8ff; color: #2b6cb0; }
        .arch-card.small .flow-num { background: #fff5f5; color: #c53030; }
        .flow-step .flow-label { font-weight: 600; color: #1a202c; }

        .table-wrap {
            overflow-x: auto;
            margin: 1.5rem 0;
            border-radius: 10px;
            border: 1px solid #e2e8f0;
            box-shadow: 0 1px 6px rgba(0,0,0,.04);
        }
        .table-wrap table {
            width: 100%;
            border-collapse: collapse;
            font-size: 0.9rem;
            font-family: 'Inter', sans-serif;
        }
        .table-wrap thead tr {
            background: #2d3748;
            color: #fff;
        }
        .table-wrap thead th {
            padding: 0.75rem 1rem;
            text-align: left;
            font-weight: 600;
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: .04em;
        }
        .table-wrap td {
            padding: 0.75rem 1rem;
            border-bottom: 1px solid #e2e8f0;
            vertical-align: middle;
        }
        .table-wrap tr:last-child td { border-bottom: none; }
        .table-wrap tr:nth-child(even) td { background: #f7fafc; }
        .table-wrap td:first-child { font-weight: 600; color: #1a202c; }
        .win { color: #38a169; font-weight: 700; }
        .lose { color: #e53e3e; font-weight: 600; }
        .tie { color: #d69e2e; font-weight: 600; }

        .scenario-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1rem;
            margin: 1.5rem 0;
        }
        .sc-card {
            border-radius: 10px;
            padding: 1.25rem;
            border: 1px solid #e2e8f0;
        }
        .sc-card.pick-clean { border-top: 3px solid #4299e1; }
        .sc-card.pick-small { border-top: 3px solid #e53e3e; }
        .sc-title {
            font-weight: 700;
            font-size: 1rem;
            margin-bottom: 0.5rem;
            font-family: 'Inter', sans-serif;
        }
        .sc-card.pick-clean .sc-title { color: #2b6cb0; }
        .sc-card.pick-small .sc-title { color: #c53030; }
        .sc-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .sc-list li {
            font-size: 0.9rem;
            color: #4a5568;
            padding: 4px 0 4px 20px;
            position: relative;
            margin: 0;
            border: none;
        }
        .sc-list li::before {
            content: '→';
            position: absolute;
            left: 0;
            font-weight: 700;
        }
        .pick-clean .sc-list li::before { color: #4299e1; }
        .pick-small .sc-list li::before { color: #e53e3e; }

        .test-scenario-table {
            margin: 1.5rem 0;
            border-radius: 10px;
            overflow: hidden;
            border: 1px solid #e2e8f0;
        }
        .test-scenario-table table {
            width: 100%;
            border-collapse: collapse;
            font-size: 0.9rem;
            font-family: 'Inter', sans-serif;
        }
        .test-scenario-table th {
            background: #2d3748;
            color: #fff;
            padding: 0.75rem 1rem;
            text-align: left;
            font-weight: 600;
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: .04em;
        }
        .test-scenario-table td {
            padding: 0.75rem 1rem;
            border-bottom: 1px solid #e2e8f0;
        }
        .test-scenario-table tr:last-child td { border-bottom: none; }

        .tool-row {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
            gap: 1rem;
            margin: 1.5rem 0;
        }
        .tool-mini {
            background: #f7fafc;
            border-radius: 10px;
            padding: 1rem;
            text-align: center;
            border: 1px solid #e2e8f0;
        }
        .tool-mini .tm-name { font-weight: 700; font-size: 0.95rem; margin-bottom: 4px; }
        .tool-mini p { margin-bottom: 4px; font-size: 0.85rem; color: #4a5568; }
        .tool-mini a { font-weight: 600; font-size: 0.85rem; }

        @media (max-width: 640px) {
            .vs-strip { grid-template-columns: 1fr; }
            .vs-divider { writing-mode: horizontal-tb; padding: 0.5rem; }
            .vs-panel.small { text-align: left; border-right: none; border-left: 4px solid #e53e3e; }
            .arch-grid, .scenario-grid { grid-template-columns: 1fr; }
        }