/* Planos: as duas listas têm as mesmas linhas. O que o plano não inclui aparece riscado, com × no lugar do ✓. */
.plan li[data-state] { padding-left: 1.6rem; }

.plan li[data-state]::before {
  left: 0;
  color: var(--plan-accent);
  font-family: var(--font-body);
  font-weight: 700;
}

.plan li[data-state="in"]::before { content: "✓"; }
.plan li[data-state="discount"]::before { content: "%"; }
.plan li[data-state="out"]::before { content: "×"; color: var(--plan-quiet); opacity: .7; }

.plan li[data-state="in"] { color: var(--plan-ink); }
.plan li[data-state="discount"] { color: var(--plan-ink); }
.plan li[data-state="out"] { color: var(--plan-quiet); opacity: .62; }
.plan li[data-state="out"] s { text-decoration-thickness: 1px; }

.plan-tag {
  display: inline-block;
  margin-left: .4rem;
  padding: .05rem .45rem;
  border: 1px solid var(--plan-rule);
  border-radius: 999px;
  color: var(--plan-quiet);
  font: 400 .6rem/1.5 var(--font-label);
  font-style: normal;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.plan .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Premium: as quatro últimas linhas espelham as do Conteúdo (com desconto / riscado),
   para os dois cards terem o mesmo peso visual no fim da lista. */
.plan-tag--in {
  border-color: var(--plan-accent);
  color: var(--plan-accent);
}

/* Fecho de cada lista: o que o plano dá nas linhas de cima que o Conteúdo não inclui.
   Conteúdo: desconto. Premium: tudo já incluído. Caixa com borda e fundo próprios para
   a vantagem ler como linha de chegada, não como mais um item. */
.plan li[data-state="benefit"] {
  margin-top: .75rem;
  padding: .75rem .9rem .75rem 2.4rem;
  border: 1px solid var(--plan-accent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--plan-accent) 12%, transparent);
  color: var(--plan-ink);
  font-size: .86rem;
  line-height: 1.45;
}

.plan li[data-state="benefit"]::before {
  content: "%";
  left: .9rem;
  top: .75rem;
  font-size: 1rem;
}

.plan--premium li[data-state="benefit"]::before { content: "✓"; }

.plan li[data-state="benefit"] strong {
  color: var(--plan-accent);
  font-weight: 700;
}