/* ==========================================================================
   Landing — o laboratório, na linguagem da referência

   Esta folha vive à parte do resto do site de propósito. A landing e as telas
   de trabalho fazem trabalhos diferentes: `/minutas` e `/chat` se usam todo dia
   e por isso rodam no modo calmo (`gabinete.css`), onde a marca é acento; a
   landing se lê uma vez, e ali o enquadramento de 2px e a sombra dura são o que
   dá personalidade. As duas convivem porque nada aqui sai de `.land`.

   O que a página herda do site: a família tipográfica (Space Grotesk para
   display, JetBrains Mono para o lado-máquina, Public Sans no corpo — todas já
   carregadas pelo `base.html`) e o amarelo da marca (#FFDC58, o mesmo do botão
   da navbar; a referência usava um ouro 8% mais escuro, e dois amarelos lado a
   lado na mesma tela brigariam).

   REGRA DO AMARELO — ele tem três empregos, e a lista é fechada:
     1. a ação primária (criar conta);
     2. o bloco ATIVO da trilha do agente, e só um por vez;
     3. a marca-texto do título.
   Qualquer quarto uso o transforma em cor de fundo, e aí ele deixa de apontar.

   ⚠️ O ocre (`--l-ouro`) NÃO é um quarto amarelo: ele marca o que está EM CURSO
   (item da lista sendo executado, ponto do subagente rodando), e existe
   justamente para que "acontecendo agora" não dispute o amarelo com "este é o
   bloco da vez". São dois eixos diferentes na mesma peça.

   ⚠️ `custom.css` estiliza `a`, `p`, `h1-h6` e `code` em seletor nu (e os campos
   com `!important`). Onde isso morde está anotado no ponto.
   ========================================================================== */

/* ⚠️ Os tokens moram no BODY, não no `.land`.

   Variável customizada herda para baixo, nunca para cima: declarada no `.land`,
   ela ficava invisível para `body.is-landing`, cujo `background: var(--l-fundo)`
   virava declaração inválida e era descartada em silêncio. O resultado era uma
   faixa creme (#FEF6E4, o fundo do `html` no `custom.css`) aparecendo abaixo da
   última seção, como se a página tivesse acabado antes do rodapé.

   Ficam aqui e não no `:root` porque são da landing: no `:root` vazariam para
   o gabinete e para o chat, que têm paleta própria. */
body.is-landing,
body.is-entrar {
    /* Superfícies — o creme da marca em três níveis. O fundo é o mais escuro
       dos três: é ele que faz a folha branca do painel parecer folha. */
    --l-fundo:  #FAF8F3;
    --l-folha:  #FFFDF7;
    --l-faixa:  #F4EFE2;
    --l-fio:    #DED7C4;

    --l-tinta:  #111010;
    --l-texto:  #4A463D;
    /* ⚠️ O mono miúdo (rótulos de 10-11px) NÃO usa o #8A8477 da referência:
       ele dá 3,2:1 sobre o creme e reprova em AA justamente no tamanho em que
       a folga mais importa. #6F6A5E dá 5,0:1. */
    --l-fraco:  #6F6A5E;

    --l-marca:  #FFDC58;
    /* Ouro para marcador gráfico (setas, bullets): 4,0:1 sobre o creme, acima
       do piso de 3:1 para objeto não-textual. O #C9A400 da referência dava
       2,3:1 e reprovava. */
    --l-ouro:   #A67A00;
    /* Ouro de TEXTO, para a string do CNJ dentro do bloco de código: 6,2:1
       sobre a faixa. */
    --l-ouro-t: #6B5C00;

    --l-larg:   72rem;

    background: var(--l-fundo);
}

.land { color: var(--l-tinta); background: var(--l-fundo); }
/* A grade de pontos do brutalismo sai: numa página com dezenas de molduras ela
   vira ruído atrás de tudo. O enquadramento já dá a textura. */
body.is-landing::before { display: none; }
.land-main { padding: 0 !important; }

/* ⚠️ Esta regra tem especificidade (0,1,1) e VENCE qualquer `.componente`
   (0,1,0) — inclusive quando o componente é um `<p>`. Foi assim que a citação
   do painel saiu preta sobre preta: `.land-trab__citacao` pintava o fundo de
   tinta e pedia texto claro, e esta regra devolvia o texto para tinta. Todo
   componente que declare cor própria num `<p>` precisa de (0,2,0) — o prefixo
   `.land .componente`. Mesmo precedente do `.gab a` no `gabinete.css`. */
.land p { color: var(--l-tinta); line-height: 1.6; }

/* ⚠️ `custom.css` dá a todo link sublinhado amarelo de 2px e fundo amarelo no
   hover. Numa página com dezenas de links isso vira faixa listrada — e aqui o
   amarelo tem dono. O link corrido fica sóbrio; o destaque é dos CTAs. */
.land a:not([class]) {
    color: var(--l-tinta);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: currentColor;
    text-underline-offset: 3px;
    background: none;
}
.land a:not([class]):hover { color: var(--l-ouro-t); background: none; }

/* --- estrutura de seção --------------------------------------------------- */

/* O fio de 2px entre seções é o esqueleto da página: ele diz onde um assunto
   acaba e outro começa, sem precisar de um título maior nem de mais espaço. */
.land-sec { border-top: 2px solid var(--l-tinta); }
.land-sec--folha { background: var(--l-folha); }
.land-sec--faixa { background: var(--l-faixa); }

.land-w {
    width: 100%;
    max-width: var(--l-larg);
    margin-inline: auto;
    padding: 5.25rem 2.5rem;
}
.land-w--estreito { max-width: 56rem; }

.land-olho {
    font-family: var(--font-mono);
    font-size: .66rem;
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--l-fraco) !important;
    margin: 0 0 .9rem;
}
.land-titulo {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(1.85rem, 4.2vw, 2.75rem);
    line-height: 1.06;
    letter-spacing: -.025em;
    margin: 0 0 1.1rem;
}
.land-sub {
    font-size: 1.09rem;
    line-height: 1.55;
    color: var(--l-texto) !important;
    max-width: 44em;
    margin: 0 0 2.75rem;
    text-wrap: pretty;
}

/* --- botões ---------------------------------------------------------------
   A sombra dura é do botão primário e de mais nada. Ela não é enfeite: é o que
   diz "este é o botão", num layout em que toda caixa tem borda de 2px. */

.land .land-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    border: 2px solid var(--l-tinta);
    background: var(--l-marca);
    color: var(--l-tinta);
    padding: .9rem 1.6rem;
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 1.03rem;
    text-decoration: none;
    box-shadow: 4px 4px 0 var(--l-tinta);
    transition: box-shadow .12s ease, transform .12s ease, background .12s ease;
}
/* Afundar o botão no hover em vez de levantá-lo: com sombra sólida, o gesto
   que se reconhece é o de apertar. */
.land .land-btn:hover {
    box-shadow: 2px 2px 0 var(--l-tinta);
    transform: translate(2px, 2px);
    background: var(--l-marca);
}
.land .land-btn:active { box-shadow: 0 0 0 var(--l-tinta); transform: translate(4px, 4px); }

.land .land-btn--calmo {
    background: var(--l-folha);
    box-shadow: none;
}
.land .land-btn--calmo:hover {
    background: var(--l-faixa);
    box-shadow: none;
    transform: none;
}
.land .land-btn--peq { padding: .72rem 1.2rem; font-size: .95rem; box-shadow: none; }
.land .land-btn--peq:hover { box-shadow: 3px 3px 0 var(--l-tinta); transform: none; }

.land-ctas { display: flex; flex-wrap: wrap; gap: .9rem; }

/* Foco visível — a borda de 2px já é preta, então o anel precisa de cor
   própria para aparecer sobre ela. */
.land a:focus-visible,
.land button:focus-visible,
.land summary:focus-visible {
    outline: 3px solid var(--l-ouro-t);
    outline-offset: 3px;
}

/* --- faixa beta ----------------------------------------------------------- */

.land-beta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: .45rem .9rem;
    background: var(--l-faixa);
    border-bottom: 1px solid #E0D9C6;
    padding: .65rem 1.5rem;
    margin: 0;
    font-size: .86rem;
    color: var(--l-texto) !important;
    text-align: center;
}
.land-beta__tag {
    font-family: var(--font-mono);
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .14em;
    background: var(--l-tinta);
    color: var(--l-marca);
    padding: .25rem .5rem;
}

/* ==========================================================================
   HERO
   ========================================================================== */

/* ⚠️ A dobra é apertada e a conta é esta: navbar (~64px) + faixa beta (~40px) +
   o painel (~650px) + este padding, contra os 900px de um notebook. Com os
   5,25rem de `.land-w` a trilha estourava a dobra por alguns pixels — e o
   argumento inteiro da página é ver o turno acontecer sem rolar. */
.land-hero > .land-w { padding-block: 4.25rem; }

.land-hero__grade {
    display: grid;
    /* A trilha do turno é densa — tem código mono, uma lista de tarefas e três
       cards de subagente lá dentro — e não sobrevive abaixo de ~420px. Por isso
       as colunas são quase iguais, e não 1.25/0.85 como quando a arte era
       abstrata. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
    gap: 3.5rem;
    align-items: center;
}

.land-selo {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .55rem;
    border: 1.5px solid var(--l-fio);
    border-radius: 999px;
    padding: .35rem 1rem .35rem .35rem;
    margin: 0 0 1.75rem;
    background: var(--l-folha);
    font-family: var(--font-mono);
    font-size: .69rem;
    letter-spacing: .08em;
    color: var(--l-fraco) !important;
}
.land-selo__forte {
    font-weight: 700;
    color: var(--l-tinta);
    background: var(--l-marca);
    border-radius: 999px;
    padding: .3rem .75rem;
}

/* ⚠️ Menor que o título anterior, e não é timidez: aquele era "A IA lê os autos
   em tempo real" — cinco palavras curtas, que a 4rem cabiam em duas linhas.
   Este tem oito e, no mesmo corpo, ocupava QUATRO linhas de 64px, empurrando os
   botões para fora da dobra junto com a trilha. Título longo pede corpo menor;
   o inverso é como se perde a primeira dobra sem perceber. */
.land-hero h1 {
    font-family: var(--font-heading);
    font-size: clamp(2.15rem, 4.4vw, 3.35rem);
    line-height: 1.05;
    letter-spacing: -.03em;
    font-weight: 700;
    margin: 0 0 1.4rem;
    text-wrap: balance;
}
/* Marca-texto em vez de bloco chapado: o amarelo passa POR TRÁS da palavra, na
   altura da linha de base, como um traço de marcador — e não vira retângulo.
   Ela entra no fim do ciclo do painel ao lado, no mesmo compasso. */
.land-marca {
    background-image: linear-gradient(var(--l-marca), var(--l-marca));
    background-repeat: no-repeat;
    background-position: 0 88%;
    background-size: 100% 42%;
    /* A sangria à esquerda dá respiro ao traço; à direita ela é recolhida por
       margem negativa, senão o ponto final da frase fica solto a meio espaço
       da palavra — visível no tamanho do <h1>. */
    padding: 0 .1em;
    margin-right: -.07em;
    /* ⚠️ Anda no relógio do painel (`--l-ciclo`, declarado em `.land-hero`) e
       acende DEPOIS da resposta: o traço é o arremate do ciclo, não um efeito
       à parte. `backwards` é obrigatório — ver a nota do compasso adiante. */
    animation: landMarca var(--l-ciclo) ease-in-out infinite backwards;
}
@keyframes landMarca {
    0%, 84%   { background-size: 0% 42%; }
    92%, 100% { background-size: 100% 42%; }
}

.land-hero__lead {
    font-size: 1.15rem;
    line-height: 1.55;
    color: var(--l-texto) !important;
    max-width: 32em;
    margin: 0 0 1.1rem;
    text-wrap: pretty;
}
.land-hero__lead:last-of-type { margin-bottom: 2.1rem; }
.land-hero__nota {
    font-family: var(--font-mono);
    font-size: .72rem;
    line-height: 1.7;
    color: var(--l-fraco) !important;
    margin: 1.4rem 0 0;
    max-width: 34em;
}

/* ==========================================================================
   A TRILHA DO TURNO — o elemento-assinatura

   O hero não mostra captura de tela nem arte abstrata: mostra UM TURNO do
   agente, na ordem em que ele acontece — a pergunta, o plano que ele escreve
   ANTES de agir, os três leitores que ele despacha AO MESMO TEMPO, e a resposta
   com a peça citada.

   ⚠️ O PAINEL ANTERIOR (`.land-ses`) DESENHAVA O ARGUMENTO ERRADO: quatro
   passos lineares — pergunta, uma chamada `mapear_processo`, peças, resposta.
   É a figura exata de um prompt simples, que é justamente o que esta página
   existe para negar. Nada dele sobreviveu por herança; o que voltou (o cromo do
   topo, o traço de fluxo, a citação) voltou reescrito.

   A FORMA é a do painel de trabalho do produto (`templates/chat.html` ›
   `.chat-trabalho`): topo com rótulo, plano em `<ol>` com caixa de estado por
   item, card de subagente com ponto + nome + cronômetro + a linha do que ele lê
   agora, e a pasta do filesystem no pé. Importou-se a ANATOMIA; a cor continua
   sendo a da landing (`--l-*`), porque a paleta do gabinete (`--g-*`) seria um
   segundo sistema na mesma tela — e o raio de 10px do produto, um canto curvo
   numa página que não tem nenhum.

   Toda a boldness da página continua gasta aqui. O resto é enquadramento
   quieto, de propósito.
   ========================================================================== */

/* --- o compasso ------------------------------------------------------------

   Tudo anda em UM relógio, declarado em `.land-hero` e não no painel: o
   marca-texto do `<h1>` também o consome e é IRMÃO do painel, não descendente —
   variável customizada herda para baixo, nunca para cima.

   Cada elemento diz só em QUE bloco entra (`--i`, 0 a 3) e, quando precisa,
   quanto atrasa dentro do bloco (`--d`). Mudar o ritmo da peça inteira é mudar
   um número.

   ⚠️ `animation-fill-mode: backwards` NÃO é enfeite: é o conserto de um defeito
   que o painel antigo tinha no lugar mais caro possível. Com `animation-delay`
   e sem `fill-mode`, o navegador não aplica keyframe nenhum durante o atraso e
   pinta o estilo cascateado — ou seja, na PRIMEIRA pintura o hero mostrava os
   quatro passos completos, resposta e citação inclusive, e só então começava a
   apagá-los um a um. Todo visitante novo via o fim antes do começo.

   ⚠️ Nada aqui anima `height`, `display` nem `margin`: o painel tem a altura
   final desde a primeira pintura. Se algum elemento passar a crescer durante o
   ciclo, a coluna do hero pula quatro vezes por laço. */

.land-hero {
    --l-ciclo: 11s;
    --l-passo: calc(var(--l-ciclo) / 4);
}

.land-trab__bloco,
.land-trab__entra,
.land-trab__todo::before,
.land-trab__todo::after,
.land-trab__leitor,
.land-trab__no,
.land-trab__fita,
.land-trab__arqs {
    animation-duration: var(--l-ciclo);
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-fill-mode: backwards;
    animation-delay: calc(var(--i, 0) * var(--l-passo) + var(--d, 0s));
}

/* --- a moldura ------------------------------------------------------------ */

.land-trab {
    position: relative;
    max-width: 35rem;
    margin-inline: auto;
    background: var(--l-folha);
    border: 2px solid var(--l-tinta);
    /* Sombra dura, mas a 12% de opacidade: a moldura precisa de profundidade
       sem competir com o botão primário, que é o único preto sólido da dobra. */
    box-shadow: 10px 10px 0 rgba(17, 16, 16, .12);
}

.land .land-trab__topo,
.land .land-trab__pe {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .5rem 1rem;
    margin: 0;
    background: var(--l-faixa);
    font-family: var(--font-mono);
    font-size: .64rem;
    line-height: 1.45;
    color: var(--l-texto);
}
.land-trab__topo { justify-content: space-between; border-bottom: 1.5px solid var(--l-tinta); }
.land-trab__pe   { border-top: 1.5px solid var(--l-tinta); }
.land-trab__rot  { letter-spacing: .14em; font-weight: 700; color: var(--l-tinta); }

.land-trab__vivo { display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap; }
.land-trab__vivo::before {
    content: "";
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--l-marca);
    border: 1px solid var(--l-tinta);
    animation: landPisca 1.4s steps(1, end) infinite;
}
@keyframes landPisca { 0%, 49% { opacity: 1; } 50%, 100% { opacity: .15; } }

.land-trab__fluxo { width: 60px; height: 8px; flex: 0 0 60px; }
.land-trab__fluxo .corre { animation: landCorre 1.6s linear infinite; }
@keyframes landCorre { from { stroke-dashoffset: 260; } to { stroke-dashoffset: 0; } }

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

.land-trab__corpo {
    display: grid;
    gap: .4rem;
    padding: .65rem;
}
/* ⚠️ Item de grid nasce com `min-width: auto` e NÃO encolhe abaixo do próprio
   conteúdo: em 360px os quatro blocos da trilha ficavam 332px de largura dentro
   de um pai de 319 e empurravam a PÁGINA INTEIRA 2px para a direita — scroll
   horizontal em toda a landing por causa de dois pixels, que no telefone é a
   página "tremendo" ao rolar. Medido em 24/08/2026; o `min-width: 0` é o
   contrato explícito de "pode encolher". */
.land-trab__corpo > * { min-width: 0; }

.land-trab__bloco {
    --i: 0;
    border: 1.5px solid var(--l-fio);
    background: var(--l-folha);
    padding: .55rem .7rem;
    animation-name: landTrabBloco;
}
.land-trab__bloco--q { --i: 0; }
.land-trab__bloco--p { --i: 1; }
.land-trab__bloco--s { --i: 2; }
.land-trab__bloco--r { --i: 3; }

/* O bloco da vez é o segundo emprego do amarelo — e só um está aceso por vez. */
@keyframes landTrabBloco {
    0%        { border-color: var(--l-fio);   background: var(--l-folha); box-shadow: 3px 3px 0 rgba(17,16,16,.05); }
    3%, 21%   { border-color: var(--l-tinta); background: #FFFAE6;        box-shadow: 6px 6px 0 var(--l-marca); }
    28%, 100% { border-color: var(--l-fio);   background: var(--l-folha); box-shadow: 3px 3px 0 rgba(17,16,16,.05); }
}

/* ⚠️ O conteúdo ENTRA E FICA — não cai para 34% depois da vez, como fazia o
   painel antigo. O que a peça precisa provar é que o turno inteiro aconteceu:
   apagar o plano quando os leitores começam desfaz a afirmação no momento em
   que ela fica interessante. Quem chega no meio do laço lê a trilha parada. */
.land-trab__entra { animation-name: landTrabEntra; }
@keyframes landTrabEntra {
    0%, 2%   { opacity: 0; transform: translateY(5px); }
    7%, 100% { opacity: 1; transform: none; }
}

.land-trab__rotulo {
    display: block;
    font-family: var(--font-mono);
    font-size: .59rem;
    letter-spacing: .16em;
    color: var(--l-fraco);
    margin-bottom: .45rem;
}
.land-trab__cab {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .25rem .6rem;
    margin-bottom: .5rem;
}
.land-trab__cab .land-trab__rotulo { margin-bottom: 0; }
.land-trab__nota { font-family: var(--font-mono); font-size: .59rem; color: var(--l-fraco); }

/* ⚠️ Prefixo `.land` obrigatório em todo `<p>` com cor própria: `.land p`
   (0,1,1) vence `.land-trab__fala` (0,1,0). Foi assim que a citação do painel
   antigo saiu preta sobre preta. */
.land .land-trab__fala {
    font-size: .9rem;
    line-height: 1.45;
    margin: 0;
    color: var(--l-tinta);
}

/* O cursor pisca no seu ritmo e SOME quando a pergunta é enviada. São duas
   animações no mesmo elemento de propósito: no painel antigo o caret piscava
   pelos quatro passos, dizendo que ninguém tinha apertado Enter enquanto a
   resposta já estava na tela. `visibility` e não `opacity`, para não disputar a
   propriedade com o pisca. */
.land-trab__caret {
    display: inline-block;
    width: 8px;
    height: 14px;
    background: var(--l-tinta);
    vertical-align: -2px;
    margin-left: 3px;
    animation: landCaret 1s steps(1, end) infinite,
               landTrabCaretFim var(--l-ciclo) linear 0s infinite backwards;
}
@keyframes landCaret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes landTrabCaretFim { 0%, 23% { visibility: visible; } 24%, 100% { visibility: hidden; } }

/* --- o odômetro (contador do plano e cronômetro dos leitores) --------------

   Contador e cronômetro são ESTADO DE WIDGET, não conteúdo: quem lê a lista já
   sabe quantos itens fecharam. Por isso vão `aria-hidden` e são desenhados como
   uma fita de valores atrás de uma janela de uma linha — sem JS, e sem `content`
   em keyframe, que não anima de forma confiável.

   ⚠️ Os `translateY` dependem do NÚMERO de `<i>` de cada fita. Acrescentar um
   valor no HTML sem mexer aqui trava o odômetro num número errado — e, no bloco
   de `prefers-reduced-motion`, num número errado que ninguém vê em revisão. */

.land-trab__conta,
.land-trab__crono {
    display: inline-block;
    height: 1em;
    overflow: hidden;
    font-family: var(--font-mono);
    font-size: .62rem;
    font-variant-numeric: tabular-nums;
    color: var(--l-texto);
}
.land-trab__fita { display: block; }
.land-trab__fita i { display: block; height: 1em; line-height: 1em; font-style: normal; }

.land-trab__conta .land-trab__fita { animation-name: landTrabConta; }
@keyframes landTrabConta {
    0%, 16%   { transform: none; }
    18%, 46%  { transform: translateY(-1em); }
    48%, 100% { transform: translateY(-2em); }
}

.land-trab__crono .land-trab__fita { animation-name: landTrabCrono; }
@keyframes landTrabCrono {
    0%, 5%    { transform: none; }
    6%, 10%   { transform: translateY(-1em); }
    11%, 15%  { transform: translateY(-2em); }
    16%, 20%  { transform: translateY(-3em); }
    21%, 100% { transform: translateY(-4em); }
}

/* --- o plano (write_todos) ------------------------------------------------ */

.land-trab__plano {
    list-style: none;
    margin: 0 0 .55rem;
    padding: 0;
    display: grid;
    gap: .28rem;
}
.land-trab__todo {
    position: relative;
    padding-left: 1.35rem;
    font-size: .76rem;
    line-height: 1.35;
    color: var(--l-texto);
}
/* a caixa de estado: vazia → ocre (em curso) → tinta (feito) */
.land-trab__todo::before {
    content: "";
    position: absolute;
    left: 0;
    top: .16em;
    width: 11px;
    height: 11px;
    border: 1.5px solid var(--l-fio);
    animation-name: landTrabTodoN;
}
/* o ✓ — dois traços girados, na cor do papel sobre a caixa de tinta. Cor do
   papel e não amarelo: o amarelo aqui seria um quarto emprego. */
.land-trab__todo::after {
    content: "";
    position: absolute;
    left: 3.5px;
    top: calc(.16em + 1px);
    width: 3px;
    height: 7px;
    border: solid var(--l-fundo);
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(42deg);
    opacity: 0;
    animation-name: landTrabCheckN;
}
/* ⚠️ O item 1 tem relógio PRÓPRIO: mapear é a única tarefa que o coordenador
   faz sozinho. Os outros três abrem juntos e fecham juntos — é exatamente isso
   que a delegação em paralelo é, e é o que a cena precisa afirmar. Dar a todos
   o mesmo relógio escalonado transformaria a peça numa fila. */
.land-trab__todo--um::before { animation-name: landTrabTodo1; }
.land-trab__todo--um::after  { animation-name: landTrabCheck1; }

@keyframes landTrabTodo1 {
    0%, 8%    { border-color: var(--l-fio);   background: transparent; }
    10%, 16%  { border-color: var(--l-ouro);  background: var(--l-ouro); }
    17%, 100% { border-color: var(--l-tinta); background: var(--l-tinta); }
}
@keyframes landTrabCheck1 { 0%, 16% { opacity: 0; } 17%, 100% { opacity: 1; } }

@keyframes landTrabTodoN {
    0%, 19%   { border-color: var(--l-fio);   background: transparent; }
    21%, 46%  { border-color: var(--l-ouro);  background: var(--l-ouro); }
    48%, 100% { border-color: var(--l-tinta); background: var(--l-tinta); }
}
@keyframes landTrabCheckN { 0%, 46% { opacity: 0; } 48%, 100% { opacity: 1; } }

/* a chamada que o item 1 produz, e o número que ela devolve */
.land .land-trab__mapa {
    display: grid;
    gap: .3rem;
    margin: 0;
    font-family: var(--font-mono);
    font-size: .64rem;
    line-height: 1.45;
    color: var(--l-fraco);
    --d: 1.3s;
}
/* ⚠️ `custom.css` pinta todo `code` de amarelo com borda de 2px (é o inline
   code do site). Aqui isso seria um quarto emprego do amarelo, no elemento
   errado — e num bloco que a cena precisa que se leia como máquina, não como
   destaque. Se esta neutralização cair, o defeito volta calado. */
.land-trab__chamada,
.land .land-trab__chamada code {
    font-family: var(--font-mono);
    font-size: .72rem;
    background: var(--l-faixa);
    color: var(--l-tinta);
    border: 0;
    border-radius: 0;
    padding: 0;
    font-weight: 400;
}
.land-trab__chamada {
    display: block;
    border-left: 3px solid var(--l-tinta);
    padding: .38rem .55rem;
    overflow-x: auto;
}
.land-trab__chamada .cnj { color: var(--l-ouro-t); }

/* --- os três leitores ----------------------------------------------------- */

.land-trab__leitores {
    list-style: none;
    margin: 0 0 .5rem;
    padding: 0;
    display: grid;
    gap: .3rem;
}
/* ⚠️ SEM `--d` escalonado, ao contrário de toda entrada em série desta folha:
   os três cards entram no MESMO quadro e os três cronômetros marcam o MESMO
   número enquanto correm. Um stagger de 120ms aqui — que é o reflexo — desfaz
   a única coisa que este bloco existe para afirmar. */
.land-trab__leitor {
    border: 1.5px solid var(--l-fio);
    background: var(--l-folha);
    padding: .3rem .5rem;
    animation-name: landTrabLeitor;
}
@keyframes landTrabLeitor {
    0%, 2%    { opacity: 0; transform: translateY(6px); border-color: var(--l-fio); }
    7%, 21%   { opacity: 1; transform: none;            border-color: var(--l-tinta); }
    24%, 100% { opacity: 1; transform: none;            border-color: var(--l-fio); }
}

.land-trab__leitor-cab { display: flex; align-items: center; gap: .4rem; }
.land-trab__no {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    background: var(--l-fio);
    animation-name: landTrabNo;
}
@keyframes landTrabNo {
    0%, 4%    { background: var(--l-fio); }
    7%, 21%   { background: var(--l-ouro); }
    24%, 100% { background: var(--l-tinta); }
}
.land-trab__nome {
    font-family: var(--font-mono);
    font-size: .61rem;
    font-weight: 700;
    color: var(--l-tinta);
}
.land-trab__leitor-cab .land-trab__crono { margin-left: auto; }
/* Uma linha só, com reticências: é como o produto escreve o "lendo …", e é o
   que impede a altura do painel de mudar com o nome da peça. */
.land-trab__lendo {
    display: block;
    margin-top: .15rem;
    font-family: var(--font-mono);
    font-size: .61rem;
    color: var(--l-fraco);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.land-trab__lendo b { color: var(--l-texto); font-weight: 700; }

/* o offload: a peça inteira não volta para a conversa, vai para o filesystem */
.land .land-trab__arqs {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .15rem .5rem;
    margin: 0;
    font-family: var(--font-mono);
    font-size: .61rem;
    line-height: 1.45;
    color: var(--l-fraco);
    animation-name: landTrabArqs;
}
@keyframes landTrabArqs { 0%, 20% { opacity: 0; } 24%, 100% { opacity: 1; } }
.land-trab__pasta { color: var(--l-tinta); border-bottom: 1px solid var(--l-ouro); }

/* --- a citação ------------------------------------------------------------ */

.land .land-trab__citacao {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: var(--l-tinta);
    color: var(--l-fundo);
    padding: .38rem .65rem;
    margin: .5rem 0 0;
    font-family: var(--font-mono);
    font-size: .64rem;
    --d: .55s;
}
.land-trab__citacao::before {
    content: "";
    width: 6px;
    height: 6px;
    background: var(--l-marca);
    flex: 0 0 auto;
}

/* --- pausa e movimento reduzido ------------------------------------------- */

/* ⚠️ Fora da tela as animações continuariam repintando borda, sombra e fundo a
   cada quadro. `landing.js` marca o painel quando ele SAI do viewport, e a
   marcação é NEGATIVA: sem JavaScript nada é marcado e a animação roda, que é o
   comportamento certo — o inverso deixaria o hero congelado no primeiro bloco,
   que é justamente o que não mostra a resposta.

   `::after` entra na lista porque o ✓ do plano é um. No painel antigo esta
   regra cobria só `::before`, e ficava incompleta esperando o dia em que
   alguém animasse um `::after`. */
.land-trab--parado *,
.land-trab--parado *::before,
.land-trab--parado *::after { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
    .land-trab *,
    .land-trab *::before,
    .land-trab *::after,
    .land-marca { animation: none !important; }

    /* O estado congelado é o do FIM do ciclo — o turno inteiro concluído. Ele é
       escrito à mão e precisa espelhar o último keyframe de cada elemento.

       ⚠️ E o realce do bloco da RESPOSTA não é decoração: sem ele o painel
       congelado fica sem nenhum amarelo, e a regra dos três empregos passa a
       valer só para dois — para quem tem movimento reduzido ligado, ou seja,
       para ninguém que revise a página. Era o caso do painel antigo. */
    .land-trab__entra { opacity: 1; transform: none; }
    .land-trab__bloco--r {
        border-color: var(--l-tinta);
        background: #FFFAE6;
        box-shadow: 6px 6px 0 var(--l-marca);
    }
    .land-trab__todo::before { border-color: var(--l-tinta); background: var(--l-tinta); }
    .land-trab__todo::after  { opacity: 1; }
    .land-trab__conta .land-trab__fita { transform: translateY(-2em); }  /* 3 valores na fita */
    .land-trab__crono .land-trab__fita { transform: translateY(-4em); }  /* 5 valores na fita */
    .land-trab__leitor { opacity: 1; transform: none; }
    .land-trab__no     { background: var(--l-tinta); }
    .land-trab__arqs   { opacity: 1; }
    .land-trab__caret  { display: none; }
    .land-marca { background-size: 100% 42%; }
}

/* ==========================================================================
   O MÉTODO — os quatro tempos do loop, e a tabela de contraste

   Esta seção é o texto que a trilha do hero encena. Ela não repete a animação
   de propósito: quem chega aqui já viu o turno acontecer e agora quer o nome
   das peças — `write_todos`, `task`, o arquivo, a citação. Duas animações na
   mesma página disputariam a atenção uma da outra.
   ========================================================================== */

/* ⚠️ 15rem e não 17: com 17rem (272px) mais o gap, quatro colunas pedem 1148px
   e a `.land-w` oferece 1136 — os tempos quebravam 3+1, e um quarto tempo
   sozinho numa segunda linha desfaz a leitura de "são quatro passos", que é o
   que a seção inteira existe para dizer. */
.land-tempos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: 1.25rem;
    margin-bottom: 3rem;
}
.land-tempo {
    border-top: 2px solid var(--l-tinta);
    padding-top: 1rem;
}
.land-tempo__n {
    font-family: var(--font-mono);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .16em;
    color: var(--l-fraco) !important;
    margin: 0 0 .55rem;
}
.land-tempo h3 {
    font-family: var(--font-heading);
    font-size: 1.12rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 .5rem;
}
.land .land-tempo p { font-size: .95rem; line-height: 1.55; color: var(--l-texto); margin: 0 0 .7rem; }
.land .land-tempo p:last-child { margin-bottom: 0; }
/* O nome da mecânica em mono: é dado, não prosa — e é o que alguém copia para
   ir procurar do que se trata. */
.land .land-tempo__peca {
    font-family: var(--font-mono);
    font-size: .7rem;
    line-height: 1.5;
    color: var(--l-fraco);
    margin: 0;
}

/* --- a tabela de contraste -------------------------------------------------

   ⚠️ Descreve a CATEGORIA ("jogar o PDF no contexto"), nunca um produto pelo
   nome. Comparação nominal envelhece — o concorrente conserta e a página passa
   a mentir —, e o argumento aqui não depende de quem está do outro lado. */

.land-versus {
    width: 100%;
    border-collapse: collapse;
    border: 2px solid var(--l-tinta);
    background: var(--l-folha);
    text-align: left;
}
.land-versus th {
    font-family: var(--font-mono);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: .85rem 1.1rem;
    border-bottom: 1.5px solid var(--l-tinta);
    vertical-align: bottom;
    width: 50%;
}
.land-versus th:first-child { color: var(--l-fraco); }
.land-versus th + th { border-left: 1.5px solid var(--l-tinta); }
.land-versus td {
    padding: .85rem 1.1rem;
    font-size: .93rem;
    line-height: 1.5;
    border-top: 1px solid var(--l-fio);
    vertical-align: top;
}
.land-versus td:first-child { color: var(--l-texto); }
.land-versus td + td { border-left: 1.5px solid var(--l-tinta); font-weight: 500; }
.land-versus td + td::before { content: "→ "; color: var(--l-ouro); font-weight: 700; }

/* ==========================================================================
   O PROBLEMA — o par antes/depois
   ========================================================================== */

.land-par {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
    gap: 1.25rem;
    align-items: start;
}
.land-lado {
    border: 1.5px solid var(--l-fio);
    background: var(--l-folha);
    padding: 1.5rem 1.6rem;
}
/* O lado "depois" leva o fio de tinta. A diferença entre os dois é estrutural,
   não uma cor a mais: um é o que chega, o outro é o que sai. */
.land-lado--depois { border: 2px solid var(--l-tinta); }
.land-lado h3 {
    font-family: var(--font-mono);
    font-size: .66rem;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--l-fraco);
    margin: 0 0 .9rem;
}
/* O contador é o argumento em dois números. Ele fica em display, não em mono:
   412 e 218 são o que a pessoa leva da seção. */
/* ⚠️ Prefixo `.land`: `.land-lado p` mais abaixo é (0,1,1) e vence `.land-lado__conta`
   (0,1,0), o que fazia o número — que é o argumento inteiro desta seção —
   sair no tamanho do texto corrido. */
.land .land-lado__conta {
    font-family: var(--font-heading);
    font-size: 2.1rem;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1;
    margin: 0 0 .5rem;
}
.land .land-lado__conta span { font-size: .95rem; font-weight: 500; color: var(--l-texto); }
.land-lado p { font-size: .97rem; line-height: 1.6; margin: 0 0 .7rem; color: var(--l-texto) !important; }
.land-lado p:last-child { margin-bottom: 0; }
.land-lado__marco {
    border-top: 1.5px solid var(--l-fio);
    margin: 1rem 0 .9rem;
    padding-top: .9rem;
}

/* ==========================================================================
   O QUE VOCÊ PODE PEDIR — os cartões de pergunta
   ========================================================================== */

.land-pedidos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
    gap: 1.25rem;
}
.land-pedido {
    border: 2px solid var(--l-tinta);
    background: var(--l-fundo);
    padding: 1.4rem;
    transition: box-shadow .14s ease;
}
.land-pedido:hover { box-shadow: 6px 6px 0 var(--l-marca); }
/* A pergunta é composta na SERIFA em que o processo é impresso, e a resposta do
   sistema logo abaixo, menor e em mono. É o mesmo par que o produto usa por
   dentro (prévia da peça em Tinos, cromo em sans) — e aqui ele separa a voz de
   quem pergunta da voz da máquina sem precisar de rótulo. */
.land-pedido__q {
    font-family: 'Tinos', Georgia, serif;
    font-size: 1.17rem;
    line-height: 1.35;
    margin: 0 0 .9rem;
    text-wrap: pretty;
}
.land-pedido__a {
    display: flex;
    gap: .55rem;
    font-family: var(--font-mono);
    font-size: .72rem;
    line-height: 1.55;
    color: var(--l-fraco) !important;
    margin: 0;
}
.land-pedido__a::before { content: "→"; color: var(--l-ouro); flex: 0 0 auto; }

.land-remate {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.5rem;
    border-top: 1.5px solid var(--l-fio);
    margin-top: 2.5rem;
    padding-top: 1.75rem;
}
.land-remate p {
    font-family: var(--font-mono);
    font-size: .74rem;
    line-height: 1.75;
    color: var(--l-fraco) !important;
    margin: 0;
    max-width: 42em;
}

/* ==========================================================================
   AS SUAS CHAVES

   Três cartões, um por chave, porque são três contas diferentes em três
   provedores diferentes — e a página promete justamente que nenhuma delas passa
   por aqui. Amontoá-las num parágrafo faria parecer uma exigência só, e é a
   soma que o visitante precisa avaliar antes de criar a conta.
   ========================================================================== */

.land-chaves {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
    gap: 1.25rem;
}
.land-chave {
    display: flex;
    flex-direction: column;
    border: 1.5px solid var(--l-fio);
    background: var(--l-folha);
    padding: 1.25rem 1.35rem;
}
.land-chave__rot {
    font-family: var(--font-mono);
    font-size: .63rem;
    font-weight: 700;
    letter-spacing: .14em;
    color: var(--l-fraco) !important;
    margin: 0 0 .6rem;
}
.land-chave h3 {
    font-family: var(--font-heading);
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 .55rem;
}
.land .land-chave p { font-size: .93rem; line-height: 1.55; color: var(--l-texto); margin: 0 0 .8rem; }
.land .land-chave p:last-child { margin-bottom: 0; }

/* A lista do que está disponível — mono, porque é catálogo, e com fio de 1px
   entre linhas em vez de bullet: sete modelos com marcador viram sopa. */
.land-chave__lista {
    list-style: none;
    margin: auto 0 0;
    padding: .8rem 0 0;
    border-top: 1px solid var(--l-fio);
    display: grid;
    gap: .3rem;
}
.land-chave__lista li {
    font-family: var(--font-mono);
    font-size: .7rem;
    line-height: 1.45;
    color: var(--l-texto);
    display: flex;
    gap: .5rem;
}
.land-chave__lista li::before { content: "·"; color: var(--l-ouro); font-weight: 700; flex: 0 0 auto; }
.land-chave__lista li span { color: var(--l-fraco); }

.land-chaves__pe {
    margin-top: 1.5rem;
    border-top: 1.5px solid var(--l-fio);
    padding-top: 1.5rem;
}
.land .land-chaves__pe p {
    font-size: .97rem;
    line-height: 1.6;
    color: var(--l-texto);
    margin: 0 0 .7rem;
    max-width: 52em;
}
.land .land-chaves__pe p:last-child { margin-bottom: 0; }

/* ==========================================================================
   AS DUAS FRENTES
   ========================================================================== */

.land-frentes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
    gap: 1.5rem;
}
.land-frente {
    display: flex;
    flex-direction: column;
    border: 2px solid var(--l-tinta);
    background: var(--l-folha);
    padding: 1.75rem;
}
.land-frente__n {
    font-family: var(--font-mono);
    font-size: .64rem;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--l-fraco) !important;
    margin: 0 0 .6rem;
}
.land-frente h3 {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.4rem;
    letter-spacing: -.02em;
    margin: 0 0 .6rem;
}
.land-frente > p { font-size: 1rem; line-height: 1.55; color: var(--l-texto) !important; margin: 0; }

.land-lista { list-style: none; margin: 1.4rem 0 1.6rem; padding: 0; display: grid; gap: .95rem; }
.land-lista li { display: grid; grid-template-columns: 1.2rem 1fr; gap: .15rem .55rem; }
.land-lista i { color: var(--l-ouro); font-size: .9rem; margin-top: .18rem; }
.land-lista b { font-size: .97rem; font-weight: 700; }
.land-lista small {
    grid-column: 2;
    display: block;
    font-size: .87rem;
    line-height: 1.5;
    color: var(--l-texto);
}
.land-frente__pe { margin-top: auto; padding-top: .5rem; display: flex; flex-wrap: wrap; gap: .75rem; }
.land-frente__clientes {
    font-family: var(--font-mono);
    font-size: .7rem;
    line-height: 1.6;
    color: var(--l-fraco) !important;
    border-top: 1.5px solid var(--l-fio);
    padding-top: 1rem;
    margin: 0 0 1.25rem;
}

/* A skill é o único bloco de tinta cheia da página — ela é o brinde, e a
   inversão é o que a faz ser vista sem precisar de um selo "grátis" gritado. */
.land-skill {
    border: 2px solid var(--l-tinta);
    background: var(--l-tinta);
    color: #E8E3D6;
    padding: 1.6rem;
    margin-top: 1.5rem;
}
.land-skill__cab { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; margin-bottom: .9rem; }
.land-skill__gratis {
    font-family: var(--font-mono);
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .16em;
    background: var(--l-marca);
    color: var(--l-tinta);
    padding: .25rem .5rem;
}
.land-skill__rot {
    font-family: var(--font-mono);
    font-size: .68rem;
    letter-spacing: .12em;
    color: #CFC9B8;
}
.land .land-skill p { color: #E8E3D6 !important; font-size: .97rem; line-height: 1.55; margin: 0 0 .9rem; }
.land .land-skill__data {
    font-family: var(--font-mono);
    font-size: .7rem;
    line-height: 1.6;
    color: #A8A294 !important;
    margin-bottom: 1.1rem !important;
}
.land-skill__baixar { display: flex; gap: .6rem; flex-wrap: wrap; }
.land .land-skill__baixar a {
    font-family: var(--font-mono);
    font-size: .74rem;
    font-weight: 700;
    padding: .6rem 1rem;
    text-decoration: none;
    background: var(--l-marca);
    color: var(--l-tinta);
}
.land .land-skill__baixar a + a {
    background: none;
    color: #FAF8F3;
    border: 1.5px solid var(--l-fraco);
}
.land .land-skill__baixar a + a:hover { border-color: var(--l-marca); color: var(--l-marca); }

/* --- também no laboratório ------------------------------------------------ */

.land-tambem {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}
.land-tambem__cartao {
    border: 1.5px solid var(--l-fio);
    background: var(--l-fundo);
    padding: 1.1rem 1.25rem;
}
.land-tambem__cartao h4 {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 .35rem;
}
.land-tambem__cartao p { font-size: .93rem; line-height: 1.5; color: var(--l-texto) !important; margin: 0; }
/* ⚠️ `code` do `custom.css` vem amarelo com borda de 2px. Nos nomes de comando
   isso roubaria o amarelo da ação primária, então aqui ele é etiqueta neutra. */
.land .land-cmd {
    font-family: var(--font-mono);
    font-size: .85em;
    font-weight: 500;
    background: var(--l-faixa);
    color: var(--l-tinta);
    border: 0;
    border-radius: 0;
    padding: .1rem .35rem;
}

/* ==========================================================================
   O PROJETO
   ========================================================================== */

.land-projeto {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
    gap: 3.5rem;
    align-items: center;
}
.land-projeto p { font-size: 1.07rem; line-height: 1.58; color: var(--l-texto) !important; margin: 0 0 1.1rem; text-wrap: pretty; }
.land-projeto p:last-child { margin-bottom: 0; }

.land-contato {
    border: 2px solid var(--l-tinta);
    background: var(--l-folha);
    padding: 1.6rem;
    box-shadow: 8px 8px 0 var(--l-marca);
}
.land-contato h3 {
    font-family: var(--font-mono);
    font-size: .66rem;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--l-fraco);
    margin: 0 0 .8rem;
}
.land .land-contato p { font-size: 1.03rem; line-height: 1.5; color: var(--l-tinta) !important; margin: 0 0 1.1rem; }
.land-contato__vias {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.4rem;
    font-family: var(--font-mono);
    font-size: .78rem;
}

/* ==========================================================================
   CONTRIBUIÇÃO DE CUSTOS

   ⚠️ Esta seção foi REBAIXADA de propósito, e a versão anterior é o contraste:
   dois cartões grandes lado a lado, com o valor em 2,05rem de display, sombra
   dura de 8px e uma lista de "o que está incluído" — a gramática de uma página
   de planos de SaaS. Aqui não se vende assinatura: rateia-se a conta do
   servidor. O valor continua na página inteiro e sem letra miúda, em mono, no
   tamanho de um dado — porque é isso que ele é.

   A âncora `#pricing` e os dois `<form>` de checkout FICAM: o rodapé do
   `base.html`, o `/docs` em quatro pontos e o retorno cancelado do Stripe
   apontam para cá, e a rota `web.index` depende do `?planos` para não
   redirecionar quem está logado.
   ========================================================================== */

.land-rateio {
    border: 1.5px solid var(--l-fio);
    background: var(--l-folha);
}
.land-rateio__item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 15rem);
    gap: 1.5rem 2.5rem;
    align-items: start;
    padding: 1.6rem 1.75rem;
}
.land-rateio__item + .land-rateio__item { border-top: 1px solid var(--l-fio); }

.land-rateio__tipo {
    font-family: var(--font-mono);
    font-size: .63rem;
    font-weight: 700;
    letter-spacing: .14em;
    color: var(--l-fraco) !important;
    margin: 0 0 .5rem;
}
.land-rateio__item h3 {
    font-family: var(--font-heading);
    font-size: 1.18rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 .6rem;
}
.land .land-rateio__item p { font-size: .95rem; line-height: 1.55; color: var(--l-texto); margin: 0 0 .7rem; }
.land .land-rateio__item p:last-child { margin-bottom: 0; }

/* Onde a contribuição vai — em mono, porque é prestação de contas, não venda. */
.land-custos { display: grid; gap: .4rem; margin: .8rem 0 0; padding: 0; list-style: none; }
.land-custos li {
    display: flex;
    gap: .55rem;
    font-family: var(--font-mono);
    font-size: .72rem;
    line-height: 1.5;
    color: var(--l-texto);
}
.land-custos li::before { content: "\00b7"; color: var(--l-ouro); font-weight: 700; }

/* --- a coluna do valor ----------------------------------------------------
   O valor sai em MONO e no corpo do texto, não em display: "mono é dado" vale
   aqui como vale para o CNJ e para o id do documento. Um número em 2rem de
   Space Grotesk é uma afirmação de preço; em 0,95rem de JetBrains Mono é uma
   informação de custo, que é o que esta página quer que ele seja. */
.land-rateio__acao { display: grid; gap: .7rem; }
.land .land-rateio__valor {
    font-family: var(--font-mono);
    font-size: .95rem;
    font-weight: 500;
    color: var(--l-tinta);
    margin: 0;
}
.land-rateio__valor span { color: var(--l-fraco); font-weight: 400; }
.land-rateio__acao form { margin: 0; }
.land-rateio .land-btn { width: 100%; }
.land .land-rateio__entrega {
    font-family: var(--font-mono);
    font-size: .65rem;
    line-height: 1.5;
    color: var(--l-fraco);
    margin: 0;
}

/* A porta para `/codigo-fonte`, dentro do card. É o único link do bloco de
   contribuição que precisa ser encontrado ANTES do botão — quem paga achando
   que compra um produto paga por engano —, então ele ganha fio à esquerda em
   ouro, como o marcador da lista de custos, em vez de virar mais uma frase. */
.land .land-rateio__leia {
    border-left: 2px solid var(--l-ouro);
    padding-left: .7rem;
    font-size: .85rem !important;
    margin-top: .9rem;
}
.land .land-rateio__leia a { font-weight: 700; }

.land-termos {
    font-family: var(--font-mono);
    font-size: .72rem;
    color: var(--l-fraco) !important;
    margin: 1.75rem 0 0;
}

/* ==========================================================================
   FAQ — `<details>` em vez do accordion do Bootstrap: funciona sem JS, é uma
   dependência a menos, e abre mais de um por vez (o accordion fechava a
   resposta anterior, o que atrapalha comparar).
   ========================================================================== */

.land-faq { display: grid; gap: .75rem; }
.land-faq details {
    border: 1.5px solid var(--l-tinta);
    background: var(--l-folha);
    padding: 1.1rem 1.35rem;
}
.land-faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    cursor: pointer;
    list-style: none;
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 1.08rem;
}
.land-faq summary::-webkit-details-marker { display: none; }
.land-faq__mais {
    font-family: var(--font-mono);
    font-size: 1.25rem;
    line-height: 1;
    flex: 0 0 auto;
    transition: transform .2s ease;
}
.land-faq details[open] .land-faq__mais { transform: rotate(45deg); }
.land .land-faq p { font-size: .97rem; line-height: 1.6; color: var(--l-texto) !important; margin: .85rem 0 0; }

.land-fecho { display: flex; justify-content: center; margin-top: 2.5rem; }

/* ==========================================================================
   REVEAL AO ROLAR E FEEDBACK TÁTIL

   O hero é a assinatura e não entra aqui: o que esta camada faz é tirar o
   "seco" de tudo o que está ABAIXO da dobra — as seções e os cartões, que
   antes entravam já pintados. São dois gestos, e só dois, dentro do design
   system (§03, "o único movimento do sistema"; §05, regra 5):

     1. REVEAL — a seção ou o cartão sobe 16px e aparece, uma vez, quando entra
        na tela. É o mesmo "estado primeiro" do resto do produto: a página diz
        o que está pronto à medida que a pessoa chega.
     2. FEEDBACK — no hover, o cartão ganha a sombra dura amarela que o
        `.land-pedido:hover` já tinha, mais 1px de deslocamento. É "apontar o
        destino", não ornamento: diz que a caixa responde.

   ⚠️ FALHAR-PARA-VISÍVEL: o estado escondido só vale sob `.land-js`, a classe
   que `landing.js` põe no `<html>` quando há IntersectionObserver. Sem JS ou
   num navegador sem o observer, NADA fica escondido — o contrário deixaria a
   página em branco para quem mais precisa dela.

   ⚠️ O stagger é por `--rd` (delay), atribuído em JS na ordem do DOM de cada
   grid — o mesmo espírito do `--i`/`--d` da trilha. O CSS não escolhe ordem;
   quem sabe a ordem dos irmãos é o documento.

   ⚠️ `prefers-reduced-motion` neutraliza TUDO no bloco próprio ao fim: quem
   pediu menos movimento recebe a página parada e visível desde o primeiro
   pixel.
   ========================================================================== */

/* Estado inicial — só existe quando o JS confirmou que vai revelar. */
.land-js .land-reveal { opacity: 0; }

/* ⚠️ A entrada é ANIMAÇÃO, não transição, e a razão é de cascata, não de gosto:
   `transition` é UMA propriedade, e a regra que ganha declara a LISTA INTEIRA.
   A primeira versão deste bloco punha a entrada num `transition` de
   `.land-js .land-reveal.is-visivel` — três classes, que vencem o
   `.land-pedido { transition: box-shadow .14s }` de uma classe escrito desde
   antes deste trabalho. Resultado medido na revisão: depois de revelado, o
   cartão de pergunta perdia o único hover que a página já tinha (a sombra
   amarela passava a aparecer SECA), e as três famílias novas ganhavam um hover
   arrastado de 0,55s. Como animação, a entrada não disputa `transition` com
   ninguém: cada hover fica com o tempo que escolheu.

   ⚠️ `backwards`, nunca `both`: durante o atraso do stagger a peça precisa
   ficar no quadro inicial (é o que `backwards` faz), mas ao TERMINAR ela tem de
   soltar o `transform` de volta para a cascata. Com `forwards`, o
   `transform: none` do último quadro passaria por cima do `:hover` para
   sempre — o mesmo defeito, por outra porta. */
.land-js .land-reveal.is-visivel {
    opacity: 1;
    animation: land-reveal .55s cubic-bezier(.22, .61, .36, 1) var(--rd, 0s) backwards;
}
@keyframes land-reveal {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
}

/* O bloco da skill é o único de tinta cheia: entra com um peso a mais. */
.land-js .land-skill.land-reveal.is-visivel {
    animation: land-reveal-skill .6s cubic-bezier(.22, .61, .36, 1) var(--rd, 0s) backwards;
}
@keyframes land-reveal-skill {
    from { opacity: 0; transform: translateY(16px) scale(.99); }
    to   { opacity: 1; transform: none; }
}

/* Feedback tátil — a mesma sombra dura do `.land-pedido:hover`. */
.land .land-chave,
.land .land-tambem__cartao,
.land .land-tempo {
    transition: box-shadow .14s ease, transform .14s ease;
}
.land .land-chave:hover,
.land .land-tambem__cartao:hover {
    box-shadow: 5px 5px 0 var(--l-marca);
    transform: translate(-1px, -1px);
}
.land .land-tempo:hover { transform: translateY(-2px); }

/* FAQ: o `+` já gira; aqui o fundo do summary acompanha. */
.land .land-faq summary { transition: background .14s ease; }
.land .land-faq details summary:hover { background: var(--l-fundo); }

/* Movimento reduzido: tudo visível e parado desde o primeiro pixel. */
@media (prefers-reduced-motion: reduce) {
    .land-js .land-reveal { opacity: 1; }
    .land-js .land-reveal.is-visivel,
    .land-js .land-skill.land-reveal.is-visivel { opacity: 1; animation: none; }
    .land .land-chave,
    .land .land-tambem__cartao,
    .land .land-tempo,
    .land .land-faq summary { transition: none; }
    .land .land-chave:hover,
    .land .land-tambem__cartao:hover { transform: none; }
    .land .land-tempo:hover { transform: none; }
}

/* ==========================================================================
   RESPONSIVO
   ========================================================================== */

@media (max-width: 60rem) {
    /* Uma coluna, e o painel DEPOIS do texto: num celular o que decide é a
       headline, e empurrá-la para baixo da dobra com uma animação seria trocar
       a mensagem pelo enfeite. */
    .land-hero__grade { grid-template-columns: minmax(0, 1fr); gap: 2.75rem; }
    .land-hero > .land-w { padding-block: 4rem; }
    .land-projeto { gap: 2.5rem; }
    .land-w { padding: 4rem 1.5rem; }
    /* O valor e o botão descem para baixo do texto: a 15rem a coluna da direita
       não cabe ao lado de uma medida de leitura decente. */
    .land-rateio__item { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
    .land-rateio__acao { max-width: 22rem; }
}

@media (max-width: 34rem) {
    .land-w { padding: 3rem 1.15rem; }
    .land .land-btn { width: 100%; }
    .land-trab { box-shadow: 6px 6px 0 rgba(17, 16, 16, .12); }
    .land-trab__corpo { padding: .6rem; gap: .4rem; }
    .land-trab__bloco { padding: .55rem .6rem; }
    /* A chamada QUEBRA em vez de rolar: 383px de mono não cabem em ~300, e uma
       barra de rolagem horizontal dentro do hero é um convite a rolar a página
       para o lado no celular. */
    .land-trab__chamada { overflow-x: visible; white-space: normal; word-break: break-word; }
    /* ⚠️ O que se corta é o OFFLOAD, e é uma escolha: é a linha mais técnica da
       peça e a menos carregada de argumento de venda. O plano, os três leitores
       e a citação ficam — nenhum deles sai sem desmontar a tese da página.

       O prefixo `.land` é obrigatório e a falta dele não dá erro nenhum: a
       regra que declara o `display: flex` desta linha é `.land .land-trab__arqs`
       (0,2,0) e vence `.land-trab__arqs` (0,1,0) mesmo dentro do media query —
       media query não soma especificidade. Sem o prefixo, o corte simplesmente
       não acontecia, e só se via medindo. */
    .land .land-trab__arqs { display: none; }
    .land-remate { gap: 1.25rem; }

    /* A tabela de contraste vira duas fichas empilhadas por linha. Duas colunas
       de ~140px partiriam "processo de qualquer tamanho" em seis linhas de duas
       palavras — e é a legibilidade dessas frases que sustenta a comparação. O
       rótulo da coluna volta em cada célula (`data-col`), senão a segunda ficha
       aparece sem dizer de quem ela é. */
    .land-versus,
    .land-versus thead,
    .land-versus tbody,
    .land-versus tr,
    .land-versus td { display: block; width: auto; }
    .land-versus thead { display: none; }
    .land-versus tr + tr { border-top: 1.5px solid var(--l-tinta); }
    .land-versus td { border-top: 1px solid var(--l-fio); }
    .land-versus tr td:first-child { border-top: 0; }
    .land-versus td + td { border-left: 0; }
    .land-versus td::after {
        content: attr(data-col);
        display: block;
        margin-top: .35rem;
        font-family: var(--font-mono);
        font-size: .6rem;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--l-fraco);
    }
}

/* ==========================================================================
   PORTA DE ENTRADA — login e cadastro

   Estas duas telas moram nesta folha, e não numa própria, porque são o fim do
   funil da landing: quem chega nelas veio de um CTA daqui, e uma troca de
   linguagem no meio do caminho faz a pessoa achar que mudou de site. Elas
   reusam os tokens (declarados no `body`, ver o topo do arquivo) e os botões.

   Login e cadastro NÃO têm o mesmo desenho, de propósito. Quem faz login já
   decidiu: a tela é uma coluna estreita e nada mais. Quem cadastra ainda está
   decidindo, e ali cabe a coluna que diz o que vem junto.
   ========================================================================== */

body.is-entrar { background: var(--l-fundo); }
body.is-entrar::before { display: none; }
.ent-main { padding: 0 !important; }

.ent {
    color: var(--l-tinta);
    padding: 4rem 1.5rem 5rem;
}
.ent p { color: var(--l-tinta); line-height: 1.6; }
.ent a:not([class]) {
    color: var(--l-tinta);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: currentColor;
    text-underline-offset: 3px;
    background: none;
}
.ent a:not([class]):hover { color: var(--l-ouro-t); background: none; }

.ent-grade {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 3.5rem;
    align-items: center;
    width: 100%;
    max-width: 58rem;
    margin-inline: auto;
}
.ent-grade--so { grid-template-columns: minmax(0, 1fr); max-width: 27rem; }

.ent-olho {
    font-family: var(--font-mono);
    font-size: .66rem;
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--l-fraco) !important;
    margin: 0 0 .9rem;
}
.ent-arg h1 {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(1.9rem, 4vw, 2.6rem);
    line-height: 1.05;
    letter-spacing: -.025em;
    margin: 0 0 1rem;
    text-wrap: balance;
}
.ent .ent-arg > p { font-size: 1.05rem; line-height: 1.55; color: var(--l-texto) !important; margin: 0; }

.ent-ganhos { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: .9rem; }
.ent-ganhos li { display: grid; grid-template-columns: 1.1rem 1fr; gap: .1rem .55rem; }
.ent-ganhos li::before { content: "✓"; font-weight: 700; color: var(--l-ouro); }
.ent-ganhos b { font-size: .97rem; font-weight: 700; }
.ent-ganhos small { grid-column: 2; display: block; font-size: .87rem; line-height: 1.5; color: var(--l-texto); }

/* --- o painel do formulário ----------------------------------------------- */

.ent-painel {
    background: var(--l-folha);
    border: 2px solid var(--l-tinta);
    box-shadow: 8px 8px 0 rgba(17, 16, 16, .12);
}
.ent-painel__topo {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: 0;
    padding: .8rem 1.5rem;
    border-bottom: 1.5px solid var(--l-tinta);
    background: var(--l-faixa);
    font-family: var(--font-mono);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .14em;
    color: var(--l-tinta);
}
.ent-painel__corpo { padding: 1.6rem 1.5rem; }

.ent-campo { margin-bottom: 1.1rem; }
/* ⚠️ `custom.css` estiliza `label` (mono, caixa alta, `!important` na fonte, no
   tamanho, no peso e na cor) e `input[type=...]` (borda de 3px, raio de 6px,
   sombra dura, `!important` em tudo). Para valer aqui são precisas as DUAS
   coisas: `!important` — especificidade não vence `!important` — e
   especificidade acima de `input[type="text"]` (0,1,1), daí o prefixo duplo.
   Faltando uma, nada acontece. Mesmo gotcha documentado em `minuta.css`. */
.ent .ent-campo label {
    display: block;
    font-family: var(--font-mono) !important;
    font-size: .66rem !important;
    font-weight: 500 !important;
    letter-spacing: .16em !important;
    text-transform: uppercase !important;
    color: var(--l-fraco) !important;
    margin: 0 0 .4rem;
}
.ent .ent-campo input {
    width: 100%;
    background: var(--l-fundo) !important;
    color: var(--l-tinta) !important;
    /* 2px e sem raio: o mesmo enquadramento das caixas da landing. A borda de
       3px arredondada do site fazia o campo parecer um botão. */
    border: 2px solid var(--l-tinta) !important;
    border-radius: 0 !important;
    padding: .7rem .85rem !important;
    font-family: var(--font-body) !important;
    font-size: 1rem !important;
    box-shadow: none;
    transition: box-shadow .12s ease;
}
.ent .ent-campo input:focus {
    background: var(--l-folha) !important;
    box-shadow: 4px 4px 0 var(--l-marca) !important;
    outline: none !important;
    transform: none;
}
.ent-campo small { display: block; font-size: .8rem; color: var(--l-fraco); margin-top: .35rem; }

.ent .ent-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: .5rem;
    border: 2px solid var(--l-tinta);
    background: var(--l-marca);
    color: var(--l-tinta);
    padding: .9rem 1.4rem;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1.03rem;
    text-decoration: none;
    box-shadow: 4px 4px 0 var(--l-tinta);
    transition: box-shadow .12s ease, transform .12s ease, background .12s ease;
}
.ent .ent-btn:hover { box-shadow: 2px 2px 0 var(--l-tinta); transform: translate(2px, 2px); }
.ent .ent-btn:active { box-shadow: 0 0 0 var(--l-tinta); transform: translate(4px, 4px); }

.ent a:focus-visible,
.ent button:focus-visible,
.ent input:focus-visible { outline: 3px solid var(--l-ouro-t); outline-offset: 3px; }

/* O aceite dos termos é a única caixa de seleção da tela; o `<label>` é uma
   frase e não pode herdar a etiqueta mono em caixa alta do `custom.css`. */
.ent-aceite { display: flex; align-items: flex-start; gap: .6rem; margin-bottom: 1.4rem; }
.ent-aceite input { width: 1.05rem; height: 1.05rem; flex: 0 0 auto; margin-top: .2rem; accent-color: var(--l-tinta); }
.ent .ent-aceite label {
    font-family: var(--font-body) !important;
    font-size: .9rem !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: var(--l-tinta) !important;
    line-height: 1.5;
}

.ent-nota {
    border-left: 3px solid var(--l-marca);
    background: var(--l-faixa);
    padding: .75rem .9rem;
    margin: 1.1rem 0 0 !important;
    font-size: .87rem !important;
    line-height: 1.5;
    color: var(--l-texto) !important;
}
.ent-pe {
    margin: 1.1rem 0 0 !important;
    padding-top: 1.1rem;
    border-top: 1.5px solid var(--l-fio);
    text-align: center;
    font-size: .9rem !important;
    color: var(--l-texto) !important;
}

/* Recuperação de conta: prosa da tela, erro e a saída do "esqueci".

   `custom.css` estiliza `<p>` em seletor nu, daí o `!important` — mesmo gotcha
   já anotado no cabeçalho desta seção para `input` e `label`. */
.ent-texto {
    margin: 0 0 1.2rem !important;
    font-size: .95rem !important;
    line-height: 1.6;
    color: var(--l-texto) !important;
}

/* Vermelho de recusa. Enquadramento de 2px como o resto da porta de entrada —
   um alerta arredondado aqui seria o único canto curvo da tela. */
.ent-erro {
    margin: 0 0 1.1rem !important;
    padding: .7rem .85rem;
    border: 2px solid #C0392B;
    background: #FDF1F1;
    font-size: .88rem !important;
    line-height: 1.5;
    color: #8E2A1F !important;
}

/* O "esqueci minha senha" fica colado no botão, sem a régua que separa o
   rodapé: ele é continuação da tentativa de entrar, não um assunto novo. */
.ent-pe--esqueci {
    border-top: 0;
    padding-top: .85rem;
    margin-top: .1rem !important;
}

/* Reveal da porta de entrada — o argumento primeiro, o painel depois.
   ⚠️ Não há regra própria aqui, de propósito: `landing.js` põe `.land-reveal`
   no `.ent-arg` e no `.ent-painel`, e o bloco "REVEAL AO ROLAR" acima (que não
   é escopado em `.land`) já os atende, com `prefers-reduced-motion` incluído.
   Duplicar o mecanismo era uma segunda verdade para divergir da primeira; o
   atraso do painel sai do `--rd`, pela ordem dos irmãos. */

@media (max-width: 52rem) {
    .ent { padding: 2.5rem 1.15rem 3.5rem; }
    /* O formulário vem PRIMEIRO no celular: quem abriu /register já clicou num
       botão que dizia "criar conta", e rolar por uma lista de vantagens antes
       de achar o campo é pedir de novo o que já foi decidido. */
    .ent-grade { grid-template-columns: minmax(0, 1fr); gap: 2.25rem; max-width: 27rem; }
    .ent-arg { order: 2; }
    .ent-painel { order: 1; }
}