/* Lead Live: la sequenza a orario dell'apertura, le sequenze di contatto, gli elenchi su due colonne. */

.h3 { font: 600 clamp(1.25rem, 1.9vw, 1.625rem)/1.15 var(--display); letter-spacing: -.02em; text-wrap: balance; }

/* I primi due minuti di una lead: tre ore in fila, legate da un filo. */
.seq { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(48px, 8vh, 88px); border-top: 2px solid var(--fg); }
.seq li { position: relative; padding: 20px clamp(16px, 2.4vw, 32px) 0 0; }
.seq li::before { content: ""; position: absolute; left: 0; top: -7px; width: 12px; height: 12px; border-radius: 50%; background: var(--fg); }
.seq span { display: block; font-size: clamp(1.5rem, 2.6vw, 2.25rem); line-height: 1; letter-spacing: -.04em; }
.seq b { display: block; margin-top: 12px; font: 600 1.1875rem/1.2 var(--display); letter-spacing: -.012em; }
.seq p { margin-top: 4px; color: var(--fg2); font-size: .9375rem; max-width: 28ch; }

/* L'apertura della telefonata, citata. */
.open { margin: clamp(20px, 3vh, 28px) 0 0; padding-left: 18px; border-left: 2px solid var(--fg); font: 600 clamp(1.125rem, 1.5vw, 1.3125rem)/1.3 var(--display); letter-spacing: -.012em; max-width: 34ch; }

/* Sequenze di contatto: una riga per sequenza, etichetta a sinistra. */
.flows { display: grid; border-top: 1px solid var(--line); }
.flows > li { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 8px clamp(16px, 3vw, 40px); align-items: baseline; padding-block: clamp(18px, 2.8vh, 26px); border-bottom: 1px solid var(--line); }
.flows > li > span { font-size: .8125rem; color: var(--fg2); }
.flows .chain { font-size: clamp(1.0625rem, 1.6vw, 1.375rem); gap: 8px 0; }
.knobs-title { margin-top: clamp(40px, 7vh, 72px); max-width: 30ch; }
.knobs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px clamp(24px, 4vw, 56px); max-width: 60rem; }

.passi { margin-top: clamp(40px, 7vh, 72px); }

@media (max-width: 860px) {
  .seq { grid-template-columns: 1fr; border-top: 0; border-left: 2px solid var(--fg); margin-top: 40px; }
  .seq li { padding: 0 0 22px 22px; }
  .seq li:last-child { padding-bottom: 0; }
  .seq li::before { left: -7px; top: 6px; }
  .flows > li { grid-template-columns: 1fr; }
  .knobs { grid-template-columns: 1fr; }
}