/*
 * A página pública.
 *
 * ## Por que ela usa a paleta do produto e não uma própria
 *
 * Quem chega aqui vai ver o dashboard em seguida. Duas identidades — uma para
 * vender, outra para usar — fazem o produto parecer outro sistema no primeiro
 * login. Os tokens são os mesmos de `packages/ui/base.css`, copiados e não
 * importados porque esta página é estática e não deve arrastar o pacote de
 * interface inteiro para servir seis cores.
 *
 * ## Por que serifa no display
 *
 * O assunto é demonstrativo de resultado. Georgia tem número old-style, largura
 * confortável e existe em toda máquina — nenhum risco de fallback silencioso,
 * que é o preço de uma fonte de CDN. O corpo fica em system-ui e os valores em
 * monoespaçado com `tabular-nums`, porque a coluna de dinheiro só se lê quando
 * as casas alinham.
 */

:root {
  color-scheme: light;

  --plane: #f9f9f7;
  --surface-1: #fcfcfb;
  --surface-2: #f2f1ed;
  --text-primary: #0b0b0b;
  --text-secondary: #52514e;
  --text-muted: #898781;
  --border: rgba(11, 11, 11, 0.12);
  --border-strong: rgba(11, 11, 11, 0.22);

  --acento: #2a78d6;
  --acento-wash: rgba(42, 120, 214, 0.09);
  --alerta: #eb6834;
  --critico: #d03b3b;

  --raio: 10px;
  --display: Georgia, "Times New Roman", serif;
  --corpo: system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, "Cascadia Mono", monospace;

  --largura: 62rem;
  --prosa: 34rem;
}

/*
 * O padrão do navegador é "system": nada é carimbado na raiz e só a preferência
 * do sistema separa claro de escuro. Por isso o bloco escuro é uma media query
 * guardada contra a escolha explícita de claro — e repetida no atributo, para o
 * caso inverso. Uma cor definida só dentro de um dos dois blocos não existe no
 * estado sem carimbo, que é justamente o mais comum.
 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --plane: #131312;
    --surface-1: #1a1a19;
    --surface-2: #232321;
    --text-primary: #ffffff;
    --text-secondary: #b9b7b1;
    --text-muted: #8b8983;
    --border: rgba(255, 255, 255, 0.14);
    --border-strong: rgba(255, 255, 255, 0.26);
    --acento: #3987e5;
    --acento-wash: rgba(57, 135, 229, 0.14);
    --alerta: #f0794a;
    --critico: #e05656;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --plane: #131312;
  --surface-1: #1a1a19;
  --surface-2: #232321;
  --text-primary: #ffffff;
  --text-secondary: #b9b7b1;
  --text-muted: #8b8983;
  --border: rgba(255, 255, 255, 0.14);
  --border-strong: rgba(255, 255, 255, 0.26);
  --acento: #3987e5;
  --acento-wash: rgba(57, 135, 229, 0.14);
  --alerta: #f0794a;
  --critico: #e05656;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--plane);
  color: var(--text-primary);
  font-family: var(--corpo);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
}

:where(a, button):focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 3px;
  border-radius: 4px;
}

code {
  font-family: var(--mono);
  font-size: 0.875em;
  padding: 0.1em 0.35em;
  border-radius: 5px;
  background: var(--surface-2);
  border: 1px solid var(--border);
}

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

/*
 * A barra ocupa a janela inteira e é ela que gruda; o conteúdo centrado vive
 * num filho. Fosse o próprio <header> limitado a `--largura`, o fundo terminaria
 * junto com ele e o texto da página apareceria por baixo nas laterais ao rolar.
 *
 * O fundo é opaco de propósito. Um `backdrop-filter` custa composição em toda
 * rolagem, e numa página que é quase toda texto o desfoque atrás de números
 * atrapalha justamente a coisa que se veio ler.
 */
.topo {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--plane);
  border-bottom: 1px solid var(--border);
}

.topo-interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  flex-wrap: wrap;
  max-width: var(--largura);
  margin: 0 auto;
  padding: 0.9rem 1.5rem;
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--display);
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  text-decoration: none;
}

/* O glifo é a mesma barra do favicon: três colunas de alturas diferentes, que
   é o gráfico mais simples que ainda diz "isto mede alguma coisa". */
.marca-glifo {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: linear-gradient(
    to right,
    var(--text-primary) 0 4px,
    transparent 4px 7px,
    var(--text-primary) 7px 11px,
    transparent 11px 14px,
    var(--acento) 14px 18px
  );
  mask-image: linear-gradient(to bottom, transparent 0 4px, #000 4px 100%);
}

.topo nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  font-size: 0.9375rem;
}

.topo nav a:not(.botao) {
  color: var(--text-secondary);
  text-decoration: none;
}

.topo nav a:not(.botao):hover {
  color: var(--text-primary);
}

/* ---------------------------------------------------------------- botões */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 1.1rem;
  border-radius: var(--raio);
  border: 1px solid var(--border-strong);
  background: var(--surface-1);
  color: var(--text-primary);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.botao:hover {
  background: var(--surface-2);
}

.botao.primario {
  background: var(--text-primary);
  border-color: var(--text-primary);
  color: var(--plane);
}

.botao.primario:hover {
  opacity: 0.88;
  background: var(--text-primary);
}

.botao.grande {
  font-family: var(--mono);
  font-size: 1rem;
  padding: 0.8rem 1.4rem;
}

/* ------------------------------------------------------- pular para o conteúdo */

/* Sai do fluxo sem `display: none`, que o tiraria da ordem de tabulação e
   anularia o propósito. Ao receber foco, volta para o canto superior. */
.pular {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
  padding: 0.7rem 1.1rem;
  background: var(--text-primary);
  color: var(--plane);
  border-radius: 0 0 var(--raio) 0;
  text-decoration: none;
  font-size: 0.9375rem;
}

.pular:focus {
  left: 0;
}

/* ------------------------------------------------------------------ main */

main {
  max-width: var(--largura);
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 6rem;
}

/* A margem tem de caber a barra grudada, senão o link de âncora para a seção
   e o topo dela fica escondido atrás do cabeçalho. */
main > section {
  scroll-margin-top: 5.5rem;
}

.titulo-secao {
  font-family: var(--display);
  font-size: 0.8125rem;
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  margin: 0 0 1.75rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--border);
}

/* ----------------------------------------------------------------- herói */

.heroi {
  padding: 5rem 0 0;
}

.sobrancelha {
  font-size: 0.75rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 1.25rem;
}

.heroi h1 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2rem, 5.5vw, 3.4rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin: 0 0 1.5rem;
  max-width: 20ch;
}

/* A palavra trocada não é apagada — é riscada. Quem lê precisa ver as duas
   para entender a inversão: o assunto não é a venda, é o sistema que a
   registrou. Apagar a primeira deixaria só a segunda, e a frase viraria a
   afirmação óbvia que ela justamente contradiz. */
.tachado {
  color: var(--text-muted);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  font-variant-numeric: tabular-nums;
}

.realce {
  font-weight: 400;
  color: var(--acento);
  font-variant-numeric: tabular-nums;
}

.chamada {
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--text-secondary);
  max-width: var(--prosa);
  margin: 0 0 2rem;
}

.heroi-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.rodape-nota {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin: 0;
}

/*
 * As quatro objeções respondidas no primeiro quadro.
 *
 * Régua em cima e nada mais: caixa, ícone ou cor aqui competiriam com o título,
 * que é o que precisa ser lido primeiro. A faixa é para ser varrida em dois
 * segundos, não estudada — daí o texto curto e o negrito só na palavra que
 * responde a objeção.
 */
.garantias {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 1.25rem 0 0;
  border-top: 1px solid var(--border);
  display: grid;
  gap: 1rem 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr));
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--text-secondary);
}

/* `display: block` separa a promessa da qualificação sempre no mesmo ponto. As
   quatro colunas só ficam alinhadas assim: deixar a quebra por conta da largura
   disponível produzia uma coluna de duas linhas ao lado de três de uma, e o
   desalinhamento lê como erro de montagem. Um `<br>` aqui somaria uma segunda
   quebra ao bloco e abriria um buraco entre as duas linhas. */
.garantias strong {
  display: block;
  color: var(--text-primary);
  font-weight: 600;
}

/* A frase que resume a seção, entre a etiqueta do título e o parágrafo de
   contexto. Existe porque quem rola rápido lê só isto — e precisa sair com a
   ideia inteira mesmo sem ler mais nada da seção. */
.resumo {
  font-family: var(--display);
  font-size: clamp(1.25rem, 2.5vw, 1.6rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin: 0 0 1rem;
  max-width: 30ch;
}

/* ---------------------------------------------------------- demonstrativo */

/* Tabela larga rola dentro do próprio contêiner: a página nunca rola de lado. */
.tabela-envoltorio {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--raio);
  background: var(--surface-1);
}

.dre {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  min-width: 34rem;
}

.dre caption {
  caption-side: top;
  text-align: left;
  padding: 1rem 1.25rem 0.75rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.dre th,
.dre td {
  padding: 0.65rem 1.25rem;
  text-align: left;
  font-weight: 400;
  border-bottom: 1px solid var(--border);
}

.dre thead th {
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom-color: var(--border-strong);
}

/* Toda coluna de dinheiro é monoespaçada, tabular e à direita. Sem isso as
   casas decimais não alinham, e a comparação entre as duas colunas — que é o
   ponto da tabela — some. */
.dre .num {
  text-align: right;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.dre tbody tr:last-child th,
.dre tbody tr:last-child td {
  border-bottom: none;
}

.dre .subtotal th,
.dre .subtotal td {
  border-bottom-color: var(--border-strong);
}

.dre .destaque {
  background: var(--acento-wash);
}

.dre .vazio {
  color: var(--text-muted);
}

.dre .resultado th,
.dre .resultado td {
  font-weight: 600;
}

.dre .forte {
  color: var(--acento);
}

/* A etiqueta marca a linha que explica a diferença inteira do demonstrativo.
   Usa o mesmo laranja dos selos de "atenção" do diagnóstico, e isso é
   deliberado: as duas coisas dizem a mesma frase — há um dado faltando, e o
   número ao lado está errado por causa dele. Fora estes dois lugares, a página
   não gasta cor nenhuma. */
.etiqueta {
  display: inline-block;
  font-family: var(--corpo);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--alerta);
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 0.05rem 0.45rem;
  margin-left: 0.4rem;
  vertical-align: 1px;
}

.nota {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  max-width: var(--prosa);
  margin: 1.25rem 0 0;
}

/* Depois de uma grade, 1,25rem não separa nada: as colunas terminam em alturas
   diferentes, e a nota encosta na mais baixa como se fosse o quarto parágrafo
   dela. Depois da tabela, que termina reta, 1,25rem basta. */
.diagnostico + .nota,
.alertas + .nota {
  margin-top: 2.5rem;
}

/* Parágrafo entre o título da seção e o conteúdo dela. O título é uma etiqueta
   pequena e em itálico — sozinho, não sustenta a entrada numa lista de seis
   itens técnicos. Uma frase antes diz o que se está prestes a ler. */
.abertura {
  font-size: 1rem;
  color: var(--text-secondary);
  max-width: var(--prosa);
  margin: 0 0 2.5rem;
}

/* ------------------------------------------------------------ diagnóstico */

/*
 * As seis verificações.
 *
 * Cada item tem quatro partes na mesma ordem em que a tela do produto as
 * mostra: o que foi verificado, o número apurado, por que ele importa e o que
 * fazer. A régua em cima de cada um vem no lugar de cartão com sombra — seis
 * caixas flutuando lêem como propaganda, e isto é um laudo.
 *
 * O mínimo de 22rem garante duas colunas e nunca três: com três, a explicação
 * de cada achado ficaria estreita demais para uma frase inteira caber sem
 * quebrar em quatro linhas.
 *
 * O `min(22rem, 100%)` não é preciosismo. Um `minmax(22rem, 1fr)` cru mantém as
 * 22rem mesmo quando a tela é menor que isso, e a coluna transborda: num
 * celular de 360px a PÁGINA INTEIRA passa a rolar de lado. O `min` deixa a
 * coluna encolher junto com o contêiner. Vale para todas as grades da folha.
 */
.diagnostico {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2.25rem 3rem;
  grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
}

.diagnostico li {
  border-top: 1px solid var(--border-strong);
  padding-top: 1rem;
}

.diagnostico h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.125rem;
  letter-spacing: -0.01em;
  margin: 0 0 0.5rem;
  text-wrap: balance;
}

.diagnostico p {
  margin: 0 0 0.6rem;
  font-size: 0.9375rem;
  color: var(--text-secondary);
}

.diagnostico p:last-child {
  margin-bottom: 0;
}

/* O número apurado é o que separa este bloco de uma lista de promessas: ele
   veio de uma consulta, e é escrito como número — monoespaçado, com as casas
   alinhadas, na cor do texto principal. */
.diagnostico .apurado {
  font-family: var(--mono);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

/* A linha de correção fecha cada achado. Sem ela o diagnóstico seria uma lista
   de acusações; com ela, cada item vira uma tarefa de alguém. O rótulo vem do
   CSS porque é apresentação — o texto no HTML é a ação, e só ela. */
.corrigir::before {
  content: "Como corrigir — ";
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.corrigir {
  border-left: 2px solid var(--acento);
  padding-left: 0.75rem;
}

/*
 * O selo de status.
 *
 * Duas cores e duas só: vermelho para o que impede a conta de fechar, laranja
 * para o que a distorce. Um terceiro nível ("ok") não aparece aqui de
 * propósito — a página mostra o que foi encontrado, e um selo verde ao lado de
 * cinco vermelhos disputaria a leitura com eles.
 */
.selo {
  display: inline-block;
  font-family: var(--corpo);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 0.05rem 0.45rem;
  margin-left: 0.4rem;
  vertical-align: 2px;
  white-space: nowrap;
}

.selo.critico {
  color: var(--critico);
}

.selo.atencao {
  color: var(--alerta);
}

/* ------------------------------------------------------------------- tela */

/*
 * A moldura que transforma a lista de verificações na tela do produto.
 *
 * A página não tinha imagem nenhuma do que se compra, e um print de verdade
 * exigiria dado de cliente — o que não vai para página pública. A moldura
 * resolve os dois: mostra a forma da interface sem inventar um print e sem
 * expor ninguém.
 *
 * Sem sombra e sem semáforo de macOS. Três bolinhas coloridas fariam parecer
 * captura de tela, que é justamente o que isto não é.
 */
.tela {
  border: 1px solid var(--border-strong);
  border-radius: var(--raio);
  background: var(--surface-1);
  overflow: hidden;
}

.tela-barra {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  padding: 0.7rem 1.25rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: var(--text-muted);
}

/* Um ponto só, na cor de alerta: é o indicador de que a tela tem achado
   pendente — a mesma informação que o produto dá no menu. */
.tela-ponto {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--alerta);
  flex: none;
}

.tela .diagnostico {
  padding: 1.75rem 1.25rem 1.5rem;
}

/* ---------------------------------------------------------------- alertas */

/* Cinco itens curtos, três por linha. Aqui a explicação é uma frase e não um
   parágrafo, então a coluna pode ser mais estreita que a do diagnóstico. */
.alertas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.75rem 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
}

.alertas li {
  border-top: 1px solid var(--border);
  padding-top: 0.9rem;
}

.alertas h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.0625rem;
  margin: 0 0 0.35rem;
}

.alertas p {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--text-secondary);
}

/* ----------------------------------------------------------------- passos */

/* A numeração aqui carrega informação de verdade: os três passos acontecem
   nesta ordem e cada um depende do anterior. Onde não houver sequência real,
   número é decoração. */
.passos {
  list-style: none;
  counter-reset: passo;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 2.5rem;
}

.passos li {
  counter-increment: passo;
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: 0 1rem;
  align-items: baseline;
}

.passos li::before {
  content: counter(passo, decimal-leading-zero);
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--text-muted);
  padding-top: 0.2rem;
}

.passos h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.375rem;
  letter-spacing: -0.01em;
  margin: 0 0 0.5rem;
}

.passos p {
  grid-column: 2;
  margin: 0;
  color: var(--text-secondary);
  max-width: var(--prosa);
}

/* ---------------------------------------------------------- o que precisa ter */

/* Encostado nos passos, e não uma seção nova: é a mesma pergunta ("como isso
   entra na minha loja?") vista do lado de quem vai providenciar. */
.requisitos {
  margin-top: 3rem;
  padding: 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--raio);
  background: var(--surface-1);
  max-width: var(--prosa);
}

.requisitos h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.125rem;
  margin: 0 0 0.75rem;
}

.requisitos ul {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.9375rem;
  color: var(--text-secondary);
}

.requisitos li + li {
  margin-top: 0.4rem;
}

/* -------------------------------------------------------------- perguntas */

/* São quatro perguntas, e o mínimo é largo o bastante para caberem duas por
   linha e nunca três. Com três colunas a quarta ficava órfã, e um bloco solto
   ao lado de dois vazios lê como se faltasse conteúdo. */
.perguntas {
  margin: 0;
  display: grid;
  gap: 2rem 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(21rem, 100%), 1fr));
}

.perguntas dt {
  font-weight: 600;
  margin-bottom: 0.4rem;
}

.perguntas dd {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.9375rem;
}

/* -------------------------------------------------------------- recursos */

.grade {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--raio);
  overflow: hidden;
}

/* Uma grade de cartões com sombra viraria seis caixas flutuando. Aqui os
   quadros dividem a régua: é uma tabela, e o produto é sobre tabelas. */
.grade article {
  background: var(--plane);
  padding: 1.5rem;
}

.grade h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.125rem;
  margin: 0 0 0.4rem;
}

.grade p {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--text-secondary);
}

/* ------------------------------------------------------- chamada do meio */

/*
 * A única interrupção da página.
 *
 * Quem chegou aqui já viu o problema e a prova, e é o melhor momento dele —
 * mandá-lo rolar mais quatro seções até o formulário perde a pessoa por
 * cansaço. Duas ou três faixas dessas na mesma página viram anúncio e a leitura
 * passa a desviar delas; por isso existe uma só.
 *
 * Fundo de superfície e não cor cheia: um bloco colorido no meio de uma página
 * de tabelas leria como banner de terceiro, e a primeira reação a banner é
 * pular.
 */
.chamada-meio {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 2.5rem;
  padding: 2rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--raio);
  background: var(--surface-1);
}

.chamada-meio h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.3rem, 3vw, 1.75rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin: 0 0 0.5rem;
  max-width: 24ch;
}

.chamada-meio p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.9375rem;
  max-width: 46ch;
}

/* ------------------------------------------------------------ fechamento */

.fechamento {
  padding: 3rem 0 0;
  border-top: 1px solid var(--border);
}

.fechamento h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.6rem, 3.5vw, 2.25rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin: 0 0 1rem;
  max-width: 22ch;
}

.fechamento p {
  color: var(--text-secondary);
  max-width: var(--prosa);
  margin: 0 0 1.75rem;
}

/* A garantia é o último argumento antes do formulário. Ganha a barra de acento
   porque é a única frase da página em que o risco muda de lado — e quem está
   decidindo preencher precisa vê-la sem procurar. */
.fechamento .garantia {
  border-left: 2px solid var(--acento);
  padding-left: 1rem;
  color: var(--text-primary);
  font-size: 1.0625rem;
  max-width: 46ch;
  margin-bottom: 2.5rem;
}

/*
 * Formulário e "o que acontece depois", lado a lado.
 *
 * Abaixo não serve: quem hesita em preencher hesita por não saber o que vem
 * depois, e a resposta precisa estar no mesmo quadro em que ele decide. O
 * mínimo de 20rem quebra a coluna antes de o formulário ficar apertado —
 * campo espremido é o jeito mais rápido de fazer alguém desistir de preencher.
 */
.fechamento-grade {
  display: grid;
  gap: 2.5rem 3.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  align-items: start;
}

.depois {
  padding: 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--raio);
  background: var(--surface-1);
}

.depois h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.125rem;
  margin: 0 0 1rem;
}

.depois ol {
  margin: 0 0 1rem;
  padding-left: 1.1rem;
  font-size: 0.9375rem;
  color: var(--text-secondary);
}

.depois li + li {
  margin-top: 0.7rem;
}

.depois strong {
  color: var(--text-primary);
  font-weight: 600;
}

.depois > p {
  margin: 0;
  font-size: 0.875rem;
  color: var(--text-muted);
}

/* ---------------------------------------------------------------- rodapé */

.rodape {
  max-width: var(--largura);
  margin: 6rem auto 0;
  padding: 1.75rem 1.5rem 3rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: space-between;
  font-size: 0.875rem;
  color: var(--text-muted);
}

.rodape nav {
  display: flex;
  gap: 1.5rem;
}

.rodape a {
  color: inherit;
  text-decoration: none;
}

.rodape a:hover {
  color: var(--text-primary);
}

@media (max-width: 34rem) {
  main {
    gap: 4.5rem;
  }

  .heroi {
    padding-top: 3rem;
  }

  .passos li {
    grid-template-columns: 1fr;
  }

  .passos p {
    grid-column: 1;
  }

  .passos li::before {
    padding-top: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}

/* ==================================================================
   Documentação
   ==================================================================
   Mesmo arquivo e mesmos tokens da landing, de propósito: a
   documentação é a mesma marca, e duas folhas separadas divergem no
   primeiro ajuste de cor. As classes daqui não aparecem na landing.
   ================================================================== */

.doc-corpo {
  display: grid;
  /* Três colunas: menu, texto, índice da página. `minmax(0, 1fr)` no meio e
     não `1fr` — sem isso um bloco de código longo empurra a coluna e a página
     inteira ganha rolagem horizontal. */
  grid-template-columns: 14rem minmax(0, 1fr) 12rem;
  gap: 2.5rem;
  /* Mais larga que a landing (62rem), e por necessidade: com menu e índice nas
     laterais, 62rem deixavam 31rem para o texto — menos que o `max-width` de
     46rem do próprio conteúdo, que então transbordava POR CIMA do índice. */
  max-width: 80rem;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 4rem;
  align-items: start;
}

.doc-menu {
  position: sticky;
  top: 1.5rem;
  font-size: 0.9rem;
}

.doc-menu .grupo + .grupo { margin-top: 1.75rem; }

.doc-menu h2 {
  font-family: var(--corpo);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 0.6rem;
}

.doc-menu ul { list-style: none; margin: 0; padding: 0; }
.doc-menu li { margin: 0; }

.doc-menu a {
  display: block;
  padding: 0.3rem 0.6rem;
  margin-left: -0.6rem;
  border-radius: var(--raio);
  color: var(--text-secondary);
  text-decoration: none;
  line-height: 1.4;
}

.doc-menu a:hover { background: var(--surface-2); color: var(--text-primary); }

.doc-menu a[aria-current="page"] {
  background: var(--acento-wash);
  color: var(--acento);
  font-weight: 600;
}

/* A landing declara `main` como flex-column com `gap: 6rem` — o ritmo de
   seções de uma página de marketing. Num texto corrido isso põe 96px entre
   CADA elemento, parágrafos inclusive, e nenhuma margem local compete com
   `gap` (que não colapsa). Volta a ser fluxo normal aqui. */
.doc-conteudo {
  display: block;
  gap: 0;
  max-width: 46rem;
  padding: 0;
}
.doc-conteudo h1 { margin-top: 0; }

.doc-resumo {
  font-size: 1.1rem;
  color: var(--text-secondary);
  margin-top: -0.5rem;
}

.doc-conteudo h2 {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}

.doc-conteudo h3 { margin-top: 2rem; }

/* Blocos de código rolam dentro de si; a página nunca rola de lado. */
.doc-conteudo pre {
  overflow-x: auto;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--raio);
  padding: 1rem;
  font-size: 0.85rem;
  line-height: 1.6;
}

.doc-conteudo pre code { background: none; padding: 0; font-size: inherit; }

.doc-conteudo table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  margin: 1.5rem 0;
}

.doc-conteudo th,
.doc-conteudo td {
  text-align: left;
  padding: 0.55rem 0.8rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.doc-conteudo th { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }

.aviso {
  border-left: 3px solid var(--acento);
  background: var(--surface-1);
  border-radius: 0 var(--raio) var(--raio) 0;
  padding: 0.9rem 1.1rem;
  margin: 1.5rem 0;
}

.aviso > b {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--acento);
  margin-bottom: 0.35rem;
}

.aviso p:last-child { margin-bottom: 0; }
.aviso-atencao { border-left-color: var(--alerta); }
.aviso-atencao > b { color: var(--alerta); }
.aviso-certo { border-left-color: #2f9e5f; }
.aviso-certo > b { color: #2f9e5f; }

/* Passos: a numeração vem do contador, não do markdown, porque cada
   passo é uma seção com conteúdo próprio e não um item de lista. */
.passos { counter-reset: passo; margin: 1.5rem 0; }

.passo {
  counter-increment: passo;
  position: relative;
  padding-left: 2.75rem;
  padding-bottom: 0.5rem;
  border-left: 1px solid var(--border);
  margin-left: 0.9rem;
}

.passo:last-child { border-left-color: transparent; }

.passo::before {
  content: counter(passo);
  position: absolute;
  left: -0.9rem;
  top: 0;
  width: 1.8rem;
  height: 1.8rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--acento);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.passo > h3 { margin-top: 0.15rem; }

.sanfona { margin: 1.5rem 0; }

.sanfona details,
.doc-conteudo > details {
  border: 1px solid var(--border);
  border-radius: var(--raio);
  padding: 0.8rem 1.1rem;
  margin-bottom: 0.6rem;
  background: var(--surface-1);
}

.sanfona summary,
.doc-conteudo > details summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--text-primary);
}

.cartoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}

.cartao {
  display: block;
  border: 1px solid var(--border);
  border-radius: var(--raio);
  padding: 1.1rem;
  background: var(--surface-1);
  text-decoration: none;
  color: inherit;
}

a.cartao:hover { border-color: var(--acento); }
.cartao > b { display: block; margin-bottom: 0.4rem; color: var(--text-primary); }
.cartao p:last-child { margin-bottom: 0; }

.abas { margin: 1.5rem 0; }

.aba {
  border: 1px solid var(--border);
  border-radius: var(--raio);
  padding: 0.4rem 1.1rem 1rem;
  margin-bottom: 0.8rem;
  background: var(--surface-1);
}

.campo {
  border-top: 1px solid var(--border);
  padding: 1rem 0;
}

.campo-cabeca {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem;
  margin-bottom: 0.4rem;
}

.campo-cabeca code { font-size: 0.9rem; font-weight: 600; }

.campo-tipo,
.campo-obrigatorio {
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.campo-obrigatorio { color: var(--alerta); }
.campo p:last-child { margin-bottom: 0; }

/* Em tela média o índice sai primeiro: ele é o item mais dispensável dos
   três, e mantê-lo espremeria a coluna de texto abaixo do confortável. */
@media (max-width: 70rem) {
  .doc-corpo { grid-template-columns: 14rem minmax(0, 1fr); }
  .doc-indice { display: none; }
}

@media (max-width: 52rem) {
  .doc-corpo {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    padding-top: 1.5rem;
  }

  .doc-passagem { flex-direction: column; }
  .doc-passagem a { max-width: none; }

  /* Solto do topo no celular: preso, o menu comeria metade da tela. */
  .doc-menu {
    position: static;
    border-bottom: 1px solid var(--border);
    padding-bottom: 1.25rem;
  }
}

/* O ritmo da landing é de página de marketing: respiro largo entre blocos
   curtos. Num texto de leitura corrida isso vira buraco — três avisos seguidos
   ficavam com mais espaço entre eles do que altura própria. */
.doc-conteudo p { margin: 0 0 1rem; }
.doc-conteudo ul,
.doc-conteudo ol { margin: 0 0 1rem; padding-left: 1.4rem; }
.doc-conteudo li { margin-bottom: 0.35rem; }
.doc-conteudo .aviso { margin: 1.1rem 0; }
/* Avisos em sequência (uma lista de pré-requisitos, por exemplo) colam. */
.doc-conteudo .aviso + .aviso { margin-top: -0.4rem; }
.doc-conteudo pre { margin: 0 0 1.2rem; }
.doc-conteudo h2 { margin-bottom: 0.9rem; }
.doc-conteudo h3 { margin-bottom: 0.6rem; }
.doc-resumo { margin-bottom: 2rem; }

/* ==================================================================
   Formulário de contato
   ==================================================================
   Substituiu o endereço de e-mail no fechamento. O e-mail pedia que a
   pessoa saísse da página, abrisse o cliente de e-mail e escrevesse do
   zero — três passos onde antes havia uma decisão.
   ================================================================== */

.formulario {
  margin-top: 2rem;
  /* Alinhado à esquerda, na MESMA coluna do título e do texto da seção.
     Centralizar o formulário sozinho criava duas margens esquerdas
     diferentes na mesma seção — o olho vê o desencontro antes de ler. */
  max-width: 40rem;
  display: grid;
  gap: 1rem;
}

/* O atributo `hidden` do HTML vale como `display: none` na folha do
   navegador, e QUALQUER `display` declarado numa classe ganha dele. Sem esta
   linha, esconder o formulário no envio não faz nada — ele fica na tela ao lado
   da confirmação, convidando ao reenvio. */
.formulario[hidden] { display: none; }

.formulario .linha {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1rem;
}

.formulario .campo {
  display: grid;
  gap: 0.35rem;
}

.formulario .campo > span {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

/* "opcional" precisa ser visível para reduzir o abandono, e discreto para
   não competir com o rótulo. */
.formulario .campo em {
  font-style: normal;
  color: var(--text-muted);
  font-size: 0.78rem;
}

.formulario input,
.formulario select,
.formulario textarea {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--raio);
  background: var(--surface-1);
  color: var(--text-primary);
  font: inherit;
  font-size: 0.95rem;
}

.formulario textarea { resize: vertical; }

.formulario input:focus-visible,
.formulario select:focus-visible,
.formulario textarea:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 1px;
  border-color: transparent;
}

/* A armadilha some para gente e continua existindo para robô. `display:none`
   não serve: parte dos preenchedores automáticos ignora campo oculto assim,
   e a armadilha deixaria de pegar. */
.armadilha {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formulario-rodape {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  margin-top: 0.5rem;
}

/* Ao lado do botão e não abaixo: é a frase que tira o receio de clicar
   ("sem cadastro", "sem instalar nada"), e embaixo ela chega tarde. */
.formulario-nota {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-muted);
  max-width: 22rem;
}

.formulario-recado {
  margin: 0;
  font-size: 0.95rem;
}

.formulario-recado:empty { display: none; }

.formulario-recado-ok {
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--acento);
  border-radius: var(--raio);
  background: var(--acento-wash);
  color: var(--text-primary);
  font-size: 1.05rem;
}

.formulario-recado-erro { color: var(--critico); }

/* ------------------------------------------------- índice da página */

.doc-indice {
  position: sticky;
  top: 1.5rem;
  font-size: 0.85rem;
  border-left: 1px solid var(--border);
  padding-left: 1rem;
}

.doc-indice h2 {
  font-family: var(--corpo);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 0.6rem;
  border: none;
  padding: 0;
}

.doc-indice ul { list-style: none; margin: 0; padding: 0; }

.doc-indice a {
  display: block;
  padding: 0.25rem 0;
  color: var(--text-secondary);
  text-decoration: none;
  line-height: 1.35;
}

.doc-indice a:hover { color: var(--acento); }

/* Uma âncora que para debaixo do cabeçalho fixo faz o título sumir e parece
   que o link levou ao lugar errado. */
.doc-conteudo h2 { scroll-margin-top: 1.5rem; }

/* -------------------------------------------- anterior e próxima */

.doc-passagem {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 3.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}

.doc-passagem a {
  display: grid;
  gap: 0.15rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--raio);
  text-decoration: none;
  max-width: 48%;
}

.doc-passagem a:hover { border-color: var(--acento); }

.doc-passagem-proxima { text-align: right; margin-left: auto; }

.doc-passagem span {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.doc-passagem b {
  color: var(--text-primary);
  font-weight: 600;
  font-size: 0.95rem;
}