/* Hallmark · pre-emit critique: P4 H5 E4 S5 R5 V4
 * Hallmark · genre: modern-minimal · macrostructure: Split Studio · knobs: ratio=5/7, alternate=por bloco (texto esq/dir), proof=CSS + SVG + tabela, blocks=7
 * hero: tipográfico, left-bias, sem enrichment (a prova fica na metade oposta de cada bloco)
 * theme: custom "ForSign" (herdado de tokens.css) · nav: N5 · footer: Ft2 · sistema compartilhado com a home
 * motion: revelação one-shot das duas metades (cada uma revela sozinha) · lift do CTA grande (2 primitivas)
 * studied: no · context: explicit · v1.1.0
 */

/* ---------- Hero tipográfico (mesma regra da landing 1) ---------- */
.lhero { padding-block: calc(var(--nav-height) + var(--space-2xl)) var(--space-lg); display: grid; gap: var(--space-lg); min-height: clamp(50vh, 62dvh, 72dvh); align-content: center; }
.lhero__kicker { font-family: var(--font-display); font-weight: 500; font-size: var(--text-sm); color: var(--color-accent-deep); }
.lhero h1 { font-size: var(--text-display); max-width: 16ch; }
.lhero .lede { max-width: 46ch; }
.lhero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-lg); }
.lhero__jump { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-md); margin-top: var(--space-md); padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); font-size: var(--text-sm); }
.lhero__jump a { display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; color: var(--color-ink-2); text-decoration: none; }
.lhero__jump a:hover { color: var(--color-ink); text-decoration: underline; }
@media (min-width: 60rem) { .lhero { padding-block: calc(var(--nav-height) + var(--space-3xl)) var(--space-xl); } }

/* ---------- Split Studio: texto de um lado, prova do outro ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); padding-block: var(--space-2xl) var(--space-3xl); border-top: var(--rule-hair) solid var(--color-rule); }
.split__text { display: grid; gap: var(--space-md); align-content: center; }
.split__text h2 { font-size: var(--text-display-s); max-width: 16ch; }
.split__text p { color: var(--color-ink-2); max-width: 46ch; }
.split__text .link-arrow, .split__text .btn { justify-self: start; }
.split__proof { min-width: 0; display: grid; align-items: center; }

@media (min-width: 60rem) {
  .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: center; }
  .split--flip .split__text { order: 2; }
  .split--flip .split__proof { order: 1; }
}

/* Cartão de prova genérico (fundo paper-2, canto grande) */
.proof-card { background: var(--color-paper-2); border-radius: var(--radius-lg); padding: clamp(1.25rem, 3vw, 2rem); display: grid; gap: var(--space-md); align-content: start; min-width: 0; }
.proof-card__title { font-family: var(--font-display); font-weight: 500; font-size: var(--text-md); }
.proof-card__note { font-size: var(--text-xs); color: var(--color-muted); }

/* Etiqueta pequena (Beta, Parcial, API) */
.tag { display: inline-block; font-size: var(--text-xs); font-family: var(--font-display); font-weight: 500; color: var(--color-accent-deep); border: var(--rule-hair) solid var(--color-accent); border-radius: var(--radius-pill); padding: 0 var(--space-xs); line-height: 1.5; margin-left: var(--space-xs); white-space: nowrap; vertical-align: middle; }

/* Chip neutro (domínio, grupo) */
.chip { display: inline-flex; align-items: center; min-height: 1.75rem; padding: 0 var(--space-sm); background: var(--color-paper); border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-pill); font-family: var(--font-display); font-weight: 500; font-size: var(--text-xs); color: var(--color-ink-2); white-space: nowrap; }

/* ---------- Bloco 1 · dois e-mails, duas marcas ---------- */
.mails { display: grid; gap: var(--space-md); }
.mail { --brand: var(--color-accent); background: var(--color-paper-2); border-radius: var(--radius-lg); border-top: var(--space-2xs) solid var(--brand); padding: clamp(1.25rem, 3vw, 2rem); display: grid; gap: var(--space-sm); min-width: 0; }
.mail--b { --brand: var(--color-ink); }
.mail__logo { display: inline-flex; align-items: center; gap: var(--space-xs); font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; color: var(--brand); }
.mail__logo::before { content: ""; flex: none; width: 1.1rem; height: 1.1rem; border-radius: var(--radius-sm); background: var(--brand); }
.mail__title { font-family: var(--font-display); font-weight: 500; font-size: var(--text-md); line-height: 1.2; }
.mail__body { font-size: var(--text-sm); color: var(--color-ink-2); }
.mail__btn { justify-self: start; display: inline-flex; align-items: center; min-height: 2.25rem; padding: 0 var(--space-md); border-radius: var(--radius-pill); background: var(--brand); color: var(--color-accent-ink); font-family: var(--font-display); font-weight: 500; font-size: var(--text-sm); white-space: nowrap; }
.mail__foot { font-size: var(--text-xs); color: var(--color-muted); padding-top: var(--space-sm); border-top: var(--rule-hair) solid var(--color-rule-2); overflow-wrap: anywhere; }
@media (min-width: 40rem) {
  .mails { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .mail--b { margin-top: var(--space-xl); }
}

/* ---------- Bloco 2 · spec sheet das 23 permissões (F3, regra de css/home.css) ---------- */
.spec-sheet { width: 100%; border-collapse: collapse; font-size: var(--text-base); }
.spec-sheet tr { border-top: var(--rule-hair) solid var(--color-rule); }
.spec-sheet tr:last-child { border-bottom: var(--rule-hair) solid var(--color-rule); }
.spec-sheet th, .spec-sheet td { text-align: left; vertical-align: top; padding: var(--space-md) var(--space-md) var(--space-md) 0; }
.spec-sheet th { font-family: var(--font-display); font-weight: 500; color: var(--color-ink); width: 30%; }
.spec-sheet td.tnum { font-variant-numeric: tabular-nums; }
.spec-sheet td.muted { font-size: var(--text-sm); }
@media (max-width: 40rem) {
  .spec-sheet tr { display: grid; padding-block: var(--space-sm); }
  .spec-sheet th, .spec-sheet td { padding: var(--space-3xs) 0; width: auto; }
}

/* Ajustes da tabela de permissões: duas colunas, grupos por tbody */
.perm { font-size: var(--text-sm); }
.perm th { width: 52%; padding-block: var(--space-sm); }
.perm td { padding-block: var(--space-sm); color: var(--color-ink-2); }
.perm tbody tr:last-child { border-bottom: 0; }
.perm tbody:last-child tr:last-child { border-bottom: var(--rule-hair) solid var(--color-rule); }
.perm__group th { width: auto; font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-muted); padding: var(--space-lg) 0 var(--space-xs); }
.perm tbody:first-child .perm__group th { padding-top: var(--space-xs); }
.perm tbody:first-child .perm__group { border-top: 0; }
@media (max-width: 40rem) {
  .perm__group { padding-block: 0; }
  .perm__group th { padding-top: var(--space-lg); }
}

/* ---------- Bloco 3 · matriz de visibilidade por grupo ---------- */
.vis-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.vis { width: 100%; border-collapse: collapse; font-size: var(--text-sm); min-width: 18rem; }
.vis th, .vis td { padding: var(--space-sm) var(--space-xs); text-align: left; vertical-align: middle; border-top: var(--rule-hair) solid var(--color-rule-2); }
.vis thead th { border-top: 0; font-family: var(--font-display); font-weight: 500; font-size: var(--text-xs); color: var(--color-muted); text-align: center; white-space: nowrap; }
.vis thead th:first-child { text-align: left; }
.vis tbody th { font-family: var(--font-display); font-weight: 500; color: var(--color-ink); white-space: nowrap; }
.vis td { text-align: center; }
.vis td svg { margin-inline: auto; color: var(--color-accent); }
.vis__no { color: var(--color-rule); }
.vis__who { display: block; font-family: var(--font-body); font-weight: 400; color: var(--color-muted); font-size: var(--text-xs); }

/* ---------- Bloco 4 · Selecione uma conta ---------- */
.accounts { display: grid; gap: var(--space-xs); }
.accounts li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-2xs) var(--space-sm); align-items: center; padding: var(--space-sm) var(--space-md); background: var(--color-paper); border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-md); font-size: var(--text-sm); }
.accounts__mark { grid-row: 1 / span 2; width: 1.75rem; height: 1.75rem; border-radius: var(--radius-sm); background: var(--color-accent-soft); color: var(--color-accent-deep); font-family: var(--font-display); font-weight: 600; font-size: var(--text-xs); display: grid; place-items: center; }
.accounts__name { font-family: var(--font-display); font-weight: 500; color: var(--color-ink); }
.accounts__meta { color: var(--color-muted); font-size: var(--text-xs); }
.accounts__action { grid-row: 1 / span 2; font-family: var(--font-display); font-weight: 500; font-size: var(--text-xs); color: var(--color-accent-deep); white-space: nowrap; }
.accounts li.is-sso .accounts__mark { background: var(--color-paper-3); color: var(--color-muted); }
.accounts li.is-sso .accounts__name { color: var(--color-muted); }
.accounts li.is-sso .accounts__action { color: var(--color-muted); }
.accounts__domains { display: flex; flex-wrap: wrap; gap: var(--space-xs); }

/* ---------- Bloco 5 · convite ---------- */
.invite__grid { display: grid; gap: var(--space-sm); }
.invite__field { display: grid; gap: var(--space-2xs); font-size: var(--text-sm); min-width: 0; }
.invite__label { font-family: var(--font-display); font-weight: 500; font-size: var(--text-xs); color: var(--color-muted); }
.invite__value { padding: var(--space-xs) var(--space-sm); background: var(--color-paper); border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-sm); color: var(--color-ink); min-height: 2.25rem; display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-xs); overflow-wrap: anywhere; }
.invite__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-md); }
/* o único botão amarelo desenhado da página: o botão real do app, amarelo com borda preta */
.invite__btn { display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0 var(--space-lg); border-radius: var(--radius-pill); background: var(--color-signal); border: var(--rule-hair) solid var(--color-ink); color: var(--color-ink); font-family: var(--font-display); font-weight: 500; font-size: var(--text-sm); white-space: nowrap; }
@media (min-width: 40rem) { .invite__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Bloco 6 · protocolo do mini app (regra .code de css/home.css) ---------- */
.code {
  margin: 0; padding: var(--space-md) 0 0; border-top: var(--rule-hair) solid var(--color-rule);
  font-family: var(--font-mono); font-size: var(--text-xs); line-height: 1.55; color: var(--color-ink-2);
  white-space: pre; overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.code__label { display: block; font-family: var(--font-display); font-size: var(--text-xs); font-weight: 500; color: var(--color-muted); margin-bottom: var(--space-xs); }
.proto { display: grid; gap: var(--space-md); }
.proto__facts { display: grid; gap: var(--space-2xs); font-size: var(--text-sm); color: var(--color-ink-2); }
.proto__facts li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-sm); align-items: center; min-height: 2rem; }
.proto__facts svg { color: var(--color-accent); }

/* ---------- Bloco 7 · idiomas ---------- */
.langs { display: grid; gap: var(--space-md); }
.lang { background: var(--color-paper-2); border-radius: var(--radius-lg); padding: var(--space-lg); display: grid; gap: var(--space-sm); align-content: start; min-width: 0; }
.lang__code { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-muted); }
.lang__name { font-family: var(--font-display); font-weight: 500; font-size: var(--text-md); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs); }
.lang ul { display: grid; gap: var(--space-2xs); font-size: var(--text-sm); color: var(--color-ink-2); }
.lang li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-sm); align-items: center; min-height: 1.75rem; }
.lang li svg { color: var(--color-accent); }
.lang li.is-wip { color: var(--color-muted); }
.lang li.is-wip svg { color: var(--color-muted); }
@media (min-width: 40rem) { .langs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Perguntas ---------- */
.faq { padding-block: var(--space-2xl) var(--space-3xl); border-top: var(--rule-hair) solid var(--color-rule); display: grid; gap: var(--space-lg); }
.faq h2 { font-size: var(--text-display-s); }
.faq dl { margin: 0; display: grid; gap: 0; border-top: var(--rule-hair) solid var(--color-rule); }
.faq dt { font-family: var(--font-display); font-weight: 600; font-size: var(--text-md); padding-top: var(--space-lg); }
.faq dd { margin: 0; padding: var(--space-xs) 0 var(--space-lg); color: var(--color-ink-2); max-width: 64ch; border-bottom: var(--rule-hair) solid var(--color-rule); }
.faq dd a { color: var(--color-accent-deep); }

/* ---------- CTA final (mesmo bloco da home) ---------- */
.plans { background: var(--color-paper-2); padding-block: var(--space-3xl) var(--space-4xl); }
.plans__inner { display: grid; gap: var(--space-lg); max-width: 56rem; }
.plans h2 { font-size: var(--text-display-s); max-width: 24ch; }
.plans .lede { max-width: 52ch; }
.plans__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-lg); }