    /* ═══════════════════════════════════════════════════════════════════════════════════════════════
       A folha das DUAS páginas da captação de afiliados: `/seja-parceiro` (o programa) e
       `/seja-parceiro/candidatura` (a ficha). A gramática visual de sonarlabs.com.br, trazida para cá.

       🪤 SAIU DO <style> INLINE EM 03/08/2026, e a razão é esta: a ficha virou página separada, e
       duplicar estes tokens no <head> da segunda página criaria DOIS DONOS para o mesmo nome de cor.
       Bastaria o dono trocar o azul numa e as páginas divergiriam sem ninguém ver. Uma folha, um dono.

       🪤 As stacks NÃO são compatíveis: o sonar-lp é Next 16 + React 19 + Tailwind 4 + framer-motion;
       esta página é HTML servido pelo Express. Portar o código arrastaria um build inteiro para dentro
       do SSO. O que se porta são os TOKENS e a gramática, copiados de:
         · `app/poc/lib/tokens.ts`               → a paleta abaixo, valor por valor;
         · `app/poc/components/PocPrimitives.tsx`→ Block (py-28, max-w-5xl), Rule, Label, H2;
         · `app/components/SonarLogo.tsx`        → a marca do topo, path por path (ver <header>);
         · `app/poc/components/PocNav.tsx`       → o botão "Entrar" (tinta cheia, quadrado, 13px/600).

       🧭 NOMES (decisão do dono, 31/07): **Sonar Labs é a EMPRESA; Sonarview é o PRODUTO.** O afiliado
       credencia-se junto da Sonar Labs e leva a plataforma Sonarview aos clientes dele.

       🧭 PERSONA (decisão do dono, 31/07): **não há consultor, agência, revenda nem embaixador.**
       Há UMA persona — o **afiliado** — e formatos de atuação que ele escolhe e troca. Segmentar
       a persona obrigava quem chega a se rotular antes de entender o programa, e o rótulo não mudava
       nada de concreto: a comissão e o formato é que mudam.

       🧭 FORMATOS (decisão do dono, 01/08): passaram de QUATRO a DOIS. Ficaram os que eram 03 e 04 —
       atender com a marca do afiliado e atender com a nossa — renumerados aqui para 01 e 02, porque
       uma página que começa no "Formato 03" parece ter perdido conteúdo pelo caminho. Os valores
       gravados no banco NÃO mudaram (`white_label` e `sem_white_label`), então o histórico continua
       legível. Saíram "indicar e acompanhar" e "implantar, gerir e atender".

       🧭 PERCENTUAIS (decisão do dono, 01/08): a página **não fala em percentual**, nem de desconto
       nem de comissão. O número de cada afiliado é combinado no credenciamento. Por isso saiu também
       a calculadora de ganho: ela existia para multiplicar um percentual.

       🧭 POSICIONAMENTO (decisão do dono, 01/08): o afiliado **não indica**, ele POTENCIALIZA a
       própria entrega com a plataforma, entrega mais ao cliente que já é dele e fideliza essa
       relação. 🔑 E o herói diz isso pelo lado POSITIVO: **não se escreve "você não indica"**, nem
       para negar. Negar a indicação no herói ainda põe a palavra na cabeça de quem lê e faz a
       página soar defensiva. Fala-se do que a plataforma faz pela entrega dele, e pronto.
       ✅ O "Como funciona" já foi reescrito com ele (01/08): "Aplique-se · Vincule · Perpetue".
       ⚠️ Falta a seção de REGRAS, que ainda está escrita na lógica antiga. Está sendo revista frase
       a frase COM o dono. Até lá, não escreva número nem promessa nova apoiado no texto velho.
       ═══════════════════════════════════════════════════════════════════════════════════════════════ */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      /* tokens.ts, valor por valor */
      --bg:      #f5f5f7;
      --bg-alt:  #ffffff;
      --ink:     #1d1d1f;
      --muted:   #6e6e73;
      --faint:   rgba(0,0,0,.04);
      --rule:    rgba(0,0,0,.09);
      --accent:  #0071e3;
      --erro:    #b3261e;
      --ok:      #1a7f37;
      --linkedin:#0a66c2;

      /* O ritmo do Block: py-28 e px-8 / md:px-24 / lg:px-36, com o miolo em max-w-5xl. */
      --pad-x:   2rem;
      --pad-y:   7rem;
      --miolo:   64rem;
      --ease:    cubic-bezier(.16, 1, .3, 1);
    }
    @media (min-width: 768px)  { :root { --pad-x: 6rem; } }
    @media (min-width: 1024px) { :root { --pad-x: 9rem; } }

    /* 🚨 O bloco do escuro NÃO mora aqui. Mora em `/seja-parceiro-tema.css`, que os dois <head>
       carregam DEPOIS do /brand/sonar-shell.css, e o comentário de lá explica por quê. Mexer no
       escuro aqui não teria efeito nenhum: o shell vem depois e ganha. */

    html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
    body {
      font-family: 'Geist', 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
      background: var(--bg); color: var(--ink);
      -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
      display: flex; flex-direction: column; min-height: 100vh;
      overflow-x: hidden;
    }
    main { flex: 1; }
    a { color: inherit; }

    /* ── Topo: fino e claro, como o do site. Não é uma barra de cor. ──────────────────────────────── */
    .topo {
      position: sticky; top: 0; z-index: 40;
      display: flex; align-items: center; justify-content: space-between; gap: 1rem;
      padding: 1rem var(--pad-x);
      background: color-mix(in srgb, var(--bg) 88%, transparent);
      backdrop-filter: saturate(180%) blur(24px);
      -webkit-backdrop-filter: saturate(180%) blur(24px);
      border-bottom: 1px solid var(--rule);
    }
    /* A marca é logo + palavra, com o mesmo gap-2.5 e o mesmo text-sm/600 do PocNav. */
    .marca { display: inline-flex; align-items: center; gap: .625rem; text-decoration: none; color: var(--ink); flex-shrink: 0; }
    .marca svg { width: 20px; height: 20px; display: block; }
    .marca span { font-size: .875rem; font-weight: 600; letter-spacing: -.015em; }
    .marca sup { font-size: .55em; vertical-align: super; font-weight: 400; }

    /* ── Bloco: o `Block` do site (py-28, miolo centrado, alternando fundo) ──────────────────────── */
    .bloco { position: relative; overflow: hidden; padding: var(--pad-y) var(--pad-x); background: var(--bg); }
    .bloco.alt { background: var(--bg-alt); }
    .miolo { position: relative; max-width: var(--miolo); margin: 0 auto; width: 100%; }
    .risco { height: 1px; background: var(--rule); margin: 0 var(--pad-x); }

    /* O algarismo gigante e quase invisível no canto — é a assinatura do Block com `decor`. */
    .decor {
      position: absolute; bottom: -1rem; right: -.5rem; pointer-events: none; user-select: none;
      line-height: 1; font-size: clamp(10rem, 20vw, 24rem); font-weight: 100;
      color: var(--ink); opacity: .035; letter-spacing: -.04em;
    }

    /* ── Tipografia: o site é FINO. Nada de 800 aqui. ────────────────────────────────────────────── */
    .rotulo {
      font-size: .6875rem; font-weight: 600; letter-spacing: .3em; text-transform: uppercase;
      color: var(--muted); margin-bottom: 3.5rem;
    }
    h1 {
      font-weight: 100; line-height: 1.04; letter-spacing: -.02em; margin-bottom: 2.5rem;
      font-size: clamp(2.4rem, 5.5vw, 5.5rem);
    }
    /* 🧭 O herói virou TRÊS frases inteiras (decisão do dono, 01/08), e a do meio tem 36 caracteres.
         No corpo de 5.5rem ela mede 1322px e o miolo só tem 1024px: quebraria numa quarta linha
         órfã, que é justamente o que estraga um herói escrito em três linhas de propósito.
         🔑 Este corpo NÃO foi chutado: foi medido com o próprio arquivo do Geist 100 que a página
         baixa do Google Fonts, glifo a glifo e com o kerning do par, em 16 larguras de tela. Cabe
         de 600px para cima com folga mínima de 51px (a pior é em 1024px, onde o `--pad-x` salta
         para 9rem e come 288px de uma vez). Abaixo de 600px quebra, e aí quebrar é o normal.
         🪤 Se alguém mexer no texto do herói, REMEDIR. A conta muda com uma palavra a mais. */
    h1.manifesto {
      font-size: clamp(1.75rem, 4.4vw, 3.9rem); line-height: 1.14; letter-spacing: -.015em;
    }
    h2 {
      font-weight: 100; line-height: 1.06; letter-spacing: -.02em; margin-bottom: 2.5rem;
      font-size: clamp(2rem, 4.5vw, 4.5rem);
    }
    .azul { color: var(--accent); }
    .lead { font-size: 1.125rem; line-height: 1.62; color: var(--muted); max-width: 36rem; margin-bottom: 3.5rem; }
    .sub { font-size: 1rem; line-height: 1.65; color: var(--muted); max-width: 42rem; margin-top: -1rem; margin-bottom: 3.5rem; }

    /* ── Botões: QUADRADOS, tinta cheia, sem sombra e sem raio. É o CTA da home. ─────────────────── */
    .cta {
      display: inline-flex; align-items: center; gap: .5rem;
      padding: .875rem 2rem; font-size: .875rem; font-weight: 600; font-family: inherit;
      background: var(--ink); color: var(--bg); border: none; cursor: pointer; text-decoration: none;
      transition: opacity .2s, transform .1s;
    }
    .cta:hover:not(:disabled) { opacity: .8; }
    .cta:active:not(:disabled) { transform: scale(.97); }
    .cta:disabled { opacity: .45; cursor: not-allowed; }
    .cta svg { width: 1rem; height: 1rem; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    .cta-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 2rem; }
    .cta-quieto { font-size: .875rem; color: var(--muted); text-decoration: none; transition: opacity .2s; }
    .cta-quieto:hover { opacity: .7; }

    /* "Já sou parceiro" = o botão `Entrar` do PocNav: tinta cheia, quadrado, 13px/600, px-5 py-2. */
    .entrar {
      display: inline-flex; align-items: center; gap: .375rem;
      padding: .5rem 1.25rem; font-size: .8125rem; font-weight: 600; font-family: inherit;
      background: var(--ink); color: var(--bg); border: none; cursor: pointer; text-decoration: none;
      transition: opacity .2s, transform .1s; white-space: nowrap;
    }
    .entrar:hover { opacity: .8; }
    .entrar:active { transform: scale(.95); }
    .entrar svg { width: .875rem; height: .875rem; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

    /* ── Listas em grelha: sem cartão, sem sombra, só um risco em cima. Como as secções do site. ── */
    .grelha { display: grid; gap: 3.5rem 3rem; }
    .g3 { grid-template-columns: repeat(3, 1fr); }
    .g2 { grid-template-columns: repeat(2, 1fr); }
    .item { padding-top: 1.75rem; border-top: 1px solid var(--rule); }
    .item .n { font-size: .6875rem; font-weight: 600; letter-spacing: .2em; color: var(--muted); display: block; margin-bottom: 1rem; }
    .item h3 { font-size: 1.0625rem; font-weight: 600; letter-spacing: -.01em; margin-bottom: .625rem; }
    .item p { font-size: .9375rem; line-height: 1.65; color: var(--muted); }

    /* Formatos: quatro blocos, um deles em tinta cheia (o contraponto escuro da home). */
    .formato { padding: 2.25rem; border: 1px solid var(--rule); display: flex; flex-direction: column; }
    .formato.cheio { background: var(--ink); color: var(--bg); border-color: var(--ink); }
    .formato.cheio .n, .formato.cheio li, .formato.cheio .quem { color: color-mix(in srgb, var(--bg) 72%, transparent); }
    .formato .n { font-size: .6875rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 1rem; }
    .formato h3 { font-size: 1.1875rem; font-weight: 500; letter-spacing: -.015em; margin-bottom: .75rem; }
    .formato .quem { font-size: .875rem; line-height: 1.6; color: var(--muted); margin-bottom: 1.75rem; }
    .formato ul { list-style: none; display: flex; flex-direction: column; gap: .8125rem; margin-top: auto; }
    .formato li { display: flex; gap: .75rem; font-size: .9375rem; line-height: 1.55; color: var(--muted); }
    .formato li svg { flex-shrink: 0; width: 1rem; height: 1rem; margin-top: .3rem; stroke: var(--accent); fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
    .formato.cheio li svg { stroke: var(--bg); }

    /* Linhas de regra: duas colunas, rótulo à esquerda e o que vale à direita. */
    .regras { display: flex; flex-direction: column; }
    .regra { display: grid; grid-template-columns: 14rem 1fr; gap: 2rem; padding: 1.5rem 0; border-top: 1px solid var(--rule); }
    .regra:last-child { border-bottom: 1px solid var(--rule); }
    .regra dt { font-size: .9375rem; font-weight: 600; letter-spacing: -.01em; }
    .regra dd { font-size: .9375rem; line-height: 1.65; color: var(--muted); }

    /* Perguntas: <details> nativo, sem JS. Uma pergunta que só abre com JS é uma pergunta que some. */
    .pergunta { border-top: 1px solid var(--rule); }
    .pergunta:last-of-type { border-bottom: 1px solid var(--rule); }
    .pergunta summary {
      list-style: none; cursor: pointer; padding: 1.5rem 0; display: flex; align-items: center;
      justify-content: space-between; gap: 2rem; font-size: 1rem; font-weight: 500; letter-spacing: -.01em;
    }
    .pergunta summary::-webkit-details-marker { display: none; }
    .pergunta summary::after {
      content: ""; flex-shrink: 0; width: .625rem; height: .625rem;
      border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted);
      transform: rotate(45deg) translateY(-.15rem); transition: transform .2s var(--ease);
    }
    .pergunta[open] summary::after { transform: rotate(225deg) translateY(-.15rem); }
    .pergunta p { font-size: .9375rem; line-height: 1.7; color: var(--muted); padding-bottom: 1.75rem; max-width: 46rem; }


    /* ── Os números do programa: grandes, finos, sem caixa. ──────────────────────────────────────── */
    .numeros { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; margin-bottom: 4rem; max-width: 46rem; }
    .numero { padding-top: 1.75rem; border-top: 1px solid var(--rule); }
    .numero .valor { display: block; font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 100; letter-spacing: -.03em; line-height: 1; margin-bottom: .875rem; }
    .numero .rot { display: block; font-size: .875rem; line-height: 1.5; color: var(--muted); max-width: 15rem; }

    /* ── O bloco da franqueza: é o mais importante da página e não pode parecer nota de rodapé. ─── */
    .franqueza { margin-top: 4rem; padding: 2.5rem; border-left: 3px solid var(--accent); background: var(--bg); }
    .franqueza h3 { font-size: 1.125rem; font-weight: 600; letter-spacing: -.015em; margin-bottom: 1.5rem; }
    .franqueza p { font-size: .9375rem; line-height: 1.7; color: var(--muted); max-width: 44rem; margin-bottom: 1rem; }
    .franqueza p b { color: var(--ink); font-weight: 600; }
    .franqueza .franqueza-fim { margin-bottom: 0; padding-top: 1rem; border-top: 1px solid var(--rule); }

    /* ── Formulário: campos com um risco só, sem caixa e sem raio. ───────────────────────────────── */
    .form { max-width: 46rem; }
    .campos { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 1.5rem; }
    .campo { display: flex; flex-direction: column; gap: .5rem; }
    .campo.todo { grid-column: 1 / -1; }
    label { font-size: .8125rem; font-weight: 500; color: var(--muted); }
    .entrada {
      width: 100%; padding: .625rem 0; font-size: 1rem; font-family: inherit;
      color: var(--ink); background: transparent; border: none; border-bottom: 1px solid var(--rule);
      outline: none; transition: border-color .2s;
    }
    textarea.entrada { resize: vertical; min-height: 3.5rem; }
    .entrada::placeholder { color: color-mix(in srgb, var(--muted) 60%, transparent); }
    .entrada:focus { border-bottom-color: var(--accent); }
    .entrada:disabled { color: var(--muted); cursor: not-allowed; }
    .dica { font-size: .8125rem; line-height: 1.55; color: var(--muted); }
    .obrigatorio { color: var(--accent); }

    /* ── Os três blocos da ficha (03/08/2026) ────────────────────────────────────────────────────
       A ficha tem quatorze campos. Em lista corrida, quem abre vê uma parede e fecha. Partida em
       "você · o seu negócio · como você atua", cada pedaço é uma pergunta curta, e o bloco do meio
       pode ser saltado inteiro por quem é pessoa física — que é o que a linha de apoio diz. */
    .bloco-rotulo {
      font-size: .75rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
      color: var(--accent); margin: 3.5rem 0 1.25rem; padding-top: 1.75rem; border-top: 1px solid var(--rule);
    }
    /* O primeiro não leva risco em cima: ele encosta no texto de abertura, e um risco ali cortaria
       a página em dois logo no começo. */
    .form > .bloco-rotulo:first-child { margin-top: 0; padding-top: 0; border-top: none; }
    .bloco-sub { font-size: .875rem; line-height: 1.6; color: var(--muted); margin: -.5rem 0 1.75rem; max-width: 38rem; }

    /* ── CNPJ: o campo que preenche os outros (03/08/2026) ───────────────────────────────────────
       Ocupa a linha inteira para o estado da consulta caber AO LADO do número, e não por baixo: é
       ali que a pessoa olha quando acaba de digitar. O input não acompanha a largura da
       linha — um CNPJ tem 18 caracteres e uma caixa de 46rem para eles parece campo de outra coisa.
       🪤 Não se inventa token de cor aqui. Verde novo seria um segundo dono para um nome que já
       existe noutro lugar da casa; "encontrado" usa a cor do texto e o peso, que já significam isso. */
    .cnpjLinha { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
    .entrada.curto { width: auto; flex: 0 1 13rem; min-width: 11rem; }
    .cnpjEstado { font-size: .8125rem; line-height: 1.55; color: var(--muted); }
    .cnpjEstado.achou { color: var(--ink); font-weight: 500; }
    .cnpjEstado.falhou { color: var(--erro); }

    .escolha { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border: 1px solid var(--rule); }
    .escolha span { position: relative; }
    .escolha input { position: absolute; opacity: 0; pointer-events: none; }
    .escolha label {
      display: block; height: 100%; padding: .875rem 1.25rem; cursor: pointer; font-size: .8125rem; font-weight: 500;
      color: var(--muted); transition: background .2s, color .2s; border-left: 1px solid var(--rule); border-top: 1px solid var(--rule);
    }
    .escolha span:nth-child(odd) label { border-left: none; }
    .escolha span:nth-child(-n+2) label { border-top: none; }
    .escolha input:checked + label { background: var(--ink); color: var(--bg); }
    /* O rádio real está escondido: o anel de foco por TECLADO tem de ir no rótulo, senão some. */
    .escolha input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: -2px; }

    .erro { font-size: .875rem; color: var(--erro); }
    .miudo { font-size: .8125rem; color: var(--muted); line-height: 1.55; }
    .miudo a { color: var(--accent); text-decoration: none; }
    .miudo a:hover { text-decoration: underline; }
    #btn { margin-top: .5rem; }

    /* ── Porta do LinkedIn: o passo 1 da candidatura ─────────────────────────────────────────────── */
    .porta { max-width: 40rem; }
    .lgpd { border: 1px solid var(--rule); padding: 2rem; margin-bottom: 2.5rem; background: var(--faint); }
    .lgpd h3 { font-size: .9375rem; font-weight: 600; margin-bottom: 1rem; letter-spacing: -.01em; }
    .lgpd ul { list-style: none; display: flex; flex-direction: column; gap: .75rem; }
    .lgpd li { display: flex; gap: .75rem; font-size: .875rem; line-height: 1.6; color: var(--muted); }
    .lgpd li svg { flex-shrink: 0; width: .9375rem; height: .9375rem; margin-top: .25rem; stroke: var(--ok); fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
    /* O texto inteiro do item mora num só filho, senão o `<b>` vira coluna ao lado da frase. */
    .lgpd li > span { flex: 1; min-width: 0; }
    .lgpd li b { color: var(--ink); font-weight: 600; }

    .btn-li {
      display: inline-flex; align-items: center; gap: .75rem;
      padding: .875rem 1.75rem; font-size: .9375rem; font-weight: 600; font-family: inherit;
      background: var(--linkedin); color: #fff; border: none; cursor: pointer; text-decoration: none;
      transition: opacity .2s, transform .1s;
    }
    .btn-li:hover { opacity: .88; }
    .btn-li:active { transform: scale(.97); }
    .btn-li svg { width: 1.125rem; height: 1.125rem; fill: currentColor; }

    /* Cartão de quem entrou: foto + nome + e-mail, vindos do LinkedIn. */
    .quemsou { display: flex; align-items: center; gap: 1rem; padding: 1.25rem 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); margin-bottom: 3rem; }
    .quemsou img { width: 2.75rem; height: 2.75rem; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: var(--faint); }
    .quemsou .iniciais { width: 2.75rem; height: 2.75rem; border-radius: 50%; flex-shrink: 0; background: var(--ink); color: var(--bg); display: flex; align-items: center; justify-content: center; font-size: .875rem; font-weight: 600; }
    .quemsou .oi { font-size: .9375rem; font-weight: 600; letter-spacing: -.01em; }
    .quemsou .end { font-size: .8125rem; color: var(--muted); margin-top: .125rem; }
    .quemsou .selo { margin-left: auto; font-size: .6875rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ok); white-space: nowrap; }

    /* ── A ficha em PÁGINA PRÓPRIA (decisão do dono, 03/08/2026) ─────────────────────────────────
       De 01/08 a 03/08 a ficha foi um MODAL por cima desta página. Saiu, e a razão é de produto,
       não de estilo: **o modal fechava com um clique fora dele e levava junto tudo o que a pessoa
       já tinha escrito.** São ~14 campos, três minutos de trabalho e uma candidatura que não chega.
       Um formulário longo não pode morar numa caixa que se fecha por engano.
       A ficha agora é `/seja-parceiro/candidatura`, uma página inteira com a mesma folha de estilo.
       🔑 O que isso deu de graça, e vale mais do que a correção: os dois caminhos para a ficha
       passaram a ser `<a href>` de verdade. Antes o "preencha sem LinkedIn" era `href="#"` com a
       navegação cancelada pela JS — sem JS, não ia a lado nenhum.
       🪤 Saíram com o modal: `.modal`, `.modal-veu`, `.modal-caixa`, `.modal-fechar`,
       `body.modal-aberto` e o token `--veu` (claro e escuro). CSS órfão que ninguém tem coragem de
       apagar depois é tão ruim quanto o defeito que ele estilizava. */

    /* Volta para o programa, no topo da ficha. Não é decoração: é a saída da página, e ela precisa
       de existir em algum lugar visível agora que não há botão de fechar. */
    .voltar {
      display: inline-flex; align-items: center; gap: .5rem; margin-bottom: 2.5rem;
      font-size: .8125rem; color: var(--muted); text-decoration: none; transition: color .2s;
    }
    .voltar:hover { color: var(--ink); }
    .voltar svg { width: .875rem; height: .875rem; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

    .sucesso { display: none; max-width: 36rem; }
    .sucesso .visto { width: 3rem; height: 3rem; margin-bottom: 2rem; }
    .sucesso .visto svg { width: 100%; height: 100%; stroke: var(--ok); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
    .sucesso h2 { font-size: clamp(1.75rem, 3vw, 2.75rem); margin-bottom: 1.5rem; }
    .sucesso p { font-size: 1rem; line-height: 1.65; color: var(--muted); }
    .sucesso ol { margin-top: 2rem; list-style: none; display: flex; flex-direction: column; gap: 1rem; }
    .sucesso ol li { font-size: .9375rem; line-height: 1.6; color: var(--muted); padding-top: 1rem; border-top: 1px solid var(--rule); }
    .sucesso ol li b { color: var(--ink); font-weight: 600; }
    .girando { display: inline-block; width: 1rem; height: 1rem; border: 2px solid color-mix(in srgb, var(--bg) 40%, transparent); border-top-color: var(--bg); border-radius: 50%; animation: gira .7s linear infinite; }
    @keyframes gira { to { transform: rotate(360deg); } }

    footer { padding: 3rem var(--pad-x); border-top: 1px solid var(--rule); font-size: .8125rem; color: var(--muted); }

    /* ── Revelar ao rolar: o `Reveal` do site (y 32 → 0, .85s, mesma curva) sem framer-motion. ─────
       🚨 O ESCONDER ESTÁ ATRÁS DE `html.anima`, E ISSO NÃO É ESTILO, É SEGURANÇA.
       Em 31/07/2026 esta página foi ao ar em branco: o `.revela` escondia por CSS e só a JS
       devolvia a visibilidade. Qualquer coisa que impedisse o observador de correr — erro noutro
       script, navegador sem a API, extensão — apagava a página inteira, e o topo continuava lá a
       fingir que estava tudo bem.
       👉 A régua: **conteúdo nunca depende de JS para EXISTIR.** A classe `anima` só entra quando já
       sabemos que dá para animar; sem ela, este bloco não se aplica e tudo se vê. */
    html.anima .revela { opacity: 0; transform: translateY(2rem); transition: opacity .85s var(--ease), transform .85s var(--ease); }
    html.anima .revela.visivel { opacity: 1; transform: none; }

    /* Quem pediu menos movimento não leva nenhum — e continua a VER tudo. */
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      html.anima .revela { opacity: 1; transform: none; transition: none; }
      *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
    }

    /* 🪤 Com TRÊS formatos (SON-392) a coluna fica estreita bem antes do ponto de quebra: em 1024px
       cada card tem ~341px e o padding de 2.25rem come 72px deles. O padding cede primeiro, para o
       texto não afinar numa coluna de duas palavras por linha. */
    @media (max-width: 1080px) {
      .g3 > .formato { padding: 1.75rem; }
    }

    @media (max-width: 900px) {
      .g3, .g2 { grid-template-columns: 1fr; }
      .numeros { grid-template-columns: 1fr; gap: 1.5rem; }
      .franqueza { padding: 1.75rem; }
      .grelha { gap: 2.5rem; }
      .regra { grid-template-columns: 1fr; gap: .5rem; }
      :root { --pad-y: 4.5rem; }
    }
    @media (max-width: 560px) {
      .campos { grid-template-columns: 1fr; }
      .escolha { grid-template-columns: 1fr; }
      .escolha label { border-left: none; border-top: 1px solid var(--rule); }
      .escolha span:first-child label { border-top: none; }
      .cta, .btn-li { width: 100%; justify-content: center; }
      .cta-linha { gap: 1.25rem; }
      .lgpd { padding: 1.5rem; }
      .quemsou .selo { display: none; }
    }

    *{scrollbar-width:thin;scrollbar-color:rgba(124,138,165,.45) transparent}
    ::-webkit-scrollbar{width:11px;height:11px}
    ::-webkit-scrollbar-track{background:transparent}
    ::-webkit-scrollbar-thumb{background-color:rgba(124,138,165,.45);border-radius:999px;border:3px solid transparent;background-clip:padding-box}
    ::-webkit-scrollbar-thumb:hover{background-color:rgba(124,138,165,.72)}
