/* Landing do norteia (local/landing/). Marca e escala: docs/DESIGN_SYSTEM.md ("Landing", princípios 14, 16 e 17).
   Tokens: os MESMOS do app (--ds-*), servidos em /ds-tokens.css a partir dos blocos "ds-tokens" do local/ds.css
   (landing.py); este arquivo não define cor, fonte, raio, espaço nem tamanho de texto próprios. Tema: data-theme no
   <html> (claro por padrão; tema.js troca para o escuro por prefers-color-scheme antes da primeira pintura). As peças do
   produto (moldura, fragmentos do hero, lado do norteia na animação) usam a classe do app .ds-sim-dark, que aplica os
   tokens do escuro mesmo no tema claro. Únicos valores fixos: os cinzas neutros do banco de questões GENÉRICO da
   animação (de propósito fora da marca) e sombras. Prefixo lp-. Sem estilo inline (a CSP não tem 'unsafe-inline'). */
:root { --lp-wrap: 1120px; }  /* largura da página de marketing (o app usa --ds-measure para leitura) */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--ds-bg); color: var(--ds-ink); font: 400 var(--ds-fs-body)/var(--ds-lh-body) var(--ds-font); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--ds-indigo); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--ds-focus-ring); outline-offset: 2px; border-radius: var(--ds-1); }  /* foco do app */
.lp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lp-skip { position: absolute; left: var(--ds-4); top: -60px; background: var(--ds-surface); color: var(--ds-ink); padding: var(--ds-2) var(--ds-3); border-radius: var(--ds-radius-sm); z-index: 20; }
.lp-skip:focus { top: 12px; }
.lp-wrap { max-width: var(--lp-wrap); margin: 0 auto; padding: 0 var(--ds-6); }
.lp-narrow { max-width: 820px; }

/* marca */
.lp-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ds-ink); min-height: 44px; }
.lp-brand img { width: 32px; height: 32px; }
.lp-word { font: 700 24px/1 var(--ds-display); letter-spacing: -.02em; color: var(--ds-ink); }
.lp-word span { color: var(--ds-brand-ia); }

/* topo */
.lp-top { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--ds-bg) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--ds-line); }
.lp-top-in { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-4); min-height: 68px; }
.lp-nav { display: flex; align-items: center; gap: 22px; }
.lp-nav a:not(.lp-btn) { color: var(--ds-ink-2); text-decoration: none; font-size: var(--ds-fs-secondary); min-height: 44px; display: inline-flex; align-items: center; }
.lp-nav a:not(.lp-btn):hover { color: var(--ds-indigo); }
.lp-nav-login { font-weight: 700; }

/* botões */
/* Mesma receita do .ds-btn / .ds-btn--primary do app (raio --ds-radius-sm, 700, borda de linha, preenchimento de ação),
   em alturas de marketing (48/44/56 px). */
.lp-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-2); min-height: 48px; padding: 0 var(--ds-5); border-radius: var(--ds-radius-sm);
  border: 1px solid var(--ds-line-strong); background: var(--ds-surface); color: var(--ds-ink); font: 700 var(--ds-fs-body)/1.2 var(--ds-font);
  text-decoration: none; cursor: pointer; transition: background .15s, border-color .15s; }
.lp-btn:hover { border-color: var(--ds-ink-2); }
.lp-btn--primary { background: var(--ds-indigo-fill); border-color: var(--ds-indigo-fill-line); color: var(--ds-on-accent); }
.lp-btn--primary:hover { background: var(--ds-indigo-fill-hover); border-color: var(--ds-indigo-fill-hover); }
.lp-btn--sm { min-height: 44px; padding: 0 var(--ds-4); font-size: var(--ds-fs-secondary); }
.lp-btn--lg { min-height: 56px; padding: 0 var(--ds-6); font-size: var(--ds-fs-body); }
.lp-btn:disabled { opacity: .7; cursor: default; }
.lp-link { font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.lp-link:hover { text-decoration: underline; }

/* tipografia */
/* eyebrow: pílula suave (fundo de destaque leve, raio total), como rótulo de seção; o texto continua na escala caption */
.lp-eyebrow { display: flex; width: fit-content; max-width: 100%; margin: 0 0 var(--ds-stack-1); padding: var(--ds-1) var(--ds-3); border-radius: var(--ds-pill);
  background: var(--ds-indigo-soft); font: 700 var(--ds-fs-caption)/1.3 var(--ds-display); letter-spacing: var(--ds-ls-caps); text-transform: uppercase; color: var(--ds-indigo); }
/* tipografia: só tokens da escala responsiva (princípio 17) */
.lp-h1 { margin: 0 0 var(--ds-stack-2); font: 700 var(--ds-fs-display)/var(--ds-lh-display) var(--ds-display); letter-spacing: var(--ds-ls-display); }
.lp-h1 span { display: block; color: var(--ds-indigo); }
.lp-h1--page { font-size: var(--ds-fs-h1); line-height: var(--ds-lh-heading); letter-spacing: var(--ds-ls-heading); }
.lp-h2 { margin: 0 0 var(--ds-stack-2); font: 700 var(--ds-fs-section)/var(--ds-lh-heading) var(--ds-display); letter-spacing: var(--ds-ls-heading); }
.lp-h3 { margin: 0 0 var(--ds-2); font: 700 var(--ds-fs-h3)/var(--ds-lh-title) var(--ds-display); }
.lp-lead { margin: 0 0 var(--ds-stack-3); font-size: var(--ds-fs-lead); line-height: var(--ds-lh-body); color: var(--ds-ink-2); max-width: 36em; }
.lp-p { margin: 0 0 var(--ds-4); color: var(--ds-ink-2); }
.lp-p--strong { font-weight: 700; color: var(--ds-ink); margin-top: var(--ds-stack-3); }

/* seções */
/* Ritmo vertical (princípio 17): toda seção tem o MESMO respiro (--ds-section-y) em cima e embaixo; dentro dela, só os
   tokens de pilha (stack-1 eyebrow → título, stack-2 título → texto, stack-3 texto → conteúdo, stack-4 bloco → bloco) e
   --ds-gap-card entre cartões. Nada de margem avulsa somando com o padding da seção: o último filho não tem margem. */
.lp-sec { padding: var(--ds-section-y) 0; }
.lp-sec--alt { background: var(--ds-surface-group); }
.lp-sec--first { padding-top: calc(var(--ds-section-y) * .75); }
.lp-head { max-width: 760px; margin-bottom: var(--ds-stack-3); }
.lp-head > :last-child, .lp-who .lp-h2, .lp-show-txt > :last-child { margin-bottom: 0; }
.lp-head .lp-p { margin: 0; font-size: var(--ds-fs-body); }
.lp-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.lp-head--center .lp-eyebrow { margin-left: auto; margin-right: auto; }

/* hero com o produto (tela real Hoje no escuro + fragmentos de interface) */
/* Hero: sem respiro embaixo (a seção seguinte tem o fundo igual e já traz o seu --ds-section-y em cima, então o espaço
   entre o hero e "Para quem é" é o mesmo de qualquer par de seções). Ordem (princípio 18): eyebrow, título, texto, CTA e,
   no celular, logo a imagem; o link secundário e a nota do beta vêm depois dela (.lp-hero-more). No computador, as duas
   partes do texto ficam à esquerda e a imagem ocupa a coluna direita inteira. */
.lp-hero { padding: var(--ds-stack-3) 0 0; background: radial-gradient(60% 70% at 85% 40%, color-mix(in srgb, var(--ds-indigo-fill) 14%, transparent), transparent 70%); }
.lp-hero-in { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); grid-template-areas: "copy art" "more art"; grid-template-rows: auto 1fr; gap: 0 calc(var(--ds-section-y) * .55); align-items: start; }
.lp-hero-copy { grid-area: copy; align-self: end; }
.lp-hero-art { grid-area: art; align-self: center; }
.lp-hero-more { grid-area: more; display: flex; flex-direction: column; align-items: flex-start; gap: var(--ds-1); padding-top: var(--ds-stack-2); }
.lp-hero .lp-wrap { max-width: 1240px; }
/* âncoras: nada fica sob o topo fixo (68 px + borda). Seções param na borda (o respiro delas fica visível);
   outros alvos ganham mais um passo. */
[id] { scroll-margin-top: 84px; }
section[id], main[id] { scroll-margin-top: 69px; }
.lp-eyebrow--tag { letter-spacing: .06em; }
.lp-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-3) var(--ds-6); }
.lp-invite { margin: var(--ds-stack-2) 0 0; font-size: var(--ds-fs-secondary); color: var(--ds-muted); }
.lp-hero-more .lp-invite { margin: 0; }
.lp-hero-art { position: relative; margin: 0; padding: 18px 0 30px; }
.lp-frame { background: var(--ds-bg); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-lg); overflow: hidden; box-shadow: 0 30px 70px rgba(11, 18, 43, .30); }
.lp-frame-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--ds-surface-2); border-bottom: 1px solid var(--ds-line); }
.lp-frame-bar span { width: 10px; height: 10px; border-radius: 50%; background: var(--ds-line-strong); }
.lp-frame-bar b { margin-left: 10px; font: 700 13px/1 var(--ds-display); color: var(--ds-ink-2); }
.lp-frame-bar i { font-style: normal; color: var(--ds-brand-ia); }
.lp-frame img { width: 100%; }
.lp-float { position: absolute; background: var(--ds-surface); color: var(--ds-ink); border: 1px solid var(--ds-line-strong); border-radius: var(--ds-radius); box-shadow: 0 18px 40px rgba(11, 18, 43, .38); }
.lp-float--ring { left: -28px; bottom: 0; display: flex; align-items: center; gap: var(--ds-3); padding: var(--ds-3) var(--ds-4) var(--ds-3) var(--ds-3); }
.lp-float--ring span { display: grid; font-size: 13px; color: var(--ds-ink-2); }
.lp-ring { color: var(--ds-ink); }  /* o texto do anel usa fill="currentColor" no SVG: herda esta cor mesmo com CSS velho */
.lp-float--ring b { font: 700 15px/1.3 var(--ds-display); color: var(--ds-green); }
.lp-float--score { right: -22px; top: 42%; display: grid; gap: 2px; max-width: 250px; padding: var(--ds-3) 14px; border-left: 3px solid var(--ds-indigo); }
.lp-float-k { font: 700 12px/1.3 var(--ds-display); letter-spacing: .1em; text-transform: uppercase; color: var(--ds-indigo); }
.lp-float-v { font-size: 14px; line-height: 1.4; }
.lp-float-v b { font: 700 18px/1.2 var(--ds-mono); color: var(--ds-ink); }
.lp-float--score small { font-size: 12px; color: var(--ds-muted); }
.lp-float--badge { right: 18px; bottom: 6px; display: inline-flex; align-items: center; gap: var(--ds-2); padding: var(--ds-2) 14px; border-radius: var(--ds-pill); background: var(--ds-bg); font: 700 13px/1.3 var(--ds-font); }
.lp-float--badge i, .lp-badge i { width: 8px; height: 8px; border-radius: 50%; background: var(--ds-brand-ia); box-shadow: 0 0 0 3px var(--ds-green-line); }
.lp-float--badge b, .lp-badge b { color: var(--ds-green); }

/* para quem é */
.lp-who { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--ds-stack-2) 56px; align-items: start; }
/* citação: Montserrat 400 (a marca só usa 400 e 700), um passo acima do corpo, medida normal */
.lp-quote { margin: 0 0 var(--ds-stack-3); max-width: 34em; padding-left: var(--ds-4); border-left: 3px solid var(--ds-green); font: 400 var(--ds-fs-h3)/var(--ds-lh-body) var(--ds-display); color: var(--ds-ink); }
.lp-chips { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--ds-2); }
.lp-chips li { padding: 6px 14px; border: 1px solid var(--ds-line-strong); border-radius: var(--ds-pill); font-size: var(--ds-fs-secondary); color: var(--ds-ink-2); }

/* dor: cartões com ícone de linha */
.lp-pains { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ds-gap-card); }
.lp-pain { padding: var(--ds-card-pad); background: var(--ds-bg); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-lg); }
.lp-pain p { margin: 0; color: var(--ds-ink-2); font-size: var(--ds-fs-body); }
.lp-ic { width: 44px; height: 44px; margin-bottom: 14px; fill: none; stroke: var(--ds-wine); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.lp-ic--sm { flex: none; width: 40px; height: 40px; margin: 2px 0 0; stroke: var(--ds-green); }
.lp-qstrip { margin-top: var(--ds-stack-3); padding: var(--ds-card-pad); border-radius: var(--ds-radius-lg); background: var(--ds-indigo-soft); border-left: 4px solid var(--ds-indigo); color: var(--ds-ink); }
.lp-qstrip-t { margin: 0 0 14px; font-weight: 700; }
.lp-questions { margin: 0; padding: 0; list-style: none; counter-reset: q; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ds-3) var(--ds-5); }
.lp-questions li { counter-increment: q; font: 700 var(--ds-fs-lead)/var(--ds-lh-title) var(--ds-display); }
.lp-questions li::before { content: counter(q, decimal-leading-zero); display: block; margin-bottom: 6px; font: 700 var(--ds-fs-caption)/1 var(--ds-mono); color: var(--ds-green); }
.lp-vs-wrap { margin-top: var(--ds-stack-4); }
.lp-vs-t { margin-bottom: var(--ds-stack-2); }
.lp-vs { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--ds-fs-body); background: var(--ds-bg); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-lg); overflow: hidden; }
.lp-vs th, .lp-vs td { width: 50%; padding: 14px 18px 14px 44px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--ds-line); position: relative; }
.lp-vs tr:last-child td { border-bottom: 0; }
.lp-vs thead th { padding-left: 18px; font: 700 var(--ds-fs-secondary)/1.3 var(--ds-display); color: var(--ds-muted); }  /* sem caixa alta: a marca é sempre "norteia" */
.lp-vs thead th:last-child { color: var(--ds-green); }
.lp-vs td:first-child { color: var(--ds-muted); }
.lp-vs td:last-child { color: var(--ds-ink); font-weight: 700; border-left: 1px solid var(--ds-line); }
.lp-vs td::before { position: absolute; left: 18px; top: 13px; font-weight: 700; }
.lp-vs td:first-child::before { content: '×'; color: var(--ds-wine); }
.lp-vs td:last-child::before { content: '✓'; color: var(--ds-green); }

/* passos com tela real */
.lp-walk { margin: 0; padding: 0; list-style: none; }
.lp-show { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: calc(var(--ds-section-y) * .55); align-items: center; }
.lp-show + .lp-show { margin-top: var(--ds-stack-4); }
.lp-show--rev .lp-show-txt { order: 2; }
.lp-show-txt p { margin: 0; color: var(--ds-ink-2); }
.lp-step-n { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 32px; margin-bottom: var(--ds-stack-1); padding: 0 var(--ds-2);
  border-radius: var(--ds-radius-sm); background: var(--ds-indigo-fill); color: var(--ds-on-accent); font: 700 var(--ds-fs-secondary)/1 var(--ds-mono); }
.lp-shot { justify-self: center; width: 100%; }
.lp-shot img, .lp-card-shot img { width: 100%; border-radius: var(--ds-radius); border: 1px solid var(--ds-line-strong); box-shadow: var(--ds-shadow); }
.lp-shot--tall { max-width: 460px; }
.lp-center-note { margin: var(--ds-stack-4) 0 0; text-align: center; font: 700 var(--ds-fs-lead)/var(--ds-lh-title) var(--ds-display); color: var(--ds-green); }

/* plano de recuperação */
.lp-walk--rec .lp-step-n { background: var(--ds-wine); color: var(--ds-bg); }
.lp-rule { margin-top: var(--ds-stack-4); padding: var(--ds-5) var(--ds-6); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-lg); background: var(--ds-surface-group); }
.lp-rule-t { margin: 0 0 var(--ds-3); font-weight: 700; }
.lp-rule-list { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }
.lp-rule-list li { display: inline-flex; gap: var(--ds-2); align-items: baseline; padding: var(--ds-2) 14px; border-radius: var(--ds-pill); border: 1px solid currentColor; font-size: var(--ds-fs-secondary); }
.lp-rule-list b { font-family: var(--ds-display); }
.lp-rule--ok { color: var(--ds-green); }
.lp-rule--mid { color: var(--ds-amber-ink); }
.lp-rule--ko { color: var(--ds-wine); }

/* regra do jogo */
.lp-grid { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ds-gap-card); }
.lp-card { display: flex; flex-direction: column; padding: var(--ds-card-pad); background: var(--ds-bg); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-lg); }
.lp-card p { margin: 0; color: var(--ds-ink-2); }
.lp-card-shot { margin-bottom: 18px; }
.lp-card--score { border-top: 4px solid var(--ds-indigo); }
.lp-calc { margin-top: auto !important; padding-top: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--ds-2); font: 700 var(--ds-fs-secondary)/1.3 var(--ds-mono); }
.lp-calc span { padding: 6px 10px; border-radius: var(--ds-radius-sm); background: var(--ds-surface-group); color: var(--ds-ink-2); }
.lp-calc .lp-calc-ok { color: var(--ds-green); }
.lp-calc .lp-calc-ko { color: var(--ds-wine); }
.lp-calc b { font-size: var(--ds-fs-h2); color: var(--ds-ink); }

/* planos */
.lp-price-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ds-gap-card); }
.lp-price { display: flex; flex-direction: column; align-items: flex-start; gap: var(--ds-2); padding: var(--ds-card-pad); background: var(--ds-bg); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-lg); }
.lp-price--pro { border: 2px solid var(--ds-indigo-fill); }
.lp-price-name { margin: 0; font: 700 var(--ds-fs-h3)/var(--ds-lh-title) var(--ds-display); }
.lp-price-val { margin: 0 0 var(--ds-3); font: 700 var(--ds-fs-h2)/var(--ds-lh-title) var(--ds-display); }
.lp-price-val span { font: 400 var(--ds-fs-secondary)/1 var(--ds-font); color: var(--ds-muted); }
.lp-plans-note { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-2) 10px; margin: var(--ds-gap-card) 0 0; padding: var(--ds-3) var(--ds-4); border-radius: var(--ds-radius-sm); background: var(--ds-amber-soft); color: var(--ds-ink-2); font-size: var(--ds-fs-secondary); }
.lp-tag { display: inline-block; padding: 3px 9px; border-radius: var(--ds-pill); border: 1px solid currentColor; color: var(--ds-amber-ink); font: 700 var(--ds-fs-caption)/1.4 var(--ds-display); letter-spacing: .08em; text-transform: uppercase; }
.lp-table-wrap { margin-top: var(--ds-stack-3); overflow-x: auto; }
.lp-plans { width: 100%; border-collapse: collapse; font-size: var(--ds-fs-body); }
.lp-plans th, .lp-plans td { padding: 14px var(--ds-3); border-bottom: 1px solid var(--ds-line); text-align: left; vertical-align: top; }
.lp-plans thead th { font: 700 var(--ds-fs-caption)/1.3 var(--ds-display); letter-spacing: .08em; text-transform: uppercase; color: var(--ds-muted); border-bottom-color: var(--ds-line-strong); }
.lp-plans tbody th { font-weight: 400; color: var(--ds-ink); width: 52%; }
.lp-plans td { font-weight: 700; color: var(--ds-ink-2); }
.lp-plans td:last-child { color: var(--ds-green); }
.lp-more { margin: var(--ds-5) 0 0; }

/* CTA final */
.lp-final { padding: var(--ds-section-y) 0; background: var(--ds-surface); border-top: 1px solid var(--ds-line); border-bottom: 1px solid var(--ds-line); }
.lp-final-in { text-align: center; display: flex; flex-direction: column; align-items: center; }
.lp-final .lp-h2 { margin-bottom: var(--ds-stack-3); }

/* FAQ */
.lp-faq { margin-top: var(--ds-stack-3); border-top: 1px solid var(--ds-line); }
.lp-faq details { border-bottom: 1px solid var(--ds-line); }
.lp-faq summary { cursor: pointer; list-style: none; position: relative; padding: var(--ds-4) var(--ds-10) var(--ds-4) 0; min-height: 44px; font: 700 var(--ds-fs-lead)/var(--ds-lh-title) var(--ds-display); }
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after { content: '+'; position: absolute; right: 6px; top: 14px; font: 400 26px/1 var(--ds-font); color: var(--ds-indigo); }
.lp-faq details[open] summary::after { content: '−'; }
.lp-faq details p { margin: 0 0 var(--ds-stack-3); color: var(--ds-ink-2); max-width: 44em; }

/* páginas legais */
.lp-legal h2 { margin-top: var(--ds-8); }
.lp-legal p, .lp-legal li { color: var(--ds-ink-2); }
.lp-note { padding: var(--ds-3) var(--ds-4); border-left: 4px solid var(--ds-line-strong); background: var(--ds-surface-group); border-radius: 0 10px 10px 0; color: var(--ds-ink-2); }

/* rodapé */
.lp-foot { padding: calc(var(--ds-section-y) * .55) 0 40px; border-top: 1px solid var(--ds-line); }
.lp-foot-in { display: grid; grid-template-columns: 1fr auto; gap: var(--ds-6) var(--ds-10); }
.lp-foot-brand p { margin: var(--ds-2) 0 0; color: var(--ds-muted); font-size: var(--ds-fs-secondary); }
.lp-foot-nav { display: flex; flex-wrap: wrap; gap: var(--ds-1) 22px; align-content: flex-start; }
.lp-foot-nav a { color: var(--ds-ink-2); font-size: var(--ds-fs-secondary); min-height: 44px; display: inline-flex; align-items: center; }
.lp-foot-small { grid-column: 1 / -1; margin: 0; font-size: var(--ds-fs-secondary); color: var(--ds-muted); }

/* diálogo do beta */
.lp-dialog { width: min(480px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; border: 1px solid var(--ds-line); border-radius: var(--ds-radius-lg); background: var(--ds-bg); color: var(--ds-ink); }
.lp-dialog::backdrop { background: rgba(11, 18, 43, .55); }
.lp-form { display: grid; gap: var(--ds-4); padding: 28px; }
.lp-dialog-t { margin: 0; font: 700 var(--ds-fs-h2)/var(--ds-lh-heading) var(--ds-display); }
.lp-dialog-lead { margin: 0; color: var(--ds-ink-2); font-size: var(--ds-fs-body); }
.lp-field { display: grid; gap: 6px; font-size: var(--ds-fs-secondary); font-weight: 700; }
.lp-field small { font-weight: 400; color: var(--ds-muted); font-size: var(--ds-fs-secondary); }
.lp-input { width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid var(--ds-line-strong); border-radius: var(--ds-radius-sm); background: var(--ds-surface); color: var(--ds-ink); font: 400 var(--ds-fs-body)/1.3 var(--ds-font); }
.lp-input::placeholder { color: var(--ds-muted); }
.lp-check { display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: start; font-size: var(--ds-fs-secondary); color: var(--ds-ink-2); }
.lp-check input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--ds-indigo-fill); }
.lp-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lp-msg { margin: 0; padding: var(--ds-3) 14px; border-radius: var(--ds-radius-sm); font-size: var(--ds-fs-secondary); }
.lp-msg--err { border-left: 4px solid var(--ds-wine); background: var(--ds-surface-group); }
.lp-msg--ok { border-left: 4px solid var(--ds-green); background: var(--ds-green-soft); }
.lp-form-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* animação da integração (seção #integracao): caderno GENÉRICO desenhado por nós (cinza neutro, fonte do sistema,
   questões fictícias nossas) → você responde 4 questões (✓/✗) → o selo "norteia gravando" conta → no norteia (escuro):
   resultado do caderno, anel do tópico 70% → 80%, erradas no plano de recuperação, revisão D+1. Ciclo de 14 s, só CSS/SVG.
   O estado sem animação é o quadro final (prefers-reduced-motion e navegadores sem animação). */
.lp-sec--int { background: var(--ds-surface-group); border-top: 1px solid var(--ds-line); border-bottom: 1px solid var(--ds-line); }
.lp-int { display: grid; grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr); gap: var(--ds-stack-4) var(--ds-10); align-items: center; }
.lp-flow { margin: 0; }
.lp-flow-in { display: grid; grid-template-columns: minmax(0, 1.25fr) 48px minmax(0, 1fr); align-items: center; }
.lp-flow figcaption { margin-top: var(--ds-4); font-size: var(--ds-fs-secondary); color: var(--ds-muted); }
.lp-nb { position: relative; background: #f2f2f2; color: #2e2e2e; border: 1px solid #c9c9c9; border-radius: 14px; font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; box-shadow: var(--ds-shadow); }
.lp-nb-top { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #e3e3e3; border-bottom: 1px solid #c9c9c9; border-radius: 14px 14px 0 0; }
.lp-nb-top span { width: 9px; height: 9px; border-radius: 50%; background: #b3b3b3; }
.lp-nb-top em { margin-left: 10px; padding: 2px 10px; border-radius: 6px; background: #fafafa; color: #4f4f4f; font-size: 13px; font-style: normal; }
.lp-nb-body { padding: 16px 16px 60px; }
.lp-nb-title { margin: 0; font-size: 16px; font-weight: 700; }
.lp-nb-title span { font-weight: 400; color: #5a5a5a; font-size: 14px; }
.lp-nb-done { margin: 4px 0 12px; font-size: 13px; color: #5a5a5a; }
.lp-nb-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.lp-nb-q { display: grid; grid-template-columns: 26px minmax(0, 1fr) 30px 24px; align-items: center; gap: 8px; padding: 9px 10px; border: 1px solid transparent; border-radius: 8px; font-size: 14px; line-height: 1.4; }
.lp-nb-n { font-weight: 700; color: #5a5a5a; }
.lp-nb-pick { display: inline-flex; justify-content: center; padding: 2px 0; border: 1px solid #8a8a8a; border-radius: 6px; font-weight: 700; color: #3a3a3a; background: #fff; }
.lp-nb-mk { font-weight: 700; font-size: 18px; text-align: center; }
.lp-nb-mk--ok { color: #2f6b1f; }
.lp-nb-mk--ko { color: #a12d3a; }
.lp-badge { position: absolute; left: 16px; bottom: 14px; display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: var(--ds-pill);
  background: var(--ds-bg); color: var(--ds-ink); font: 700 var(--ds-fs-caption)/1.3 var(--ds-font); box-shadow: 0 6px 16px rgba(11, 18, 43, .28); }
.lp-cnt { display: inline-grid; font-family: var(--ds-mono); color: var(--ds-green); }
.lp-cnt > span { grid-area: 1 / 1; opacity: 0; }
.lp-cnt > .lp-cnt-4 { opacity: 1; }
.lp-flow-arrow { height: 4px; margin: 0 6px; background: var(--ds-line-strong); border-radius: 4px; position: relative; overflow: hidden; }
.lp-flow-arrow span { position: absolute; inset: 0; background: var(--ds-brand-ia); }
.lp-side { background: var(--ds-bg); color: var(--ds-ink); border: 1px solid var(--ds-line); border-radius: var(--ds-radius); padding: 18px; box-shadow: 0 18px 40px rgba(11, 18, 43, .25); }
.lp-side-eyebrow { margin: 0 0 var(--ds-2); font: 700 12px/1.3 var(--ds-display); letter-spacing: .1em; text-transform: uppercase; color: var(--ds-indigo); }
.lp-side-cad { margin: 0 0 var(--ds-3); font-size: 15px; color: var(--ds-ink-2); }
.lp-side-cad b { font-family: var(--ds-mono); color: var(--ds-ink); }
.lp-side-row { display: flex; align-items: center; gap: 14px; }
.lp-side-ring { flex: none; }
.lp-side-lbl { font-size: 14px; color: var(--ds-ink-2); }
.lp-ring-old { opacity: 0; }
.lp-side-li { margin: 10px 0 0; padding: var(--ds-2) var(--ds-3); border-radius: var(--ds-radius-sm); background: var(--ds-surface); border: 1px solid var(--ds-line); font-size: 14px; }
.lp-side-li span { font-weight: 700; }
.lp-side-li--rec span { color: var(--ds-wine); }
.lp-side-li--rev span { color: var(--ds-indigo); }
.lp-benefits { margin: 0; padding: 0; list-style: none; display: grid; gap: 22px; }
.lp-benefits li { display: flex; gap: 14px; align-items: flex-start; }
.lp-benefits .lp-h3 { margin-bottom: var(--ds-1); }
.lp-benefits p { margin: 0; color: var(--ds-ink-2); font-size: var(--ds-fs-body); }
@media (prefers-reduced-motion: no-preference) {
  .lp-nb-q--1 { animation: lp-hl1 14s infinite; }
  .lp-nb-q--1 .lp-nb-pick, .lp-nb-q--1 .lp-nb-mk { animation: lp-at10 14s infinite; }
  .lp-nb-q--2 { animation: lp-hl2 14s infinite; }
  .lp-nb-q--2 .lp-nb-pick, .lp-nb-q--2 .lp-nb-mk { animation: lp-at20 14s infinite; }
  .lp-nb-q--3 { animation: lp-hl3 14s infinite; }
  .lp-nb-q--3 .lp-nb-pick, .lp-nb-q--3 .lp-nb-mk { animation: lp-at30 14s infinite; }
  .lp-nb-q--4 { animation: lp-hl4 14s infinite; }
  .lp-nb-q--4 .lp-nb-pick, .lp-nb-q--4 .lp-nb-mk { animation: lp-at40 14s infinite; }
  .lp-badge { animation: lp-at2 14s infinite; }
  .lp-cnt > .lp-cnt-0 { animation: lp-w2-10 14s infinite; }
  .lp-cnt > .lp-cnt-1 { animation: lp-w10-20 14s infinite; }
  .lp-cnt > .lp-cnt-2 { animation: lp-w20-30 14s infinite; }
  .lp-cnt > .lp-cnt-3 { animation: lp-w30-40 14s infinite; }
  .lp-cnt > .lp-cnt-4 { animation: lp-at40 14s infinite; }
  .lp-flow-arrow span { animation: lp-flow 14s infinite; }
  .lp-side-cad { animation: lp-at54 14s infinite; }
  .lp-ring-arc { animation: lp-ring 14s infinite; }
  .lp-ring-old { animation: lp-w0-61 14s infinite; }
  .lp-ring-new { animation: lp-at61 14s infinite; }
  .lp-side-li--rec { animation: lp-at70 14s infinite; }
  .lp-side-li--rev { animation: lp-at79 14s infinite; }
}
@keyframes lp-hl1 { 0%, 3% { background: transparent; border-color: transparent; } 4%, 13% { background: #ffffff; border-color: #9a9a9a; } 14%, 100% { background: transparent; border-color: transparent; } }
@keyframes lp-hl2 { 0%, 13% { background: transparent; border-color: transparent; } 14%, 23% { background: #ffffff; border-color: #9a9a9a; } 24%, 100% { background: transparent; border-color: transparent; } }
@keyframes lp-hl3 { 0%, 23% { background: transparent; border-color: transparent; } 24%, 33% { background: #ffffff; border-color: #9a9a9a; } 34%, 100% { background: transparent; border-color: transparent; } }
@keyframes lp-hl4 { 0%, 33% { background: transparent; border-color: transparent; } 34%, 43% { background: #ffffff; border-color: #9a9a9a; } 44%, 100% { background: transparent; border-color: transparent; } }
@keyframes lp-at2 { 0%, 1% { opacity: 0; transform: scale(.7); } 3%, 95% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes lp-at10 { 0%, 9% { opacity: 0; transform: scale(.7); } 11%, 95% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes lp-at20 { 0%, 19% { opacity: 0; transform: scale(.7); } 21%, 95% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes lp-at30 { 0%, 29% { opacity: 0; transform: scale(.7); } 31%, 95% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes lp-at40 { 0%, 39% { opacity: 0; transform: scale(.7); } 41%, 95% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes lp-at54 { 0%, 53% { opacity: 0; transform: scale(.7); } 55%, 95% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes lp-at61 { 0%, 60% { opacity: 0; transform: scale(.7); } 62%, 95% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes lp-at70 { 0%, 69% { opacity: 0; transform: scale(.7); } 71%, 95% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes lp-at79 { 0%, 78% { opacity: 0; transform: scale(.7); } 80%, 95% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes lp-w2-10 { 0%, 1.5% { opacity: 0; } 2%, 9.5% { opacity: 1; } 10%, 100% { opacity: 0; } }
@keyframes lp-w10-20 { 0%, 9.5% { opacity: 0; } 10%, 19.5% { opacity: 1; } 20%, 100% { opacity: 0; } }
@keyframes lp-w20-30 { 0%, 19.5% { opacity: 0; } 20%, 29.5% { opacity: 1; } 30%, 100% { opacity: 0; } }
@keyframes lp-w30-40 { 0%, 29.5% { opacity: 0; } 30%, 39.5% { opacity: 1; } 40%, 100% { opacity: 0; } }
@keyframes lp-w0-61 { 0%, 60.5% { opacity: 1; } 61%, 99% { opacity: 0; } 100% { opacity: 1; } }
@keyframes lp-flow { 0%, 44% { transform: translateX(-100%); } 50% { transform: translateX(0); } 56%, 100% { transform: translateX(100%); } }
@keyframes lp-flow-v { 0%, 44% { transform: translateY(-100%); } 50% { transform: translateY(0); } 56%, 100% { transform: translateY(100%); } }
@keyframes lp-ring { 0%, 58% { stroke-dasharray: 219.9 314.2; } 64%, 96% { stroke-dasharray: 251.3 314.2; } 100% { stroke-dasharray: 219.9 314.2; } }
@media (max-width: 760px) and (prefers-reduced-motion: no-preference) { .lp-flow-arrow span { animation-name: lp-flow-v; } }

/* responsivo */
/* Computador (princípio 18): o hero divide a primeira dobra com o começo de "Para quem é" (a pílula e o título aparecem
   sob a imagem em 1280 × 800); o hero e a seção seguinte têm o mesmo fundo, então o respiro entre eles é o de bloco. */
@media (min-width: 901px) {
  .lp-hero { padding-top: var(--ds-8); }
  .lp-hero + .lp-sec { padding-top: var(--ds-stack-4); }
}
@media (max-width: 1100px) {
  .lp-pains { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-questions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-int { grid-template-columns: 1fr; }
  .lp-benefits { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lp-benefits li { flex-direction: column; }
  .lp-float--ring { left: -12px; }
  .lp-float--score { right: -10px; }
}
@media (max-width: 900px) {
  .lp-show { grid-template-columns: 1fr; gap: var(--ds-stack-3); }
  .lp-who { grid-template-columns: 1fr; }
  .lp-hero-in { grid-template-columns: 1fr; grid-template-areas: "copy" "art" "more"; grid-template-rows: auto; gap: 0; }
  .lp-hero-copy .lp-lead { margin-bottom: var(--ds-stack-3); }
  .lp-show--rev .lp-show-txt { order: 0; }
  .lp-hero-art { max-width: 640px; margin-top: var(--ds-stack-3); padding: 0 0 var(--ds-6); }
  .lp-hero-more { padding-top: 0; }
  .lp-float--ring { left: 8px; }
  .lp-float--score { right: 8px; top: 36%; }
  .lp-grid { grid-template-columns: 1fr; }
  .lp-card-shot { max-width: 520px; }
}
@media (max-width: 760px) {
  .lp-flow-in { grid-template-columns: 1fr; }
  .lp-flow-arrow { width: 4px; height: 36px; margin: var(--ds-2) auto; }
  .lp-benefits { grid-template-columns: 1fr; }
  .lp-benefits li { flex-direction: row; }
}
@media (max-width: 700px) {
  .lp-nav a:not(.lp-btn):not(.lp-nav-login) { display: none; }
  .lp-nav { gap: var(--ds-3); }
  .lp-price-cards { grid-template-columns: 1fr; }
  .lp-foot-in { grid-template-columns: 1fr; }
  .lp-vs thead { display: none; }
  .lp-vs, .lp-vs tbody, .lp-vs tr, .lp-vs td { display: block; width: 100%; }
  .lp-vs tr { border-bottom: 1px solid var(--ds-line); }
  .lp-vs tr:last-child { border-bottom: 0; }
  .lp-vs td { border-bottom: 0; padding-top: 10px; padding-bottom: 6px; }
  .lp-vs td:last-child { border-left: 0; padding-top: 2px; padding-bottom: 12px; }
  .lp-vs td::before { top: 9px; }
  .lp-vs td:last-child::before { top: 1px; }
}
@media (max-width: 600px) {
  .lp-wrap { padding: 0 var(--ds-4); }
  .lp-word { font-size: 21px; }
  .lp-brand img { width: 28px; height: 28px; }
  .lp-top .lp-btn--sm { padding: 0 var(--ds-3); font-size: var(--ds-fs-secondary); }
  .lp-pains, .lp-questions { grid-template-columns: 1fr; }
  /* cartões no celular: ícone de 24 px ao lado do título, padding 16, espaço 12 (princípio 17) */
  .lp-pain { display: grid; grid-template-columns: 24px 1fr; gap: var(--ds-1) var(--ds-3); border-radius: var(--ds-radius); }
  .lp-pain .lp-ic { width: 24px; height: 24px; grid-row: span 2; margin: 2px 0 0; stroke-width: 2.6; }
  .lp-pain .lp-h3 { margin: 0; }
  .lp-questions { gap: var(--ds-gap-card); }
  .lp-questions li::before { display: inline; margin: 0 var(--ds-2) 0 0; }
  .lp-chips li { padding: var(--ds-1) var(--ds-3); }
  .lp-step-n { height: 28px; min-width: 36px; }
  .lp-vs td { font-size: var(--ds-fs-secondary); padding-left: 36px; padding-right: var(--ds-3); }
  .lp-vs td::before { left: var(--ds-3); }
  .lp-faq summary { padding: var(--ds-3) 36px var(--ds-3) 0; }
  .lp-faq summary::after { top: 10px; }
  .lp-benefits { gap: var(--ds-4); }
  .lp-benefits .lp-ic--sm { width: 24px; height: 24px; }
  .lp-float { box-shadow: 0 10px 24px rgba(11, 18, 43, .35); }
  .lp-float--ring { left: 6px; bottom: 0; padding: var(--ds-2) var(--ds-3) var(--ds-2) var(--ds-2); gap: var(--ds-2); }
  .lp-float--ring svg { width: 56px; height: 56px; }
  .lp-float--ring b { font-size: 14px; }
  .lp-float--ring span { font-size: 12px; }
  .lp-float--score { display: none; }
  .lp-float--badge { right: 6px; bottom: 0; padding: 6px 10px; font-size: 12px; }
  .lp-float--ring { bottom: 28px; }
  .lp-hero-art { padding: 0 0 var(--ds-4); }
  .lp-nb-q { grid-template-columns: 22px minmax(0, 1fr) 28px 20px; gap: 6px; padding: 8px 6px; }
  .lp-side-ring { width: 80px; height: 80px; }
  .lp-plans { font-size: var(--ds-fs-secondary); }
  .lp-plans th, .lp-plans td { padding: var(--ds-3) var(--ds-2); }
  .lp-form { padding: var(--ds-5) var(--ds-4); }
  .lp-form-actions .lp-btn { flex: 1 1 100%; }
  .lp-cta-row .lp-btn { width: 100%; }
  /* a frase-assinatura do hero, em caixa normal, cabe numa pílula de uma linha a partir de 360 px */
  .lp-eyebrow--tag { text-transform: none; letter-spacing: 0; padding: var(--ds-1) var(--ds-2); }
  .lp-rule { padding: var(--ds-4); }
}
@media (max-width: 480px) {
  .lp-hide-sm { display: none; }
}

/* anéis (SVG) dos fragmentos do produto: cores dos tokens do escuro (.ds-sim-dark no contêiner) */
.lp-ring-track { stroke: var(--ds-line-strong); }
.lp-ring-val { stroke: var(--ds-brand-ia); }
.lp-ring-txt { fill: currentColor; font-family: var(--ds-display); font-weight: 700; }