body {
  background: var(--dark-background-gradient);
  min-height: 100vh;
  color: white;
}

.compare {
  margin-top: 2rem;
  padding-bottom: 3rem;
}

h1 {
  color: white;
  font-weight: bold;
  font-size: 4rem;
  letter-spacing: 0.25rem;
}

h2 {
  color: white;
  font-weight: bold;
  font-size: 2rem;
  letter-spacing: 0.1rem;
  margin-bottom: 1rem;
}

p {
  color: var(--grey-text);
}

a {
  text-decoration: none;
  color: var(--GPAL-blue);
}

a:hover {
  color: var(--grey-text);
}

strong {
  color: white;
}

.last-verified {
  font-size: 0.9rem;
}

/* the same card as the FAQ and RPA Checklist pages */
.compare-card {
  border-radius: 20px;
  margin: 1rem 0;
  border: 1px solid rgb(60, 60, 60);
  background: rgb(20, 20, 20);
  text-align: left;
  padding: 1.5rem;
}

.compare-card:hover {
  border-color: var(--GPAL-blue);
  box-shadow: 0px 20px 40px var(--GPAL-blue-transparent);
}

.rules,
.losses {
  color: var(--grey-text);
  margin-bottom: 1rem;
}

/* a hanging indent: a wrapped line starts under the first line's text rather than under the chevron. these
   items mix bold and plain text, so the indent is done with padding rather than a flex column */
.rules li,
.losses li {
  margin-bottom: 0.6rem;
  padding-left: 1.3rem;
  text-indent: -1.3rem;
}

.bullet {
  color: var(--GPAL-blue);
  transform: rotate(90deg);
}

.legend span {
  margin-right: 0.25rem;
}

/* tables in the checklist item style: grey panel, dark rules, blue header */
.compare-card .table-responsive {
  border: 1px solid rgb(50, 50, 50);
  border-radius: 10px;
  background: var(--grey-background);
  margin-bottom: 1rem;
}

.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  color: var(--grey-text);
}

.compare-table th {
  font-family: var(--header-font);
  font-weight: normal;
  letter-spacing: 0.05rem;
  color: var(--GPAL-blue);
  white-space: nowrap;
  padding: 0.9rem 0.75rem;
  border-bottom: 1px solid var(--GPAL-blue);
}

.compare-table td {
  padding: 0.75rem;
  vertical-align: top;
  border-top: 1px solid rgb(50, 50, 50);
}

.compare-table tbody tr:hover td {
  background: var(--GPAL-blue-transparent);
}

/* the matrix fits the card: fixed columns that wrap, the job column wider */
.matrix {
  table-layout: fixed;
  font-size: 0.8rem;
}

.matrix th {
  white-space: normal;
  font-size: 0.75rem;
}

.matrix th:first-child,
.matrix td:first-child {
  width: 16%;
}

/* on a phone the matrix keeps a readable width and the panel scrolls sideways */
@media (max-width: 992px) {
  .matrix {
    min-width: 56rem;
  }
}

.gpal-row td {
  color: white;
  background: var(--GPAL-blue-transparent);
}

/* verdicts stay inside the site palette: blue for yes, white for partial, dimmed for no */
.cell-yes {
  color: var(--GPAL-blue);
}

.cell-partial {
  color: white;
}

.cell-no {
  color: rgb(130, 130, 130);
}

.cell-untested {
  color: rgb(100, 100, 100);
  font-style: italic;
}

@media (max-width: 576px) {
  h1 {
    font-size: 2.5rem;
  }

  .compare-card {
    padding: 1rem;
  }
}

/* the job column stays put while the matrix scrolls sideways */
.matrix th:first-child,
.matrix td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--grey-background);
  border-right: 1px solid rgb(50, 50, 50);
}

.matrix tbody tr:hover td:first-child {
  background: rgb(26, 40, 48);
}

/* the tool names stay under the navbar while the matrix scrolls down the page. The panel cannot clip
   overflow for that to work, so it only applies at widths where the matrix fits without sideways scroll */
@media (min-width: 993px) {
  .matrix-wrap {
    overflow: visible;
  }

  .matrix thead th,
  .sticky-head thead th {
    position: sticky;
    top: var(--nav-height, 0px);
    z-index: 2;
    background: var(--grey-background);
  }

  .matrix thead th:first-child {
    z-index: 3;
  }
}

.group-row td {
  font-family: var(--header-font);
  color: white;
  background: rgb(20, 20, 20);
  letter-spacing: 0.05rem;
}

/* the three coverage lists under How we know, side by side on a wide screen and stacked on a phone */
.coverage h3 {
  background: var(--blue-gradient);
  background-size: 200% 200%;
  animation: gradientShift 8s ease infinite;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  font-size: 1.5rem;
  margin: 1rem 0 0.75rem 0;
}

/* the chevron sits in its own column, so a wrapped line lines up under the first line's text */
.coverage li {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  color: var(--grey-text);
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}

.coverage li .bullet {
  flex-shrink: 0;
  margin-top: 0.2rem;
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}