.pagina-accesso {
  color-scheme: only light;
  --fondo: #e9e9e9;
  --carta: #fff;
  --inchiostro: #1c1f1c;
  --inchiostro-rgb: 28, 31, 28;
  --secondario: rgba(var(--inchiostro-rgb), 0.78);
  --etichetta: rgba(var(--inchiostro-rgb), 0.6);
  --filo-campo: rgba(var(--inchiostro-rgb), 0.4);
  --filo: rgba(var(--inchiostro-rgb), 0.18);
  --rosso-errore: #c62828;
  --font: "neue-haas-grotesk-display", "Neue Haas Casa", "Inter", "Helvetica Neue", helvetica, arial, sans-serif;
  --vista-base: 1440;
  --corpo: clamp(20px, calc(30px * 100vw / (var(--vista-base) * 1px)), 40px);
  --interlinea: clamp(24px, calc(34px * 100vw / (var(--vista-base) * 1px)), 45px);
  --testo: 22.4px;
  --testo-interlinea: 28px;
  --nota: 18px;
  --nota-interlinea: 24px;
  --griglia-gola: 12px;
  --bordo: max(16px, 1.4vw);
  --logo-alto: 44px;
  --testa-sito: calc(var(--logo-alto) + var(--bordo) * 2);

  margin: 0;
  background: var(--fondo);
  color: var(--inchiostro);
  font-family: var(--font);
  font-weight: 400;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
@media (max-width: 991px) {
  .pagina-accesso { --corpo: 20px; --interlinea: 24px; --testo: 17px; --testo-interlinea: 22px; --nota: 16px; --nota-interlinea: 22px; }
}
@media (max-width: 767px) { .pagina-accesso { --logo-alto: 34px; } }
.pagina-accesso *, .pagina-accesso *::before, .pagina-accesso *::after { box-sizing: border-box; }
.pagina-accesso [hidden] { display: none !important; }
.pagina-accesso :is(a, button, input):focus-visible { outline: 2px solid var(--inchiostro); outline-offset: 3px; }
html { scroll-padding-top: calc(44px + max(16px, 1.4vw) * 3); }
@media (max-width: 767px) { html { scroll-padding-top: calc(34px + max(16px, 1.4vw) * 3); } }

.testa-accesso {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: var(--bordo);
  font-size: 14px; font-weight: 500; line-height: 1.45;
  background: linear-gradient(to bottom, var(--carta) 45%, rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
}
.testa-accesso > * { pointer-events: auto; }
.marchio { display: flex; align-items: center; }
.marchio img { display: block; height: var(--logo-alto); width: auto; }
.testa-accesso__voci a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; text-decoration: none; }
@media (hover: hover) { .testa-accesso__voci a:hover { opacity: 0.6; } }

.accesso { padding: calc(var(--testa-sito) + var(--bordo) * 2) var(--bordo) clamp(64px, 8vw, 120px); }
.accesso-blocco {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--griglia-gola);
  padding: clamp(28px, 3.5vw, 48px) 0;
  border-top: 1px solid var(--filo);
}
.accesso-blocco h1, .accesso-blocco h2 {
  grid-column: 1 / 3;
  margin: 0;
  font-size: var(--corpo); line-height: var(--interlinea);
  font-weight: 500; letter-spacing: -0.01em;
}
.accesso-blocco__corpo { grid-column: 3 / 6; min-width: 0; }
.accesso-testo { margin: 0 0 20px; font-size: var(--testo); line-height: var(--testo-interlinea); color: var(--secondario); max-width: 62ch; }
.accesso-avviso { margin: 0 0 20px; font-size: var(--testo); line-height: var(--testo-interlinea); font-weight: 500; max-width: 62ch; }

.accesso-modulo { display: grid; gap: 20px; }
.accesso-pila { display: flex; flex-direction: column; gap: 8px; }
.accesso-pila__etichetta { font-size: var(--nota); line-height: var(--nota-interlinea); color: var(--etichetta); }
.accesso-pila input {
  width: 100%; min-height: 48px; margin: 0;
  padding: 10px 14px;
  border: 1px solid var(--filo-campo); border-radius: 8px;
  background: var(--carta); color: var(--inchiostro);
  font: inherit; font-size: var(--nota); line-height: var(--nota-interlinea); font-weight: 500;
}
.accesso-pila input:focus { border-color: var(--inchiostro); outline: none; }
.accesso-pila input[aria-invalid="true"] { border-color: var(--rosso-errore); box-shadow: 0 0 0 1px var(--rosso-errore); }
.accesso-errore { margin: -8px 0 0; font-size: var(--nota); line-height: var(--nota-interlinea); font-weight: 500; color: var(--rosso-errore); }
.accesso-riga { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.accesso-esito { margin: 0; font-size: var(--nota); line-height: var(--nota-interlinea); color: var(--etichetta); }

.accesso-tasto {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; margin: 0;
  padding: 0.55em 1.1em;
  border: 0; border-radius: 999px;
  background: var(--inchiostro); color: var(--carta);
  font: inherit; font-size: var(--nota); line-height: 1.2; font-weight: 500;
  cursor: pointer; white-space: nowrap;
  transition: opacity 0.15s ease;
}
@media (hover: hover) { .accesso-tasto:hover { opacity: 0.75; } }
.accesso-tasto--bordo { padding: 0; border-radius: 0; background: none; color: var(--inchiostro); text-decoration: underline; text-underline-offset: 0.14em; }
@media (hover: hover) { .accesso-tasto--bordo:hover { opacity: 0.6; } }
.accesso-tasto:disabled, .accesso-tasto[aria-disabled="true"] { opacity: 0.45; cursor: default; }
a.accesso-tasto { text-decoration: none; }
a.accesso-tasto--bordo { text-decoration: underline; }

.accesso-google {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; margin: 0; padding: 10px 18px;
  border: 1px solid var(--filo-campo); border-radius: 999px;
  background: var(--carta); color: var(--inchiostro);
  font: inherit; font-size: var(--nota); line-height: 1.2; font-weight: 500;
  cursor: pointer; white-space: nowrap;
  transition: border-color 0.15s ease;
}
@media (hover: hover) { .accesso-google:hover { border-color: var(--inchiostro); } }
.accesso-google__marchio { flex: none; width: 18px; height: 18px; }
.accesso-oppure { margin: 16px 0; font-size: var(--nota); line-height: var(--nota-interlinea); color: var(--etichetta); }

.accesso-passo { display: grid; gap: 16px; }
.accesso-blocco .accesso-passo__titolo {
  grid-column: auto; margin: 0;
  font-size: var(--testo); line-height: var(--testo-interlinea); font-weight: 500; letter-spacing: 0;
}
.accesso-passo__titolo:focus { outline: none; }
.accesso-passo:not([hidden]) + .accesso-passo { margin-top: 28px; }
.accesso-fuori { margin: 24px 0 0; }
.accesso-passo .accesso-testo, .accesso-passo .accesso-avviso { margin: 0; }
.accesso-testo--piccolo { font-size: var(--nota); line-height: var(--nota-interlinea); }
.accesso-errore--solo { margin: 0 0 20px; }
.accesso-esito[data-attesa] { margin: 0 0 20px; }
.accesso-verifica { min-height: 65px; }
.accesso-pila input.accesso-codice { font-size: 22px; letter-spacing: 0.25em; font-variant-numeric: tabular-nums; max-width: 240px; }
.accesso-qr {
  display: block; width: 200px; height: 200px; padding: 12px; box-sizing: content-box;
  background: var(--carta); border: 1px solid var(--filo); border-radius: 8px;
}
.accesso-chiave { margin: 0; }
.accesso-chiave__testo {
  display: inline-block; padding: 10px 14px; border-radius: 8px; background: var(--carta); border: 1px solid var(--filo);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: var(--nota); line-height: var(--nota-interlinea);
  letter-spacing: 0.04em; overflow-wrap: anywhere; user-select: all; -webkit-user-select: all;
}

@media (max-width: 991px) {
  .accesso-blocco h1, .accesso-blocco h2, .accesso-blocco__corpo { grid-column: 1 / 7; }
  .accesso-blocco h1, .accesso-blocco h2 { margin-bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) { .accesso-tasto, .accesso-google { transition: none; } }