/* Comparison — this treatment against the alternative, row by row. */

.hmt-compare__table {
  overflow: hidden;
  border: 1px solid var(--hm-line);
  border-radius: 20px;
  background: var(--hm-paper);
}

.hmt-compare__row {
  display: grid;
  grid-template-columns: 0.8fr 1.1fr 1.1fr;
  border-top: 1px solid var(--hm-line);
}
.hmt-compare__row:first-child { border-top: 0; }
.hmt-compare__row > span { padding: 20px 26px; font-size: 14.5px; line-height: 1.55; }

.hmt-compare__row--head > span {
  padding-block: 18px;
  font-family: var(--hm-display);
  font-weight: 900;
  font-size: 1.05rem;
  color: var(--hm-ink);
}
.hmt-compare__row > .hmt-compare__aspect {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hm-ink);
}
/* The treatment's own column is the one lit in the brand tint. */
.hmt-compare__ours { background: var(--hm-gold-tint); color: var(--hm-ink); }
.hmt-compare__row--head .hmt-compare__ours { color: var(--hm-gold-dark); }
.hmt-compare__theirs { color: var(--hm-ink-soft); }

.hmt-compare__foot { margin-top: 18px; font-size: 12.5px; max-width: 70ch; }

@media (max-width: 700px) {
  .hmt-compare__row--head { display: none; }
  .hmt-compare__row { grid-template-columns: 1fr; border-top-width: 6px; border-top-color: var(--hm-panel); }
  .hmt-compare__row:nth-child(2) { border-top: 0; }
  .hmt-compare__row > span { padding: 14px 20px; }
  .hmt-compare__row > .hmt-compare__aspect { padding-top: 18px; }
  .hmt-compare__ours::before,
  .hmt-compare__theirs::before {
    content: attr(data-col);
    display: block;
    margin-bottom: 4px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--hm-gold-dark);
  }
  .hmt-compare__theirs::before { color: var(--hm-body); }
}