/* ============================================================
   bAIt Agent — schermata d'accesso alla presentazione.
   Si appoggia a style.css (token, font, pulsanti, marchio) e ne
   riprende il registro: cornice con squadre agli angoli, righe
   capello, un solo accento. Nessuno script: solo moduli.
   ============================================================ */
.gate-body {
  min-height: 100svh; margin: 0;
  background:
    radial-gradient(1100px 520px at 72% -6%, var(--signal-sf), transparent 68%),
    var(--paper);
}
.gate {
  min-height: 100svh; display: grid; place-content: center; justify-items: center;
  gap: 22px; padding: 40px 16px;
}
.gate-card {
  position: relative; width: min(100%, 480px);
  background: var(--panel); border: 1px solid var(--rule-2);
  padding: clamp(28px, 5vw, 44px) clamp(22px, 5vw, 42px);
  display: grid; gap: 18px;
}
.gate-card::before, .gate-card::after,
.gate-card > .corner::before, .gate-card > .corner::after {
  content: ""; position: absolute; width: var(--tick); height: var(--tick);
  border: 2px solid var(--signal); pointer-events: none;
}
.gate-card > .corner { position: absolute; inset: 0; pointer-events: none; }
.gate-card::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.gate-card::after  { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
.gate-card > .corner::before { top: -1px; right: -1px; border-left: 0; border-bottom: 0; }
.gate-card > .corner::after  { bottom: -1px; left: -1px; border-right: 0; border-top: 0; }

.gate-brand { margin: 0 0 4px; }

.gate-from {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px; border: 1px solid var(--rule); border-radius: var(--r); background: var(--paper-2);
}
.gate-from p { margin: 0; display: grid; gap: 2px; line-height: 1.35; }
.gate-from .mono { color: var(--graphite); font-size: 11px; }
.gate-from strong { font-family: var(--f-display); font-size: 16.5px; }
.gate-role { color: var(--graphite); font-size: 14px; }

.gate h1 { font-size: clamp(27px, 4.4vw, 34px); margin: 4px 0 0; max-width: none; }
.gate-lead { margin: -6px 0 0; color: var(--ink-2); font-size: 16.5px; line-height: 1.5; }

.gate-alert {
  margin: 0; padding: 11px 14px; border-radius: var(--r);
  border: 1px solid var(--cut); background: var(--cut-sf); color: var(--ink); font-size: 15px;
}

.gate-sso { display: grid; gap: 10px; margin-top: 4px; }
.gate-btn {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 50px; padding: 0 18px; border-radius: var(--r);
  border: 1px solid var(--rule-2); background: var(--paper-2); color: var(--ink);
  font-family: var(--f-body); font-size: 16px; font-weight: 600; text-decoration: none;
  transition: border-color .16s, background .16s;
}
a.gate-btn:hover { border-color: var(--signal); background: var(--signal-sf); }
.gate-ico { width: 20px; height: 20px; flex: none; }
.gate-btn.is-off { opacity: .55; cursor: not-allowed; }
.gate-btn small {
  margin-left: 4px; font-family: var(--f-mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--graphite);
}

.gate-or { margin: 2px 0; display: flex; align-items: center; gap: 12px; color: var(--graphite); font-size: 13.5px; }
.gate-or::before, .gate-or::after { content: ""; flex: 1; height: 1px; background: var(--rule-2); }

.gate-form { display: grid; gap: 8px; margin: 0; }
.gate-label { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--graphite); }
.gate-row { display: flex; gap: 10px; flex-wrap: wrap; }
.gate-input {
  flex: 1 1 200px; min-width: 0; min-height: 50px; padding: 0 14px;
  border: 1px solid var(--rule-2); border-radius: var(--r);
  background: var(--paper); color: var(--ink); font: inherit; font-size: 16.5px;
}
.gate-input::placeholder { color: var(--graphite); opacity: .8; }
.gate-input:focus { outline: 2px solid var(--signal); outline-offset: 1px; border-color: var(--signal); }
.gate-row .btn { min-height: 50px; flex: 0 0 auto; }
.gate-code { font-family: var(--f-mono); font-size: 22px; letter-spacing: .3em; text-align: center; }
.gate-sent { margin: 0 0 6px; color: var(--ink-2); font-size: 15.5px; line-height: 1.5; }
.gate-sent strong { color: var(--ink); overflow-wrap: anywhere; }
.gate-links { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.gate-links form { margin: 0; }
.gate-links .pres-link { font-size: 15px; }

.gate-privacy {
  margin: 4px 0 0; padding-top: 16px; border-top: 1px dashed var(--rule-2);
  color: var(--graphite); font-size: 13px; line-height: 1.5;
}
.gate-privacy a { color: var(--signal); }
.gate-foot { margin: 0; color: var(--graphite); font-size: 12.5px; text-align: center; }

@media (max-width: 480px) {
  .gate-row .btn { flex: 1 1 100%; justify-content: center; }
  /* "in attivazione" va sotto il nome, non spezza la riga */
  .gate-btn { flex-wrap: wrap; row-gap: 2px; padding-block: 9px; }
  .gate-btn small { flex-basis: 100%; margin-left: 0; text-align: center; }
}

/* se il codice non arriva: una persona vera a cui chiedere */
.gate-help { margin: 0; color: var(--ink-2); font-size: 14.5px; line-height: 1.5; }
.gate-help a { color: var(--signal); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--signal) 45%, transparent); }
.gate-help a:hover { border-bottom-color: var(--signal); }