/* Outbound: i tre motori, la lista che diventa agenda. */

/* L'apertura della telefonata del commerciale, 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; }

/* I tre motori: una riga ciascuno, numero grande a sinistra. */
.motori { border-top: 2px solid var(--fg); }
.motori > li { display: grid; grid-template-columns: 5.5rem minmax(0, 4fr) minmax(0, 6fr); gap: 10px clamp(20px, 4vw, 56px); align-items: start; padding-block: clamp(26px, 4.5vh, 44px); border-bottom: 1px solid var(--line); }
.motori .n { grid-row: span 2; font-size: clamp(2.5rem, 5vw, 4.25rem); line-height: .9; letter-spacing: -.06em; }
.motori h3 { font: 600 clamp(1.5rem, 2.6vw, 2.125rem)/1.08 var(--display); letter-spacing: -.024em; }
.motori .da { margin-top: 6px; color: var(--fg2); }
.motori .ob { grid-column: 3; font: 600 1.0625rem/1.3 var(--display); }
.motori .k { display: block; font: 500 .8125rem/1.3 var(--mono); color: var(--fg2); margin-bottom: 4px; }

/* La lista e l'agenda, fianco a fianco. */
.la { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.la-t { font-size: .8125rem; color: var(--fg2); padding-bottom: 12px; border-bottom: 2px solid var(--fg); }
.la-list li { display: grid; grid-template-columns: 7.5em minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding-block: 13px; border-bottom: 1px solid var(--line); }
.la-list b { font: 600 1.0625rem/1.3 var(--display); }
.la-list span { color: var(--fg2); font-size: .9375rem; }
.la-list i { font-style: normal; justify-self: end; }
.la-list .yes { padding: 3px 10px; border-radius: 999px; background: var(--oro); color: var(--notte); font: 600 .8125rem/1.4 var(--text); }
.la-agenda li { display: grid; grid-template-columns: 4.5em minmax(0, 1fr); gap: 2px 12px; padding-block: 15px; border-bottom: 1px solid var(--line); }
.la-agenda span { grid-row: span 2; font-size: 1.0625rem; color: var(--mark); }
.la-agenda b { font: 600 1.1875rem/1.25 var(--display); letter-spacing: -.012em; }
.la-agenda p { color: var(--fg2); font-size: .9375rem; }
/* Le regole: etichette più lunghe di quelle della scheda comune. */
#regole .spec div { grid-template-columns: 9.5em 1fr; }
.flusso { margin-top: clamp(40px, 7vh, 72px); font-size: clamp(1.0625rem, 1.7vw, 1.5rem); }

@media (max-width: 860px) {
  .motori > li { grid-template-columns: 3.25rem minmax(0, 1fr); }
  .motori .n { grid-row: auto; font-size: 2.25rem; }
  .motori > li > p, .motori .ob { grid-column: 1 / -1; }
  .la { grid-template-columns: 1fr; }
  #regole .spec div { grid-template-columns: 1fr; gap: 4px; }
  .la-list li { grid-template-columns: 6em minmax(0, 1fr) auto; }
}