/* Automazioni: prima e dopo, biglietti da visita, righe dei processi, strumenti. */

.k, .ba-k { display: block; font: 500 .8125rem/1.3 var(--mono); color: var(--fg2); margin-bottom: 12px; }

/* ---- Prima e dopo ---- */
.ba { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: clamp(20px, 4vw, 56px); align-items: start; }
.ba .voice, .ba .report { margin-top: 0; }
.ba .who { margin-bottom: 10px; }
.ba-arrow { align-self: center; width: clamp(28px, 4vw, 56px); border-top: 2px solid var(--mark); position: relative; }
.ba-arrow::after { content: ""; position: absolute; right: 0; top: -7px; width: 12px; height: 12px; border-top: 2px solid var(--mark); border-right: 2px solid var(--mark); transform: rotate(45deg); }
.ba + .chain { margin-top: clamp(40px, 7vh, 72px); }
.chain.small { font-size: clamp(1.0625rem, 1.6vw, 1.375rem); }

/* ---- La pila di biglietti da visita ---- */
.cards { position: relative; height: 410px; max-width: 420px; }
.bcard { position: absolute; width: min(290px, 78%); display: grid; gap: 2px; padding: 18px 20px; background: #f3eee2; color: #0c111c; border-radius: 6px; box-shadow: 0 14px 28px -16px rgba(0, 0, 0, .7); font: 400 .9375rem/1.35 var(--text); }
.bcard b { font: 600 1.125rem/1.2 var(--display); margin-bottom: 4px; }
.bcard .mono { font-family: var(--mono); font-size: .8125rem; margin-top: 6px; }
.bcard i { margin-top: 8px; font-style: italic; font-size: .875rem; text-decoration: underline; text-decoration-color: #f4c356; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.bcard:nth-child(1) { left: 0; top: 0; transform: rotate(-5deg); }
.bcard:nth-child(2) { left: 24%; top: 82px; transform: rotate(3deg); z-index: 1; }
.bcard:nth-child(3) { left: 4%; top: 250px; transform: rotate(-2deg); }

/* ---- Le righe del CRM ---- */
.crm { border-top: 2px solid var(--fg); }
.crm li { display: grid; gap: 2px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.crm b { font: 600 1.125rem/1.25 var(--display); }
.crm span { color: var(--fg2); }
.crm .st { margin-top: 4px; font: 500 .8125rem/1.4 var(--mono); color: var(--mark); }
.crm-src { margin-top: 14px; font: 500 .8125rem/1.4 var(--mono); color: var(--fg2); }

/* ---- Gli altri processi: da cosa, a cosa ---- */
.flows { border-top: 1px solid var(--line); }
.flows li { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 3fr) minmax(0, 6fr); gap: 8px clamp(16px, 3vw, 48px); align-items: baseline; padding-block: clamp(16px, 2.6vh, 24px); border-bottom: 1px solid var(--line); }
.flows h3, .flows .to { font: 600 clamp(1.375rem, 2.4vw, 2rem)/1.1 var(--display); letter-spacing: -.022em; }
.flows .to::before { content: ""; display: inline-block; vertical-align: middle; width: clamp(18px, 2.4vw, 36px); border-top: 2px solid var(--mark); margin-right: clamp(10px, 1.4vw, 18px); }
.flows li > p:last-child { color: var(--fg2); }

/* ---- Strumenti ---- */
.tools-box { margin-top: clamp(40px, 7vh, 72px); }
.tools { display: flex; flex-wrap: wrap; gap: 8px 0; font: 600 clamp(1.125rem, 1.9vw, 1.5rem)/1.25 var(--display); letter-spacing: -.015em; }
.tools li { display: inline-flex; align-items: center; }
.tools li + li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--mark); margin-inline: clamp(10px, 1.3vw, 18px); }

/* ---- Meno e più, e la domanda ---- */
.gains { margin-top: clamp(48px, 8vh, 88px); }
.gains .plain { margin-top: 0; }
.ask { margin-top: clamp(48px, 8vh, 88px); font: 600 clamp(1.5rem, 3vw, 2.5rem)/1.1 var(--display); letter-spacing: -.025em; max-width: 24ch; text-wrap: balance; }

@media (max-width: 860px) {
  .ba { grid-template-columns: 1fr; gap: 28px; }
  .ba-arrow { width: 0; height: 36px; border-top: 0; border-left: 2px solid var(--mark); margin-left: 12px; align-self: start; }
  .ba-arrow::after { right: auto; left: -7px; top: auto; bottom: 0; transform: rotate(135deg); }
  .flows li { grid-template-columns: 1fr 1fr; }
  .flows li > p:last-child { grid-column: 1 / -1; }
}