/* Closing: the mark, the principle the product is built on, the motto, and
   the last chance to install. The one centred block on the page — the axis
   the whole day ran down has converged by here. */

.closing {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(6rem, 12vw, 10rem) var(--gutter-x);
  border-top: 1px solid var(--hairline);
  text-align: center;
}

.closing__mark {
  width: 52px;
  height: 52px;
}

.closing__principle {
  margin-top: clamp(2.2rem, 4vw, 3.2rem);
  max-width: 16ch;
  font-size: clamp(1.9rem, 5vw, 3.2rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  text-wrap: balance;
}

.closing__motto {
  margin-top: 1.3rem;
  color: var(--dim);
  font-family: var(--mono);
  font-size: var(--label);
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.closing__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7rem;
  margin-top: clamp(2.4rem, 4vw, 3.2rem);
}

/* Three buttons wrapping two-and-one is the worst of both: neither a row nor
   a stack. Below this they are a stack, on one width. */
@media (max-width: 560px) {
  .closing__row {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .closing__row .btn {
    justify-content: center;
  }
}