/* ============================================================
   Tela 22 — paywall (variante checklist do app)
   Título por objetivo · card com 6 benefícios · 3 planos ·
   termos abaixo. Tocar no plano abre o checkout direto.
   ============================================================ */

.paywall { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none;
           padding: 32px var(--gutter) calc(24px + env(safe-area-inset-bottom)); }
.paywall::-webkit-scrollbar { display: none; }

.paywall-titulo {
  margin: 0 0 16px;
  font-size: 28px; line-height: 1.15; font-weight: 700; letter-spacing: -.025em;
  text-wrap: balance;
}

/* card de benefícios — mesmo fundo da tela, delimitado só pela borda */
.check-card {
  background: var(--bg);
  border: 1.5px solid rgba(255, 255, 255, .09);
  border-radius: 12px;
  padding: 16px;
  display: flex; flex-direction: column; gap: 14px;
}
.check-item { display: flex; align-items: flex-start; gap: 10px; }
.check-item svg { flex: 0 0 auto; width: 22px; height: 22px; margin-top: 1px; }
.check-item span { font: 600 15px/1.35 var(--font); color: var(--ink); }

/* planos */
.planos { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }

.plano {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; padding: 16px 18px;
  background: var(--opt-bg);
  border: 2px solid transparent;
  border-radius: 16px;
  color: var(--ink); text-align: left; cursor: pointer;
  transition: transform .1s ease, border-color .2s ease, background .2s ease;
}
.plano:active, .plano.is-pressed { transform: scale(.985); }
/* selecionado: é este que o Continuar compra */
.plano.is-on { border-color: var(--brand); background: var(--opt-bg-on); }

.plano-esq { display: flex; flex-direction: column; justify-content: center; }
.plano-periodo { display: block; font: 700 17px/1.2 var(--font); }
.plano-total   { display: block; font: 400 14px/1.3 var(--font); color: var(--ink-2); margin-top: 3px; }
.plano-mes     { display: block; font: 700 20px/1.1 var(--font); color: var(--brand);
                 text-align: right; white-space: nowrap; }
.plano-mes small { display: block; font: 400 12px/1.2 var(--font); color: var(--ink-2); margin-top: 2px; }

.plano-selo {
  position: absolute; top: -9px; left: 16px;
  background: var(--brand); color: var(--brand-ink);
  font: 700 11px/1 var(--font); letter-spacing: .04em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 99px;
}
.plano-economia {
  position: absolute; top: -9px; right: 16px;
  background: var(--surface-2); color: var(--ink);
  border: 1px solid var(--line);
  font: 700 11px/1 var(--font);
  padding: 4px 9px; border-radius: 99px;
}

/* termos */
.termos { margin: 18px 0 0; white-space: pre-line; text-align: center;
          font: 400 12px/1.5 var(--font); color: var(--ink-3); }
.termos-links { margin-top: 8px; display: flex; gap: 16px; justify-content: center; }
/* A linha de links é irmã do parágrafo, não filha — precisa dos dois
   seletores, senão o navegador aplica o azul/roxo padrão. */
.termos a, .termos-links a {
  color: var(--ink-3);
  font: 400 12px/1.4 var(--font);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.termos a:visited, .termos-links a:visited { color: var(--ink-3); }

@media (max-height: 700px) {
  .paywall { padding-top: 20px; }
  .paywall-titulo { font-size: 24px; }
  .check-card { gap: 10px; padding: 14px; }
  .check-item span { font-size: 14px; }
  .planos { margin-top: 14px; }
}

/* CTA dentro da rolagem, logo abaixo dos planos */
.paywall-cta { margin-top: 20px; }