.verifica {
    --blue-600: #2B53A0;
    --navy-900: #112140;
    --blue-50:  #f4f8ff;
    --gold-600: #956b17;
    --gold-500: #c9962b;
    --gold-50:  #fff9e6;
    --ink:      #0a2540;
    --slate-600:#526077;
    --slate-400:#64748b;
    --line:     #e3e9f3;
    --rosso:    #a4243b;
    --rosso-50: #fdf3f4;
    --verde:    #1f6b45;
    --verde-50: #f1f8f4;

    max-width: 820px;
    margin: 0 auto;
    padding: 3rem 1.25rem 4rem;
    color: var(--ink);
    font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.7;
  }

  .verifica h1, .verifica h2 { font-family: "Fraunces", "Roboto Slab", Georgia, serif; line-height: 1.2; }
  .verifica h1 { font-size: clamp(28px, 4.4vw, 42px); margin: .4rem 0 1rem; }
  .verifica h2 { font-size: clamp(20px, 2.6vw, 26px); margin: 0 0 .9rem; }
  .verifica a { color: var(--blue-600); }
  .verifica p { margin: 0 0 1rem; }

  .verifica__occhiello {
    text-transform: uppercase; letter-spacing: .12em; font-size: 13px;
    font-weight: 700; color: var(--gold-600); margin: 0;
  }
  .verifica__sommario { font-size: 1.08rem; color: var(--slate-600); }

  /* L'avviso in cima e' la sola cosa che serve a chi arriva spaventato:
     il numero da chiamare, e l'invito a non mandare niente prima. */
  .verifica__allarme {
    background: var(--gold-50);
    border: 1px solid #f0dca8;
    border-left: 4px solid var(--gold-500);
    border-radius: 10px;
    padding: 1.1rem 1.25rem;
    margin: 1.5rem 0 2.5rem;
  }
  .verifica__allarme p { margin: 0; }

  .verifica__blocco { margin: 0 0 2.75rem; }
  .verifica__nota { color: var(--slate-600); font-size: .96rem; }

  /* Tre per riga: sei persone fanno due file piene. Con `auto-fill` ne
     entravano cinque e la sesta restava sola in fondo, che sembra un
     errore proprio dove la pagina promette un elenco completo. */
  .squadra { list-style: none; display: grid; gap: 1rem; padding: 0; margin: 1.25rem 0 1.75rem;
             grid-template-columns: repeat(3, 1fr); }
  .squadra__persona {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: .2rem; padding: 1rem .75rem; background: #fff;
    border: 1px solid var(--line); border-radius: 12px;
  }
  /* IL TONDO E' IL CONTENITORE, non l'immagine.
     I ritratti hanno intorno una cornice azzurra di 12 pixel su 600 (il 2%
     per lato) e dentro un ritaglio tondo si vede come un anello blu.
     Stringere l'IMMAGINE tonda non serve a niente: cresce anche il cerchio,
     e il bordo con lui. Va stretta dentro una maschera che non si muove —
     e' quello che fa il foglio di `chi-siamo` col suo `.member__avatar`. */
  .squadra__ritratto {
    display: block; flex: none; width: 76px; height: 76px;
    border-radius: 50%; overflow: hidden; background: #eef2f9; margin-bottom: .4rem;
  }
  .squadra__ritratto img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.14); }
  /* Il ritratto puo' mancare: chi e' appena entrato la foto buona non ce
     l'ha ancora, e il nome nell'elenco conta piu' della faccia. */
  .squadra__iniziali {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%;
    background: #eef2f9; color: var(--blue-600);
    font-family: "Fraunces", "Roboto Slab", Georgia, serif; font-size: 24px; font-weight: 600;
  }
  .squadra__nome { font-weight: 700; line-height: 1.3; }
  .squadra__ruolo { font-size: .85rem; color: var(--slate-400); line-height: 1.35; }
  .squadra__persona a { font-size: .85rem; margin-top: .3rem; }

  .controllo {
    background: var(--blue-50); border: 1px solid var(--line);
    border-radius: 12px; padding: 1.25rem; margin: 1.5rem 0;
  }
  .controllo__aiuto { font-size: .92rem; color: var(--slate-600); margin: .35rem 0 .8rem; }
  .controllo__riga { display: flex; gap: .5rem; flex-wrap: wrap; }
  .controllo input {
    flex: 1 1 220px; min-width: 0; padding: .7rem .85rem; font-size: 1rem;
    border: 1px solid #c9d5ea; border-radius: 8px; background: #fff; color: var(--ink);
  }
  .controllo input:focus { outline: 2px solid var(--blue-600); outline-offset: 1px; }
  .controllo button {
    padding: .7rem 1.4rem; font-size: 1rem; font-weight: 700; cursor: pointer;
    color: #fff; background: var(--blue-600); border: 0; border-radius: 8px;
  }
  .controllo button:hover { background: #22417f; }
  .controllo__esito:empty { display: none; }
  .controllo__esito { margin: .9rem 0 0; padding: .8rem 1rem; border-radius: 8px; font-size: .96rem; }
  .controllo__esito--si { background: var(--verde-50); border: 1px solid #cfe6d8; color: var(--verde); }
  .controllo__esito--no { background: var(--rosso-50); border: 1px solid #eccdd2; color: var(--rosso); }
  .controllo__esito--si a, .controllo__esito--no a { color: inherit; text-decoration: underline; }

  .recapiti { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: .6rem; }
  .recapiti li {
    background: #fff; border: 1px solid var(--line); border-radius: 10px;
    padding: .75rem 1rem; font-size: .98rem;
  }
  .recapiti span {
    display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .1em;
    color: var(--slate-400); font-weight: 700; margin-bottom: .15rem;
  }

  .mai { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: .75rem; }
  .mai li {
    background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--rosso);
    border-radius: 10px; padding: .85rem 1.1rem;
  }

  .passi { padding-left: 1.25rem; display: grid; gap: .6rem; }

  .verifica__perche { background: var(--blue-50); border-radius: 14px; padding: 1.5rem 1.5rem .5rem; }

  .verifica__azione {
    display: inline-block; padding: .8rem 1.4rem; margin: 0 .5rem .75rem 0;
    background: var(--blue-600); color: #fff !important; font-weight: 700;
    border-radius: 8px; text-decoration: none;
  }
  .verifica__azione:hover { background: #22417f; }
  .verifica__azione--piano { background: #fff; color: var(--blue-600) !important; border: 1px solid var(--blue-600); }
  .verifica__azione--piano:hover { background: var(--blue-50); }
  .verifica__chiusura { display: flex; flex-wrap: wrap; }

  @media (max-width: 600px) {
    .verifica { padding: 2rem 1rem 3rem; }
    .squadra { grid-template-columns: repeat(2, 1fr); }
    .verifica__azione { display: block; text-align: center; margin-right: 0; }
  }