@layer components {
  .compare-wrap {
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--c-volt) transparent;
  }

  .compare {
    width: 100%;
    min-width: 40rem;
    border-collapse: collapse;
    font-size: var(--fs-small);
  }

  .compare caption {
    text-align: left;
    font-family: var(--font-display);
    font-size: 1.25rem;
    margin-bottom: 1rem;
    color: var(--c-ink);
  }

  .compare th,
  .compare td {
    padding: 0.9rem 1.1rem;
    border-bottom: 1px solid var(--c-border);
    text-align: left;
  }

  .compare thead th {
    font-weight: 700;
    font-size: var(--fs-mono);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--c-ink-soft);
    border-bottom: 2px solid var(--c-ink);
  }

  .compare tbody th {
    font-weight: 600;
    white-space: nowrap;
  }

  .compare tbody tr:hover {
    background: var(--c-surface);
  }

  .compare td[data-highlight="true"] {
    color: var(--c-ink);
    font-weight: 700;
    position: relative;
  }

  .compare td[data-highlight="true"]::before {
    content: "";
    position: absolute;
    inset: 0.35rem auto 0.35rem 0.2rem;
    width: 3px;
    background: var(--c-volt);
  }
}