/*
  Card "Available soon" (D44, docs/lp-nova.md). Enquanto nao ha download nem
  checkout, os CTAs abrem este dialog: a pessoa deixa o e-mail e entra na
  lista de espera. O <dialog> nativo cuida do Esc, do foco e da camada de
  cima; aqui e so o visual, no vidro escuro da barra em pilula.
*/
.embreve{margin:auto;width:min(440px,calc(100vw - 40px));padding:46px 38px 38px;border:1px solid rgba(255,255,255,.1);border-radius:28px;
  background:rgba(20,20,24,.82);color:var(--ink);text-align:center;
  -webkit-backdrop-filter:saturate(1.6) blur(26px);backdrop-filter:saturate(1.6) blur(26px);
  box-shadow:0 1px 0 rgba(255,255,255,.07) inset, 0 40px 100px rgba(0,0,0,.6)}
.embreve::backdrop{background:rgba(0,0,0,.5);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}

.embreve[open]{animation:embreve-entra .5s cubic-bezier(.22,1,.36,1)}
.embreve[open]::backdrop{animation:embreve-fundo .4s ease}
@keyframes embreve-entra{from{opacity:0;transform:translateY(16px) scale(.94)}to{opacity:1;transform:none}}
@keyframes embreve-fundo{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion: reduce){
  .embreve[open],.embreve[open]::backdrop{animation:none}
}

.embreve .fechar{position:absolute;top:14px;right:14px;display:grid;place-items:center;width:30px;height:30px;
  border:0;border-radius:50%;background:rgba(255,255,255,.08);color:rgba(245,247,251,.6);cursor:pointer;
  transition:background .2s ease,color .2s ease}
.embreve .fechar:hover{background:rgba(255,255,255,.16);color:var(--ink)}
.embreve .fechar:focus-visible{outline:2px solid #fff;outline-offset:2px}
.embreve .fechar svg{width:12px;height:12px}

.embreve .marca-embreve{width:40px;height:40px;margin:0 auto 20px;color:var(--ink)}
.embreve .marca-embreve svg{width:100%;height:100%}

.embreve h3{margin:0;font-size:26px;font-weight:600;letter-spacing:-.022em;line-height:1.15}
.embreve p{margin:12px auto 0;max-width:34ch;font-size:15px;line-height:1.5;letter-spacing:-.008em;color:var(--ink-2)}

.embreve .lista{display:flex;align-items:center;height:48px;margin-top:24px;padding:0 5px 0 18px;border-radius:999px;
  background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);text-align:left}
.embreve .lista:focus-within{box-shadow:inset 0 0 0 1px rgba(143,180,255,.6)}
.embreve .lista input{flex:1;min-width:0;height:100%;border:0;background:none;color:var(--ink);font:inherit;font-size:15px;outline:none}
/* O iOS da zoom na pagina inteira quando um campo focado tem fonte menor
   que 16px; em tela de toque o input sobe para 16px e o zoom nao acontece. */
@media (pointer: coarse){.embreve .lista input{font-size:16px}}
.embreve .lista input::placeholder{color:rgba(245,247,251,.4)}
.embreve .lista button{flex:none;height:38px;padding:0 18px;border:0;border-radius:999px;background:#fff;color:#000;
  font:inherit;font-size:14px;font-weight:500;letter-spacing:-.01em;cursor:pointer;transition:background .2s ease,transform .2s ease}
.embreve .lista button:hover{background:#e9ecf2}
.embreve .lista button:active{transform:scale(.97)}
.embreve .lista button:focus-visible{outline:2px solid #fff;outline-offset:2px}

.embreve .letra-mini{display:block;margin-top:14px;font-size:12.5px;letter-spacing:-.005em;color:var(--ink-3)}

/* Segundo passo: o e-mail foi para a lista. */
.embreve .ok-embreve{display:grid;place-items:center;width:46px;height:46px;margin:0 auto 20px;border-radius:50%;
  background:rgba(48,209,88,.16);color:#30d158;font-size:20px;box-shadow:inset 0 0 0 1px rgba(48,209,88,.35)}
.embreve .voltar{height:42px;margin-top:24px;padding:0 26px;border:0;border-radius:999px;background:#fff;color:#000;
  font:inherit;font-size:15px;font-weight:500;letter-spacing:-.01em;cursor:pointer;transition:background .2s ease,transform .2s ease}
.embreve .voltar:hover{background:#e9ecf2}
.embreve .voltar:active{transform:scale(.97)}
.embreve .voltar:focus-visible{outline:2px solid #fff;outline-offset:3px}