/* ==========================================================================
   Landing page do RevisaMente

   Carrega depois de app.css e consome os tokens dele. Não redefine token do
   produto e não toca em classe do produto: todo seletor daqui começa com
   `lp-`. A exceção é `.btn`, reaproveitado de propósito.

   A página é travada no tema claro pelo layout, então não há bloco escuro.
   ========================================================================== */

/* --- 1. Tokens da landing ---------------------------------------------- */

.lp {
  --lp-max: 1180px;
  --lp-gutter: var(--space-5);

  /* O teto do título foi escolhido junto com a largura da coluna do hero:
     nesta escala a manchete cabe em duas linhas. */
  --lp-display-1: clamp(2.125rem, 1.55rem + 2.2vw, 2.75rem);
  --lp-display-2: clamp(1.625rem, 1.15rem + 2vw, 2.375rem);
  --lp-display-3: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);

  --lp-lead: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem);
  --lp-body: 1rem;
  --lp-small: 0.875rem;

  --lp-section-y: clamp(4rem, 7vw, 7.5rem);
  --lp-stack: clamp(2.5rem, 4.5vw, 4rem);

  --lp-radius-surface: var(--radius-xl);
  --lp-radius-frame: 18px;

  /* O roxo da marca fica em 4.35:1 como texto de 11 a 12px. Este tom, que é
     o `--color-primary-hover` do app, passa nos dois fundos claros. */
  --lp-accent-text: var(--color-primary-hover);

  font-size: var(--lp-body);
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-surface);
}

@media (min-width: 768px) {
  .lp { --lp-gutter: var(--space-7); }
}

/* --- 2. Primitivas ------------------------------------------------------ */

.lp-wrap {
  width: 100%;
  max-width: var(--lp-max);
  margin-inline: auto;
  padding-inline: var(--lp-gutter);
}

.lp-section { padding-block: var(--lp-section-y); }

/* Reserva para o cabeçalho fixo não cobrir o título da seção ancorada. */
.lp [id] { scroll-margin-top: 92px; }

.lp-section--tinted { background: var(--color-bg); }
.lp-section--edge { border-top: 1px solid var(--color-border); }

.lp-head { max-width: 42rem; margin-bottom: var(--lp-stack); }
.lp-head--center { margin-inline: auto; text-align: center; }

.lp-eyebrow {
  display: block;
  margin-bottom: var(--space-3);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lp-accent-text);
}

.lp-h1 {
  font-size: var(--lp-display-1);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.032em;
  text-wrap: balance;
}

/* A linha de cima do H1.

   Ela era um <span> solto antes do título, e visualmente continua igual. A
   diferença é onde o texto mora: dentro do H1 a categoria e o público entram
   no único título que um buscador lê como assunto da página, e a manchete
   pode seguir sendo uma frase de efeito sem carregar palavra-chave. */
.lp-h1-kicker {
  display: block;
  margin-bottom: var(--space-3);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lp-accent-text);
}

/* No celular a frase não cabe em uma linha, e o espaço entre letras é o
   que mais custa largura. Menos tracking e quebra equilibrada deixam as
   duas linhas do mesmo tamanho, em vez de uma cheia e outra com duas
   palavras. */
@media (max-width: 520px) {
  .lp-h1-kicker {
    letter-spacing: 0.08em;
    text-wrap: balance;
  }
}

.lp-h2 {
  font-size: var(--lp-display-2);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.026em;
  text-wrap: balance;
}

.lp-h3 {
  font-size: var(--lp-display-3);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.016em;
}

.lp-lead {
  margin-top: var(--space-4);
  font-size: var(--lp-lead);
  line-height: 1.55;
  color: var(--color-text-soft);
  max-width: 34rem;
  text-wrap: pretty;
}

.lp-head--center .lp-lead { margin-inline: auto; }

.lp-p {
  color: var(--color-text-soft);
  line-height: 1.65;
  text-wrap: pretty;
}

.lp-p + .lp-p { margin-top: var(--space-4); }

.lp-note {
  font-size: var(--lp-small);
  color: var(--color-muted);
  line-height: 1.6;
}

.lp-strong { color: var(--color-text); font-weight: 700; }

/* --- 3. Botões ---------------------------------------------------------- */

.lp .btn-xl {
  height: 50px;
  padding-inline: var(--space-6);
  font-size: var(--lp-body);
  border-radius: var(--radius-lg);
}

.lp-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-7);
}

.lp-head--center .lp-actions { justify-content: center; }

/* Fechamento de seção: uma frase e o botão ao lado.

   Não é mais um bloco centrado com título próprio, e a diferença importa. As
   chamadas grandes (hero, antes e depois, preço, fechamento) são momentos da
   página; estas existem só para o botão nunca ficar longe demais de quem
   decidiu no meio da rolagem. Se cada uma virasse uma seção com manchete, a
   página passaria a pedir cinco vezes a mesma coisa em voz alta.

   A frase muda em cada uma: é o argumento daquela seção terminando, e não o
   mesmo texto repetido três vezes. */
.lp-cta-row {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--lp-stack);
}

.lp-cta-row .lp-p { max-width: 32rem; }

@media (min-width: 800px) {
  .lp-cta-row {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-8);
  }
}

/* --- 4. Cabeçalho ------------------------------------------------------- */

.lp-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--duration) var(--ease),
              background var(--duration) var(--ease);
}

@supports not ((backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px))) {
  .lp-header { background: var(--color-surface); }
}

.lp-header.is-stuck {
  border-bottom-color: var(--color-border);
  background: rgba(255, 255, 255, 0.94);
}

.lp-header-inner {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  height: 68px;
}

.lp-brand { display: flex; align-items: center; flex: 0 0 auto; }
.lp-brand:hover { text-decoration: none; }
.lp-brand .brand-logo { width: 108px; height: 36px; }

.lp-nav {
  display: none;
  align-items: center;
  gap: var(--space-6);
  margin-inline: auto;
}

/* O padding leva o alvo a 24px, o mínimo da WCAG 2.2 para alvo de ponteiro. */
.lp-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding-block: var(--space-1);
  font-size: var(--lp-small);
  font-weight: 600;
  color: var(--color-text-soft);
  transition: color var(--duration-fast) var(--ease);
}

.lp-nav a:hover { color: var(--color-text); text-decoration: none; }

.lp-header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}

.lp-header-actions .lp-signin { display: none; }

@media (min-width: 620px) {
  .lp-header-actions .lp-signin { display: inline-flex; }
}

@media (min-width: 900px) {
  .lp-nav { display: flex; }

  /* Só zera o empurrão quando existe menu no meio da barra. As páginas de
     texto não têm menu, e sem esta condição os botões colavam na marca. */
  .lp-nav ~ .lp-header-actions { margin-left: 0; }
}

/* --- 5. Hero ------------------------------------------------------------ */

.lp-hero {
  position: relative;
  padding-top: clamp(3rem, 5vw, 5rem);
  padding-bottom: clamp(3.5rem, 6vw, 6rem);
  overflow: hidden;
}

.lp-hero::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 100%;
  background: linear-gradient(180deg, var(--color-primary-softer) 0%, var(--color-surface) 72%);
  z-index: 0;
}

.lp-hero > * { position: relative; z-index: 1; }

.lp-hero-grid {
  display: grid;
  gap: clamp(2.5rem, 5vw, 3.5rem);
  align-items: center;
}

.lp-hero-copy { max-width: 36rem; }
.lp-hero-copy .lp-lead { max-width: 30rem; }

/*
 * A captura fica inclinada no espaço e se endireita conforme a página rola.
 *
 * Feito com animação por rolagem do próprio CSS: não há ouvinte de scroll,
 * nada roda na thread principal e a curva acompanha o dedo. Onde o navegador
 * não suporta (Firefox hoje), a inclinação continua de pé como escolha de
 * composição, que é o pior caso aceitável.
 */
.lp-hero-stage { perspective: 1800px; }

/*
 * Abaixo de 1120px a captura fica reta e centrada.
 *
 * A inclinação gira em torno da borda esquerda, então numa coluna estreita
 * ela come a margem da direita e a imagem parece torta. O efeito é um luxo de
 * tela larga: no celular e no tablet ele só atrapalha a leitura.
 */
.lp-hero-shot {
  max-width: 26rem;
  margin-inline: auto;
}

/* No tablet cabe mais: a captura de computador em 416px fica ilegível. */
@media (min-width: 768px) and (max-width: 1119px) {
  .lp-hero-shot { max-width: 36rem; }
}

@media (min-width: 1120px) {
  .lp-hero-stage { perspective-origin: 30% 40%; }

  .lp-hero-shot {
    max-width: none;
    margin-inline: 0;
    transform: rotateY(-9deg) rotateX(3.5deg) scale(0.97);
    transform-origin: left center;
    will-change: transform;
  }
}

@keyframes lp-endireita {
  to { transform: rotateY(0deg) rotateX(0deg) scale(1); }
}

@supports (animation-timeline: scroll()) {
  @media (min-width: 1120px) and (prefers-reduced-motion: no-preference) {
    .lp-hero-shot {
      animation: lp-endireita linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 420px;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .lp-hero-shot { transform: none; }
}

@media (min-width: 1120px) {
  .lp-hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    align-items: center;
  }

  /*
   * A captura sangra para fora da coluna, mas só a partir do momento em que
   * sobra espaço lateral de verdade: enquanto o container ainda não bateu no
   * teto, a sangria comeria a margem e a imagem encostaria na borda da tela.
   */
  .lp-hero-shot {
    margin-right: clamp(-5rem, calc(((100vw - var(--lp-max)) / -2) + 1.5rem), 0px);
  }
}

/* --- 6. Moldura de captura ---------------------------------------------- */

.lp-frame {
  position: relative;
  border: 1px solid var(--color-border);
  border-radius: var(--lp-radius-frame);
  background: var(--color-surface);
  box-shadow: 0 1px 2px rgba(24, 25, 36, 0.04),
              0 18px 48px -12px rgba(24, 25, 36, 0.16);
  overflow: hidden;
}

.lp-frame img { display: block; width: 100%; height: auto; }

/* O corte por baixo é deliberado: a tela continua, e mostrar isso vale mais
   do que encaixar o painel inteiro em miniatura. */
.lp-frame--clip { max-height: min(62vh, 480px); }

.lp-frame--clip::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 96px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--color-surface));
  pointer-events: none;
}

.lp-frame--tight { box-shadow: 0 12px 32px -14px rgba(24, 25, 36, 0.18); }

.lp-caption {
  margin-top: var(--space-3);
  font-size: 0.75rem;
  color: var(--color-muted);
}

/* --- 7. Antes e depois -------------------------------------------------- */

.lp-compare {
  margin-top: var(--lp-stack);
  border: 1px solid var(--color-border);
  border-radius: var(--lp-radius-surface);
  background: var(--color-surface);
  overflow: hidden;
}

.lp-compare-head,
.lp-compare-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.lp-compare-head { display: none; }

.lp-compare-label {
  padding: var(--space-4) var(--space-5);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.lp-compare-label--before {
  color: var(--color-danger);
  background: var(--color-danger-soft);
}

.lp-compare-label--after {
  color: var(--lp-accent-text);
  background: var(--color-primary-soft);
}

.lp-compare-row + .lp-compare-row { border-top: 1px solid var(--color-border); }

.lp-compare-cell {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-4) var(--space-5);
  font-size: var(--lp-small);
  line-height: 1.55;
}

.lp-compare-icon { flex-shrink: 0; margin-top: 2px; }

.lp-compare-cell--before {
  color: var(--color-muted);
  background: var(--color-surface-2);
}

.lp-compare-cell--before .lp-compare-icon { color: var(--color-danger); }

.lp-compare-cell--after {
  color: var(--color-text);
  font-weight: 600;
  border-top: 1px solid var(--color-border);
}

.lp-compare-cell--after .lp-compare-icon { color: var(--lp-accent-text); }

@media (min-width: 720px) {
  .lp-compare-head,
  .lp-compare-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .lp-compare-head { display: grid; }
  .lp-compare-cell--after { border-top: 0; border-left: 1px solid var(--color-border); }
}

/* --- 7b. Linha da oferta e fluxo do cálculo ----------------------------- */

.lp-offer-line {
  margin-top: var(--space-5);
  font-size: var(--lp-small);
  line-height: 1.55;
  color: var(--color-text-soft);
  max-width: 32rem;
}

.lp-offer-line--center { margin-inline: auto; }

/* A condição de cobrança cai para a linha de baixo, menor: ela é a letra
   miúda da oferta, não o argumento. */
.lp-offer-fine {
  display: block;
  margin-top: var(--space-1);
  font-size: 0.75rem;
  color: var(--color-muted);
}

/*
 * O caminho 20 questões, 17 acertos, 85%, 30 dias.
 *
 * É o momento em que a promessa vira coisa concreta, então ele vem antes de
 * qualquer explicação e ocupa a largura toda. No celular a seta deita e os
 * passos empilham.
 */
.lp-flow {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--lp-stack);
}

.lp-flow > .lp-flow-step { flex: 1 1 0; min-width: 0; }

.lp-flow-step {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-5) var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--lp-radius-surface);
  text-align: center;
}

.lp-flow-label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.lp-flow-value {
  font-size: clamp(1.375rem, 1.1rem + 1.1vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -0.022em;
  font-variant-numeric: tabular-nums;
}

/*
 * O último passo é o resultado, e é o único que carrega a cor da marca.
 *
 * O `border-box` no fim do atalho não é decorativo, é a mesma armadilha do
 * `.btn-primary` do app: com a borda transparente de 1px, o gradiente é
 * dimensionado na caixa de padding e esticado até a borda, o que aparece como
 * um risco chapado na lateral esquerda do cartão.
 */
.lp-flow-step--result {
  background: var(--gradient-primary) border-box;
  border-color: transparent;
  box-shadow: var(--glow-primary);
}

.lp-flow-step--result .lp-flow-label { color: rgba(255, 255, 255, 0.82); }
.lp-flow-step--result .lp-flow-value { color: #fff; }

.lp-flow-arrow {
  display: grid;
  place-items: center;
  color: var(--color-border-strong);
  transform: rotate(90deg);
}

@media (min-width: 860px) {
  .lp-flow {
    flex-direction: row;
    align-items: center;
    gap: var(--space-3);
  }

  .lp-flow-arrow { transform: none; flex: 0 0 auto; }
}

/* --- 8. O cálculo e a régua de intervalos ------------------------------- */

.lp-mech {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
}

.lp-mech-shot { max-width: 30rem; margin-inline: auto; width: 100%; }

/* A captura encosta na borda esquerda do container, alinhada com o resto da
   página, e a coluna de texto fica maior que ela: centrar a imagem na própria
   coluna a empurrava para dentro e abria um vão no meio da seção. */
@media (min-width: 1024px) {
  .lp-mech {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    gap: clamp(2.5rem, 4vw, 3.5rem);
  }

  .lp-mech-shot { margin-inline: 0; }
}

.lp-ruler { display: grid; gap: var(--space-5); }

.lp-ruler-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2);
}

.lp-ruler-band {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--lp-small);
}

.lp-ruler-score { font-weight: 600; color: var(--color-text-soft); }

.lp-ruler-days {
  font-weight: 800;
  font-size: var(--lp-display-3);
  letter-spacing: -0.018em;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

/* Sem trilho de fundo: o comprimento sozinho é a informação. O maior
   intervalo do algoritmo ocupa a linha inteira. */
.lp-ruler-bar {
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--gradient-primary);
  width: var(--lp-ruler-width, 100%);
}

/* As barras crescem do zero quando a seção entra na tela, uma depois da
   outra. Escala em vez de largura: `transform` não recalcula layout. */
.lp[data-reveal='on'] .lp-ruler-bar {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 760ms var(--ease);
  transition-delay: calc(var(--lp-i, 0) * 130ms + 120ms);
}

.lp[data-reveal='on'] .lp-reveal.is-in .lp-ruler-bar { transform: scaleX(1); }

.lp-ruler-row:nth-child(1) .lp-ruler-bar { opacity: 0.45; }
.lp-ruler-row:nth-child(2) .lp-ruler-bar { opacity: 0.6; }
.lp-ruler-row:nth-child(3) .lp-ruler-bar { opacity: 0.78; }

.lp-ruler-foot {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}

/* O fecho da seção, embaixo das duas colunas e não dentro de uma delas.

   O cartão de objeção é emprestado da seção 11b, sem a grade que o embala lá.
   Ele morava na coluna de texto, e ali empurrava a coluna muito além da
   captura ao lado, que tem altura fixa: sobrava um vão embaixo da imagem do
   tamanho do próprio cartão. Aqui embaixo as duas colunas terminam quase
   juntas, e o botão que fechava a seção vem ao lado do cartão em vez de
   abaixo dele. */
.lp-mech-after {
  display: grid;
  gap: var(--space-6);
  margin-top: var(--lp-stack);
}

.lp-mech-after .lp-actions { margin-top: 0; }

@media (min-width: 900px) {
  .lp-mech-after {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-8);
  }
}

/* --- 9. Ritmos ---------------------------------------------------------- */

.lp-tracks {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--lp-stack);
}

.lp-track {
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--lp-radius-surface);
}

.lp-track-top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.lp-track-name {
  font-size: var(--lp-display-3);
  font-weight: 700;
  letter-spacing: -0.014em;
}

.lp-track-tag {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lp-accent-text);
  background: var(--color-primary-soft);
  border: 1px solid var(--color-primary-border);
  border-radius: var(--radius-pill);
  padding: 3px var(--space-3);
}

.lp-timeline {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding-top: var(--space-5);
}

.lp-timeline::before {
  content: '';
  position: absolute;
  top: 6px;
  left: 5px;
  right: 5px;
  height: 1px;
  background: var(--color-border-strong);
}

.lp-step {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  text-align: left;
}

.lp-step::before {
  content: '';
  position: absolute;
  top: calc(var(--space-5) * -1 + 3px);
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-primary);
}

.lp-step--soft::before { background: var(--color-border-strong); }

.lp-step--skip::before {
  background: transparent;
  border: 1px dashed var(--color-border-strong);
}

.lp-step--skip .lp-step-day { color: var(--color-muted); }

/* Os três ritmos sobem um depois do outro quando a seção entra na tela. */
.lp[data-reveal='on'] .lp-track {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 520ms var(--ease), transform 520ms var(--ease);
  transition-delay: calc(var(--lp-i, 0) * 140ms);
}

.lp[data-reveal='on'] .lp-reveal.is-in .lp-track {
  opacity: 1;
  transform: none;
}

.lp-step-day {
  display: block;
  font-weight: 800;
  font-size: var(--lp-body);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.lp-step-label {
  display: block;
  font-size: 0.6875rem;
  color: var(--color-muted);
  margin-top: 2px;
}

/* O último passo tem o rótulo mais longo dos quatro: sem esta folga ele
   quebra em duas linhas e desalinha a base dos cartões. */
.lp-step--soft { flex-grow: 1.3; }

@media (min-width: 768px) {
  .lp-tracks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Personalização: o que os três cartões acima não dizem sozinhos é que os
   números deles são editáveis. Fica em faixa própria, separada por um fio. */
.lp-custom {
  display: grid;
  gap: var(--space-6);
  margin-top: var(--space-8);
  padding-top: var(--space-7);
  border-top: 1px solid var(--color-border);
}

.lp-custom h3 { margin-bottom: var(--space-3); }
.lp-custom .lp-p { font-size: var(--lp-small); max-width: 30rem; }

.lp-custom-list {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
  align-content: start;
  font-size: var(--lp-small);
}

.lp-custom-list li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
  color: var(--color-text-soft);
}

.lp-custom-list svg { color: var(--lp-accent-text); margin-top: 3px; }

@media (min-width: 860px) {
  .lp-custom {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: clamp(2.5rem, 5vw, 4rem);
    align-items: start;
  }
}

/* --- 9b. Por que revisar ------------------------------------------------ */

/* Sem cartão e sem caixa: duas linhas separadas por um fio. A página inteira
   é feita de cartões, e o jeito de esta seção parecer curta é ela não ganhar
   mais uma moldura. */
.lp-proof {
  display: grid;
  margin-top: var(--lp-stack);
  border-top: 1px solid var(--color-border);
}

.lp-proof-row {
  display: grid;
  gap: var(--space-3);
  padding-block: var(--space-6);
  border-bottom: 1px solid var(--color-border);
}

/* A coluna de texto tem teto: solta na largura da página, a frase do estudo
   passava dos 100 caracteres por linha e ficava cansativa de ler. */
@media (min-width: 720px) {
  .lp-proof-row {
    grid-template-columns: 11rem minmax(0, 40rem);
    align-items: baseline;
    gap: var(--space-8);
    padding-block: var(--space-7);
  }
}

/* O número do achado é o marcador da linha. Numerar 01 e 02 aqui seria
   inventar uma ordem que os dois estudos não têm entre si. */
.lp-proof-stat {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--lp-accent-text);
}

.lp-proof-stat span {
  font-size: var(--lp-small);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--color-muted);
}

.lp-proof-cite {
  margin-top: var(--space-3);
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--color-faint);
}

.lp-proof-close {
  max-width: 40rem;
  margin-top: var(--space-7);
  font-size: var(--lp-lead);
  line-height: 1.5;
  color: var(--color-text);
  text-wrap: pretty;
}

/* --- 10. Como funciona -------------------------------------------------- */

.lp-steps {
  display: grid;
  gap: var(--space-7);
  margin-top: var(--lp-stack);
}

.lp-step-block {
  padding-top: var(--space-5);
  border-top: 2px solid var(--color-primary);
}

.lp-step-block h3 { margin-bottom: var(--space-2); }

@media (min-width: 768px) {
  .lp-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
}

.lp-anchor {
  padding: var(--space-6);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--lp-radius-surface);
  margin-top: var(--space-8);
}

.lp-section--tinted .lp-anchor { background: var(--color-surface); }

/* --- 11. Depoimentos: carrossel de largura total ------------------------ */

/*
 * Duas faixas atravessando a tela em sentidos opostos.
 *
 * A faixa fica FORA do `.lp-wrap`, então ela já nasce com a largura da seção
 * e não precisa de cálculo em vw (que erraria pela barra de rolagem). Cada
 * faixa carrega a lista duas vezes e anda até -50%: no instante em que a
 * primeira cópia sai, a segunda está exatamente onde ela começou, e o laço
 * não tem emenda visível.
 *
 * A máscara nas pontas é o que faz os cartões parecerem vir de fora da tela
 * em vez de aparecerem do nada na borda.
 */
.lp-marquee {
  margin-top: var(--lp-stack);
  display: grid;
  gap: var(--space-4);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.lp-marquee-row {
  display: flex;
  width: max-content;
  animation: lp-marcha 72s linear infinite;
}

.lp-marquee-row--reverse {
  animation-duration: 88s;
  animation-direction: reverse;
}

.lp-marquee-set {
  display: flex;
  gap: var(--space-4);
  padding-right: var(--space-4);
}

@keyframes lp-marcha {
  to { transform: translateX(-50%); }
}

/* A faixa não para no hover: ela é ambiente, não um controle. Só o foco de
   teclado a segura, para quem navega por tab não perder o alvo de vista. */
.lp-marquee:focus-within .lp-marquee-row { animation-play-state: paused; }

/* Sem movimento, a faixa vira uma tira que se arrasta com o dedo. */
@media (prefers-reduced-motion: reduce) {
  .lp-marquee {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .lp-marquee-row { animation: none; }
  .lp-marquee-set:last-child { display: none; }
  .lp-card { scroll-snap-align: center; }
}

/* Cartão de depoimento --------------------------------------------------- */

.lp-card {
  flex: 0 0 auto;
  width: min(21rem, 78vw);
  margin: 0;
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--lp-radius-surface);
  box-shadow: var(--shadow-xs);
}

.lp-card--mail { background: var(--color-surface-2); }

.lp-card-top {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.lp-card-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--gradient-primary);
  color: var(--color-on-primary);
  font-size: 0.8125rem;
  font-weight: 700;
}

.lp-card-avatar--mail {
  background: var(--color-primary-soft);
  color: var(--lp-accent-text);
  border: 1px solid var(--color-primary-border);
}

.lp-card-who { display: grid; gap: 1px; min-width: 0; }
.lp-card-name { font-size: var(--lp-small); font-weight: 700; }
.lp-card-role { font-size: 0.6875rem; color: var(--color-muted); }
.lp-card-glyph { margin-left: auto; color: var(--color-faint); flex: 0 0 auto; }

.lp-card-thread {
  display: grid;
  gap: var(--space-2);
  justify-items: start;
  margin: var(--space-4) 0 0;
}

.lp-card-bubble {
  padding: var(--space-3) var(--space-4);
  background: var(--color-primary-soft);
  border-radius: var(--radius-lg);
  border-bottom-left-radius: var(--radius-xs);
  font-size: var(--lp-small);
  line-height: 1.5;
  color: var(--color-text);
  max-width: 100%;
}

.lp-card-subject {
  margin-top: var(--space-4);
  font-size: var(--lp-small);
  font-weight: 700;
  letter-spacing: -0.008em;
}

.lp-card-body {
  margin: var(--space-2) 0 0;
  font-size: var(--lp-small);
  line-height: 1.6;
  color: var(--color-text-soft);
}

.lp-card-foot {
  margin-top: var(--space-4);
  font-size: 0.6875rem;
  color: var(--color-faint);
  text-align: right;
}

/* --- 11b. Citação em destaque e objeções -------------------------------- */

/* Uma frase grande sozinha, logo depois do momento aha. Serve de respiro
   entre dois blocos densos e é a prova social chegando cedo. */
.lp-shout {
  padding-block: clamp(3.5rem, 6vw, 5.5rem);
  background: var(--color-surface);
  border-block: 1px solid var(--color-border);
}

.lp-shout-figure { margin: 0; max-width: 44rem; margin-inline: auto; text-align: center; }

.lp-shout-quote {
  margin: 0;
  font-size: clamp(1.375rem, 1.05rem + 1.5vw, 2rem);
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

.lp-shout-quote::before { content: '\201C'; }
.lp-shout-quote::after { content: '\201D'; }

.lp-shout-by {
  margin-top: var(--space-5);
  font-size: var(--lp-small);
  color: var(--color-muted);
}

.lp-compare-close { margin: var(--lp-stack) auto 0; }

.lp-objections {
  display: grid;
  gap: var(--space-6);
  margin-top: var(--lp-stack);
}

.lp-objection {
  padding: var(--space-6);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--lp-radius-surface);
}

.lp-section--tinted .lp-objection { background: var(--color-surface); }

.lp-objection-q {
  margin-bottom: var(--space-3);
  font-size: var(--lp-body);
  font-weight: 700;
  letter-spacing: -0.012em;
  color: var(--color-text);
}

.lp-objection .lp-p { font-size: var(--lp-small); }

@media (min-width: 768px) {
  .lp-objections { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
}

/* --- 12. O que vem junto ------------------------------------------------ */

.lp-bento {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--lp-stack);
}

.lp-cell {
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--lp-radius-surface);
  overflow: hidden;
}

.lp-cell h3 { margin-bottom: var(--space-2); }
.lp-cell .lp-p { font-size: var(--lp-small); }

.lp-cell-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-bottom: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-primary-soft);
  color: var(--lp-accent-text);
}

/* A captura estica para ocupar a altura que sobra: duas células lado a lado
   têm a mesma altura, mas as capturas têm proporções diferentes. */
.lp-cell-shot {
  position: relative;
  flex: 1 1 auto;
  min-height: 220px;
  margin: var(--space-6) calc(var(--space-6) * -1) calc(var(--space-6) * -1);
  border-top: 1px solid var(--color-border);
  background: var(--color-bg);
  overflow: hidden;
}

.lp-cell-shot img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left top;
}

@media (min-width: 860px) {
  .lp-bento { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .lp-cell--7 { grid-column: span 7; }
  .lp-cell--5 { grid-column: span 5; }
  .lp-cell--12 { grid-column: span 12; }

  /* Célula dividida em vez de empilhada: é a terceira captura seguida, e
     repetir a mesma composição faria a seção virar uma coluna de iguais. */
  .lp-cell--split {
    display: grid;
    grid-template-columns: minmax(0, 4.5fr) minmax(0, 7.5fr);
    gap: var(--space-7);
    padding-right: 0;
    align-items: center;
  }

  .lp-cell-shot--side {
    margin: calc(var(--space-6) * -1) 0;
    align-self: stretch;
    min-height: 340px;
    border-top: 0;
    border-left: 1px solid var(--color-border);
  }
}

/* Faixa sem moldura: o que separa os três é um fio, não uma caixa. */
.lp-strip {
  display: grid;
  gap: var(--space-7);
  margin-top: var(--space-8);
  padding-top: var(--space-7);
  border-top: 1px solid var(--color-border);
}

.lp-strip-item h3 { margin-bottom: var(--space-2); }
.lp-strip-item .lp-p { font-size: var(--lp-small); }

@media (min-width: 860px) {
  .lp-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
  .lp-strip-item { padding-inline: var(--space-6); }
  .lp-strip-item:first-child { padding-left: 0; }
  .lp-strip-item:last-child { padding-right: 0; }
  .lp-strip-item + .lp-strip-item { border-left: 1px solid var(--color-border); }
}

/* --- 12b. Seus números -------------------------------------------------- */

/* Fundo próprio, e não o par branco e tingido do resto da página: esta seção
   fica entre duas vizinhas que já usam os dois, e o lilás mais claro separa
   as três sem precisar inventar moldura. */
.lp-numbers {
  padding-block: var(--lp-section-y);
  background: var(--color-primary-softer);
  border-block: 1px solid var(--color-border);
}

.lp-panel {
  margin-top: var(--lp-stack);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--lp-radius-surface);
  overflow: hidden;
}

/* A barra de cima é o que diz que aquilo é uma tela do aplicativo, e não um
   infográfico montado para a página de venda. */
.lp-panel-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface-2);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--lp-small);
}

.lp-panel-title {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 700;
  color: var(--color-text);
}

.lp-panel-title .icon { color: var(--lp-accent-text); }
.lp-panel-period { color: var(--color-muted); }

/* O fio entre os quadros é o vão de 1px do próprio grid, e não borda em cada
   um: com borda seria preciso saber quantos cabem por linha para não sobrar
   traço solto quando a grade quebra em duas linhas no celular. */
.lp-panel-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

@media (min-width: 720px) {
  .lp-panel-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.lp-panel-tile {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-5);
  background: var(--color-surface);
}

.lp-panel-label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.lp-panel-value {
  font-size: var(--lp-display-3);
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}

.lp-panel-split { padding: var(--space-6) var(--space-5) var(--space-5); }

.lp-panel-heading {
  margin-bottom: var(--space-5);
  font-size: var(--lp-small);
  font-weight: 700;
  color: var(--color-text);
}

.lp-panel-rows {
  display: grid;
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.lp-panel-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    'name score'
    'track track'
    'state state';
  align-items: center;
  gap: var(--space-2) var(--space-4);
  font-size: var(--lp-small);
}

@media (min-width: 720px) {
  .lp-panel-row {
    grid-template-columns: 8.5rem minmax(0, 1fr) 3rem 11rem;
    grid-template-areas: 'name track score state';
  }
}

.lp-panel-name { grid-area: name; font-weight: 600; color: var(--color-text); }

/* Trilho desenhado, ao contrário da régua de intervalos da seção do cálculo:
   lá o comprimento sozinho era o dado, aqui a barra é percentual de acerto e
   só se lê contra o 100% atrás dela. */
.lp-panel-track {
  grid-area: track;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--color-bg);
  overflow: hidden;
}

.lp-panel-fill {
  display: block;
  height: 100%;
  width: var(--lp-score, 0%);
  border-radius: var(--radius-pill);
  background: var(--gradient-primary);
}

.lp-panel-score {
  grid-area: score;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--color-text);
}

/* O estado é palavra, não cor. Quatro tons de semáforo lado a lado ficam
   indistinguíveis para quem enxerga cor de outro jeito, e o dado que decide
   já está escrito ali do lado: quantos dias até o assunto voltar. */
.lp-panel-state {
  grid-area: state;
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-2);
  font-size: 0.75rem;
  color: var(--color-muted);
}

.lp-panel-state b { font-weight: 700; color: var(--lp-accent-text); }

@media (min-width: 720px) {
  .lp-panel-state { display: grid; gap: 2px; justify-items: end; text-align: right; }
}

.lp-panel-foot {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
  font-size: var(--lp-small);
  line-height: 1.6;
  color: var(--color-text-soft);
}

.lp-panel-caption { margin-top: var(--space-4); }

/* --- 13. Celular -------------------------------------------------------- */

.lp-mobile {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
}

.lp-mobile-shot {
  max-width: 300px;
  width: 100%;
  margin-inline: auto;
  border: 1px solid var(--color-border);
  border-radius: 26px;
  overflow: hidden;
  box-shadow: 0 20px 48px -16px rgba(24, 25, 36, 0.24);
}

.lp-mobile-shot img { display: block; width: 100%; height: auto; }

@media (min-width: 900px) {
  .lp-mobile { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(3rem, 6vw, 5rem); }
  .lp-mobile-shot { margin-inline: 0; }
}

.lp-list {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-6);
  padding: 0;
  list-style: none;
}

.lp-list li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
  color: var(--color-text-soft);
}

.lp-list svg { color: var(--color-primary); margin-top: 3px; }

/* --- 14. Preço ---------------------------------------------------------- */

.lp-plan {
  max-width: 60rem;
  margin-inline: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-primary-border);
  border-radius: var(--lp-radius-surface);
  box-shadow: 0 24px 56px -24px rgba(109, 63, 245, 0.32);
  overflow: hidden;
}

.lp-plan-top {
  display: grid;
  gap: var(--space-5);
  padding: clamp(var(--space-6), 3vw, var(--space-8));
  background: linear-gradient(180deg, var(--color-primary-softer), var(--color-surface));
  border-bottom: 1px solid var(--color-border);
}

.lp-plan-badge {
  display: inline-block;
  margin-bottom: var(--space-3);
  padding: 4px var(--space-3);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-on-primary);
  background: var(--gradient-primary);
  border-radius: var(--radius-pill);
}

.lp-plan-name {
  font-size: var(--lp-display-3);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-1);
}

.lp-price {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}

.lp-price-value {
  font-size: clamp(2.75rem, 2rem + 3vw, 4rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.lp-price-period { font-size: var(--lp-lead); font-weight: 600; color: var(--color-muted); }

@media (min-width: 720px) {
  .lp-plan-top {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: var(--space-7);
  }

  .lp-plan-price { text-align: right; }
  .lp-plan-price .lp-price { justify-content: flex-end; }
}

.lp-includes {
  display: grid;
  gap: var(--space-4);
  padding: clamp(var(--space-6), 3vw, var(--space-8));
  margin: 0;
  list-style: none;
  font-size: var(--lp-small);
}

.lp-includes li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
  color: var(--color-text-soft);
}

.lp-includes svg { color: var(--color-primary); margin-top: 2px; }

/* Colunas em vez de duas colunas de grid: um item que ocupa duas linhas
   empurraria a linha inteira e abriria um buraco na coluna vizinha. */
@media (min-width: 720px) {
  .lp-includes {
    display: block;
    columns: 2;
    column-gap: var(--space-7);
  }

  .lp-includes li { break-inside: avoid; }
  .lp-includes li + li { margin-top: var(--space-4); }
}

.lp-plan-foot {
  padding: clamp(var(--space-6), 3vw, var(--space-8));
  border-top: 1px solid var(--color-border);
  background: var(--color-surface-2);
}

.lp-plan-cta { width: 100%; }

/* O anual, logo abaixo do mensal: alternativa, não segundo plano. */
.lp-plan-alt { margin-top: var(--space-2); }

/* A condição de cobrança fica logo abaixo do botão, que é onde o medo do
   clique mora. */
.lp-plan-charge {
  margin-top: var(--space-4);
  text-align: center;
  font-size: var(--lp-small);
  font-weight: 600;
  color: var(--color-text-soft);
}

.lp-reassure {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
  font-size: 0.8125rem;
  color: var(--color-muted);
}

.lp-reassure span {
  display: grid;
  grid-template-columns: 15px minmax(0, 1fr);
  gap: var(--space-2);
  align-items: center;
}

.lp-reassure svg { color: var(--color-muted); }

@media (min-width: 720px) {
  .lp-reassure { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-6); }
}

.lp-plan-anchor {
  max-width: 42rem;
  margin: var(--space-8) auto 0;
  text-align: center;
  color: var(--color-text-soft);
  line-height: 1.65;
}

/* --- 15. Perguntas ------------------------------------------------------ */

.lp-faq {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--lp-stack);
  align-items: start;
}

.lp-faq details {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: border-color var(--duration) var(--ease);
}

.lp-faq details[open] { border-color: var(--color-primary-border); }

.lp-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5);
  font-weight: 700;
  font-size: var(--lp-small);
  line-height: 1.45;
  letter-spacing: -0.008em;
  cursor: pointer;
  list-style: none;
}

.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary:hover { color: var(--color-primary); }

.lp-faq summary:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-lg);
}

.lp-faq-sign {
  flex: 0 0 auto;
  color: var(--color-muted);
  transition: transform var(--duration) var(--ease);
}

.lp-faq details[open] .lp-faq-sign { transform: rotate(180deg); }

.lp-faq-answer {
  padding: 0 var(--space-5) var(--space-5);
  font-size: var(--lp-small);
}

@media (min-width: 860px) {
  .lp-faq { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-4); }
}

/* --- 16. Fechamento e rodapé -------------------------------------------- */

.lp-close {
  padding-block: clamp(4rem, 7vw, 6.5rem);
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
}

.lp-footer {
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
  overflow: hidden;
}

.lp-footer-grid {
  display: grid;
  gap: var(--space-7);
}

.lp-footer-brand { display: grid; gap: var(--space-4); justify-items: start; }
.lp-footer-brand .lp-p { font-size: var(--lp-small); max-width: 24rem; }

.lp-footer-col {
  display: grid;
  gap: var(--space-3);
  align-content: start;
  font-size: var(--lp-small);
}

.lp-footer-title {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text);
}

.lp-footer-col a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  color: var(--color-text-soft);
  overflow-wrap: anywhere;
}

.lp-footer-col a:hover { color: var(--color-text); }
.lp-footer-col .lp-note { font-size: 0.75rem; }

@media (min-width: 720px) {
  .lp-footer-grid {
    grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
    gap: var(--space-8);
  }
}

/*
 * Marca de fim de página.
 *
 * A palavra ocupa a largura da janela inteira: `10vw` por caractere é a
 * medida que faz seis letras somarem quase 100vw em qualquer tamanho de tela,
 * sem depender de JavaScript para medir nada. `clip` corta as bordas
 * arredondadas do gradiente sem criar barra de rolagem horizontal.
 */
/* Sem `transform` aqui: deslocar o texto dentro da caixa recortada deixava
   uma faixa branca embaixo, e as letras paravam antes da borda. Quem sobe a
   marca é a margem. */
.lp-footer-mark {
  margin: 14px 0 0;
  font-size: 32.5vw;
  font-weight: 800;
  line-height: 0.76;
  letter-spacing: -0.055em;
  /* Encostada na borda esquerda da tela. A margem negativa come a sangria
     lateral do glifo, senão sobra um respiro que parece desalinhamento. */
  text-align: left;
  margin-left: -0.05em;
  white-space: nowrap;
  user-select: none;
  background: linear-gradient(160deg, var(--color-primary-light) 0%, var(--color-primary-active) 78%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  /* A palavra é cortada por baixo de propósito: inteira, ela viraria um
     bloco de meia tela. Cortada, lê-se como marca d'água de fim de página. */
  height: 0.5em;
  overflow: hidden;
}

@supports not (background-clip: text) {
  .lp-footer-mark { color: var(--color-primary); }
}

.lp-footer-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-5);
  border-top: 1px solid var(--color-border);
  font-size: 0.75rem;
  color: var(--color-muted);
}

.lp-footer-legal-links { display: flex; flex-wrap: wrap; gap: var(--space-5); }

.lp-footer-legal-links a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  color: var(--color-muted);
}

.lp-footer-legal-links a:hover { color: var(--color-text); }

/* --- 17. Barra fixa do celular ------------------------------------------ */

.lp-sticky {
  position: fixed;
  inset: auto 0 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--lp-gutter);
  padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--color-border);
  transform: translateY(110%);
  transition: transform var(--duration-slow) var(--ease);
}

.lp-sticky.is-visible { transform: translateY(0); }
.lp-sticky .btn { flex: 1 1 auto; }

.lp-sticky-price { font-size: var(--lp-small); color: var(--color-muted); }
.lp-sticky-price b { color: var(--color-text); font-size: var(--lp-body); }

@media (min-width: 768px) {
  .lp-sticky { display: none; }
}

@media (max-width: 767px) {
  .lp-footer-legal { padding-bottom: calc(var(--space-8) + env(safe-area-inset-bottom, 0px)); }
}

/* --- 18. Movimento ------------------------------------------------------ */

/* O estado inicial só vale depois que o script marca a página: sem
   JavaScript nada fica invisível. */
.lp[data-reveal='on'] .lp-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 520ms var(--ease), transform 520ms var(--ease);
}

.lp[data-reveal='on'] .lp-reveal.is-in {
  opacity: 1;
  transform: none;
}

/* Mesma entrada da régua de intervalos, e de propósito: as duas barras
   contam a mesma coisa em telas diferentes da página. */
.lp[data-reveal='on'] .lp-panel-fill {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 720ms var(--ease);
  transition-delay: calc(var(--lp-i, 0) * 120ms + 200ms);
}

.lp[data-reveal='on'] .lp-reveal.is-in .lp-panel-fill { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  .lp[data-reveal='on'] .lp-reveal,
  .lp[data-reveal='on'] .lp-track {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .lp[data-reveal='on'] .lp-ruler-bar,
  .lp[data-reveal='on'] .lp-panel-fill { transform: scaleX(1); transition: none; }

  .lp-sticky { transition: none; }
  .lp-faq-sign { transition: none; }
}

/* --- 19. Páginas de texto (termos e privacidade) ------------------------ */

.lp-doc { padding-block: clamp(3rem, 5vw, 5rem); }

.lp-doc-inner { max-width: 46rem; margin-inline: auto; }

.lp-doc h1 {
  font-size: var(--lp-display-2);
  font-weight: 800;
  letter-spacing: -0.026em;
  line-height: 1.12;
}

.lp-doc h2 {
  margin-top: var(--space-9);
  margin-bottom: var(--space-4);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
  font-size: var(--lp-display-3);
  font-weight: 700;
  letter-spacing: -0.016em;
}

.lp-doc h3 {
  margin-top: var(--space-6);
  margin-bottom: var(--space-2);
  font-size: var(--lp-body);
  font-weight: 700;
}

.lp-doc p,
.lp-doc li { color: var(--color-text-soft); line-height: 1.7; }

.lp-doc p + p { margin-top: var(--space-4); }

.lp-doc ul {
  margin: var(--space-4) 0 0;
  padding-left: var(--space-5);
  display: grid;
  gap: var(--space-2);
}

.lp-doc a { color: var(--lp-accent-text); text-decoration: underline; }

.lp-doc-meta {
  margin-top: var(--space-4);
  font-size: var(--lp-small);
  color: var(--color-muted);
}

.lp-doc-note {
  margin-top: var(--space-6);
  padding: var(--space-5);
  background: var(--color-warning-soft);
  border: 1px solid var(--color-warning-border);
  border-radius: var(--radius-lg);
  color: var(--color-warning);
  font-size: var(--lp-small);
  line-height: 1.6;
}

.lp-doc-back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
  font-size: var(--lp-small);
  font-weight: 600;
  color: var(--color-text-soft);
}

/* --- 20. Utilidades ----------------------------------------------------- */

.lp a:focus-visible,
.lp button:focus-visible,
.lp summary:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}