/* RENT OR OWN — the comparison table. A table is the right form here and the
   wrong instinct is to dress it up: the numbers are the argument, so the job
   is to make them scannable and get out of the way. On a phone it stops being
   a table and becomes a stack of small records, because a five-column grid at
   390px is unreadable and shrinking the type to force it is worse. */

.compare .promise {
  font-size: clamp(20px, 2.4vw, 26px);
  line-height: 1.4;
  max-width: 38ch;
  margin-top:16px;
}

.table {
  margin-top:32px;
  font-size: 14px;
}

.row {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 2.1fr) minmax(0, 0.6fr) minmax(0, 0.7fr);
  gap: clamp(12px, 2vw, 26px);
  padding:16px 0;
  border-top: 1px solid var(--line);
  align-items: baseline;
}

.row.head {
  border-top: 0;
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.55;
  padding-bottom:8px;
}

.pf {
  font-size: 16px;
}

.st {
  line-height: 1.5;
  opacity: 0.8;
}

.mo,
.fv {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-size: 14px;
  letter-spacing: -0.01em;
}

/* the five-year number is the one that does the work */
.fv {
  font-size: 16px;
}

@media (max-width: 809px) {
  .row.head {
    display: none;
  }

  .row {
    grid-template-columns: minmax(0, 1fr);
    gap:8px;
    padding:16px 0;
  }

  .pf {
    font-size: 20px;
  }

  .mo::before {
    content: 'A month · ';
    opacity: 0.5;
  }

  .fv::before {
    content: 'Five years · ';
    opacity: 0.5;
  }
}