:root{
  --bg:#ECEFF1;            /* cinza claro do print */
  --text:#272D34;
  --muted:#6a737b;
  --accent:#B4A26F;        /* dourado do e-mail e botão */
  --on-accent:#ffffff;

  --s1:8px; --s2:12px; --s3:16px; --s4:24px; --s5:32px;
  --header-h:80px;
}

/* base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font:400 16px/1.6 "Raleway", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

/* Header idêntico */
.brand-header{
  height:var(--header-h); display:grid; place-items:center;
  background:linear-gradient(90deg, #272D34 0%, #B4A26F 100%);
}
.brand-logo{ width:150px; height:50px; object-fit:contain }

/* Hero com deslocamento: mais espaço acima para ficar como no print */
.hero{
  min-height:calc(100vh - var(--header-h));
  display:flex; flex-direction:column; align-items:center;
  padding:0 var(--s3);
}
.spacer{ flex:1 1 0 }
.spacer--top{ flex:3 }     /* empurra o bloco levemente para baixo */
.spacer--bottom{ flex:2 }

/* Bloco central SEM card */
.center-block{
  width:100%; max-width:1200px;   /* linhas longas, igual ao print */
  text-align:center;
}

/* Tipografia idêntica ao Flutter */
.body{
  margin:0 0 var(--s4);
  font-size:24px; font-weight:400;
  color:var(--text);
  text-align:center;              /* centralizado (não justificado) */
}
.email{
  margin:0 0 var(--s3);
  font-size:36px; font-weight:600; line-height:1.2;
  letter-spacing:0;               /* 0.0 como no app */
}
.email-link{
  color:var(--accent); text-decoration:none;
}
.email-link:hover, .email-link:focus{ text-decoration:underline }

/* Botão pílula */
.actions{ margin-top:var(--s2) }
.btn{
  display:inline-block;
  padding:14px 26px;
  border-radius:999px;
  background:var(--accent);
  color:var(--on-accent);
  text-decoration:none;
  font-weight:700;
  box-shadow:0 8px 18px rgba(0,0,0,.12);
}
.btn:focus{ outline:2px solid rgba(0,0,0,.6); outline-offset:2px }
.btn:active{ transform:translateY(1px) }

/* i18n: EN por padrão sem JS */
.i18n-section{ display:none }
.no-js .i18n-en{ display:block }

/* com JS */
.js.lang-en .i18n-en{ display:block }
.js.lang-pt .i18n-pt{ display:block }
.js.lang-es .i18n-es{ display:block }