/* ==========================================================================
   Pagina: IA sui documenti (MT·IA)
   Oggetto dell'hero: «il lettore». Un modulo attraversato dalla luce, i dati
   che volano in una scheda con la loro affidabilità, poi una persona controlla
   e cade il timbro.
   Stato base = stato finale: senza JS e con movimento ridotto si vede la scena
   completa. Gli stati iniziali li imposta lo script di pagina.
   ========================================================================== */

/* ---------- Testata ---------- */
.ia-hero h1 { font-size: clamp(2.3rem, 4vw, 3.8rem); }
.ia-hero .page-hero__text { align-content: center; }

.ia-ticks {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  color: var(--fg-2);
  font-size: var(--fs-small);
}
.ia-ticks li { display: inline-flex; align-items: center; gap: 10px; }
.ia-ticks li::before {
  content: "";
  flex: none;
  width: 12px;
  height: 7px;
  border-left: 1.6px solid var(--blu);
  border-bottom: 1.6px solid var(--blu);
  transform: translateY(-2px) rotate(-45deg);
}

@media (max-width: 1100px) {
  .ia-hero .page-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .ia-hero .page-hero__text { max-width: 46rem; }
}

/* ---------- Il lettore ---------- */
.ia-reader {
  container-type: inline-size;
  width: 100%;
  max-width: 620px;
  margin-inline: auto;
}

.ia-stage {
  --ov: 8cqi;                         /* quanto la scheda sborda sul foglio */
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 52fr) minmax(0, 48fr);
  align-items: stretch;
  padding-bottom: 26px;
}

/* In attesa dello script: niente stato finale che poi si svuota.
   Se lo script non arriva, la scena compare comunque dopo 3,5 s. */
.js-motion .ia-reader:not(.ia-ready) .ia-stage {
  opacity: 0;
  animation: ia-failsafe .6s var(--ease-out) 3.5s forwards;
}
@keyframes ia-failsafe { to { opacity: 1; } }
/* primo stato della scena: si applica di colpo, senza transizioni (vedi ia-snap nello script) */
.ia-reader.ia-snap *, .ia-reader.ia-snap *::before, .ia-reader.ia-snap *::after { transition: none !important; }

/* Il foglio */
.ia-sheet {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  overflow: hidden;
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 20px calc(var(--ov) + 16px) 22px 20px;
  border-radius: var(--radius);
  color: #15181A;
  background:
    radial-gradient(120% 60% at 20% 0%, rgba(255, 255, 255, .7), transparent 60%),
    linear-gradient(180deg, #F2F4F5 0%, #DFE4E7 100%);
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 -1px 0 rgba(0, 0, 0, .08),
    0 2px 4px rgba(0, 0, 0, .45),
    0 40px 70px -34px rgba(0, 0, 0, .95);
}
.ia-sheet__head {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 6px 12px;
  align-items: center;
  padding-bottom: 12px;
  margin-bottom: 2px;
  border-bottom: 1px solid rgba(21, 24, 26, .14);
}
.ia-sheet__seal {
  grid-row: span 2;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid #8E989F;
  background: radial-gradient(circle, #B9C1C7 0 4px, transparent 5px);
}
.ia-sheet__title {
  font-family: var(--font-mono);
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #2A3136;
}
.ia-sheet__bar { width: 62%; height: 5px; border-radius: 3px; background: #C9D0D4; }

.ia-f {
  position: relative;
  display: grid;
  gap: 3px;
  padding: 6px 8px 7px;
  margin-inline: -8px;
}
.ia-f__label {
  font-family: var(--font-mono);
  font-size: .54rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #56616A;
}
.ia-f__value {
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(21, 24, 26, .2);
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .01em;
  line-height: 1.35;
  color: #15181A;
}
.ia-f--note .ia-f__value { line-height: 1.55; border-bottom: 0; }

/* la cifra sbavata: il motivo per cui l'IA non è sicura */
.ia-smudge { position: relative; }
.ia-smudge::after {
  content: "";
  position: absolute;
  left: -.18em;
  right: -.28em;
  top: .02em;
  bottom: -.08em;
  border-radius: 45% 60% 50% 40%;
  background: radial-gradient(closest-side, rgba(52, 60, 66, .78), rgba(52, 60, 66, .35) 62%, transparent);
  filter: blur(1.1px);
  transform: rotate(-14deg);
}

/* la cornice del campo riconosciuto */
.ia-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.ia-frame rect {
  fill: rgba(47, 110, 158, .07);
  stroke: #2F6E9E;
  stroke-width: 1.4;
  stroke-dasharray: 1 2;
  stroke-dashoffset: 0;
}
.ia-f--amber .ia-frame rect { fill: rgba(224, 160, 80, .14); stroke: #B06D2A; }

/* la barra di luce: si muove con transform (yPercent), mai con top */
.ia-beam {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
}
.ia-beam::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 90px;
  background: linear-gradient(180deg, rgba(79, 155, 214, 0), rgba(79, 155, 214, .18));
}
.ia-beam::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, rgba(47, 110, 158, 0), #2F6E9E 10%, #9CCBEE 50%, #2F6E9E 90%, rgba(47, 110, 158, 0));
  box-shadow: 0 0 10px 1px rgba(79, 155, 214, .85), 0 0 30px 5px rgba(79, 155, 214, .35);
}

/* La scheda */
.ia-card.plate {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  z-index: 2;
  margin: 30px 0 -26px calc(-1 * var(--ov));
  padding: 16px 16px 14px;
}
.ia-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.ia-card .plate__code { margin: 0; }
.ia-card__legend {
  font-family: var(--font-mono);
  font-size: .54rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.ia-rows { list-style: none; }
.ia-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 10px;
  row-gap: 3px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
}
.ia-row::after {
  /* lampo d'arrivo del dato */
  content: "";
  position: absolute;
  inset: 0 -8px;
  border-radius: 6px;
  background: rgba(140, 192, 230, .12);
  opacity: 0;
  pointer-events: none;
}
.ia-row--amber::after { background: rgba(224, 160, 80, .14); }
.ia-row.is-landed::after { animation: ia-flash .9s var(--ease-out) both; }
@keyframes ia-flash { from { opacity: 1; } to { opacity: 0; } }

.ia-row__label {
  grid-column: 1;
  font-family: var(--font-mono);
  font-size: .54rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.ia-row__slot {
  grid-column: 1;
  position: relative;
  display: flex;
  align-items: center;
  min-height: 21px;
}
.ia-row__slot::before {
  /* posto vuoto: tratteggio = da fare */
  content: "";
  position: absolute;
  inset: 1px 18% 1px 0;
  border: 1px dashed var(--line-strong);
  border-radius: 4px;
  opacity: 0;
  transition: opacity .3s var(--ease-out);
}
.ia-row.is-empty .ia-row__slot::before { opacity: 1; }
.ia-row__value {
  font-size: .84rem;
  font-weight: 540;
  line-height: 1.25;
  color: var(--fg);
  white-space: nowrap;
}

.ia-fix { display: inline-grid; vertical-align: bottom; }
.ia-fix > span { grid-area: 1 / 1; }
.ia-fix__old { opacity: 0; color: var(--scintilla); }
.ia-fix__new {
  color: var(--blu);
  text-decoration: underline 1px;
  text-underline-offset: 3px;
}

/* indicatore di affidabilità: tre tacche */
.ia-meter {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.ia-meter i {
  position: relative;
  width: 9px;
  height: 5px;
  border-radius: 1px;
  background: #2A3136;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .6);
}
/* la tacca accesa è un livello sopra quella spenta: si accende in opacità */
.ia-meter i::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--blu);
  box-shadow: 0 0 6px rgba(140, 192, 230, .6);
  opacity: 0;
  transition: opacity .25s var(--ease-out);
  transition-delay: inherit;
}
.ia-meter i:nth-child(2) { transition-delay: 90ms; }
.ia-meter i:nth-child(3) { transition-delay: 180ms; }
.ia-row[data-level="3"] .ia-meter i::after,
.ia-row[data-level="2"] .ia-meter i:nth-child(-n+2)::after { opacity: 1; }
.ia-row[data-level="1"] .ia-meter i:first-child::after { opacity: 1; background: var(--scintilla); box-shadow: 0 0 6px rgba(224, 160, 80, .6); }
/* vuota finché il dato non arriva (specificità pari a quella delle tacche accese, e dopo) */
.ia-row.is-empty[data-level] .ia-meter i:nth-child(n)::after { opacity: 0; }
.ia-meter b {
  min-width: 4.4em;
  margin-left: 6px;
  font-family: var(--font-mono);
  font-size: .54rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-3);
  transition: opacity .3s var(--ease-out) .2s;
}
.ia-row--amber .ia-meter b { color: var(--scintilla); }
.ia-row.is-empty .ia-meter b { opacity: 0; transition-delay: 0s; }

.ia-status { grid-column: 1 / -1; display: grid; justify-items: start; margin-top: 3px; }
.ia-status > span {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: .52rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ia-status > span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; box-shadow: 0 0 6px currentColor; }
.ia-status__todo { opacity: 0; color: var(--scintilla); background: rgba(224, 160, 80, .08); box-shadow: inset 0 0 0 1px rgba(224, 160, 80, .5); }
.ia-status__done { color: var(--blu); background: rgba(140, 192, 230, .08); box-shadow: inset 0 0 0 1px rgba(140, 192, 230, .45); }

/* la bozza: l'unico testo del sito che si genera parola per parola, e solo qui dentro */
.ia-draft {
  margin-top: 8px;
  padding: 10px 12px 11px;
  border-radius: var(--radius-s);
  background: rgba(8, 10, 12, .35);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .55), inset 0 0 0 1px var(--line);
}
.ia-draft__label {
  display: block;
  margin-bottom: 5px;
  font-family: var(--font-mono);
  font-size: .52rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.ia-draft__text { font-size: .8rem; line-height: 1.5; color: var(--fg-2); }
.ia-caret {
  display: inline-block;
  width: 2px;
  height: 1.05em;
  margin-left: 2px;
  margin-right: -4px; /* ingombro nullo: il cursore non sposta mai le parole */
  vertical-align: -.18em;
  background: var(--blu);
  animation: ia-caret .6s step-end infinite;
  transition: opacity .3s linear;
}
.ia-caret.is-off { opacity: 0; animation: none; }
@keyframes ia-caret { 50% { opacity: 0; } }

/* pulsante e posto del timbro */
.ia-card__foot {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}
.ia-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 14px;
  border-radius: 7px;
  font-size: .8rem;
  font-weight: 640;
  font-stretch: 104%;
  color: #121517;
  background: var(--steel);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    inset 0 -1px 0 rgba(0, 0, 0, .28),
    0 1px 0 rgba(0, 0, 0, .45),
    0 10px 18px -10px rgba(0, 0, 0, .85);
}
/* LED del core: acceso da .ia-btn.is-on (.is-on > .led), luce in opacità */
.ia-btn__led {
  --led-color: var(--blu-scuro);
  --led-ring: rgba(47, 110, 158, .22);
  --led-halo: rgba(47, 110, 158, .95);
  --led-blur: 8px;
  width: 6px;
  height: 6px;
  background: #3A4046;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .55);
}
.ia-stamp-slot {
  position: relative;
  display: grid;
  place-items: center;
  height: 44px;
  border-radius: var(--radius-s);
}
.ia-stamp-slot::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px dashed var(--line-strong);
  border-radius: inherit;
  opacity: 0;
  transition: opacity .2s linear;
}
.ia-stamp-slot.is-empty::before { opacity: 1; }

.ia-stamp {
  position: relative;
  display: block;
  transform: rotate(-7deg);
  pointer-events: none;
}
.ia-stamp__ink {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 3px;
  padding: 7px 12px 6px;
  border-radius: 6px;
  background: rgba(201, 138, 75, .07);
}
.ia-stamp__ink::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: var(--tempra);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
.ia-stamp__ink::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(230, 194, 122, .35);
}
.ia-stamp__ink b {
  font-family: var(--font-display);
  font-stretch: 125%;
  font-weight: 800;
  font-size: .74rem;
  letter-spacing: .13em;
  line-height: 1;
  text-transform: uppercase;
  background: var(--tempra);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.ia-stamp__ink small {
  font-family: var(--font-mono);
  font-size: .46rem;
  letter-spacing: .22em;
  line-height: 1;
  text-transform: uppercase;
  color: #E6C27A;
}
.ia-stamp__shadow {
  /* ombra del timbro che scende: morbida senza filtri, così vale anche in modalità leggera */
  position: absolute;
  inset: -30% -18%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .7), rgba(0, 0, 0, .35) 55%, transparent);
  opacity: 0;
}
.ia-stamp__ring {
  position: absolute;
  inset: -5px;
  border-radius: 10px;
  box-shadow: 0 0 0 1.5px rgba(230, 194, 122, .7);
  opacity: 0;
}

.ia-log {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin-top: 10px;
  color: var(--fg-3);
}
.ia-log__k {
  font-family: var(--font-mono);
  font-size: .54rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.ia-log__v { font-size: .74rem; color: var(--fg-2); }
.ia-log .led { width: 6px; height: 6px; }

/* il cursore della persona */
.ia-cursor {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 6;
  pointer-events: none;
  opacity: 0;
}
.ia-cursor__arrow { width: 18px; height: 22px; overflow: visible; }
/* l'ombra è una copia della freccia, scura e allargata dal tratto: niente filtri su ciò che si muove */
.ia-cursor__shade { fill: rgba(0, 0, 0, .36); stroke: rgba(0, 0, 0, .16); stroke-width: 3.2; stroke-linejoin: round; }
.ia-cursor__dot { display: none; }
.ia-cursor__tag {
  position: absolute;
  left: 15px;
  top: 19px;
  padding: 3px 8px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: .54rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--inchiostro);
  background: var(--cromo);
  box-shadow: 0 6px 14px rgba(0, 0, 0, .45);
}
@media (hover: none) {
  .ia-cursor__arrow { display: none; }
  .ia-cursor__dot {
    display: block;
    width: 28px;
    height: 28px;
    margin: -14px 0 0 -14px;
    border-radius: 50%;
    background: rgba(238, 241, 243, .22);
    box-shadow: 0 0 0 1.5px rgba(238, 241, 243, .85), 0 4px 10px rgba(0, 0, 0, .4);
  }
  .ia-cursor__tag { left: 14px; top: 12px; }
}

/* il chip del dato in volo (creato dallo script) */
.ia-fly {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 5;
  padding: 3px 8px;
  border-radius: 5px;
  font-family: var(--font-mono);
  font-size: .68rem;
  line-height: 1.3;
  white-space: nowrap;
  color: #0F2A3D;
  background: #D3E7F6;
  box-shadow: 0 0 0 1px rgba(47, 110, 158, .65), 0 10px 20px -8px rgba(0, 0, 0, .7), 0 0 18px rgba(140, 192, 230, .5);
  pointer-events: none;
  opacity: 0;
}
.ia-fly--amber {
  color: #43280C;
  background: #F4DDBD;
  box-shadow: 0 0 0 1px rgba(176, 109, 42, .75), 0 10px 20px -8px rgba(0, 0, 0, .7), 0 0 18px rgba(224, 160, 80, .5);
}

/* durante la sequenza i pezzi che si muovono stanno su livelli propri: si spostano e
   sfumano senza ridisegnare il foglio e la scheda (via a fine giro, con .ia-done) */
.ia-reader.ia-anim:not(.ia-done) .ia-stage,
.ia-reader.ia-anim:not(.ia-done) .ia-beam,
.ia-reader.ia-anim:not(.ia-done) .ia-card,
.ia-reader.ia-anim:not(.ia-done) .ia-stamp,
.ia-reader.ia-anim:not(.ia-done) .ia-cursor,
.ia-reader.ia-anim:not(.ia-done) .ia-fly { will-change: transform, opacity; }
/* WebKit (Safari): le cornici dei campi entrano in opacità, già disegnate (intelligenza-artificiale.js):
   su un livello proprio l'accensione e la pulsazione del campo incerto non ridipingono il foglio */
html.is-webkit .ia-reader.ia-anim:not(.ia-done) .ia-frame { will-change: opacity; }
/* WebKit: il timbro cade senza scala (intelligenza-artificiale.js); ombra e anello sfumano su livelli
   loro, così la loro opacità non ridipinge il timbro, che è a maschera e con il testo in gradiente */
html.is-webkit .ia-reader.ia-anim:not(.ia-done) .ia-stamp__shadow,
html.is-webkit .ia-reader.ia-anim:not(.ia-done) .ia-stamp__ring { will-change: transform, opacity; }

.ia-reader__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin-top: 16px;
}
.ia-replay {
  display: none;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--fg-2);
  font-size: .875rem;
  font-weight: 560;
  box-shadow: inset 0 0 0 1px var(--line-strong);
  transition: color var(--t-ui) var(--ease-out), box-shadow var(--t-ui) var(--ease-out);
}
.ia-replay svg { width: 16px; height: 16px; transition: transform var(--t-ui) var(--ease-out); }
.ia-replay:hover { color: var(--fg); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg) 45%, transparent); }
.ia-replay:hover svg { transform: rotate(-40deg); }
.ia-reader.ia-anim .ia-replay { display: inline-flex; visibility: hidden; opacity: 0; }
.ia-reader.ia-played .ia-replay { visibility: visible; opacity: 1; transition: opacity .5s var(--ease-out), color var(--t-ui) var(--ease-out), box-shadow var(--t-ui) var(--ease-out); }

/* Scena verticale: il foglio sopra, la scheda sotto (telefono) */
@container (max-width: 519px) {
  .ia-stage { grid-template-columns: minmax(0, 1fr); padding-bottom: 0; }
  .ia-sheet { grid-column: 1; grid-row: 1; margin-right: 11cqi; padding: 18px 18px 58px; }
  .ia-card.plate { grid-column: 1; grid-row: 2; margin: -46px 0 0 9cqi; }
  .ia-f--note .ia-f__value { max-width: 30ch; }
}

/* ---------- Cosa fa l'IA, e cosa no ---------- */
.ia-pairs-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(36px, 6vw, 96px);
  align-items: start;
}
.ia-pairs-head { margin-bottom: 0; }
@media (max-width: 960px) { .ia-pairs-grid { grid-template-columns: minmax(0, 1fr); } }

.ia-pairs__cols,
.ia-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr);
  align-items: center;
  gap: 0 18px;
}
.ia-pairs__cols {
  padding-bottom: 14px;
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.ia-pairs__cols > span { display: inline-flex; align-items: center; gap: 10px; }
.ia-pairs__cols > span:last-child { grid-column: 3; }
.ia-person {
  position: relative;
  flex: none;
  width: 12px;
  height: 12px;
}
.ia-person::before {
  content: "";
  position: absolute;
  left: 3.5px;
  top: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--scintilla);
  box-shadow: 0 0 8px rgba(224, 160, 80, .7);
}
.ia-person::after {
  content: "";
  position: absolute;
  left: 1px;
  bottom: 0;
  width: 10px;
  height: 5px;
  border-radius: 5px 5px 1px 1px;
  background: var(--scintilla);
}
.ia-pairs__list { list-style: none; }
.ia-pair { padding: 22px 0; border-top: 1px solid var(--line); }
.ia-pair__ai { color: var(--fg-2); }
.ia-pair__human { color: var(--fg); font-weight: 560; }
.ia-pair__arrow { width: 56px; height: 14px; overflow: visible; }
.ia-draw {
  fill: none;
  stroke: var(--argento);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1 2;
  stroke-dashoffset: 0;
}
.ia-draw--accent { stroke: var(--blu); }
.ia-draw--amber { stroke: var(--scintilla); }   /* il campo incerto, che controlla una persona */
.ia-pair__arrow .ia-draw { stroke: var(--acciaio); }
.ia-pairs__rule {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-family: var(--font-display);
  font-stretch: 108%;
  font-weight: 650;
  font-size: 1.12rem;
  line-height: 1.3;
}
.ia-pairs__rule::before {
  content: "";
  flex: none;
  width: 3px;
  align-self: stretch;
  min-height: 1.4em;
  border-radius: 2px;
  background: var(--scintilla);
  box-shadow: 0 0 10px rgba(224, 160, 80, .5);
}

.js-motion .ia-pairs:not(.is-in) .ia-draw { stroke-dashoffset: 1.01; }
.ia-pairs.is-in .ia-draw { transition: stroke-dashoffset .7s var(--ease-in-out) calc(var(--d, 0ms) + var(--dd, 0ms) + 300ms); }
.js-motion .ia-pairs:not(.is-in) .ia-pair__human { opacity: .3; }
.ia-pairs .ia-pair__human { transition: opacity .6s var(--ease-out) calc(var(--d, 0ms) + 900ms); }

@media (max-width: 640px) {
  .ia-pairs__cols { display: none; }
  .ia-pair { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .ia-pair__arrow { display: none; }
  .ia-pair__human { position: relative; padding-left: 30px; }
  .ia-pair__human::after {
    content: "";
    position: absolute;
    left: 8px;
    top: -8px;
    width: 14px;
    height: 20px;
    border-left: 1.5px solid var(--acciaio);
    border-bottom: 1.5px solid var(--acciaio);
    border-bottom-left-radius: 6px;
  }
  .ia-pair__ai::before, .ia-pair__human::before {
    display: block;
    margin-bottom: 4px;
    font-family: var(--font-mono);
    font-size: .6rem;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--fg-3);
  }
  .ia-pair__ai::before { content: "L'IA"; }
  .ia-pair__human::before { content: "Una persona"; color: var(--scintilla); }
}

/* ---------- Dove serve davvero ---------- */
.ia-uses { list-style: none; }
.ia-use { display: flex; flex-direction: column; }
.ia-use__ico { width: 72px; height: 56px; margin-bottom: 22px; overflow: visible; }
.ia-use .plate__title { font-size: 1.15rem; }
.js-motion .ia-use:not(.is-in) .ia-draw { stroke-dashoffset: 1.01; }
.ia-use.is-in .ia-draw { transition: stroke-dashoffset .9s var(--ease-in-out) calc(var(--d, 0ms) + var(--dd, 0ms) + 450ms); }

/* ---------- Il giro completo ---------- */
.ia-line { --g: clamp(16px, 2vw, 28px); position: relative; }
.ia-line__stations {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--g);
}
.ia-station { position: relative; display: flex; flex-direction: column; padding-bottom: 58px; }
.ia-station__plate { flex: 1; display: flex; flex-direction: column; }
/* la stazione dove si trova la proposta si accende: blu se procede, ambra se aspetta una persona.
   Due livelli già disegnati che cambiano solo in opacità; mentre il giro gira (.is-live) stanno
   su livelli propri, così la targa non si ridisegna. */
.ia-station__glow {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}
.ia-station__glow::before,
.ia-station__glow::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  transition: opacity .5s var(--ease-out);
}
.ia-station__glow::before { box-shadow: inset 0 0 0 1px rgba(140, 192, 230, .5), 0 0 30px -8px rgba(140, 192, 230, .45); }
.ia-station__glow::after { box-shadow: inset 0 0 0 1px rgba(224, 160, 80, .6), 0 0 30px -8px rgba(224, 160, 80, .45); }
.ia-station.is-active .ia-station__glow::before { opacity: 1; }
.ia-station.is-wait .ia-station__glow::before { opacity: 0; }
.ia-station.is-wait .ia-station__glow::after { opacity: 1; }
.ia-line.is-live .ia-station__glow::before,
.ia-line.is-live .ia-station__glow::after,
.ia-line.is-live .ia-token,
.ia-line.is-live .ia-seg__fill,
.ia-line.is-live .ia-prop__scan { will-change: transform, opacity; }
.ia-station__obj { margin-top: auto; padding-top: 24px; min-height: 130px; display: flex; align-items: flex-end; }

.ia-port {
  position: absolute;
  left: 50%;
  bottom: 14px;
  z-index: 1;
  width: 16px;
  height: 16px;
  margin-left: -8px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #E9EDF0, #7A848B 55%, #3A4247);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .7), 0 0 0 5px var(--bg);
}
.ia-seg {
  position: absolute;
  left: 50%;
  bottom: 21px;
  width: calc(100% + var(--g));
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--line-strong) 0 6px, transparent 6px 12px);
}
.ia-seg__fill {
  position: absolute;
  inset: 0;
  background: var(--blu);
  box-shadow: 0 0 10px rgba(140, 192, 230, .6);
  transform-origin: 0 50%;
}

.ia-token {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  width: 20px;
  height: 26px;
  margin: -13px 0 0 -10px;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 0 4px;
  border-radius: 3px;
  background: linear-gradient(180deg, #F3F5F6, #D5DADD);
  box-shadow: 0 0 0 1.5px var(--blu), 0 0 18px rgba(140, 192, 230, .7), 0 6px 12px rgba(0, 0, 0, .5);
  opacity: 0;
  pointer-events: none;
}
.ia-token i { height: 2px; border-radius: 1px; background: #7A848B; }
.ia-token i:last-child { width: 70%; }
.ia-line__foot { margin-top: 18px; }

/* stazione 1: la proposta */
.ia-prop { gap: 16px; align-items: center; }
.ia-prop__doc {
  position: relative;
  flex: none;
  width: 46px;
  height: 58px;
  overflow: hidden;
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 12px 8px;
  border-radius: 4px;
  background: linear-gradient(180deg, #EEF1F3, #D5DADD);
  box-shadow: 0 10px 18px -10px rgba(0, 0, 0, .9);
}
.ia-prop__doc i { height: 3px; border-radius: 2px; background: #9AA4AB; }
.ia-prop__doc i:nth-child(2) { width: 75%; }
.ia-prop__doc i:nth-child(3) { width: 88%; }
.ia-prop__scan {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: #4F9BD6;
  box-shadow: 0 0 8px 1px rgba(79, 155, 214, .85);
  opacity: 0;
}
.ia-prop__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 7px 10px;
  border-radius: var(--radius-s);
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-2);
  background: rgba(140, 192, 230, .06);
  box-shadow: inset 0 0 0 1px rgba(140, 192, 230, .3);
}

/* stazione 2: la leva della persona */
.ia-check { gap: 16px; align-items: center; }
.ia-lever {
  position: relative;
  flex: none;
  width: 42px;
  height: 54px;
  border-radius: 8px;
  background: var(--brushed), linear-gradient(180deg, #2B3237, #1B2024);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 0 0 1px rgba(0, 0, 0, .5), 0 8px 18px -10px rgba(0, 0, 0, .8);
}
.ia-lever::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #E9EDF0, #7A848B 55%, #3A4247);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .7);
}
.ia-lever__arm {
  position: absolute;
  left: 50%;
  top: calc(50% - 21px);
  width: 9px;
  height: 21px;
  margin-left: -4.5px;
  border-radius: 5px 5px 3px 3px;
  background: var(--steel);
  box-shadow: 0 2px 3px rgba(0, 0, 0, .6);
  transform-origin: 50% 100%;
  transform: scaleY(-.9);
  transition: transform 380ms var(--ease-clack);
}
.ia-lever.is-up .ia-lever__arm { transform: scaleY(.9); }
/* LED del core: blu quando la leva è su, ambra mentre aspetta una persona (luce in opacità) */
.ia-lever__led {
  --led-blur: 12px;
  --led-halo: rgba(140, 192, 230, .9);
  position: absolute;
  top: 6px;
  right: 6px;
  width: 6px;
  height: 6px;
}
.ia-lever.is-up .ia-lever__led { --led-lit: 1; }
.ia-lever.is-wait .ia-lever__led { --led-lit: 1; --led-color: var(--scintilla); --led-ring: rgba(224, 160, 80, .16); --led-halo: rgba(224, 160, 80, .9); }
.ia-check__state {
  display: grid;
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .1em;
  line-height: 1.5;
  text-transform: uppercase;
}
/* i due stati si danno il cambio: quello che esce sparisce in fretta, quello che entra
   arriva dopo e sale di 3 px; mai due scritte sovrapposte */
.ia-check__state > span {
  grid-area: 1 / 1;
  transition: opacity .3s var(--ease-out) .16s, transform .3s var(--ease-out) .16s;
}
.ia-check__wait { opacity: 0; transform: translateY(3px); color: var(--scintilla); }
.ia-check__done { color: var(--blu); }
.ia-check.is-wait .ia-check__wait { opacity: 1; transform: none; }
.ia-check:not(.is-wait) .ia-check__wait,
.ia-check.is-wait .ia-check__done,
.ia-check.is-off .ia-check__done { opacity: 0; transform: translateY(3px); transition: opacity .14s linear, transform .14s linear; }

/* stazione 3: il registro */
.ia-reg { display: block; }
.ia-reg__list {
  list-style: none;
  height: 132px;
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .05em;
  line-height: 1.45;
  color: var(--fg-2);
}
.ia-reg__list li {
  display: grid;
  grid-template-columns: 6px auto minmax(0, 1fr);
  align-items: baseline;
  gap: 8px;
  height: 44px;
  padding: 7px 0;
  border-top: 1px solid var(--line);
  overflow: hidden;
}
.ia-reg__list .led { width: 6px; height: 6px; transform: translateY(-1px); }
.ia-reg__list time { color: var(--fg-3); }

@media (max-width: 860px) {
  .ia-line__stations { grid-template-columns: minmax(0, 1fr); }
  .ia-station { padding: 0 0 0 46px; }
  .ia-port { left: 16px; top: 50%; bottom: auto; margin: -8px 0 0 -8px; }
  .ia-seg {
    left: 15px;
    top: 50%;
    bottom: auto;
    width: 2px;
    height: calc(100% + var(--g));
    background: repeating-linear-gradient(180deg, var(--line-strong) 0 6px, transparent 6px 12px);
  }
  .ia-seg__fill { transform-origin: 50% 0; }
  .ia-station__obj { min-height: 0; }
}

/* ---------- Dati trattati con cura (alluminio) ---------- */
.ia-dati__split { align-items: start; }
.ia-care { list-style: none; display: grid; gap: 20px; margin-top: 8px; }
.ia-care li { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 16px; }
.ia-care .led { margin-top: 7px; }
.ia-care p { margin-top: 4px; color: var(--fg-2); font-size: var(--fs-small); }
/* i LED si accendono uno dopo l'altro quando l'elenco entra (luce del core, in opacità) */
.js-motion .ia-care:not(.is-in) .led.is-on { --led-lit: 0; }
.ia-care.is-in .led { transition-delay: calc(var(--i, 0) * 160ms + 350ms); }

.ia-matrix { margin: 0; }
.ia-matrix__cap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 14px;
  margin-bottom: 18px;
}
.ia-matrix__cap .plate__code { margin: 0; }
.ia-matrix__table { width: 100%; border-collapse: collapse; }
.ia-matrix__table thead th {
  padding: 0 4px 12px;
  font-family: var(--font-mono);
  font-size: .58rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: center;
  color: var(--fg-3);
}
.ia-matrix__table tbody th {
  padding: 14px 10px 14px 0;
  border-top: 1px solid var(--line);
  font-size: .95rem;
  font-weight: 600;
  text-align: left;
  line-height: 1.25;
}
.ia-matrix__table td { padding: 14px 4px; border-top: 1px solid var(--line); text-align: center; }
.ia-matrix__table tbody tr:last-child th { color: var(--accent); }
.ia-dot {
  display: inline-block;
  width: 14px;
  height: 14px;
  vertical-align: middle;
  border-radius: 50%;
  border: 1.5px dashed rgba(21, 24, 26, .38);
}
.ia-dot.is-yes {
  border: 0;
  background: var(--blu-scuro);
  box-shadow: 0 0 0 3px rgba(47, 110, 158, .16), 0 0 10px rgba(47, 110, 158, .45);
}
.js-motion .ia-matrix:not(.is-in) .ia-dot.is-yes { transform: scale(0); }
.ia-matrix.is-in .ia-dot.is-yes { transition: transform .5s var(--ease-clack) calc(var(--d, 0ms) + 500ms); }
.ia-matrix__legend {
  display: flex;
  gap: 20px;
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.ia-matrix__legend > span { display: inline-flex; align-items: center; gap: 8px; }
.ia-matrix__legend .ia-dot { width: 10px; height: 10px; }
@media (max-width: 480px) {
  .ia-matrix__table thead th { font-size: .5rem; letter-spacing: .04em; }
  .ia-matrix__table tbody th { font-size: .85rem; }
}

/* ---------- Dall'officina: il principio, senza casi ---------- */
.ia-officina .section-head .link-arrow { justify-self: start; }
.ia-senza {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}
.ia-senza__side {
  padding-left: clamp(0px, 3vw, 44px);
  border-left: 1px solid var(--line);
}
/* il motto chiude la colonna del testo: le due colonne restano in equilibrio */
.ia-senza__motto {
  margin-top: 28px;
  max-width: 20em;
  font-family: var(--font-display);
  font-stretch: 115%;
  font-weight: 720;
  font-size: clamp(1.35rem, 2.2vw, 1.9rem);
  line-height: 1.1;
  letter-spacing: -.01em;
  text-wrap: balance;
}

/* il pannello: due interruttori fermi del core, «sì» acceso e «no» spento */
.ia-switches { margin: 0; display: grid; gap: 16px; }
.ia-switches__cap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 14px;
}
.ia-switches__title {
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.ia-switches__list { list-style: none; display: grid; gap: 14px; }
.ia-switches .toggle__label { display: grid; gap: 4px; }
.ia-switches__task { font-size: .95rem; line-height: 1.35; }
.ia-switches__state {
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.ia-switches .toggle.is-on .ia-switches__state { color: var(--blu); }
/* «no»: il LED non ha luce, solo il bordo tratteggiato */
.ia-switches .toggle:not(.is-on) .led { background: transparent; box-shadow: inset 0 0 0 1px transparent; outline: 1px dashed rgba(195, 202, 208, .5); outline-offset: 0; }
/* quando la targa entra, la leva del «sì» scatta e il suo LED si accende (transform e opacità) */
.js-motion .ia-senza:not(.is-in) .toggle.is-on .toggle__lever { transform: scaleY(-.9); }
.js-motion .ia-senza:not(.is-in) .toggle.is-on .led { --led-lit: 0; }
.ia-senza.is-in .toggle.is-on .toggle__lever { transition-delay: 650ms; }
.ia-senza.is-in .toggle.is-on .led { transition-delay: 820ms; }

@media (max-width: 760px) {
  .ia-senza { grid-template-columns: minmax(0, 1fr); }
  .ia-senza__side { padding: 22px 0 0; border-left: 0; border-top: 1px solid var(--line); }
}

/* ---------- Domande ---------- */
.ia-faq { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.ia-faq .section-head { margin-bottom: 0; }
@media (max-width: 960px) { .ia-faq { grid-template-columns: minmax(0, 1fr); } }

/* Griglie intermedie: quattro compiti in fila sono troppo stretti sotto i 1180 px. */
@media (min-width: 641px) and (max-width: 1180px) {
  .ia-uses { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}