@layer pages {
  /* Comparison Table */
  .comparison-table {
    overflow-x: auto;
    margin: 0 auto;
    max-width: 50rem;
  }

  .comparison-table__table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-background);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    overflow: hidden;
  }

  .comparison-table__table thead {
    background: var(--color-gray-50);
  }

  .comparison-table__feature-header,
  .comparison-table__tool-header {
    padding: var(--space-4);
    text-align: left;
    font-weight: 700;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    border-bottom: 2px solid var(--color-border);
  }

  .comparison-table__tool-header {
    text-align: center;
    width: 8rem;
  }

  .comparison-table__table tbody tr {
    border-bottom: 1px solid var(--color-border);

    &:last-child {
      border-bottom: none;
    }

    &:hover {
      background: var(--color-gray-50);
    }
  }

  .comparison-table__feature {
    padding: var(--space-3) var(--space-4);
  }

  .comparison-table__feature-name {
    display: block;
    font-weight: 600;
    font-size: 0.9375rem;
  }

  .comparison-table__feature-note {
    display: block;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    margin-top: var(--space-1);
  }

  .comparison-table__check {
    text-align: center;
    padding: var(--space-3) var(--space-4);
    font-weight: 700;
    font-size: 0.875rem;

    &--yes {
      color: var(--color-success-600, #16a34a);
    }

    &--no {
      color: var(--color-gray-400);
    }
  }

  @media (max-width: 600px) {
    .comparison-table__feature-header {
      font-size: 0.75rem;
    }

    .comparison-table__tool-header {
      font-size: 0.75rem;
      width: 5rem;
    }

    .comparison-table__feature {
      padding: var(--space-2) var(--space-3);
    }

    .comparison-table__feature-name {
      font-size: 0.8125rem;
    }

    .comparison-table__check {
      padding: var(--space-2);
      font-size: 0.8125rem;
    }
  }
}