/* Hero: the pitch on the left, the network of people on the right. */
.cm-hero .wrap { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 40px; }
/* Members as points, agents as the small lights moving between them. Drawn by network.js.
   It takes the height of the text beside it, so it never pushes the page down. */
.cm-net { position: relative; align-self: stretch; min-height: 320px; margin: -24px -40px -24px 0; }
.cm-net canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Four pillars, numbered like the home page list. */
.cm-pillars { padding-top: var(--fp-space-block); }
.pillars { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.pillars li { display: flex; flex-direction: column; gap: 14px; padding-top: 20px; border-top: 1px solid var(--fp-border-strong); }
.pillars .n { font: 500 13px/1 var(--fp-font-mono); letter-spacing: 0.04em; color: var(--fp-text-label); text-transform: uppercase; }
.pillars p { margin: 0; color: var(--fp-text); font: 500 17px/1.4 var(--fp-font-display); }

/* Closing line. */
.about-belief { padding-block: var(--fp-space-section); }
.belief { margin: 0; font: 500 clamp(30px, 4.2vw, 48px)/1.1 var(--fp-font-display); letter-spacing: -0.035em; }
.belief span { display: block; color: #F2F5F8; }
.belief span + span { color: #6E879C; }
.belief-cta { margin-top: 40px; }

@media (max-width: 900px) {
  .cm-hero .wrap { grid-template-columns: minmax(0, 1fr); }
  .cm-net { display: none; }
  .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .pillars { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .pillars li { padding-block: 18px; border-top-color: var(--fp-border); }
  .pillars li:last-child { border-bottom: 1px solid var(--fp-border); }
  .pillars p { font-size: 16px; }
}