/* Páginas simples que o servidor entrega: a raiz, a provisória das telas e a de "não achei".
   Usa os tokens e a base de comum/; aqui só o que a base não tem (centro da tela e o tamanho do título). */

.raiz {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 32px 16px calc(32px + env(safe-area-inset-bottom));
}
.raiz-caixa {
  width: 100%;
  max-width: 440px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.raiz-marca {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--tinta);
}
.raiz-marca span { font: 600 13px/1 var(--letra); letter-spacing: 0.14em; }
.raiz-titulo { font: var(--t40); letter-spacing: -0.02em; }
.raiz-texto { font: var(--t16); color: var(--tinta-2); }
.raiz-fio { width: 48px; height: 1px; border: 0; margin: 0; background: var(--linha-2); }
.raiz-pe { font: var(--t12); color: var(--tinta-3); }

@media (max-width: 400px) {
  .raiz-titulo { font: var(--t28); letter-spacing: -0.02em; }
}