/* ============================================================
   PROBLEM, "Most businesses aren't broken. Their systems are."
   A ledger: what it looks like on the left, what it costs on the right.
   ============================================================ */

.problem__title {
  max-width: 17ch;
  font-size: var(--fs-h1);
}

.problem__aside {
  align-self: end;
  max-width: 40ch;
}

.ledger { border-top: 1px solid var(--line); }

.ledger__row {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: baseline;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding-block: clamp(1.5rem, 3vw, 2.2rem);
  border-bottom: 1px solid var(--line);
  transition: background var(--dur) var(--ease);
}
.ledger__row:hover { background: rgba(150,119,75,0.035); }

.ledger__k {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  color: var(--text-3);
  transition: color var(--dur) var(--ease);
}
.ledger__row:hover .ledger__k { color: var(--bronze); }

.ledger__what {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.5vw, 2rem);
  font-weight: 500;
  letter-spacing: var(--ls-head);
  line-height: 1.16;
}

.ledger__cost {
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--text-2);
}
.ledger__cost b {
  font-weight: 500;
  color: var(--text);
}

.problem__close {
  margin-top: clamp(3rem, 6vw, 5rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3rem);
}
.problem__close-t {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.6vw, 1.9rem);
  font-weight: 500;
  letter-spacing: var(--ls-head);
  line-height: 1.25;
  max-width: 28ch;
}

@media (max-width: 900px) {
  .ledger__row { grid-template-columns: 2.5rem 1fr; row-gap: 0.6rem; }
  .ledger__cost { grid-column: 2; }
  .problem__close { grid-template-columns: 1fr; }
}