/*
 * O mínimo para um documento legal ser legível no celular.
 *
 * Sem framework, sem fonte externa, sem script. Três motivos, e nenhum é
 * preferência estética:
 *
 * 1. **Estas páginas precisam abrir sempre.** Termos e política de privacidade
 *    são o que alguém vai ler no pior momento — quando está com raiva, ou
 *    quando um advogado pediu. Uma delas quebrada porque um CDN caiu é o tipo
 *    de coisa que se descobre tarde.
 * 2. **Elas ficam FORA do expo-router**, e por isso não podem depender de nada
 *    do aplicativo. Toda rota do expo-router entra no binário do iOS, e página
 *    de preço dentro do app é exatamente o que a regra 3.1.1 da Apple proíbe.
 * 3. Fonte de sistema carrega instantaneamente na rede de obra, que é a que os
 *    clientes deste produto têm.
 */

:root {
  --tinta: #16151A;
  --tinta2: #4A4552;
  --tinta3: #6B6579;
  --linha: #E4E1E8;
  --fundo: #FFFFFF;
  --marca: #5B38E8;
  --marca-fundo: #F3F0FE;
}

/*
 * Os tokens do APLICATIVO, em CSS.
 *
 * Não são gosto: são os mesmos números de `packages/design-tokens/src/index.ts`,
 * e é o que faz o site e o aplicativo parecerem o mesmo produto. Duas listas
 * que precisam concordar e nada as força a concordar é a regra 16 acontecendo
 * de novo — por isso `apps/api/test/site.test.ts` compara as duas, e a
 * mensagem dele diz qual valor divergiu.
 *
 * As SETE variáveis acima ficaram como estavam. Elas são a leitura do
 * documento legal, são aproximações destes valores, e trocá-las mudaria quatro
 * páginas que ninguém pediu para mudar.
 */
:root {
  --superficie: #FFFFFF;
  --fundo-pagina: #F8F7FB;
  --linha2: #F0EEF4;
  --tinta4: #A9A3B8;
  --marca2: #5B38E8;
  --marca3: #4A2BC4;
  --marca50: #F1EDFF;
  --positivo-texto: #0E7040;
  --negativo-texto: #C62A33;
  --zap: #25D366;
  --zap-texto: #0B3D1F;

  /*
   * O PAR do botão cheio — e ele é par porque a régua 18 exige que seja.
   *
   * `.botao` pintava `background: var(--marca); color: #fff` nos dois temas.
   * No claro dá 6,61 e está certo. No escuro `--marca` é `#A48CFF`, uma
   * lavanda CLARA escolhida para ser lida COMO texto sobre fundo escuro — e
   * branco por cima dela dá **2,7:1**. Medido em 14/09/2026, na primeira vez
   * que alguém apontou a régua viva para o site: os quatro botões "Assinar"
   * de `precos.html`, que são o ÚNICO caminho até o pagamento.
   *
   * O aplicativo já tinha passado por isto e resolvido em `paraSelo("marca")`:
   * no escuro o par se INVERTE — o mesmo fundo lavanda, e a cor do fundo da
   * página como letra. 7,03:1. O site copia a decisão, não a reinventa.
   */
  --botao-fundo: var(--marca2);
  --botao-texto: #FFFFFF;

  /*
   * O PALCO — escuro nas DUAS paletas. Ver o bloco da landing, lá embaixo.
   *
   * Toda cor daqui é uma cor que o aplicativo já tem: `--palco` é a `tinta` do
   * tema claro, `--palco2` é o `fundo` do escuro, e as três tintas, a linha e
   * a superfície são as do tema escuro, letra por letra. Nada é inventado, e o
   * teste "as cores do site são as cores do aplicativo" é quem garante.
   *
   * `--vidro-opaco` é a ÚNICA cor calculada aqui, e ela não é escolha: é
   * exatamente `--vidro` composto sobre `--palco`. É o piso que o cartão de
   * vidro usa onde `backdrop-filter` não existe, e ele tem que dar o mesmo
   * pixel dos dois jeitos — senão a régua mede uma coisa e o olho vê outra.
   */
  --palco: #17151F;
  --palco2: #0E0C14;
  --palco-tinta: #F4F2F8;
  --palco-tinta2: #CFC9DC;
  --palco-tinta3: #9C95AC;
  --palco-linha: #2C2839;
  /*
   * A família da marca PARA O PALCO, e ela não vira com o tema.
   *
   * Este par custou cinco reprovações medidas na primeira corrida da página
   * nova, e as cinco são a mesma armadilha: elemento dentro do palco usando
   * token do TEMA. No claro, `--marca3` é `#4A2BC4` (roxo escuro) e `--marca50`
   * é `#F1EDFF` (quase branco) — sobre o palco, o primeiro dá 1,82 e o segundo
   * some com a letra clara em 1,03.
   *
   * O palco é escuro NAS DUAS paletas, então ele precisa da família escura nas
   * duas: `temaEscuro.marca3` e `temaEscuro.marca50`, letra por letra.
   */
  --palco-marca: #C3B0FF;
  --palco-marca50: #241C3C;
  --vidro: rgba(244, 242, 248, .06);
  --vidro-borda: rgba(244, 242, 248, .14);
  --vidro-opaco: #24222C;
  --gradiente-palco: linear-gradient(160deg, #17151F, #0E0C14);
  /*
   * O brilho que faz o vidro ler COMO vidro.
   *
   * `backdrop-filter` borra o que está atrás — e atrás de um degradê chapado
   * não há o que borrar: o cartão sai um retângulo cinza, e o efeito que o
   * dono pediu não acontece. O brilho dá ao borrão alguma coisa para fazer.
   *
   * É uma segunda CAMADA de fundo, e foi ela que obrigou
   * `medir-contraste-vivo.mjs` a aprender a compor camadas de baixo para cima:
   * medido contra o fundo da página em vez de contra o degradê logo abaixo,
   * ele inventava um quase-branco que não existe e reprovava a letra clara.
   */
  --brilho-palco:
    radial-gradient(70% 55% at 18% 0%, rgba(109, 74, 255, .13), rgba(109, 74, 255, 0) 70%),
    radial-gradient(60% 50% at 88% 18%, rgba(37, 211, 102, .06), rgba(37, 211, 102, 0) 70%);

  /* Múltiplos de 4: o olho perdoa 4 e estranha 5. */
  --e1: 4px;  --e2: 8px;  --e3: 12px; --e4: 16px; --e5: 24px; --e6: 32px;
  --r1: 8px;  --r2: 12px; --r3: 16px; --r4: 22px; --r9: 999px;
  --toque: 48px;

  --t-micro: 12px;   --t-legenda: 14px;       --t-corpo: 16px;
  --t-destaque: 18px; --t-titulo: 22px;       --t-numero: 28px;
  --t-titulo-grande: 30px; --t-numero-grande: 40px;

  /* Copiadas literalmente de `elevacao`: duas camadas, ambiente larga e chave curta. */
  --sombra-cartao: 0 1px 2px rgba(23,21,31,.05), 0 4px 12px rgba(23,21,31,.05);
  --sombra-destaque: 0 2px 4px rgba(23,21,31,.06), 0 12px 28px rgba(23,21,31,.10);
  /* A flutuante é ROXA: objeto colorido projeta a própria cor, não preto. */
  --sombra-flutuante: 0 4px 8px rgba(109,74,255,.18), 0 12px 32px rgba(109,74,255,.28);

  /*
    Começa em `marca2` e NUNCA em `#6D4AFF`: branco a 82% sobre o segundo dá
    3,98:1, abaixo do mínimo. Sobre `#5B38E8` dá 4,95 e sobre `#4A2BC4`, 6,30.
    O branco sólido do botão dá 6,59 e 8,63.
  */
  --gradiente-marca: linear-gradient(135deg, #5B38E8, #4A2BC4);
}

* { box-sizing: border-box; }

/*
 * Três consertos que valem para as CINCO páginas, e por isso não ficam no
 * escopo da landing.
 */

/* Imagem nunca estoura a coluna. A landing tem fotos; os documentos não tinham
   nenhuma, e é justamente por isso que faltava. */
img, picture, svg { max-width: 100%; height: auto; }

/*
 * O anel de foco, que não existia em lugar nenhum do site.
 *
 * Quem navega por teclado — e quem usa leitor de tela — não tinha como saber
 * onde estava em nenhuma das cinco páginas, inclusive na que leva ao pagamento.
 * `--marca2` contra os dois fundos passa folgado dos 3:1 que a régua pede.
 */
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 3px solid var(--marca2);
  outline-offset: 2px;
  border-radius: var(--r1);
}

/*
 * O alvo de toque de 48, que o aplicativo trata como inviolável e o site não
 * cumpria.
 *
 * `.botao` desenhava cerca de 40px, e `.botao.pequeno` — o botão "Assinar" de
 * cada linha da tabela de `precos.html`, que é o ÚNICO caminho até o
 * pagamento — desenhava cerca de 28. Era o controle mais importante do site e
 * o menor dele.
 *
 * Isto muda o visual de `precos.html` e de `assinar.html`. É conserto, não
 * regressão.
 */
/* O bloco do botão é UM só, e fica junto do resto do botão. Ver lá embaixo.

   Aqui morava metade dele, e essa metade adoeceu duas vezes. A primeira: o
   `display` declarado aqui não valia em lugar nenhum, porque a definição
   canônica de `.botao` diz `display` também e é a última a falar. Consertado —
   e o comentário que anunciava o conserto ficou afirmando que a limpeza tinha
   sido completa, dizendo `inline-block` onde o código já tinha `inline-flex`.

   A segunda metade sobreviveu a esse conserto e só apareceu quando um guarda
   foi escrito para procurá-la: `.botao.pequeno` declarava `font-size` aqui
   (`var(--t-legenda)`, 14px) e lá embaixo (`.85rem`, 13,6px). A de lá vencia.
   O botão "Assinar" — o ÚNICO caminho até o pagamento — renderizava 13,6px
   enquanto este arquivo afirmava 14, dentro do bloco que dizia estar limpo.

   Quem guarda os dois agora é `apps/api/test/css-sem-declaracao-morta.test.ts`,
   e ele não confere comentário: confere o arquivo. */

body {
  margin: 0;
  padding: 0 1.25rem 5rem;
  background: var(--fundo);
  color: var(--tinta);
  font: 16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

main { max-width: 44rem; margin: 0 auto; }

header {
  max-width: 44rem;
  margin: 0 auto;
  padding: 2rem 0 1rem;
  border-bottom: 1px solid var(--linha);
}

h1 { font-size: 1.75rem; line-height: 1.25; margin: 0 0 .5rem; letter-spacing: -.02em; }
h2 { font-size: 1.2rem; margin: 2.5rem 0 .75rem; letter-spacing: -.01em; }
h3 { font-size: 1rem; margin: 1.5rem 0 .5rem; }
p, li { color: var(--tinta2); }
li { margin-bottom: .4rem; }
strong { color: var(--tinta); }

a { color: var(--marca); }
a:hover { text-decoration: none; }

.data { color: var(--tinta3); font-size: .9rem; margin: 0; }

.aviso {
  background: var(--marca-fundo);
  border-left: 3px solid var(--marca);
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
  border-radius: 0 6px 6px 0;
}
.aviso p:last-child { margin-bottom: 0; }

/*
 * O que ainda precisa de gente fica VISÍVEL, e em vermelho.
 *
 * A alternativa seria deixar "Razão Social LTDA" escrito como se fosse
 * verdade — e um documento legal com dado de mentira que ninguém percebe é
 * pior que um documento faltando. Aqui a lacuna grita, e um teste conta
 * quantas sobraram.
 */
.falta {
  background: #FFE9E6;
  color: #9A1B08;
  padding: .1rem .4rem;
  border-radius: 4px;
  font-weight: 600;
  font-size: .95em;
  white-space: nowrap;
}

table { border-collapse: collapse; width: 100%; margin: 1rem 0; font-size: .95rem; }
th, td { text-align: left; padding: .6rem .5rem; border-bottom: 1px solid var(--linha); vertical-align: top; }
th { color: var(--tinta); font-weight: 600; }
td { color: var(--tinta2); }

footer {
  max-width: 44rem;
  margin: 4rem auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--linha);
  color: var(--tinta3);
  font-size: .9rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --tinta: #F4F2F7;
    --tinta2: #C9C4D2;
    --tinta3: #918B9E;
    --linha: #2C2A33;
    --fundo: #131218;
    --marca: #A48CFF;
    --marca-fundo: #1E1A2E;

    --superficie: #191622;
    --fundo-pagina: #0E0C14;
    --linha2: #221E2E;
    --tinta4: #6E6880;
    --marca2: #A489FF;
    --marca3: #C3B0FF;
    --marca50: #241C3C;
    --positivo-texto: #5FD79B;
    --negativo-texto: #FF9AA0;

    /* O par invertido: o mesmo fundo lavanda, e a letra passa a ser escura. */
    --botao-texto: var(--fundo);

    /*
      Sombra preta não existe no escuro — ela seria invisível sobre `#0E0C14` e
      só custaria pintura. Quem separa o cartão do fundo lá é o degrau entre
      `superficie` e `fundo` (1,09:1) mais a borda, exatamente como o app faz.
    */
    --sombra-cartao: none;
    --sombra-destaque: none;

    /*
      O gradiente e o par do WhatsApp NÃO mudam com o tema. Um gradiente por
      aplicativo é assinatura; e a cor do WhatsApp é de outro.
    */
  }
  .falta { background: #4A1710; color: #FFB4A6; }
}

/* O botão de compra. Só existe no site: o app nunca chama para comprar. */
.botao {
  display: inline-flex; align-items: center; justify-content: center;
  box-sizing: border-box;
  padding: .7rem 1.2rem; border-radius: .5rem;
  background: var(--botao-fundo); color: var(--botao-texto);
  text-decoration: none; font-weight: 600;
}
.botao:hover { filter: brightness(1.08); text-decoration: none; }

/*
 * O alvo de toque de 48, que o aplicativo trata como inviolável e o site não
 * cumpria. `.botao` desenhava cerca de 40px e `.botao.pequeno` cerca de 28 —
 * era o controle mais importante do site e o menor dele.
 *
 * `font-size` fica em `var(--t-legenda)` e não nos `.85rem` que estavam aqui:
 * 14 é o `legenda` dos tokens, e 13,6 não é número de ninguém.
 */
.botao { min-height: var(--toque); }
.botao.pequeno {
  min-height: var(--toque);
  padding: .3rem .7rem;
  font-size: var(--t-legenda);
  margin-top: .3rem;
}
.pix {
  white-space: pre-wrap; word-break: break-all; padding: .8rem;
  background: var(--marca-fundo); border: 1px solid var(--linha); border-radius: .5rem;
  font-size: .85rem;
}

/*
  O nome do produto acima da promessa.

  Vem antes do `h1` e desenha menor que ele de propósito: a promessa é o que
  convence, o nome é o que a pessoa repete para um amigo. Invertê-los faria a
  página se apresentar antes de dizer para que serve.

  `--marca` é o mesmo roxo do aplicativo, para quem chega pelo site e instala
  reconhecer a mesma coisa.
*/
.marca {
  margin: 0 0 .35rem;
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--marca);
}


/* ==========================================================================
   A LANDING — e só ela.
   ==========================================================================

   Tudo daqui para baixo vive sob `body.landing`. As quatro páginas legais não
   têm essa classe e não são afetadas por uma linha sequer.

   A separação não é zelo: elas estão CERTAS sendo documento. Termos e política
   de privacidade são lidos por um advogado ou por um cliente com raiva, e
   coluna única de 44rem em texto corrido é a forma certa para isso. O que
   estava errado era a página de VENDA usar a folha de estilo de um documento
   legal — e era isso que produzia o "parece um projeto de escola".

   ## O PALCO, e por que ele não é "modo escuro"

   O dono pediu escuro premium com vidro fumê. A saída óbvia seria a landing
   ignorar `prefers-color-scheme` e ser escura para todo mundo. Ela custa três
   coisas, e as três são reais:

     1. clicar em "Termos" com o sistema no claro salta de uma página preta
        para uma branca — e isso acontece no exato momento em que a pessoa
        está conferindo se o produto é sério;
     2. as cinco fotos claras do aplicativo ficariam sem uso, e continuariam
        publicadas: `empacotar.mjs` copia a pasta inteira. 249 KB de bytes
        mortos no ar;
     3. o piso do caso "toda foto existe nas duas paletas" cairia de 8 para 5,
        e baixar um piso para fazer um teste passar é o movimento que
        `guarda-que-varre.ts` descreve como o começo do fim de um guarda.

   Em vez de escolher, entra um TERCEIRO nível de superfície. `--palco` é
   escuro NAS DUAS PALETAS. A conversa-herói e o fecho vivem nele; as bandas do
   meio seguem o sistema. A primeira tela e meia é escura premium para todo
   mundo, o rodapé e o caminho para os documentos estão na paleta de quem lê, e
   as dez fotos continuam servindo.

   Todas as cores do palco são cores que o aplicativo já tem. E há um argumento
   estrutural melhor que a tabela: `--palco` (#17151F) e `--palco2` (#0E0C14)
   são, canal por canal, mais escuros que a `superficie` do tema escuro — então
   todo contraste já medido para o tema escuro só MELHORA sobre o palco.
*/

body.landing {
  padding: 0;
  background: var(--fundo-pagina);
}
body.landing main { max-width: none; }
body.landing > header,
body.landing > footer { max-width: none; margin: 0; border: 0; padding: 0; }

/* O h2 dos documentos nasce com `margin: 2.5rem 0`, e ali está certo: separa
   capítulos de texto corrido. Dentro de uma faixa isso SOMA ao padding dela e
   abre um vão que parece descuido. */
body.landing .faixa > :first-child { margin-top: 0; }
body.landing h1 { font-size: 2.125rem; line-height: 1.12; letter-spacing: -1px; }
body.landing h2 { font-size: var(--t-titulo); line-height: 1.25; letter-spacing: -.6px; }
body.landing h3 { font-size: var(--t-destaque); line-height: 1.3; margin-top: var(--e5); }
body.landing .cartao > :last-child,
body.landing .bolha > :last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------ o palco */

.palco {
  background: var(--brilho-palco), var(--gradiente-palco);
  color: var(--palco-tinta);
}
.palco h1, .palco h2, .palco h3, .palco strong { color: var(--palco-tinta); }
.palco .destaque { color: var(--palco-tinta2); }
/*
 * `--palco-tinta2`, e não `tinta3` — o brilho custou um degrau de tinta.
 *
 * Os números do palco foram medidos contra o degradê CHAPADO: `tinta3` dava
 * 6,28 sobre `--palco`. O brilho entrou depois, e a régua de contraste só
 * passou a enxergá-lo quando aprendeu a compor camadas de baixo para cima —
 * até então ela media contra o fundo da página e aprovava.
 *
 * Com o brilho, `tinta3` cai para **4,46:1** no pico do degradê radial, logo
 * abaixo dos 4,5. E a régua mede o PICO de propósito: ignorar a posição da
 * parada só pode baixar a razão, nunca subir — guarda conservador pode
 * reprovar o que passaria, não pode aprovar o que falha.
 *
 * Duas coisas foram feitas, e não uma: o brilho baixou de .20/.10 para
 * .13/.06, e estes textos subiram um degrau de tinta. Só a primeira deixaria a
 * margem em dois centésimos, que é o mesmo que não ter margem.
 */
.palco .miuda, .palco .rotulo, .palco figcaption { color: var(--palco-tinta2); }
.palco a:not(.botao) { color: var(--palco-marca); }

/*
 * O botão de contorno sobre o palco.
 *
 * `--marca2` é a cor dele nas bandas normais, e no tema CLARO ela é `#5B38E8`
 * — um roxo escuro, que sobre o palco quase preto fica ilegível. O palco não é
 * "o tema escuro": ele é escuro nas duas paletas, e por isso precisa da sua
 * própria tinta, não da tinta do tema.
 */
.palco .botao.contorno {
  color: var(--palco-tinta);
  border-color: var(--vidro-borda);
}
.palco .botao.contorno:hover { background: var(--vidro); }

/* --------------------------------------------------------------- o vidro
   `backdrop-filter` é TEXTURA, nunca contraste.

   O cartão declara `background-color` SEMPRE; o `@supports` só acrescenta o
   borrão e troca o piso opaco por um `rgba` equivalente. O valor que a régua
   de contraste mede é o MESMO nos dois caminhos — o vidro muda a profundidade,
   não a legibilidade. É isso que faz o fallback parecer escolha, e não
   defeito.

   E é o que `medir-contraste-vivo.mjs` passou a cobrar: todo texto precisa ter,
   na cadeia de ancestrais e antes de qualquer `backdrop-filter`, uma cor opaca
   ou um degradê que resolva. Sem o piso, ele avisa em vez de aprovar calado.

   Teto de DOIS elementos com vidro na página inteira — a barra do topo e o
   cartão da resposta. Camada de composição grande é engasgo num Android médio
   na obra, e a landing abre na rede da obra.
*/
.vidro {
  background-color: var(--vidro-opaco);
  border: 1px solid var(--palco-linha);
  border-radius: var(--r3);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .vidro {
    background-color: var(--vidro);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
            backdrop-filter: blur(18px) saturate(140%);
    border-color: var(--vidro-borda);
    box-shadow: inset 0 1px 0 rgba(244, 242, 248, .08);
  }
}
/* Quem pediu menos transparência, ou mais contraste, recebe o piso opaco. */
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .vidro {
    background-color: var(--vidro-opaco);
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
    border-color: var(--palco-linha);
  }
}

/* ----------------------------------------------------------------- a faixa */

.faixa { padding: var(--e6) 1.25rem; }
.faixa > * { max-width: 60rem; margin-left: auto; margin-right: auto; }
.faixa.clara { background: var(--superficie); }

/* ------------------------------------------------------------------- o topo */

/*
 * `body.landing > header` vale (0,1,2) e zera padding e largura; um `.topo`
 * simples vale (0,1,0) e PERDE — o ladrilho encostaria na borda esquerda. O
 * seletor abaixo vale (0,2,2) e ganha das duas. Não se vê lendo o HTML: as
 * duas regras estão certas separadas.
 */
/*
 * NÃO é `position: sticky`, e isso é decisão medida.
 *
 * A tentação é grudá-lo no topo com vidro fumê. O defeito aparece rolando: o
 * vidro fica transparente sobre a seção seguinte, que é clara, e a letra clara
 * do cabeçalho some. Pior — é um estado que `medir-contraste-vivo.mjs` NUNCA
 * vê, porque ele mede com a página no topo. Seria exatamente o guarda
 * aprovando o que o usuário não recebe. O cabeçalho rola junto e acabou.
 */
body.landing > header.topo {
  border-bottom: 1px solid var(--vidro-borda);
}
.topo .dentro {
  display: flex; align-items: center; gap: var(--e3);
  padding: var(--e3) 1.25rem;
  max-width: 60rem; margin: 0 auto;
}
.topo .marca {
  margin: 0; font-size: var(--t-destaque); text-transform: none;
  letter-spacing: -.3px; color: var(--palco-tinta);
}
.topo nav { margin-left: auto; display: flex; gap: var(--e4); align-items: center; }
/* (0,3,2) — precisa ganhar de `.palco a:not(.botao)`, que vale (0,2,1). */
.topo .dentro nav a { font-weight: 600; color: var(--palco-tinta2); text-decoration: none; }
.topo .dentro nav a:hover { color: var(--palco-tinta); text-decoration: underline; }

/* O ladrilho é o PRÓPRIO `/marca.svg` — o mesmo arquivo que serve de favicon.
   Ter o `d` da marca copiado dentro do HTML seria uma terceira cópia de uma
   geometria que `marca.ts` já é dona de duas. */
.ladrilho { width: 34px; height: 34px; flex: none; display: block; }

/* ------------------------------------------------------------- a conversa
   O HERÓI é a conversa, e não um título com foto ao lado.

   O diferencial deste produto é falar e virar registro. Descrever isso em
   parágrafo é o que a página fazia; mostrar custa duas bolhas de CSS — e
   ganha o caminho crítico, porque o herói deixa de carregar uma foto de 64 KB.
*/
.conversa { list-style: none; margin: var(--e5) 0 0; padding: 0; display: grid; gap: var(--e4); }
.fala { max-width: 36rem; }
.fala.eu { margin-left: auto; }
.fala .quem {
  margin: 0 0 var(--e2);
  font-size: var(--t-micro); font-weight: 600; letter-spacing: .8px;
  text-transform: uppercase; color: var(--palco-tinta2);
}
.fala.eu .quem { text-align: right; }
.fala .bolha {
  margin: 0; padding: var(--e4) var(--e4);
  font-size: var(--t-destaque); line-height: 1.5;
  border-radius: var(--r3);
}
.fala.eu .bolha {
  background: var(--palco-marca50); color: var(--palco-tinta);
  border: 1px solid var(--palco-linha);
  border-bottom-right-radius: var(--r1);
}
.fala.ele .bolha { border-bottom-left-radius: var(--r1); }
.fala.ele .bolha p { margin: 0 0 var(--e2); }
.feito { color: var(--palco-marca); font-weight: 700; }
.detalhe { color: var(--palco-tinta2); font-variant-numeric: tabular-nums; }

/* O rabicho virado em seta: quadrado girado 45°, duas bordas. */
.virou {
  width: 14px; height: 14px; margin: var(--e5) auto 0; transform: rotate(45deg);
  border-right: 2px solid var(--vidro-borda);
  border-bottom: 2px solid var(--vidro-borda);
  border-bottom-right-radius: 3px;
}

/* ---------------------------------------------------------------- os blocos */

.cartao {
  background: var(--superficie);
  border: 1px solid var(--linha2);
  border-radius: var(--r3);
  padding: var(--e4);
  box-shadow: var(--sombra-cartao);
}
.palco .cartao {
  background: var(--vidro-opaco); border-color: var(--palco-linha);
  box-shadow: none; color: var(--palco-tinta);
}

/* Rótulo miúdo EM CIMA, número grande EMBAIXO — a hierarquia do aplicativo. */
.rotulo {
  margin: 0 0 var(--e2);
  font-size: var(--t-micro); font-weight: 600; letter-spacing: .8px;
  text-transform: uppercase; color: var(--tinta3);
}
.numero {
  margin: 0; font-weight: 700; letter-spacing: -.5px;
  font-size: var(--t-numero); font-variant-numeric: tabular-nums;
  color: var(--tinta);
}
.palco .numero { color: var(--palco-tinta); }
.numero.grande { font-size: var(--t-numero-grande); letter-spacing: -1.2px; }
.destaque {
  font-size: var(--t-destaque); line-height: 1.5; letter-spacing: -.3px;
  color: var(--tinta2);
}
.miuda { font-size: var(--t-legenda); color: var(--tinta3); }

/* Pílula de preenchimento fraco com letra forte — o chip do aplicativo. */
.chip {
  display: inline-block; margin: 0 0 var(--e4);
  padding: var(--e1) var(--e3); border-radius: var(--r9);
  font-size: var(--t-micro); font-weight: 600; letter-spacing: .8px;
  text-transform: uppercase;
  background: var(--marca50); color: var(--marca3);
}
/* O par do WhatsApp é igual nos dois temas: a cor é de outro. 6,22:1. */
.chip.zap { background: var(--zap); color: var(--zap-texto); }

/* Cheio convida, contorno espera. */
.botao.grande {
  box-shadow: var(--sombra-flutuante);
  font-size: var(--t-destaque); padding: var(--e3) var(--e5);
}
.botao.contorno {
  background: transparent; color: var(--marca2);
  border: 2px solid var(--marca2);
}
.botao.contorno:hover { filter: none; background: var(--marca50); }

/* No celular os dois botões não cabem lado a lado e quebravam cada um com a
   largura do seu texto, um degrau desalinhado embaixo do outro.

   `margin-top`/`margin-bottom`, e NÃO o atalho `margin: … 0 …`. O atalho
   escrevia `0` nas laterais e, por ter a mesma especificidade de
   `.faixa > *` e vir depois, apagava o `margin-left/right: auto` que
   centraliza todo filho de faixa. Numa janela de 1920px o "Ver os planos" da
   seção de preços aparecia encostado na borda esquerda, a 440px do resto do
   texto — o dono o descreveu como "totalmente desconexo do resto do fluxo".
   O guarda de declaração morta não pega isto de propósito: atalho e
   propriedade longa são nomes diferentes, e "reseta e reaplica" é idioma
   legítimo. Aqui não era reset; era acidente. */
.acoes {
  display: flex; flex-wrap: wrap; gap: var(--e3);
  margin-top: var(--e5); margin-bottom: var(--e3);
}
.acoes .botao { flex: 1 1 14rem; }
@media (min-width: 34rem) { .acoes .botao { flex: 0 0 auto; } }

.grade { display: grid; gap: var(--e4); }

/* ---------------------------------------------------------------- o aparelho
   Sem entalhe falso: entalhe é um retângulo preto por cima de uma foto de
   verdade, e ainda afirma um modelo que a pessoa pode não ter. Quem diz "isto
   é um celular" aqui é a proporção, que é real.
*/
.aparelho {
  width: 100%; max-width: 17.5rem; margin: var(--e5) auto 0;
  padding: var(--e1);
  background: var(--linha); border-radius: var(--r4);
  box-shadow: var(--sombra-destaque);
}
.palco .aparelho { background: var(--palco-linha); }
.aparelho img {
  display: block; width: 100%; aspect-ratio: 402 / 874;
  border-radius: calc(var(--r4) - var(--e1));
  background: var(--fundo-pagina);
}
figure.tela { margin: 0; }
figure.tela figcaption {
  margin: var(--e3) auto 0; max-width: 34rem; text-align: center;
  font-size: var(--t-legenda); line-height: 1.5; color: var(--tinta3);
}

/* --------------------------------------------------- a prova social RESERVADA
   O produto não tem cliente pagando — é o alvo atual do roadmap. Depoimento,
   contador de clientes, estrela ou selo fabricados NÃO entram, e há um teste
   que recusa a página se entrarem.

   O que entra é o slot vazio, declarado. É a mesma postura que o `.falta` já
   tem nas páginas legais: a lacuna grita em vez de se disfarçar. Uma landing
   que diz "ainda não temos cliente, e este espaço fica vazio de propósito" é
   rara o bastante para ser lembrada — e coerente com os documentos, em vez de
   contradizê-los.
*/
.reservado {
  margin: 0; padding: var(--e5);
  border: 2px dashed var(--linha);
  border-radius: var(--r3);
  background: transparent;
}
.reservado p { color: var(--tinta2); }
/* `--tinta4` é cinza de PLACEHOLDER — 3,35 no claro, e os tokens dizem isso
   por escrito. Este rótulo carrega informação, então ele usa `--tinta3`. */
.reservado .rotulo { color: var(--tinta3); }

/* --------------------------------------------------------------- responsivo
   Dois pontos de quebra, e não cinco. Cada ponto é um layout que precisa ser
   OLHADO, e neste site cada layout existe em duas paletas: dois pontos são
   seis estados para conferir, três seriam oito. Em `rem`, porque quem aumenta
   a fonte do sistema — e o cliente deste produto tem cinquenta e poucos anos —
   recebe o layout de uma tela menor, que é o comportamento certo.
*/
@media (min-width: 40rem) {
  .faixa { padding: 64px 2rem; }
  .grade.duas { grid-template-columns: 1fr 1fr; align-items: center; }
  .grade.tres { grid-template-columns: repeat(3, 1fr); align-items: start; }
  .grade.quatro { grid-template-columns: 1fr 1fr; }
  .aparelho { max-width: 20rem; }
}
@media (min-width: 60rem) {
  body.landing h1 { font-size: 3rem; letter-spacing: -1.8px; }
  body.landing h2 { font-size: var(--t-titulo-grande); }
  .grade.quatro { grid-template-columns: repeat(4, 1fr); }
  .fala .bolha { font-size: var(--t-titulo); }
  .aparelho { max-width: 22rem; }
}