.scope-compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: .7rem;
  background: var(--white);
}

.scope-column {
  padding: clamp(1.5rem, 3vw, 2.5rem);
}

.scope-does {
  background: #e7f7c5;
}

.scope-column + .scope-column {
  border-left: 1px solid var(--line);
}

.scope-does-not {
  background: #fff0ef;
}

.scope-does .eyebrow {
  color: #2b6818;
}

.scope-does-not .eyebrow {
  color: #a32d27;
}

.scope-does h2,
.scope-does .scope-list li {
  color: #234d14;
}

.scope-does-not h2,
.scope-does-not .scope-list li {
  color: #792a25;
}

.scope-column h2 {
  font-size: clamp(1.9rem, 3.4vw, 3rem);
}

.scope-list {
  display: grid;
  gap: .9rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

.scope-list li {
  position: relative;
  padding-left: 1.2rem;
  color: var(--muted);
}

.scope-list li::before {
  position: absolute;
  left: 0;
  content: "•";
  font-weight: 900;
}

.scope-does .scope-list li::before {
  color: #2b6818;
}

.scope-does-not .scope-list li::before {
  color: #a32d27;
}

@media (max-width: 830px) {
  .scope-compare {
    grid-template-columns: 1fr;
  }

  .scope-column + .scope-column {
    border-top: 1px solid var(--line);
    border-left: 0;
  }
}