/*
 * The Visibility page (/features/visibility/), linked from that page only. DESIGN.md §9, "The
 * Visibility page in detail". Everything else on the page is the site's own parts (the hero,
 * the story, crux-feature, faq, feat-related, the closing band); this adds what they do not
 * draw. Every selector starts .vis- or sits under main.vis-page.
 */

.vis-shot {
  margin: 0;
}

/* ---------- The Brief: the one band that is the whole width ---------- */

.vis-wide-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: end;
  gap: 64px;
}

.vis-wide-head .lede {
  justify-self: end;
  margin-top: 0;
}

.vis-wide-shot {
  margin: 48px 0 0;
}

/* ---------- The four numbers ---------- */

.vis-head .lede {
  max-width: 560px;
}

.vis-numbers {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 48px;
  margin: 56px 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.vis-numbers li {
  position: relative;
  display: flex;
  flex-direction: column;
  padding-top: 26px;
}

.vis-numbers li + li::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -24px;
  border-left: 1px solid var(--line);
  content: "";
}

.vis-num-name {
  color: var(--faint);
  font: 500 12px/1.4 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.vis-num-fig {
  margin-top: 14px;
  color: var(--brand);
  font: var(--display-weight, 360) clamp(56px, 6vw, 84px) / 1 var(--display);
  letter-spacing: var(--display-track, -0.03em);
}

.vis-num-ask {
  margin-top: 14px;
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.45;
}

/* ---------- Narrower screens ---------- */

@media (max-width: 1100px) {
  .vis-numbers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 36px;
  }

  .vis-numbers li:nth-child(3)::before {
    display: none;
  }

  .vis-numbers li:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }
}

@media (max-width: 760px) {
  .vis-wide-head {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }

  .vis-wide-head .lede {
    justify-self: start;
  }

  .vis-wide-shot {
    margin-top: 32px;
  }
}

@media (max-width: 560px) {
  .vis-numbers {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0;
  }

  .vis-numbers li {
    padding: 26px 0 30px;
  }

  .vis-numbers li::before {
    display: none;
  }

  .vis-numbers li + li {
    border-top: 1px solid var(--line);
  }
}