/* Área do cliente — telas de acesso (entrar por email / magic link).
   Estilo mínimo: só o que centraliza o card premium e ajusta o texto de acesso.
   Toda a aparência do card vem de .ckbox / .btn / .btn2 / .eyeb (site.css + landings.css).
   Sem CSS inline: linkado no {% block head %} de cada template. */

/* Coluna estreita e centralizada para as telas de acesso (uma tarefa só na tela). */
.contawrap{max-width:480px}

/* Card de acesso: herda o padrão premium do .ckbox (traço menta no topo, profundidade,
   hover). Aqui só damos um respiro maior por dentro e centralizamos o conteúdo, porque
   é uma tela de foco único (digitar o email / confirmar o acesso). */
.contacard{padding:36px 34px 34px;text-align:center}
.contacard::before{left:34px;right:34px}
.contacard .eyeb{display:inline-block;margin-bottom:18px}
.contacard .eyeb::before{margin-bottom:2px}

.contah{font-family:var(--disp);font-weight:700;font-size:26px;letter-spacing:-.02em;color:var(--tinta);margin:0 0 10px}
.contap{font-size:15px;color:var(--tinta2);line-height:1.6;margin:0 auto 24px;max-width:34ch}

/* Formulário de acesso: mesmos campos premium do checkout (.ckform/.ckf/.ckfield),
   mas alinhado à esquerda por dentro do card centralizado (label sobre o campo).
   A regra do .ckfield vive em checkout/landings.css, que ESTA tela NÃO carrega —
   sem defini-la aqui o input cai na fonte-padrão minúscula do navegador (achado
   24/jul, mesmo bug do "Seu endereço" de ontem). Espelha area.css. */
.contaform{margin:0;padding:0;border:none;gap:16px;text-align:left}
.contaform .ckf{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.contaform .ckf label{font-size:13.5px;font-weight:600;color:var(--tinta)}
.contaform .ckfield{font-family:var(--body);font-size:16px;padding:12px 14px;border-radius:12px;
  border:1px solid var(--linha);background:var(--branco);color:var(--tinta);width:100%}
.contaform .ckfield::placeholder{color:var(--cinza)}
.contaform .ckfield:focus{outline:none;border-color:var(--verde);box-shadow:0 0 0 3px rgba(12,166,120,.12)}
.contaform .btn{margin-top:6px}

/* Mensagem de sucesso (email enviado): ícone em anel menta + texto acolhedor. */
.contaok{display:flex;flex-direction:column;align-items:center;gap:6px}
.contaico{display:inline-flex;align-items:center;justify-content:center;width:60px;height:60px;border-radius:50%;
  background:var(--menta-soft);color:var(--verde-d);font-size:26px;margin-bottom:8px;
  box-shadow:inset 0 0 0 1px rgba(143,235,196,.4)}
.contaok .contap{margin-bottom:6px}

/* Nota de rodapé do card (ex.: "não achou? veja o spam"). */
.contanota{font-size:12.5px;color:var(--nevoa);line-height:1.5;margin:10px 0 0}

/* Botão de confirmação / pedir novo link ocupa a largura do card. */
.contacard .btn,.contacard .btn2{width:100%;justify-content:center}

/* Link discreto abaixo do card (voltar ao início). */
.contavoltar{display:inline-flex;align-items:center;gap:7px;margin-top:22px;font-size:13.5px;color:var(--cinza);text-decoration:none;transition:color .2s}
.contavoltar:hover{color:var(--verde-d)}

@media (max-width:560px){
  .contacard{padding:30px 22px 28px}
  .contacard::before{left:22px;right:22px}
  .contah{font-size:23px}
}