/* Login e attivazione: la pagina occupa tutta la viewport, come l'app. */
html, body {
  min-height: 100%;
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
  color: #070707;
  background: #fff;
}
body {
  min-height: 100dvh;
  padding: max(24px, env(safe-area-inset-top, 0px))
    max(24px, env(safe-area-inset-right, 0px))
    max(24px, env(safe-area-inset-bottom, 0px))
    max(24px, env(safe-area-inset-left, 0px));
}
body > .card, body > main {
  width: 100%;
  max-width: 420px;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: #fff;
  text-align: left;
}
.logo, .brand { margin-bottom: 40px; }
.logo img, .brand img {
  display: block;
  width: clamp(140px, 25vw, 190px);
  height: auto;
}
h1 {
  color: #070707;
  font-size: clamp(28px, 4.2vmin, 38px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.045em;
  margin-bottom: 12px;
}
.sub, main > p { color: #5b6369; font-size: 15px; line-height: 1.5; }
.sub { margin-bottom: 28px; }
label { color: #111; font-size: 13px; font-weight: 600; }
input {
  min-height: 48px;
  border: 1px solid #d9dcda;
  border-radius: 9px;
  background: #fff;
  color: #111;
  font-size: 16px;
}
input:focus-visible, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--c-sage-d);
  outline-offset: 2px;
}
button.primary, main button {
  min-height: 48px;
  border-radius: 9px;
  background: var(--c-green);
  color: var(--c-fg);
}
button.primary:hover:not(:disabled), main button:hover:not(:disabled) { background: var(--c-green); }
.alt-toggle, main a { color: var(--c-sage-d); }
.footer { color: #5b6369; margin-top: 32px; text-align: left; }

@media (min-width: 600px) {
  h1 { font-size: clamp(28px, 3vw, 38px); }
}

@media (max-width: 599px) {
  body.auth-login { justify-content: flex-start; }
  body.auth-activate { align-items: start; }
}