/* What happens next: three plain lines under the closing buttons (home and /use-cases/).
   A small crumb trail, the same idea as the How it works steps and the logo: dots that grow and end
   in the orange one. No numbers, no cards, no icons, no motion. */

/* with the extra lines under the buttons, the heading lines up with the top of the column, not the bottom */
.contact__in:has(.next) { align-items: start; }

.next { display: grid; gap: 14px; max-width: 46ch; margin-top: 12px; padding-top: 24px; border-top: 1px solid var(--ink-line); }
.next__h { font-family: var(--sans); font-size: 15px; font-weight: 600; line-height: 1.4; letter-spacing: 0; color: var(--on-ink); }

.next__trail { list-style: none; margin: 0; padding: 0; }
.next__trail li { position: relative; padding: 0 0 12px 26px; font-size: 15px; line-height: 1.5; color: var(--on-ink-muted); }
.next__trail li:last-child { padding-bottom: 0; }
/* the crumb: centred on the first line of text (line-height 1.5, so the middle sits at .75em) */
.next__trail li::before { content: ""; position: absolute; left: 7px; top: .75em; width: 4.5px; height: 4.5px; border-radius: 50%;
  background: var(--on-ink-muted); transform: translate(-50%, -50%); }
.next__trail li:nth-child(2)::before { width: 7px; height: 7px; }
.next__trail li:nth-child(3)::before { width: 10.5px; height: 10.5px; background: var(--accent); }
/* dotted line from one crumb to the next */
.next__trail li:not(:last-child)::after { content: ""; position: absolute; left: 6px; top: calc(.75em + 7px); bottom: 1px; width: 2px;
  background: radial-gradient(circle, rgba(244, 240, 232, .32) .8px, transparent 1.2px) 50% 0 / 2px 6px repeat-y; }

/* the quiet second option for people who are not ready to talk (home only) */
.next__alt { font-size: 14px; line-height: 1.5; color: var(--on-ink-muted); }
.next__alt a { color: var(--on-ink); text-decoration: underline; text-decoration-color: var(--ink-line-strong); text-underline-offset: 4px; }
.next__alt a:hover { text-decoration-color: currentColor; }

/* the three lines now open the column and the buttons follow them, so the block needs no top rule */
.contact__side > .next:first-child { margin-top: 0; padding-top: 0; border-top: 0; margin-bottom: 28px; }