/* AI Marketing: organigramma del reparto, giro dei dati, livelli di autonomia. */

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

/* I segnali che cambiano: una catena senza frecce, separata da barre. */
.shifts li + li::before { content: none; }
.shifts li:not(:last-child)::after { content: ""; height: 1.1em; border-left: 2px solid var(--mark); margin-inline: clamp(10px, 1.2vw, 18px); }

/* ---- Organigramma: un coordinatore, un tronco, sei rami ---- */
.org { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); align-items: center; }
.org-head { position: relative; margin-right: clamp(28px, 5vw, 72px); padding: clamp(20px, 2.4vw, 28px); border: 2px solid var(--mark); border-radius: 18px; }
.org-head::after { content: ""; position: absolute; left: calc(100% + 2px); top: 50%; width: clamp(28px, 5vw, 72px); border-top: 2px solid var(--mark); }
.org-head h3 { font: 600 clamp(1.5rem, 2.4vw, 2rem)/1.1 var(--display); letter-spacing: -.022em; }
.org-head p:last-child { margin-top: 12px; color: var(--fg2); }
.org-team { border-left: 2px solid var(--mark); }
.org-team li { position: relative; display: grid; grid-template-columns: minmax(0, 10rem) minmax(0, 1fr); gap: 4px 24px; align-items: baseline; padding: 14px 0 14px clamp(30px, 4vw, 52px); }
.org-team li::before { content: ""; position: absolute; left: 0; top: 1.75em; width: clamp(16px, 2.4vw, 32px); border-top: 2px solid var(--mark); }
.org-team h3 { font: 600 1.25rem/1.2 var(--display); letter-spacing: -.012em; }
.org-team p { color: var(--fg2); }

/* ---- Il giro dei dati ---- */
.loop { margin-top: clamp(24px, 4vh, 36px); display: grid; gap: 0; counter-reset: l; max-width: 30rem; }
/* La linea verticale è il filo che collega i passi del giro, con un nodo per passo: è disegnata come elemento, non come bordo del riquadro. */
.loop li { position: relative; padding: 10px 0 10px 36px; margin-left: 6px; font: 600 1.0625rem/1.3 var(--display); }
.loop li::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--mark); }
.loop li::before { content: ""; position: absolute; z-index: 1; left: -5px; top: 1em; width: 12px; height: 12px; border-radius: 50%; background: var(--mark); }
/* Ultimo tratto tratteggiato: il giro ricomincia. */
.loop li:last-child::after { background: repeating-linear-gradient(to bottom, var(--mark) 0 6px, transparent 6px 11px); }
#dati .proposal { margin-top: 0; }

/* ---- Livelli di autonomia ---- */
.auto-tabs { display: none; }
.auto.is-js .auto-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: clamp(24px, 4vh, 40px); }
.auto-tabs button { min-height: 48px; padding: 0 22px; border: 2px solid var(--mark); border-radius: 999px; background: transparent; color: var(--fg); font: 600 1rem/1 var(--text); cursor: pointer; transition: transform .16s var(--ease); }
.auto-tabs button:active { transform: scale(.97); }
.auto-tabs button[aria-selected="true"] { background: var(--mark); color: #0c111c; }
.auto-panel { padding-block: clamp(20px, 3vh, 30px); border-top: 1px solid var(--line); }
.auto.is-js .auto-panel { border-top: 2px solid var(--mark); }
.auto.is-js .auto-panel[hidden] { display: none; }
.auto-panel h3 { font: 600 clamp(1.5rem, 2.6vw, 2.25rem)/1.1 var(--display); letter-spacing: -.022em; }
.auto.is-js .auto-panel h3 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.auto-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 5vw, 72px); margin-top: 18px; }
.auto.is-js .auto-cols { margin-top: 0; }
.auto-cols p:last-child { font: 400 clamp(1.125rem, 1.7vw, 1.5rem)/1.3 var(--text); letter-spacing: -.01em; max-width: 26ch; }
.auto-cols div:first-child p:last-child { font-family: var(--display); font-weight: 600; }
.auto-note b { color: var(--fg); font-weight: 600; }

/* ---- Misure ---- */
.measures { margin-bottom: clamp(48px, 8vh, 88px); }
.measures .plain { margin-top: 0; }

@media (max-width: 860px) {
  .org { grid-template-columns: 1fr; }
  .org-head { margin-right: 0; }
  .org-head::after { left: 22px; top: calc(100% + 2px); width: 0; height: 28px; border-top: 0; border-left: 2px solid var(--mark); }
  .org-team { margin: 28px 0 0 24px; }
  .org-team li { grid-template-columns: 1fr; padding-left: 30px; }
  .auto-cols { grid-template-columns: 1fr; gap: 22px; }
  .auto-tabs button { flex: 1 1 auto; padding: 0 14px; }
}