/* ===============================================================
   ACCESSO APPROVATO — la finestra che compare quando si lascia
   la mail. Stesso terminale verde del carrello: il sistema che ti
   fa entrare e' lo stesso che incassa.

   Vale su tutti e tre i fogli (home blu, libreria retro, lattine),
   quindi i colori sono scritti per esteso: le variabili non sono
   le stesse nei tre mondi.

   La finestra la costruisce `newsletter.js`, non sta nel markup di
   nessuna pagina: e' una sola, e si aggiunge da sola dove serve.
   =============================================================== */
.accesso-velo{
  position:fixed;inset:0;z-index:95;display:none;
  align-items:center;justify-content:center;padding:16px;
  background:rgba(0,7,3,.9);
}
.accesso-velo.show{display:flex}
.accesso-velo canvas.pioggia{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5}

.accesso{
  position:relative;z-index:1;width:min(620px,100%);background:#04140A;padding:3px;
  border:2px solid;border-color:#2BD873 #010804 #010804 #2BD873;
  box-shadow:inset 1px 1px 0 #0C2E1A, inset -1px -1px 0 #010804,
             0 0 0 1px rgba(70,255,140,.18), 0 0 70px rgba(70,255,140,.26);
}
.accesso::after{             /* le righe del tubo: e' sempre uno schermo */
  content:'';position:absolute;inset:0;z-index:3;pointer-events:none;
  background:repeating-linear-gradient(180deg, rgba(0,0,0,.22) 0 1px, rgba(0,0,0,0) 1px 3px);
}
.accesso .barra{
  display:flex;align-items:center;gap:8px;padding:5px 5px 5px 8px;
  background:linear-gradient(90deg,#063D1E,#17A355);color:#CFFFE2;
}
.accesso .barra b{
  flex:1;font-family:'Silkscreen','Archivo',monospace;font-weight:700;
  font-size:clamp(10px,2.4vw,12px);letter-spacing:.08em;text-transform:uppercase;
  text-shadow:0 0 8px rgba(70,255,140,.8);
}
.accesso .barra button{
  width:21px;height:19px;flex:none;cursor:pointer;padding:0;
  background:#04140A;color:#CFFFE2;font-family:'Silkscreen','Archivo',monospace;font-size:10px;
  border:2px solid;border-color:#2BD873 #010804 #010804 #2BD873;
}

.accesso .dentro{
  display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);
  gap:clamp(12px,2.6vw,22px);align-items:end;
  padding:clamp(14px,3vw,24px) clamp(14px,3vw,24px) clamp(10px,2vw,16px);
}
@media (max-width:560px){
  .accesso .dentro{grid-template-columns:minmax(0,104px) minmax(0,1fr);align-items:center}
}
.accesso .ashtan{
  width:100%;height:auto;display:block;align-self:end;
  filter:drop-shadow(0 0 26px rgba(70,255,140,.45)) drop-shadow(0 10px 20px rgba(0,0,0,.6));
}
.accesso h2{
  margin:0;color:#46FF8C;
  font-family:'Archivo',system-ui,sans-serif;font-weight:800;
  font-size:clamp(23px,5.6vw,42px);line-height:1.02;letter-spacing:.02em;
  text-transform:uppercase;text-wrap:balance;
  text-shadow:0 0 16px rgba(70,255,140,.65);
}
.accesso .tre{
  margin:10px 0 0;color:#9DFFC4;font-size:clamp(13px,2.6vw,15px);font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;text-indent:.18em;
}
.accesso .dove{
  margin:6px 0 0;color:#4FBF82;font-size:13px;overflow-wrap:anywhere;
}
.accesso .fondo{display:flex;justify-content:center;padding:0 clamp(14px,3vw,24px) clamp(14px,3vw,22px)}
.accesso .fondo button{
  cursor:pointer;padding:12px 34px;
  background:#0A3A1E;color:#9DFFC4;
  font-family:'Silkscreen','Archivo',monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  border:2px solid;border-color:#2BD873 #010804 #010804 #2BD873;
  box-shadow:inset 1px 1px 0 #15713C, inset -1px -1px 0 #010804, 0 0 22px rgba(70,255,140,.3);
  text-shadow:0 0 9px rgba(70,255,140,.6);
}
.accesso button:focus-visible{outline:2px solid #46FF8C;outline-offset:2px}
.accesso .fondo button:active{border-color:#010804 #2BD873 #2BD873 #010804;box-shadow:none}
.accesso .stato{
  display:flex;gap:6px;flex-wrap:wrap;padding:4px;background:#04140A;
}
.accesso .stato span{
  flex:1;min-width:92px;padding:3px 8px;color:#5FD093;
  font-family:'Silkscreen','Archivo',monospace;font-size:10.5px;letter-spacing:.06em;
  border:1px solid;border-color:#0C2E1A #2BD873 #2BD873 #0C2E1A;
}

/* ---------- la stessa finestra, ma come pagina intera ----------
   `grazie.html` non e' un avviso sopra al sito: e' dove si arriva
   tornando da Stripe. Stessa cornice, nessun velo dietro. */
.accesso.pagina{width:min(640px,100%);margin:clamp(18px,5vh,54px) auto}
.accesso.pagina .barra b{font-size:clamp(10px,2.4vw,12px)}
.accesso .fondo.ritorni{flex-wrap:wrap;gap:10px 12px}
.accesso .btn-term{
  cursor:pointer;padding:12px 22px;text-decoration:none;display:inline-block;
  background:#0A3A1E;color:#9DFFC4;
  font-family:'Silkscreen','Archivo',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  border:2px solid;border-color:#2BD873 #010804 #010804 #2BD873;
  box-shadow:inset 1px 1px 0 #15713C, inset -1px -1px 0 #010804, 0 0 22px rgba(70,255,140,.3);
  text-shadow:0 0 9px rgba(70,255,140,.6);
}
.accesso .btn-term:active{border-color:#010804 #2BD873 #2BD873 #010804;box-shadow:none}
.accesso .stato a{color:#7CFFB2}

/* ebook scaricabili in grazie.html (26/10/2026) */
.accesso .ebook{display:flex;flex-direction:column;gap:10px;padding:0 20px 18px}
.accesso .ebook ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.accesso .ebook .nota{margin:0;font-size:12px;line-height:1.55;opacity:.8}