/* ==========================================================================
   MS Growth — componentes reutilizaveis
   Aproveitada a ideia de grade do blocos.css, que ja era todo em tokens.
   Descartados dali: .ph* (placeholders), .hero* (o novo hero e sob medida),
   .lead-card / .field / .form-note (o widget da MS ja traz o formulario) e
   .logos-strip (a banda de selos usa .badge-strip, com teto de altura).
   ========================================================================== */

/* Grades genericas --------------------------------------------------------- */
.grid-2 { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
.grid-3 { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
.grid-4 { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
@media (min-width: 768px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 900px) { .grid-4 { grid-template-columns: repeat(4, 1fr); } }

.hairline { border: 0; border-top: 1px solid var(--color-border); margin-block: var(--space-6); }
.section--dark .hairline { border-top-color: var(--color-dark-border); }

/* Chips -------------------------------------------------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: 700;
  background-color: var(--color-primary-tint);
  color: var(--color-primary-dark);
}
/* mint = dado. Sobre escuro usa o vibrante; em claro, o tint com texto ink. */
.chip--data { background-color: var(--color-data); color: var(--color-dark); }
.chip--data-light { background-color: var(--color-data-tint); color: var(--color-data-ink); }
/* amber = atencao. O amber NUNCA e texto em fundo claro. */
.chip--accent { background-color: var(--color-accent-tint); color: var(--color-accent-ink); }

/* Banda de selos (#credenciais) — e banda, nao secao. Teto de 160px. ------- */
.badge-strip {
  background-color: var(--color-dark-alt);
  border-block: 1px solid var(--color-dark-border);
}
.badge-strip__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; }
.badge-strip__cell {
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--color-dark-border);
}
.badge-strip__cell:nth-child(-n+2) { border-top: 0; }
.badge-strip__lead {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--color-on-dark);
  margin-bottom: var(--space-1);
}
.badge-strip__text { font-size: var(--fs-xs); line-height: 1.45; color: var(--color-on-dark-muted); }
.badge-strip__logo { height: 26px; width: auto; margin-bottom: var(--space-2); }
.badge-strip__fine {
  font-size: 11px;
  color: var(--color-on-dark-muted);
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--color-dark-border);
}
/* Variante de 2 celulas: os dois selos subiram para o #hero como ancora da
   pagina, entao aqui sobram os dois fatos que nao sao selo. */
.badge-strip__grid--duo { grid-template-columns: 1fr; }
.badge-strip__grid--duo .badge-strip__cell:first-child { border-top: 0; }
@media (min-width: 900px) {
  .badge-strip__grid { grid-template-columns: 30% 30% 20% 20%; }
  .badge-strip__grid--duo { grid-template-columns: repeat(2, 1fr); }
  .badge-strip__cell { border-top: 0; border-left: 1px solid var(--color-dark-border); }
  .badge-strip__cell:first-child { border-left: 0; }
}

/* .case-card e .case-math foram REMOVIDOS em 10/08/2026 junto com a secao
   #prova. Decisao do cliente: os numeros de campanha de cliente nao entram na
   landing page — sao apresentados no Diagnostico. A clausula 13.1 dos
   contratos obriga sigilo sobre informacao financeira do contratante e a 13.2
   nao abre excecao para material de marketing. O guard agora TRATA ESSES
   NUMEROS COMO PROIBIDOS: ver scripts/verify.sh. */

/* Credenciais no #hero — ocupa o lugar que era da faixa de aritmetica ------ */
/* Os selos vem com interior opaco e branco (sao cartoes, nao marcas livres),
   entao cada um fica sobre a propria placa branca: sobre o fundo escuro do
   hero, sem a placa, eles apareceriam como retangulos recortados.
   Normalizados por ALTURA optica e nao por largura — o lockup do Google e
   ~1:1 e o da Meta ~1,75:1, alinhados pela largura um fica o dobro do outro. */
.cred-list { list-style: none; display: grid; gap: var(--space-5); }
.cred-list__item { display: flex; gap: var(--space-4); align-items: flex-start; }
.cred-list__logo {
  flex: 0 0 auto;
  height: 44px;
  width: auto;
  background-color: #fff;
  border-radius: var(--radius-sm);
  padding: var(--space-2);
}
.cred-list__name {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-on-dark);
  margin-bottom: var(--space-1);
}
.cred-list__desc { font-size: var(--fs-sm); line-height: 1.5; color: var(--color-on-dark-muted); }

/* Moldura de print de tela — resolve print de fundo branco em pagina clara.
   Sem a moldura, um retangulo branco no meio de uma secao clara vira buraco.
   SEM CONSUMIDOR HOJE: aguarda o print novo do painel (tema claro, metricas
   de midia, sem nome de cliente na tela). Ver pendencias-pre-lancamento.md. */
.frame {
  background-color: var(--color-dark-alt);
  border: 1px solid var(--color-dark-border);
  border-radius: var(--radius-md);
  padding: var(--frame-pad);
  box-shadow: var(--shadow-lg);
}
.frame img { border-radius: var(--radius-sm); }
.frame__caption { font-size: var(--fs-xs); color: var(--color-on-dark-muted); margin-top: var(--space-2); }

/* Pill do filtro de porte — amber, e o amber e SO preenchimento ------------ */
.pill-filter {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background-color: var(--color-accent-tint);
  border: 1px solid var(--color-accent-border);
  color: var(--color-accent-ink);
  border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-4);
  font-size: var(--fs-sm);
  font-weight: 600;
}

/* Listas de check e de traco (#filtro) ------------------------------------- */
/* A distincao nao depende de cor: check vs traco resolve pela forma, que e o
   comportamento acessivel correto. Nenhum vermelho na coluna negativa — com
   vermelho ela le como alerta e o filtro perde o tom de honestidade que e o
   argumento dele. */
.list-mark { list-style: none; display: grid; gap: var(--space-4); }
.list-mark li { position: relative; padding-left: var(--space-6); }
.list-mark li::before {
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
  line-height: var(--lh-body);
}
.list-mark--yes li::before { content: "\2713"; color: var(--color-data-ink); }
.list-mark--no li::before { content: "\2014"; color: var(--color-text-muted); }
/* A coluna negativa NAO e rebaixada: mesmo corpo, mesmo peso de negrito e
   mesma cor de texto da afirmativa. Rebaixa-la destroi a autoridade que a
   honestidade do filtro constroi — e e essa autoridade que ocupa o lugar do
   preco nesta pagina. So o marcador muda, e pela forma, nao pela cor. */

/* FAQ — <details> nativo, zero JS ----------------------------------------- */
.faq { display: grid; gap: var(--space-3); list-style: none; }
.faq__item {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.faq__item[open] { border-color: var(--color-border-mid); box-shadow: var(--shadow-sm); }
/* Ancorar nao abre o painel sem JS. Estilizamos :target e aceitamos que o
   usuario de um toque — nao vale inventar JS so para isso. */
.faq__item:target { border-color: var(--color-primary); }
.faq__q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-heading);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: "+";
  font-size: 1.5rem;
  line-height: 1;
  color: var(--color-primary-dark);
  flex: 0 0 auto;
}
.faq__item[open] .faq__q::after { content: "\2212"; }
.faq__a { padding: 0 var(--space-5) var(--space-5); color: var(--color-text); }
.faq__a > * + * { margin-top: var(--space-4); }