/* Per chi (APPROVATO.md §8): cinque tasti «Che lavoro fai?» e sotto la storia del lavoro scelto: oggi, con lo
   strumento, cosa ci guadagni e dove aiuta l'AI. Ogni storia è una scheda di vetro; stanno una sopra l'altra nello
   stesso posto, così sono alte quanto la più lunga e cambiando lavoro niente salta. Cambiando lavoro la scheda vecchia
   esce di lato e la nuova entra dall'altra parte (js/per-chi.js).
   Tasti e schede stanno in un blocco solo («tuo-lavoro»): nel passaggio fra le pagine arrivano insieme. */
.tuo-lavoro {
  margin-top: 64px;
}
.scegli {
  display: flex;
  justify-content: space-between;
}
.tasto-tipo {
  height: 58px;
  padding: 0 22px 0 8px;
  border: 0;
  border-radius: 29px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: inherit;
  font-size: 17px;
  color: var(--text-2);
  cursor: pointer;
  /* i tasti non scelti: vetro quasi invisibile, più chiaro verso i lati, col bordo spesso di una lastra tagliata (luce
     in alto, un filo d'ombra in basso); lo scelto è bianco pieno e così si distingue bene (scelte di Leo) */
  -webkit-backdrop-filter: var(--tasto-sfoca);
  backdrop-filter: var(--tasto-sfoca);
  background:
    radial-gradient(ellipse 72% 130% at 50% 50%, var(--bianco-0) 55%, var(--bianco-35) 100%),
    linear-gradient(160deg, var(--bianco-14), var(--bianco-0));
  box-shadow:
    inset 0 2px 0 var(--bianco-95),
    inset 0 -2px 0 var(--glass-shade),
    inset 3px 4px 5px -2px var(--bianco-95),
    inset -3px -5px 8px -3px var(--icona-ombra),
    inset 0 0 0 1px var(--bianco-60),
    0 0 0 1px var(--tab-line),
    0 10px 24px -14px var(--glass-shade);
}
.tasto-tipo[aria-selected='true'] {
  color: var(--text);
  background: var(--bianco);
  box-shadow:
    var(--voce-aperta-ombra),
    0 14px 28px -14px var(--glass-shade);
}
.tasto-tipo .n-icon {
  width: 42px;
  height: 42px;
}
.tasto-tipo .n-icon svg {
  width: 21px;
  height: 21px;
}

.racconto {
  margin-top: 24px;
  display: grid;
}
.storia {
  grid-area: 1 / 1;
  border-radius: var(--raggio-lastra);
  padding: 56px 64px;
  display: grid;
  grid-template-columns: 1fr 520px;
  gap: 64px;
  visibility: hidden;
}
/* la scelta, e la vecchia finché esce */
.storia.scelta,
.storia.esce {
  visibility: visible;
}
.storia .numero {
  display: block;
  font-family: var(--mono);
  font-size: 16.5px;
  font-weight: 600;
  color: var(--data-scuro);
}
.storia h2 {
  margin-top: 10px;
  font-size: 38px;
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.025em;
}
.riga-ai {
  margin-top: 26px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 17.5px;
  line-height: 1.45;
  color: var(--text-2);
}
.riga-ai svg {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  --tratto: var(--ai);
}

/* I tre passi, uniti da un filo che passa dietro le icone */
.passi {
  position: relative;
  display: grid;
  gap: 24px;
}
.passi::before {
  content: '';
  position: absolute;
  left: 24px;
  top: 32px;
  bottom: 32px;
  width: 1.6px;
  background: var(--filo);
}
.passo {
  position: relative;
  display: grid;
  grid-template-columns: 50px 1fr;
  gap: 20px;
  font-size: 19px;
  line-height: 1.5;
  color: var(--text-2);
}
.passo .n-icon {
  width: 50px;
  height: 50px;
}
.passo .n-icon svg {
  width: 24px;
  height: 24px;
}
.passo .numero {
  margin-bottom: 4px;
}
.etichette {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.etichette span {
  height: 38px;
  padding: 0 16px;
  border-radius: 19px;
  display: inline-flex;
  align-items: center;
  font-size: 16px;
  color: var(--text);
  background: var(--bianco-70);
  box-shadow: 0 0 0 1px var(--tab-line);
}

.invito {
  margin-top: 56px;
}