/* Landing — só o que é dela.
 *
 * Os tokens do Modernist agora vivem em tokens.css e valem para o produto
 * inteiro; manter uma cópia escopada aqui criaria duas fontes de verdade para
 * a mesma cor. Sobraram as classes que o markup da landing usa e as animações.
 *
 * Os @keyframes são globais de propósito: nome de keyframe não tem escopo em
 * CSS, e todos usam prefixo próprio (qr*, sweep, typing, caret, variantcycle…). */

.landing {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
}

.landing {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  font-weight: 400;
}

.landing .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  text-decoration: none;
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 14px;
  line-height: 1.2;
  color: var(--color-text);
  /* matches the .input's 14px —
     the pair sits side by side in sign-up rows */
  background: transparent;
  border: 1px solid transparent;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  border-radius: var(--radius-md);
}

.landing .btn svg {
  display: block;
}

.landing .btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.landing .btn-primary {
  background: var(--color-accent-600);
  color: var(--color-bg);
}

.landing .btn-primary:hover {
  background: var(--color-accent-700);
  color: var(--color-accent-100) !important;
}

.landing .btn-primary:active {
  background: var(--color-accent-700);
  color: var(--color-accent-100) !important;
}

.landing .btn-invert {
  background: var(--color-bg);
  color: var(--color-text);
  border-color: var(--color-bg);
}

.landing .btn-invert:hover {
  background: color-mix(in srgb, var(--color-bg) 88%, var(--color-text));
}

.landing .btn-invert:active {
  background: color-mix(in srgb, var(--color-bg) 78%, var(--color-text));
}

.landing .btn-ghost {
  color: var(--color-accent);
  padding-inline: var(--space-1);
}

.landing .btn-ghost:hover {
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
}

.landing .btn-ghost:active {
  background: color-mix(in srgb, var(--color-accent) 18%, transparent);
}

.landing .btn-block {
  width: 100%;
  margin-top: var(--space-2);
  justify-content: flex-start;
  text-align: left;
}

.landing .input {
  width: 100%;
  min-height: 36px;
  padding: 6px 10px;
  font: inherit;
  font-size: 14px;
  color: var(--color-text);
  caret-color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
}

.landing .input:hover {
  border-color: color-mix(in srgb, var(--color-text) 45%, transparent);
}

.landing .input:focus-visible {
  border-color: var(--color-accent);
  outline-offset: 0;
}

.landing .nav {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: 2px solid var(--color-divider);
}

.landing .nav-brand {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 18px;
  margin-right: auto;
}

.landing .nav a {
  color: inherit;
  text-decoration: none;
  font-size: 14px;
}

.landing .nav a:hover,
.landing .nav a[aria-current='page'] {
  color: var(--color-accent);
}

/* ---------- Base e animações da landing ----------
   Vinham do <helmet> do Design Canvas. As regras de elemento foram escopadas;
   os @keyframes ficam globais porque nome de keyframe não tem escopo em CSS —
   todos usam prefixo próprio (qr*, sweep, typing, caret, variantcycle…) e não
   colidem com as animações do app. */
.landing {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  text-wrap: pretty;
}

@keyframes qrpop {
  from {
    opacity: 0;
    transform: scale(.2);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes qrbreathe {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: .35;
  }
}

/* Passada de leitor de código: velocidade CONSTANTE (o easing original era
     um ease-in-out que disparava a 2,3x no meio do percurso e lia como
     acelerado), percurso até a borda de baixo — 1011% = (100% - 9%) / 9% da
     própria altura — e uma pausa curta antes da próxima passada. */
@keyframes sweep {
  0% {
    transform: translateY(-10%);
    opacity: 0;
  }

  4% {
    transform: translateY(0%);
    opacity: 1;
  }

  72% {
    transform: translateY(1011%);
    opacity: 1;
  }

  80% {
    transform: translateY(1011%);
    opacity: 0;
  }

  100% {
    transform: translateY(-10%);
    opacity: 0;
  }
}

@keyframes typing {
  0% {
    width: 0;
  }

  45% {
    width: 100%;
  }

  92% {
    width: 100%;
  }

  100% {
    width: 0;
  }
}

@keyframes caret {

  0%,
  49% {
    opacity: 1;
  }

  50%,
  100% {
    opacity: 0;
  }
}

@keyframes variantcycle {

  0%,
  8% {
    opacity: .18;
    transform: translateY(6px);
  }

  18%,
  42% {
    opacity: 1;
    transform: translateY(0);
  }

  60%,
  100% {
    opacity: .18;
    transform: translateY(0);
  }
}

@keyframes barrise {
  0% {
    transform: scaleY(.12);
  }

  60%,
  100% {
    transform: scaleY(1);
  }
}

@keyframes meterfill {
  0% {
    width: 8%;
  }

  70%,
  100% {
    width: 96%;
  }
}

@keyframes swapflip {

  0%,
  40% {
    transform: translateY(0);
  }

  50%,
  90% {
    transform: translateY(-50%);
  }

  100% {
    transform: translateY(-50%);
  }
}

/* Mesma ideia do swapflip, com TRÊS faixas: é a vitrine do Agente de Regras,
   onde a lista de condição → destino precisa mostrar que existem várias saídas
   para o mesmo código. Cada passo é 1/3 da altura do invólucro (uma faixa), e
   o retorno ao topo acontece no corte do loop, como no swapflip. */
@keyframes rulecycle {

  0%,
  26% {
    transform: translateY(0);
  }

  33%,
  59% {
    transform: translateY(-33.3333%);
  }

  66%,
  100% {
    transform: translateY(-66.6667%);
  }
}

@keyframes marchdash {
  to {
    background-position-x: 22px;
  }
}

/* Vitrine de preços: quatro planos, então a grade aceita mais colunas que os
   três do design original. */
.landing .plano-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: clamp(16px, 2vw, 28px);
}

/* Itens do plano: um por linha, com o traço do check alinhado à primeira
   linha do texto — item de duas linhas não desalinha o ícone. */
.landing .plano-itens {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14.5px;
  line-height: 1.5;
}

.landing .plano-itens li {
  display: grid;
  /* A coluna do ícone é 1em: acompanha o tamanho do texto em vez de fixar px. */
  grid-template-columns: 1em 1fr;
  gap: 0.65em;
  align-items: start;
  color: color-mix(in srgb, var(--color-text) 82%, transparent);
}

/* O marcador é o caractere ✓, não um ícone: sendo texto, ele já nasce com a
   fonte, o tamanho e a linha de base do item — sem precisar de deslocamento
   para alinhar. `aria-hidden` não cabe aqui porque conteúdo de ::before não
   entra na árvore de acessibilidade. */
.landing .plano-itens li::before {
  content: "✓";
  color: var(--color-accent);
  font-weight: 600;
}