/* LWN Pro — what is behind the plugin.

   The last thing before the buy button, and the only section on the page with
   nothing to demonstrate. Updates, documentation and support are promises
   about the future; no diagram can show them, so this one is plainly written
   cards and no illustration. Trying to draw them would be decoration standing
   in for evidence.

   Two of the three carry a link, because the honest proof of documentation is
   the documentation, and the honest proof of support is an address that works. */

.bh {
  background: var(--color-surface);
  padding: var(--space-70) 40px;
  container-type: inline-size;
  font-family: var(--font-sans);
}
.bh__in { max-width: 1180px; margin: 0 auto; }

.bh__head { margin-bottom: 34px; }
.bh__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin: 0 0 14px;
}
.bh__title {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-2xl);
  line-height: var(--lh-heading);
  letter-spacing: -0.02em;
  color: var(--color-contrast);
  margin: 0;
}

.bh__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.bh__card {
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border: 1px solid var(--color-line-200);
  border-top: 2px solid var(--color-accent-light);
  border-radius: 12px;
  padding: 26px 24px 24px;
}
.bh__h {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-lg);
  line-height: 1.28;
  letter-spacing: -0.012em;
  color: var(--color-contrast);
  margin: 0 0 10px;
}
.bh__p {
  margin: 0 0 auto;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--color-ink-600);
  text-wrap: pretty;
}

/* The link sits on the floor of the card, so the three line up whatever the
   paragraphs above them do. */
.bh__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--color-line-200);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-primary);
}
.bh__link span { transition: transform 0.16s ease; }
.bh__link:hover { color: var(--color-primary-hover); }
.bh__link:hover span { transform: translateX(3px); }
.bh__link:focus-visible { outline: 2px solid var(--color-blue-700); outline-offset: 3px; border-radius: 3px; }

@media (prefers-reduced-motion: reduce) {
  .bh__link span { transition: none; }
}

@container (max-width: 900px) {
  .bh { padding: var(--space-60) 24px; }
  .bh__grid { grid-template-columns: 1fr; gap: 14px; }
  .bh__card { padding: 22px 20px 20px; }
  .bh__link { margin-top: 16px; padding-top: 14px; }
}