Página de Preços Skill

Produza uma página de preços de tela única que respeite o DESIGN.md ativo.

Fluxo de Trabalho

1. Leia o DESIGN.md ativo (injetado acima). Use apenas suas cores, tokens de tipo e padrões de componentes.
2. Classifique o produto do briefing e escolha um formato de nível:
   • 3 níveis (mais comum): Gratuito / Pro / Equipe ou Starter / Growth / Enterprise.
   • 4 níveis quando o briefing disser "escala" ou "enterprise plus".
   • 2 níveis quando disser "individual / business" ou "personal / pro".
3. Seções, em ordem:
   1. Hero — título da página (ex: "Preços"), subtítulo de uma linha, alternador mensal/anual opcional.
   2. Cartões de plano — um cartão por nível. Cada cartão: nome do nível, preço (use a fonte de exibição + escala maior para o número), posicionamento de 1 linha, 4–6 recursos em tópicos, CTA principal. Marque o nível recomendado com a borda de acento do DS ou um pequeno selo.
   3. Tabela de comparação — linhas de recursos × colunas de nível, células ✓ / — / valor. Agrupe recursos em 2–3 seções lógicas (Núcleo, Colaboração, Suporte, Segurança…). Cabeçalho fixo.
   4. FAQ — 4–6 itens de perguntas e respostas colapsáveis. Use <details><summary> para o colapso — sem JS.
   5. CTA de rodapé — linha única + botão, banda de acento usada com moderação.
4. Escreva um único documento HTML autocontido:
   • <!doctype html> a </html>, CSS em um <style> inline.
   • CSS Grid para a linha de cartões de plano; CSS Grid para a tabela de comparação.
   • data-od-id em cada cartão de nível e cada linha da tabela.
5. Renderização de dinheiro: use a fonte de exibição para o número grande, corpo para a moeda e "/mês" — tamanhos por escala do DESIGN.md.
6. Autoverificação:
   • Os preços são plausíveis para o produto (não "$X / mês").
   • O acento está no nível recomendado e em apenas um CTA.
   • A tabela de comparação é renderizada de forma limpa a 1024px e empilhada de forma legível abaixo de 768px (rotacione os cabeçalhos das colunas ou use scroll-x).
   • Sem nomes de recursos falsos — cada linha deve ser algo que um produto real ofereceria.

Contrato de Saída

Emita entre as tags <artifact>:

<artifact identifier="pricing-slug" type="text/html" title="Pricing — Product Name">
<!doctype html>
<html>...</html>
</artifact>

Uma frase antes do artefato, nada depois.