/* The trust section.
 *
 * This file used to dress two sections — "Behind the key" and "Privacy" — that
 * between them ran the same argument twice from opposite ends, with a flow
 * diagram, a four-item absence list and a specification rail. All of it was
 * true and none of it was reading: a visitor deciding whether to buy needs four
 * facts and a link to the document that commits us to them, and the privacy
 * policy is that document.
 *
 * So one section, one screen, and the long form lives where long form belongs.
 */

.trust {
  /* Its own ground. The section either side of it is on `--paper`, and one step
   * of tone is enough to say "this is a different kind of claim" without a
   * border, a badge or a colour. */
  background: var(--paper-sunk);
}

.trust__inner {
  display: grid;
  gap: var(--s-2xl);
}

.trust__claim {
  display: grid;
  gap: var(--s-m);
  /* The headline breaks on its own `<br>`, so the column has to be wide enough
   * to honour it; the lede below is held to the prose measure separately. */
  max-width: 34ch;
}

.trust__lede {
  max-width: var(--measure);
  color: var(--ink-body);
}

/* ---- The four facts ----
 *
 * `auto-fit` with a floor rather than a fixed four columns: at 1400px they sit
 * in a row, at 900px they fall to two, and on a phone they stack — without
 * three breakpoints saying the same thing three times.
 */
.trust__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: var(--s-xl) var(--s-l);
  margin: 0;
  padding-block-start: var(--s-xl);
  border-top: 1px solid var(--paper-edge);
}

.trust__fact {
  display: grid;
  gap: var(--s-2xs);
  align-content: start;
}

.trust__fact dt {
  font-size: var(--step-0);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.trust__fact dd {
  margin: 0;
  font-size: var(--step--1);
  line-height: 1.55;
  color: var(--ink-quiet);
}

/* ---- The primitives ----
 *
 * Quiet on purpose. The people who care about these read them anyway, and
 * setting them loud makes the section look like a security vendor's rather than
 * a statement of fact.
 */
.trust__spec {
  font-size: var(--step--1);
  color: var(--ink-quiet);
  /* Wraps as three units rather than mid-token: "AES-256-GCM" broken across two
   * lines stops looking like the name of a thing. */
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2xs) var(--s-xs);
  align-items: baseline;
}

.trust__spec .mono {
  color: var(--ink-body);
  white-space: nowrap;
}

.trust__more {
  margin: 0;
}

@media (min-width: 900px) {
  .trust__inner {
    /* The claim keeps the left column and the facts run the full width beneath
     * it. Setting the facts beside the claim was tried and gives four columns
     * of about 150px, which is a caption, not a fact. */
    grid-template-columns: minmax(0, 1fr);
  }

  .trust__claim {
    max-width: none;
  }

  .trust__claim .lede {
    /* Ragged right under a headline that starts at the same edge. The lede sat
     * in a second column once and left the page's largest hole directly on the
     * reading edge. */
    max-width: var(--measure);
  }
}