/* Company pages (lane D): book a demo, about and contact. Only what the kit (D37) lacks. */

/* "What happens next" beside the demo form (D36): a numbered list on the rail */
.next-steps { list-style: none; counter-reset: next; display: grid; gap: 22px; margin-top: 36px; }
.next-steps li { counter-increment: next; position: relative; padding-left: 52px; color: #c9c6da; }
.next-steps li::before {
  content: counter(next); position: absolute; left: 0; top: -2px; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--f-mono); font-size: 0.82rem; color: var(--violet-hi);
  background: var(--violet-wash); border: 1px solid rgba(154,133,255,.5);
}
.next-steps li:not(:last-child)::after { content: ""; position: absolute; left: 17px; top: 36px; bottom: -20px; width: 1px; background: var(--line-2); }
.next-steps b { display: block; color: var(--text); font-weight: 560; margin-bottom: 2px; }
.demo-grid h2 + .next-steps { margin-top: 28px; }
.next-head { margin-top: 48px; font-size: 1.3rem; }

/* About: the how-we-work list between two prose blocks, and the company facts */
.about-list { margin-top: 24px; }
.about-after { margin-top: 24px; }
.company-facts { display: grid; gap: 0; border-top: 1px solid var(--line-2); }
.company-facts > div { display: grid; grid-template-columns: 11rem 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line-2); }
.company-facts dt { font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); padding-top: 4px; }
.company-facts dd { color: var(--text); }
@media (max-width: 640px) { .company-facts > div { grid-template-columns: 1fr; gap: 4px; } }