<div class="lmc-wrap">
  <div class="lmc-scroll">
    <table class="lmc-table">
      <thead>
        <tr>
          <th class="lmc-attr-col">Attribute</th>
          <th>Fast</th>
          <th class="lmc-recommended-col">
            <span class="lmc-rec-badge">Recommended</span>
            Balanced
          </th>
          <th>Advanced</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="lmc-attr-col">Context window</td>
          <td>32K tokens</td>
          <td class="lmc-recommended-col">128K tokens</td>
          <td>1M tokens</td>
        </tr>
        <tr>
          <td class="lmc-attr-col">Speed</td>
          <td><span class="lmc-dots"><span class="lmc-dot lmc-on"></span><span class="lmc-dot lmc-on"></span><span class="lmc-dot lmc-on"></span><span class="lmc-dot"></span><span class="lmc-dot"></span></span></td>
          <td class="lmc-recommended-col"><span class="lmc-dots"><span class="lmc-dot lmc-on"></span><span class="lmc-dot lmc-on"></span><span class="lmc-dot"></span><span class="lmc-dot"></span><span class="lmc-dot"></span></span></td>
          <td><span class="lmc-dots"><span class="lmc-dot lmc-on"></span><span class="lmc-dot"></span><span class="lmc-dot"></span><span class="lmc-dot"></span><span class="lmc-dot"></span></span></td>
        </tr>
        <tr>
          <td class="lmc-attr-col">Relative cost</td>
          <td><span class="lmc-cost">$</span><span class="lmc-cost lmc-off">$</span><span class="lmc-cost lmc-off">$</span></td>
          <td class="lmc-recommended-col"><span class="lmc-cost">$</span><span class="lmc-cost">$</span><span class="lmc-cost lmc-off">$</span></td>
          <td><span class="lmc-cost">$</span><span class="lmc-cost">$</span><span class="lmc-cost">$</span></td>
        </tr>
        <tr>
          <td class="lmc-attr-col">Best for</td>
          <td class="lmc-strength">Quick replies, autocomplete, high-volume tasks</td>
          <td class="lmc-recommended-col lmc-strength">Everyday chat, drafting, and general reasoning</td>
          <td class="lmc-strength">Deep analysis, long documents, complex reasoning</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, -apple-system, sans-serif; background: #f8fafc; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }

.lmc-wrap { width: 100%; max-width: 640px; }
.lmc-scroll { overflow-x: auto; }
.lmc-table { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 12px 30px rgba(30,41,59,0.06); min-width: 520px; }

.lmc-table th, .lmc-table td { padding: 14px 16px; text-align: center; font-size: 12.5px; border-bottom: 1px solid #f1f5f9; }
.lmc-table thead th { background: #f8fafc; font-weight: 800; color: #1e293b; font-size: 13px; border-bottom: 1px solid #e2e8f0; position: relative; }
.lmc-attr-col { text-align: left !important; color: #64748b; font-weight: 700; width: 28%; }
.lmc-table tbody tr:last-child td { border-bottom: none; }

.lmc-recommended-col {
  background: #f5f4ff; position: relative; border-left: 2px solid #6366f1; border-right: 2px solid #6366f1;
}
thead .lmc-recommended-col { border-top: 2px solid #6366f1; }
tbody tr:last-child .lmc-recommended-col { border-bottom: 2px solid #6366f1; }

.lmc-rec-badge {
  display: block; font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em;
  color: #6366f1; background: #eef2ff; padding: 3px 8px; border-radius: 999px; margin: 0 auto 6px; width: fit-content;
}

.lmc-dots { display: inline-flex; gap: 3px; }
.lmc-dot { width: 8px; height: 8px; border-radius: 50%; background: #e2e8f0; display: inline-block; }
.lmc-dot.lmc-on { background: #6366f1; }

.lmc-cost { font-weight: 800; color: #1e293b; font-size: 14px; }
.lmc-cost.lmc-off { color: #e2e8f0; }

.lmc-strength { color: #475569; text-align: left; line-height: 1.5; font-size: 12px; }

// Purely presentational comparison table — no dynamic behavior required,
// but we add a light hover-highlight on rows for readability on larger screens.
const table = document.querySelector('.lmc-table');
if (table) {
  const rows = table.querySelectorAll('tbody tr');
  rows.forEach((row) => {
    row.addEventListener('mouseenter', () => {
      row.style.background = '#fafbff';
    });
    row.addEventListener('mouseleave', () => {
      row.style.background = '';
    });
  });
}