/* =============================================================================
   SUITLYS — site institucional
   Identidade: papel · tinta · ouro. Sem azul de marca, sem emoji, sem gradiente
   decorativo. Tipografia por papel: Lora (editorial/display) · Inter (interface)
   · JetBrains Mono (identificadores legais).

   Os tokens de cor são cópia literal de
   `APP-Lexlys/lexlys-web/src/styles/index.css` — contraste já auditado em AA
   naquele arquivo. Não introduzir cor nova sem passar pela mesma auditoria.
   ============================================================================= */

/* ============ Fontes (self-hosted; zero requisição a terceiro) ============ */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/Inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/Inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/Lora-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/Lora-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Lora';
  font-style: italic;
  font-weight: 400 500;
  font-display: swap;
  src: url('../fonts/Lora-latin-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('../fonts/JetBrainsMono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============ Tokens ============ */

:root {
  /* O site é claro por definição — as seções escuras são decisão de ritmo, não
     tema alternativo. Sem esta linha, Chrome e Samsung Internet no Android
     tratam a página como candidata ao escurecimento automático quando o sistema
     está em modo escuro, e reescrevem as cores por conta própria: o papel
     #fafaf7 chega ao visitante como cinza. Declarar `light` diz ao navegador
     que a página cuida do próprio tema.
     Se um dia houver modo escuro de verdade, isto vira `light dark`. */
  color-scheme: light;

  /* Cor — cópia literal do produto (lexlys-web/src/styles/index.css) */
  --lex-ink: #0b0b0f;
  /* A SUPERFÍCIE escura usa a linguagem quente da marca (matiz 34, a da
     prancha oficial); a TINTA acima permanece neutra. Não são a mesma
     coisa: tinta é texto e ênfase (botão primário, skip-link), superfície
     é a faixa escura em que a seção vive. Espelha `--lex-surface-inverse`
     do app — site e app são a mesma Suitlys (PD-043). */
  --lex-surface-inverse: #120e08;
  --lex-ink-2: #1c1c24;
  /* Ouro = a cor da marca (símbolo `images/suitlys-mark.png`). Sobre tinta ela
     tem 10.9:1 de contraste e é onde a identidade deve aparecer inteira. */
  --lex-gold: #ffb563;
  --lex-gold-soft: #ffc98d;
  /* A MESMA identidade, escurecida para sobreviver ao papel: #ffb563 sobre
     #f1efea dá 1.57:1 e simplesmente some. Este dá 5.03:1 e passa AA.
     Não é uma segunda cor de marca — é a marca em superfície clara. */
  --lex-gold-paper: #995000;
  --lex-paper: #fafaf7;
  --lex-paper-2: #f1efea;
  --lex-mute: #6b6b73;
  --lex-mute-inverse: #9b9ba4;
  --lex-line: #e5e1d8;

  --lex-success: #2b7454;
  --lex-warn: #8a6213;
  --lex-danger: #a12e2e;
  --lex-info: #2a4a7f;
  --lex-focus: #8f6614;

  --lex-on-ink: var(--lex-paper);
  --lex-on-paper: var(--lex-ink);

  /* Linha sobre superfície escura — o --lex-line é de papel e some no ink */
  --lex-line-inverse: rgba(250, 250, 247, 0.12);

  /* --gold é o ouro RESOLVIDO pela superfície onde o elemento está. O padrão é
     papel, porque é o fundo da maior parte da página; superfície escura devolve
     a marca cheia logo abaixo. Consumir sempre `--gold`, nunca `--lex-gold`
     direto: é o que impede um acento invisível de escapar para produção. */
  --gold: var(--lex-gold-paper);

  /* Mesma ideia do --gold para filete e texto secundário: o valor certo depende
     da superfície onde o elemento está, não de onde ele foi escrito. Consumir
     estes em componente que pode viver nas duas — foi o que permitiu os pontos
     cegos migrarem do ink para o papel sem reescrever regra. */
  --line-surface: var(--lex-line);
  --mute-surface: var(--lex-mute);

  /* Geometria */
  --wrap: 1160px;
  --wrap-narrow: 760px;
  --header-h: 68px;
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-pill: 999px;

  /* Sombra — só a camada flutuante tem sombra; conteúdo é plano e emoldurado */
  --shadow-float: 0 12px 32px -8px rgba(11, 11, 15, 0.16),
    0 2px 8px -2px rgba(11, 11, 15, 0.08);
  --shadow-deep: 0 32px 64px -16px rgba(11, 11, 15, 0.5);

  /* Motion — orçamento herdado do produto (PD-024) */
  --motion-fast: 150ms;
  --motion-base: 200ms;
  --motion-slow: 250ms;
  --ease-out: cubic-bezier(0, 0, 0.2, 1);

  /* Tipografia fluida */
  --t-xs: 0.75rem;
  --t-sm: 0.8125rem;
  --t-md: 0.875rem;
  --t-base: 1rem;
  --t-lg: clamp(1.0625rem, 1.02rem + 0.22vw, 1.1875rem);
  --t-xl: clamp(1.1875rem, 1.1rem + 0.38vw, 1.375rem);
  --t-h3: clamp(1.25rem, 1.14rem + 0.55vw, 1.5rem);
  --t-h2: clamp(1.75rem, 1.42rem + 1.65vw, 2.625rem);
  --t-h1: clamp(2.125rem, 1.68rem + 2.22vw, 3.25rem);

  --sect-y: clamp(72px, 8vw, 128px);
}

/* ============ Reset e base ============ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Âncora nunca cai atrás do header fixo. Vale para link externo profundo,
     onde o offset em JS não roda. */
  scroll-padding-top: calc(var(--header-h) + 16px);
}

/* ---- Telas grandes: sobe a ESCALA, não a medida ----
   Todos os `clamp()` de tipografia batem no teto por volta de 1130px de
   viewport. De lá até 1920 a página ganhava 800px de margem e nenhum pixel de
   texto — daí a sensação de parágrafo espremido numa moldura grande.

   Alargar a linha seria o conserto errado: 52–62 caracteres por linha já é o
   meio da faixa de leitura, e passar disso cansa. Aumentando o corpo, a mesma
   coluna se preenche com MENOS caracteres por linha, e a página lê como
   generosa em vez de vazia.

   Percentual, nunca px: `font-size: 17px` no html atropelaria quem aumentou a
   fonte padrão no navegador. Percentual multiplica a preferência da pessoa. */
@media (min-width: 1600px) {
  html {
    font-size: 106.25%;
  }
  :root {
    --wrap: 1320px;
  }
}
@media (min-width: 1920px) {
  html {
    font-size: 112.5%;
  }
  :root {
    --wrap: 1400px;
  }
}

body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: var(--t-base);
  line-height: 1.6;
  color: var(--lex-ink);
  background: var(--lex-paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Nenhuma largura pode gerar barra horizontal — guarda dos 7 viewports */
  overflow-x: hidden;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
}

h1,
h2,
h3,
h4 {
  font-family: 'Lora', Georgia, serif;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h1 {
  font-size: var(--t-h1);
}
h2 {
  font-size: var(--t-h2);
}
h3 {
  font-size: var(--t-h3);
  letter-spacing: -0.01em;
}

p {
  margin: 0 0 1em;
  text-wrap: pretty;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

::selection {
  background: var(--lex-gold-soft);
  color: var(--lex-ink);
}

/* Foco — indicador único do sistema. Ocre sobre papel (o dourado de identidade
   mede 2.15:1 e reprova como indicador); dourado sobre tinta, onde tem 7:1+. */
:focus-visible {
  outline: 2px solid var(--lex-focus);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
.on-ink :focus-visible,
.on-ink:focus-visible {
  outline-color: var(--gold);
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 200;
  padding: 12px 20px;
  background: var(--lex-ink);
  color: var(--lex-on-ink);
  border-radius: var(--r-md);
  font-size: var(--t-md);
  font-weight: 600;
  transition: top var(--motion-base) var(--ease-out);
}
.skip-link:focus {
  top: 16px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ============ Utilitários de escrita ============ */

.mono {
  font-family: 'JetBrains Mono', ui-monospace, Consolas, monospace;
  font-feature-settings: 'tnum';
  font-size: 0.92em;
  letter-spacing: -0.01em;
}

.editorial {
  font-family: 'Lora', Georgia, serif;
}

/* ============ Layout ============ */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 40px);
}

/* Superfície escura: a marca aparece inteira. O `.mock` é cartão de papel e
   reverte, mesmo quando mora dentro de uma seção tinta. */
.on-ink,
.section--ink,
.hero,
.site-header,
.site-footer {
  --gold: var(--lex-gold);
  --line-surface: var(--lex-line-inverse);
  --mute-surface: var(--lex-mute-inverse);
}
/* Ilhas de PAPEL dentro de seção escura: o mock e a tabela de comparação têm
   fundo claro próprio, então precisam desfazer a inversão herdada. Sem isto o
   ouro cheio (#ffb563) cai sobre papel e dá 1.57:1 — o acento simplesmente
   some. Componente de fundo claro dentro de `.on-ink` entra nesta lista. */
.mock,
.compare-scroll {
  --gold: var(--lex-gold-paper);
  --line-surface: var(--lex-line);
  --mute-surface: var(--lex-mute);
}

.section {
  padding: var(--sect-y) 0;
}

.section--ink {
  background: var(--lex-surface-inverse);
  color: var(--lex-on-ink);
}
.section--ink h1,
.section--ink h2,
.section--ink h3,
.section--ink h4 {
  color: var(--lex-on-ink);
}

.section--paper-2 {
  background: var(--lex-paper-2);
}

/* ---- Seção com vídeo de ambiente ----
   O conteúdo sobe para z-index 1 porque o vídeo é `absolute` e cobriria o
   formulário.

   28% é o TETO medido, não um gosto: acima de ~0.30 o pico dos filamentos leva
   o fundo a 74/255 e o `.lead` cai para 3.27:1, reprovando AA. A 0.28 o pico
   fica em 43 e o lead em 5.22:1.
   E o ajuste é aqui, nunca na opacidade do `.form-panel`: o painel é opaco de
   propósito, para que rótulo e campo nunca tenham fundo em movimento atrás. */
.section--ambiente {
  position: relative;
  overflow: hidden;
}
.ambient-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.28;
  pointer-events: none;
}
.section--ambiente > .wrap {
  position: relative;
  z-index: 1;
}

/* Cabeçalho de seção é CENTRALIZADO por padrão, como no site_assetlys.
   Antes era alinhado à esquerda: dentro de um `.wrap` de 1160px, um bloco de
   760px deixava 360px de vazio só do lado direito, e a página parecia torta.
   Aqui o texto centraliza junto porque o conteúdo é curto — rótulo, título e
   uma ou duas linhas. Bloco longo centraliza a CAIXA e mantém o texto à
   esquerda (ver `.faq` e `.feature--solo`): prosa centralizada cansa a leitura. */
.section-head {
  max-width: var(--wrap-narrow);
  margin-left: auto;
  margin-right: auto;
  margin-bottom: clamp(40px, 5vw, 64px);
  text-align: center;
}
.section-head .eyebrow {
  justify-content: center;
}
.section-head .lead {
  margin-inline: auto;
}
/* Cabeçalho que carrega MAIS DE UM parágrafo é texto longo, não legenda: o
   título segue centralizado, a prosa volta para a esquerda. Centralizada, uma
   frase de quatro linhas faz o olho procurar onde a próxima começa. */
.section-head:has(.lead + .lead) .lead {
  text-align: left;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lex-mute);
  margin-bottom: 20px;
}
.eyebrow::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--gold);
}
.section--ink .eyebrow {
  color: var(--lex-mute-inverse);
}

.lead {
  font-size: var(--t-lg);
  color: var(--lex-mute);
  max-width: 62ch;
  margin-bottom: 0;
}
/* NENHUM `ch` aqui dentro. A unidade mede o glifo "0" da fonte DO PRÓPRIO
   elemento, e na Inter variável o "0" do peso 500 é mais largo que o do 400 —
   então `.lead--claim`, que é 500, ganhava uma caixa maior que a dos vizinhos e,
   centrado por `margin-inline: auto`, começava alguns pixels à esquerda deles.
   Passar a medida para custom property NÃO resolve: propriedade não registrada
   é substituída como token e continua sendo resolvida no elemento que a usa.
   Dentro do cabeçalho quem dá a medida é o próprio `.section-head` (760px, já
   na faixa de leitura), e todos os leads ficam exatamente da mesma largura. */
.section-head .lead {
  max-width: none;
  width: 100%;
}
/* Leads em sequência: o `margin-bottom: 0` acima colaria os parágrafos. */
.lead + .lead {
  margin-top: 18px;
}
/* A afirmação que a seção existe para sustentar — tinta cheia, não recuada. */
.lead--claim {
  color: var(--lex-ink);
  font-weight: 500;
}
.section--ink .lead--claim {
  color: var(--lex-on-ink);
}
.section--ink .lead {
  color: var(--lex-mute-inverse);
}

/* ============ Botões ============ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 12px 24px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font-size: var(--t-md);
  font-weight: 600;
  text-align: center;
  transition:
    background var(--motion-base) var(--ease-out),
    border-color var(--motion-base) var(--ease-out),
    color var(--motion-base) var(--ease-out);
}

.btn--primary {
  background: var(--lex-ink);
  color: var(--lex-on-ink);
}
.btn--primary:hover {
  background: var(--lex-ink-2);
}

.btn--secondary {
  background: transparent;
  border-color: var(--lex-line);
  color: var(--lex-ink);
}
.btn--secondary:hover {
  border-color: var(--lex-ink);
  background: var(--lex-paper-2);
}

/* Sobre tinta, os papéis se invertem */
.on-ink .btn--primary,
.section--ink .btn--primary {
  background: var(--gold);
  color: var(--lex-ink);
}
.on-ink .btn--primary:hover,
.section--ink .btn--primary:hover {
  background: var(--lex-gold-soft);
}
.on-ink .btn--secondary,
.section--ink .btn--secondary {
  border-color: var(--lex-line-inverse);
  color: var(--lex-on-ink);
}
.on-ink .btn--secondary:hover,
.section--ink .btn--secondary:hover {
  border-color: var(--lex-on-ink);
  background: rgba(250, 250, 247, 0.06);
}

.btn--sm {
  min-height: 38px;
  padding: 8px 16px;
  font-size: var(--t-sm);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.section-head .btn-row {
  margin-top: 32px;
}
/* Empilhado, o par de ações tem a MESMA largura — herda PD-018 do produto:
   botão secundário estreito ao lado de um largo lê como hierarquia acidental. */
@media (max-width: 479px) {
  .btn-row .btn {
    width: 100%;
  }
}

/* ============ Selo de estado (PD-022: sem pílula, atenção nunca veste ouro) == */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: var(--r-sm);
  border: 1px solid;
  font-size: var(--t-xs);
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}
.chip--neutral {
  color: var(--lex-mute);
  border-color: var(--lex-line);
  background: var(--lex-paper-2);
}
.chip--success {
  color: var(--lex-success);
  border-color: color-mix(in srgb, var(--lex-success) 30%, transparent);
  background: color-mix(in srgb, var(--lex-success) 8%, transparent);
}
.chip--warn {
  color: var(--lex-warn);
  border-color: color-mix(in srgb, var(--lex-warn) 30%, transparent);
  background: color-mix(in srgb, var(--lex-warn) 8%, transparent);
}
.chip--danger {
  color: var(--lex-danger);
  border-color: color-mix(in srgb, var(--lex-danger) 30%, transparent);
  background: color-mix(in srgb, var(--lex-danger) 8%, transparent);
}
.chip--info {
  color: var(--lex-info);
  border-color: color-mix(in srgb, var(--lex-info) 30%, transparent);
  background: color-mix(in srgb, var(--lex-info) 8%, transparent);
}

/* ============ Reveal ============ */

.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity var(--motion-slow) var(--ease-out),
    transform var(--motion-slow) var(--ease-out);
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
.reveal.d1 {
  transition-delay: 60ms;
}
.reveal.d2 {
  transition-delay: 120ms;
}
.reveal.d3 {
  transition-delay: 180ms;
}
.reveal.d4 {
  transition-delay: 240ms;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============ Header ============ */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition:
    background var(--motion-slow) var(--ease-out),
    border-color var(--motion-slow) var(--ease-out);
  border-bottom: 1px solid transparent;
}
.site-header--solid {
  background: color-mix(in srgb, var(--lex-surface-inverse) 92%, transparent);
  border-bottom-color: var(--lex-line-inverse);
  backdrop-filter: blur(12px);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* A palavra deixou de ser desenhada em CSS: o lockup oficial já traz símbolo e
   nome no mesmo arquivo. Altura fixa e largura automática — a proporção do
   arquivo é 2,79:1 e quem manda nela é a arte, não o CSS. */
.logo {
  display: inline-flex;
  align-items: center;
}
.logo-lockup {
  width: auto;
  height: 42px;
}

.main-nav {
  display: none;
  align-items: center;
  gap: 28px;
}
.main-nav a {
  font-size: var(--t-md);
  font-weight: 500;
  color: rgba(250, 250, 247, 0.72);
  transition: color var(--motion-base) var(--ease-out);
}
.main-nav a:hover {
  color: var(--lex-on-ink);
}

.header-actions {
  display: none;
  align-items: center;
  gap: 10px;
}

/* ---- Seletor de idioma ----
   Gatilho compacto (globo + sigla) que abre a lista, em vez das três opções
   sempre à vista: com o menu, o cabeçalho gasta a largura de um botão e não de
   três — e a lista cabe um quarto idioma sem redesenhar o header.
   Sem bandeira em emoji (PD-009): o nome do idioma diz melhor e não depende de
   como cada sistema operacional desenha o emoji. */
.lang {
  position: relative;
}
.lang-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 10px;
  background: none;
  border: 1px solid var(--lex-line-inverse);
  border-radius: var(--r-pill);
  color: var(--lex-mute-inverse);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  transition:
    color var(--motion-base) var(--ease-out),
    border-color var(--motion-base) var(--ease-out);
}
.lang-trigger:hover,
.lang-trigger[aria-expanded='true'] {
  color: var(--lex-on-ink);
  border-color: var(--gold);
}
.lang-trigger > svg {
  width: 14px;
  height: 14px;
  flex: none;
}
.lang-chevron {
  width: 10px !important;
  height: 10px !important;
  transition: transform var(--motion-base) var(--ease-out);
}
.lang-trigger[aria-expanded='true'] .lang-chevron {
  transform: rotate(180deg);
}

.lang-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 120;
  /* Largura pelo conteúdo, não fixa: com 190px sobrava um vão à direita de
     "Português", o rótulo mais longo. O 100% só garante que o painel nunca
     fique mais estreito que o gatilho. */
  min-width: 100%;
  padding: 6px;
  background: var(--lex-ink-2);
  border: 1px solid var(--lex-line-inverse);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-deep);
}
.lang-menu.is-open {
  display: block;
}
.lang-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 40px;
  padding: 0 10px;
  background: none;
  border: 0;
  border-radius: var(--r-sm);
  color: var(--lex-mute-inverse);
  font-size: var(--t-md);
  text-align: left;
  transition:
    color var(--motion-fast) var(--ease-out),
    background var(--motion-fast) var(--ease-out);
}
.lang-item:hover {
  background: rgba(250, 250, 247, 0.06);
  color: var(--lex-on-ink);
}
.lang-item[aria-selected='true'] {
  color: var(--gold);
}
/* Bandeira é a única exceção ao "sem emoji" (PD-009): aqui ela identifica um
   idioma, que é função — não decora conversa. Não abre precedente para o resto
   da interface.

   O Windows não desenha bandeira: o emoji degrada para o par de letras
   regionais ("BR", "US", "ES"). É por isso que o item NÃO repete a sigla ao
   lado — no Windows sairia o mesmo código duas vezes na mesma linha. A largura
   fixa alinha os três nomes, com bandeira de verdade ou com as letras. */
.lang-flag {
  width: 22px;
  flex: none;
  font-size: 1rem;
  line-height: 1;
  letter-spacing: 0;
}
.lang-nome {
  flex: 1;
}

/* No painel mobile as opções ficam À VISTA, sem gatilho.
   Dois motivos: `.mobile-nav` rola (`overflow-y: auto`), e filho posicionado
   em absolute não escapa de contêiner que rola — o menu era cortado no pé do
   painel. E abrir uma camada dentro de outra já aberta é sobreposição em cima
   de sobreposição, que confunde onde o toque cai. O painel tem altura de sobra. */
.lang--mobile {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--lex-line-inverse);
}
.lang--mobile .lang-trigger {
  display: none;
}
.lang--mobile .lang-menu {
  display: block;
  position: static;
  min-width: 0;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}
.lang--mobile .lang-item {
  min-height: 44px;
  padding: 0 4px;
  font-size: var(--t-base);
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  background: none;
  border: 0;
  color: var(--lex-on-ink);
}
.nav-toggle svg {
  width: 24px;
  height: 24px;
}
.nav-toggle .icon-close {
  display: none;
}
.nav-toggle[aria-expanded='true'] .icon-open {
  display: none;
}
.nav-toggle[aria-expanded='true'] .icon-close {
  display: block;
}

.mobile-nav {
  position: fixed;
  inset: var(--header-h) 0 auto 0;
  z-index: 95;
  display: none;
  flex-direction: column;
  padding: 12px clamp(20px, 4vw, 40px) 28px;
  background: var(--lex-surface-inverse);
  border-bottom: 1px solid var(--lex-line-inverse);
  max-height: calc(100dvh - var(--header-h));
  overflow-y: auto;
}
.mobile-nav.is-open {
  display: flex;
}
.mobile-nav a:not(.btn) {
  padding: 14px 0;
  font-size: var(--t-lg);
  color: rgba(250, 250, 247, 0.86);
  border-bottom: 1px solid var(--lex-line-inverse);
}
.mobile-nav .btn {
  margin-top: 20px;
}

@media (min-width: 1024px) {
  .main-nav,
  .header-actions {
    display: flex;
  }
  .nav-toggle {
    display: none;
  }
  .mobile-nav {
    display: none !important;
  }
}

/* ============ Hero ============ */

.hero {
  position: relative;
  background: var(--lex-surface-inverse);
  color: var(--lex-on-ink);
  /* Folga menor acima do título: com 112px o visitante abria o site e via
     sobretudo espaço. O header tem 68px próprios e é transparente aqui, então
     a soma ainda dá respiro de sobra sem o texto encostar nele. */
  padding: calc(var(--header-h) + clamp(32px, 5vw, 72px)) 0
    clamp(64px, 8vw, 112px);
  overflow: hidden;
}
/* Luz quente incidindo no papel — não é glow tech. Opacidade deliberadamente
   baixa; a identidade não pode virar decoração. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 900px 560px at 62% 32%,
    rgba(255, 181, 99, 0.09),
    transparent 68%
  );
  pointer-events: none;
}
.hero .wrap {
  position: relative;
}

.hero-grid {
  display: grid;
  gap: clamp(40px, 6vw, 72px);
  align-items: center;
}

.hero h1 {
  margin-bottom: 24px;
}
.hero h1 em {
  font-style: normal;
  color: var(--gold);
}
.hero-sub {
  font-size: var(--t-lg);
  color: rgba(250, 250, 247, 0.74);
  max-width: 54ch;
  margin-bottom: 32px;
}

.hero-note {
  margin: 28px 0 0;
  font-size: var(--t-sm);
  color: var(--lex-mute-inverse);
}

@media (min-width: 1024px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  }
}

/* ============ Mock de tela ============ */

.mock {
  border: 1px solid var(--lex-line);
  border-radius: var(--r-xl);
  background: var(--lex-paper);
  color: var(--lex-ink);
  overflow: hidden;
  box-shadow: var(--shadow-float);
}
.section--ink .mock,
.hero .mock {
  border-color: rgba(250, 250, 247, 0.16);
  box-shadow: var(--shadow-deep);
}
/* O mock é papel dentro de seção escura. Sem isto os títulos herdam
   `.section--ink h1..h4` e ficam cream sobre cream — invisíveis. */
.section--ink .mock h1,
.section--ink .mock h2,
.section--ink .mock h3,
.section--ink .mock h4 {
  color: var(--lex-ink);
}

.mock-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--lex-paper-2);
  border-bottom: 1px solid var(--lex-line);
  font-size: var(--t-xs);
  color: var(--lex-mute);
}
.mock-bar .mock-route {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: -0.02em;
}
.mock-bar::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  flex: none;
}

.mock-body {
  padding: clamp(14px, 2vw, 20px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.mock-eyebrow {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lex-mute);
}

.mock-title {
  font-family: 'Lora', Georgia, serif;
  font-size: var(--t-xl);
  letter-spacing: -0.02em;
  margin: 0;
}
.mock-sub {
  margin: 4px 0 0;
  color: var(--lex-mute);
}

.mock-list {
  border: 1px solid var(--lex-line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.mock-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  font-size: var(--t-sm);
  border-bottom: 1px solid var(--lex-line);
}
.mock-row:last-child {
  border-bottom: 0;
}
.mock-row .grow {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Bloco de proveniência da IA — a assinatura do Suitlys: nenhuma leitura
   aparece sem modelo, versão de prompt, confiança e o porquê. */
.mock-prov {
  padding: 12px;
  border: 1px solid var(--lex-line);
  border-left: 3px solid var(--gold);
  border-radius: var(--r-md);
  background: var(--lex-paper-2);
  font-size: var(--t-sm);
}
.mock-prov p {
  margin: 0 0 8px;
  color: var(--lex-ink);
}
/* ---- Ficha do processo: abas, linha do tempo e aviso ---- */

.mock-abas {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--lex-line);
  font-size: var(--t-xs);
  color: var(--lex-mute);
}
.mock-aba.is-ativa {
  color: var(--lex-ink);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--gold);
}
/* Coluna de data com largura fixa: alinha os fatos, não as datas. */
.mock-quando {
  flex: none;
  width: 46px;
  font-size: var(--t-xs);
  color: var(--lex-mute);
}
.mock-list .mock-row small {
  display: block;
  margin-top: 2px;
  font-size: var(--t-xs);
  color: var(--lex-mute);
}
/* O aviso do que falta: âmbar semântico, sem virar alarme. */
.mock-aviso {
  margin: 0;
  padding: 10px 12px;
  border-left: 2px solid var(--lex-warn);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: color-mix(in srgb, var(--lex-warn) 7%, transparent);
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--lex-ink-2);
}

/* ---- Cockpit: duas colunas + horizonte (ver .ai/proposals/cockpit) ---- */

.mock-cols {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
}
@media (min-width: 560px) {
  .mock-cols {
    grid-template-columns: 1fr 1fr;
  }
}
.mock-col {
  border: 1px solid var(--lex-line);
  border-radius: var(--r-md);
  padding: 14px 16px;
  background: var(--lex-paper);
}
/* O ponto dourado marca peso jurídico — só a coluna do que o mundo impõe. */
.mock-eyebrow--gold::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--gold);
  vertical-align: middle;
}
.mock-col .mock-row small {
  display: block;
  margin-top: 2px;
  font-size: var(--t-xs);
  color: var(--lex-mute);
}
/* Alinha com a primeira linha do item, não com o meio dele — o horário
   pertence ao título, e a linha de baixo é o processo. */
.mock-hora {
  align-self: flex-start;
  font-size: var(--t-xs);
  color: var(--lex-mute);
  white-space: nowrap;
}
.mock-chegou {
  margin: 0 0 12px;
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--lex-mute);
}
.mock-chegou b {
  color: var(--lex-ink);
  font-weight: 600;
}
.mock-tarefas {
  padding-top: 14px;
  border-top: 1px solid var(--lex-line);
}
.mock-tarefas .mock-eyebrow {
  margin: 0 0 6px;
}
.mock-tarefas .mock-row {
  font-size: var(--t-sm);
}
/* A última tarefa não tem borda embaixo (`.mock-row:last-child`), então o
   respiro dela deixou de separar linhas e virou espaço morto antes do
   horizonte — que já traz o próprio recuo e o próprio filete. */
.mock-tarefas .mock-row:last-child {
  padding-bottom: 2px;
}
/* `.mock-acao` é sublinhado: como parágrafo esticaria a linha dourada por toda
   a largura. Inline-block a mantém do tamanho do texto. */
.mock-tarefas .mock-acao {
  display: inline-block;
  margin: 10px 0 0;
  font-size: var(--t-xs);
}

/* O horizonte responde "até onde posso relaxar?" — texto solto, sem moldura,
   porque não é item de lista: é a leitura do que vem depois de hoje.
   Sem filete nem recuo próprio de propósito: ele já se separa por cor e por
   tamanho, e o `gap` do `.mock-body` basta. A linha era redundante e custava
   15px de altura num cartão que precisa caber ao lado do texto. */
.mock-horizonte {
  margin: 0;
  font-size: var(--t-sm);
  line-height: 1.7;
  color: var(--lex-mute);
}

/* A corrente de datas: disponibilização → publicação → início da contagem.
   Em mono porque são valores legais, como o CNJ. */
.mock-datas {
  margin: 0;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: var(--t-xs);
  line-height: 1.7;
  color: var(--lex-mute);
}
.mock-datas span {
  color: var(--lex-ink-2);
}
/* Afordância de link: a proveniência é para ser aberta, não só declarada. */
.mock-acao {
  color: var(--lex-ink);
  border-bottom: 1px solid var(--gold);
  padding-bottom: 1px;
}

.mock-prov-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: var(--t-xs);
  color: var(--lex-mute);
}

/* ============ Grade de cartões ============ */

.grid {
  display: grid;
  gap: clamp(16px, 2vw, 24px);
}
.grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}
.grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

/* Os nove pontos cegos são filhos DIRETOS da grade, e não três colunas de três.
   Dois ganhos: as linhas rimam sozinhas, porque itens da mesma linha dividem a
   faixa da grade; e a leitura volta a ser horizontal — antes a primeira linha
   era 01, 04, 07, e o olho tinha de descer e voltar.
   Colunas fixas em vez de `auto-fit`: com nove itens o auto-fit abriria quatro
   colunas em 1160px e quebraria a contagem em três. */
.grid--cegos {
  grid-template-columns: 1fr;
}
@media (min-width: 600px) {
  .grid--cegos {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 900px) {
  .grid--cegos {
    grid-template-columns: repeat(3, 1fr);
  }
}
.grid--4 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  /* Cinco faixas: selo · nome · tamanho · para-quem · lista. Os cartões herdam
     estas trilhas por subgrid (ver `.plan`), que é o que mantém filete e lista
     na mesma altura nos quatro. Mexeu no número de filhos do cartão, mexe aqui. */
  grid-template-rows: repeat(5, auto);
}

.card {
  padding: clamp(20px, 2.5vw, 28px);
  border: 1px solid var(--lex-line);
  border-radius: var(--r-lg);
  background: var(--lex-paper);
}
.section--paper-2 .card {
  background: var(--lex-paper);
}
.section--ink .card {
  background: var(--lex-ink-2);
  border-color: var(--lex-line-inverse);
}
.card h3 {
  margin-bottom: 8px;
}
.card p:last-child {
  margin-bottom: 0;
  color: var(--lex-mute);
  font-size: var(--t-md);
}
.section--ink .card p:last-child {
  color: var(--lex-mute-inverse);
}

/* ============ Pontos cegos ============ */

/* Nove itens em paralelo, com o índice em mono. NÃO agrupar em bandas nomeadas:
   já foi tentado e saiu pior. Os três rótulos eram frases de sete palavras em
   versalete espaçado e dourado — tratamento que só serve a rótulo de uma ou
   duas palavras —, somavam um quarto acento de ouro à seção que já tinha o
   `.eyebrow`, e a taxonomia não fechava (verificação de conflito não é "o que
   ficou fora do sistema"). O índice não promete sequência: promete paralelo,
   que é o que estes nove são. */
.blindspot {
  display: flex;
  gap: 14px;
  padding: 18px 0;
  border-top: 1px solid var(--line-surface);
}
.blindspot-idx {
  flex: none;
  width: 26px;
  padding-top: 4px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: var(--t-xs);
  color: var(--gold);
}
.blindspot h3 {
  font-size: var(--t-lg);
  margin-bottom: 4px;
}
.blindspot p {
  margin: 0;
  font-size: var(--t-md);
  color: var(--mute-surface);
}

/* ============ Camadas (Operação · Inteligência · Estratégia) ============ */

/* Subgrid: as quatro faixas do cartão — número, rótulo, título e lista — usam
   as MESMAS trilhas da grade externa, então rimam entre os três cartões mesmo
   com listas de tamanhos diferentes. Antes a lista era empurrada para o pé com
   `margin-top: auto`, e o filete que separa título de lista pousava em altura
   diferente em cada cartão. */
.grid--camadas {
  grid-template-columns: 1fr;
  grid-template-rows: repeat(4, auto);
}
@media (min-width: 900px) {
  .grid--camadas {
    grid-template-columns: repeat(3, 1fr);
  }
}
.layer {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 4;
  padding: clamp(24px, 3vw, 32px);
  border: 1px solid var(--lex-line);
  border-radius: var(--r-lg);
  background: var(--lex-paper);
}
.layer-num {
  margin-bottom: 20px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: var(--t-xs);
  color: var(--gold);
}
.layer-name {
  margin-bottom: 10px;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lex-mute);
}
.layer h3 {
  margin-bottom: 20px;
}
.layer ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-content: start;
  padding-top: 20px;
  border-top: 1px solid var(--lex-line);
  font-size: var(--t-sm);
  color: var(--lex-mute);
}
/* O separador ABRE o item, não fecha o anterior. Como `::after` ele pertencia
   ao item de trás, e numa lista `flex-wrap` sobrava pendurado no fim de toda
   linha quebrada — três vezes só no cartão Operação. Não voltar para `::after`. */
.layer li + li::before {
  content: '· ';
  color: var(--lex-line);
}

/* ============ Bloco alternado: texto + mock ============ */

.feature {
  display: grid;
  gap: clamp(28px, 4vw, 56px);
  /* Topo, não centro: as duas colunas têm alturas bem diferentes (chega a 251px
     de diferença), e centralizadas a mais curta ficava pendurada com vazio em
     cima e embaixo. O olho lê a partir do canto superior — par alinhado pelo
     topo parece decisão; centralizado parece sobra. */
  align-items: start;
  padding: clamp(40px, 5vw, 72px) 0;
  border-top: 1px solid var(--lex-line);
}
.section--ink .feature {
  border-top-color: var(--lex-line-inverse);
}
.feature:first-of-type {
  border-top: 0;
  padding-top: 0;
}
/* h2 e h3 juntos: em `#operacao` o título da coluna É o H2 da seção, e nas
   demais é H3. Mesmo peso visual nos dois casos. */
.feature-copy h3,
.feature-copy h2 {
  font-size: var(--t-h2);
  margin-bottom: 16px;
}
/* Quando a seção não tem `section-head`, o rótulo da camada vive junto do
   título — sozinho num head vazio, ele fica órfão a 84px do conteúdo. */
.feature-copy .eyebrow {
  margin-bottom: 14px;
}
.feature-copy > p {
  max-width: 52ch;
  color: var(--lex-mute);
}
.section--ink .feature-copy > p {
  color: var(--lex-mute-inverse);
}
.feature-points {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 24px;
}
.feature-points li {
  display: flex;
  gap: 10px;
  font-size: var(--t-md);
  line-height: 1.55;
}
.feature-points li::before {
  content: '';
  flex: none;
  width: 6px;
  height: 6px;
  margin-top: 9px;
  border-radius: 50%;
  background: var(--gold);
}

@media (min-width: 1024px) {
  .feature {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  }
  .feature--reverse .feature-copy {
    order: 2;
  }
}

/* Bloco de largura inteira: quebra a cadência texto-esquerda/mock-direita, que
   se repetia quatro vezes seguidas no miolo. Texto na medida de leitura,
   centralizado como CAIXA (não como texto), e o mock inteiro embaixo. */
.feature--wide {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
}
.feature--wide .feature-copy {
  max-width: var(--wrap-narrow);
  text-align: center;
}
.feature--wide .feature-copy > p {
  max-width: 62ch;
  margin-inline: auto;
}
.feature--wide .mock {
  width: min(100%, 720px);
}
@media (min-width: 1024px) {
  .feature--wide {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ============ Confiança ============ */

/* Sem caixa e sem ícone de propósito: uma seção que existe para sustentar
   confiança e se enfeita perde exatamente o que veio buscar. O filete e a
   disciplina do espaçamento SÃO o argumento. */
.grid--confianca {
  grid-template-columns: 1fr;
  gap: clamp(24px, 3vw, 36px);
}
@media (min-width: 640px) {
  .grid--confianca {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 960px) {
  .grid--confianca {
    grid-template-columns: repeat(3, 1fr);
  }
}
.trust {
  padding-top: 18px;
  border-top: 1px solid var(--gold);
}
.trust h3 {
  font-size: var(--t-base);
  font-weight: 600;
  font-family: 'Inter', system-ui, sans-serif;
  margin-bottom: 6px;
}
.trust p {
  margin: 0;
  font-size: var(--t-md);
  color: var(--lex-mute);
}

/* ============ Comparação por categoria ============ */

.compare-scroll {
  overflow-x: auto;
  border: 1px solid var(--lex-line);
  border-radius: var(--r-lg);
  background: var(--lex-paper);
}
.compare {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-size: var(--t-md);
}
.compare th,
.compare td {
  padding: 14px 16px;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--lex-line);
}
.compare thead th {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--lex-mute);
  background: var(--lex-paper-2);
}
.compare tbody th {
  font-weight: 500;
  color: var(--lex-ink);
}
.compare td {
  width: 132px;
  text-align: center;
}
.compare .col-lex {
  background: color-mix(in srgb, var(--gold) 7%, transparent);
}
.compare thead .col-lex {
  color: var(--lex-ink);
  background: color-mix(in srgb, var(--gold) 16%, transparent);
}
/* `tbody:last-child`, não `tbody`: são TRÊS tbody (um por banda), e sem o
   recorte a última linha de cada banda perdia o filete — as bandas colavam. */
.compare tbody:last-child tr:last-child th,
.compare tbody:last-child tr:last-child td {
  border-bottom: 0;
}

/* A banda é o argumento; as linhas abaixo dela são só a evidência. Rótulo
   pequeno e caixa alta para não competir com o conteúdo da linha — ela orienta,
   não afirma. */
.compare-banda th {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  background: var(--lex-paper-2);
  padding-top: 16px;
  padding-bottom: 12px;
}
/* A terceira banda é a única em que a coluna do Suitlys fica sozinha — é o
   ponto inteiro da seção, e por isso ela é a última e leva mais respiro. */
.compare-tb--lex .compare-banda th {
  padding-top: 22px;
}

/* No telefone a tabela tinha 620px dentro de uma caixa de 348: 272px ficavam
   fora, e o pedaço escondido era justamente a coluna do Suitlys. O visitante de
   celular via a coluna do concorrente e não a nossa, sem sinal de que havia
   mais à direita.
   Aqui a linha vira bloco: o rótulo ocupa a largura toda e as três respostas
   ficam numa grade de 3, alinhada entre todos os blocos porque todos usam a
   mesma definição de colunas.
   Os `role` no HTML existem POR CAUSA DESTE BLOCO: trocar o `display` dos
   elementos de tabela apaga a semântica nativa para leitor de tela, e sem eles
   a associação entre cabeçalho e célula se perde. */
@media (max-width: 699px) {
  /* Sem recorte para o cabeçalho poder grudar: `overflow` que não seja visible
     cria contêiner de rolagem e o sticky passa a se prender a uma caixa que não
     rola — ou seja, não gruda. O arredondamento que o recorte dava volta nas
     próprias células, abaixo. */
  .compare-scroll {
    overflow-x: visible;
  }
  .compare {
    display: block;
    min-width: 0;
  }
  .compare thead,
  .compare tbody,
  .compare tr {
    display: block;
  }
  .compare thead tr,
  .compare tbody tr {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }

  /* Gestão e Jurimetria são visualmente idênticas, e a diferença entre as duas é
     o que a tabela precisa provar (uma faz previsão, a outra faz operação). Em
     blocos os dez itens passam de mil pixels: sem grudar, o cabeçalho sairia de
     vista no segundo item e o resto da leitura seria feita sem saber qual coluna
     é qual.
     O sticky vai no THEAD, não no TR: elemento grudado só se move dentro do
     próprio pai, e o thead tem exatamente a altura da linha — não sobraria
     percurso onde grudar. No thead, o pai é a tabela inteira. */
  .compare thead {
    position: sticky;
    top: var(--header-h);
    z-index: 2;
  }
  .compare thead th:first-child {
    display: none;
  }
  .compare thead th {
    padding: 12px 8px;
    text-align: center;
  }
  .compare thead th:nth-child(2) {
    border-top-left-radius: var(--r-lg);
  }
  .compare thead th:last-child {
    border-top-right-radius: var(--r-lg);
  }

  .compare tbody tr {
    border-bottom: 1px solid var(--lex-line);
  }
  .compare tbody:last-child tr:last-child {
    border-bottom: 0;
  }
  /* Em blocos a banda não tem colunas para atravessar: vira a tarja do grupo. */
  .compare-banda th {
    padding: 14px 16px;
  }
  /* O rótulo atravessa as três colunas e vira o título do bloco. */
  .compare tbody th {
    grid-column: 1 / -1;
    padding: 16px 16px 10px;
    border-bottom: 0;
  }
  .compare tbody td {
    width: auto;
    padding: 0 8px 16px;
    border-bottom: 0;
  }
  /* Única célula com fundo no pé da tabela — sem isto ela quadra o canto. */
  .compare tbody:last-child tr:last-child .col-lex {
    border-bottom-right-radius: var(--r-lg);
  }
}

/* O rótulo fica na ponta esquerda e a resposta a mais de mil pixels dele. O
   realce não é enfeite: é o que prende o olho no trilho certo — sem ele a
   leitura escorrega para a linha vizinha no meio do caminho.
   Nada de elevar: a linha não clica. */
@media (hover: hover) {
  .compare tbody tr {
    transition: background var(--motion-base) var(--ease-out);
  }
  .compare tbody th,
  .compare tbody td {
    transition:
      background var(--motion-base) var(--ease-out),
      border-color var(--motion-base) var(--ease-out);
  }
  .compare tbody tr:hover {
    background: var(--lex-paper-2);
  }
  .compare tbody tr:hover th,
  .compare tbody tr:hover td {
    border-bottom-color: var(--gold);
  }
  /* Na linha sob o cursor a coluna do Suitlys aprofunda: enquanto se lê aquela
     capacidade, a coluna que interessa se separa mais das outras duas. */
  .compare tbody tr:hover .col-lex {
    background: color-mix(in srgb, var(--gold) 15%, transparent);
  }
}
.mark {
  display: inline-block;
  font-size: var(--t-md);
  line-height: 1;
}
.mark--yes {
  color: var(--lex-success);
}
/* O selo é exclusivo da coluna do Suitlys: é a coluna que o olho deve varrer.
   Nas outras, "Sim" fica em verde simples — marcar todas anularia o contraste
   que faz esta saltar. Sem cor nova: `--lex-success` diluído com `color-mix`,
   mesma técnica já usada no fundo de `.col-lex`. */
.col-lex .mark--yes {
  font-weight: 600;
  padding: 4px 12px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--lex-success) 14%, transparent);
}
.mark--no {
  color: var(--lex-mute);
}
.mark--partial {
  color: var(--lex-warn);
}

/* ============ Planos ============ */

/* Subgrid, como no `.layer`, e pelo mesmo motivo: "para quem é" tem tamanhos
   diferentes — Enterprise quebra numa linha a mais que os outros três —, e em
   flex isso empurrava filete e lista 25px para baixo só naquele cartão. Quatro
   cartões que existem para ser COMPARADOS não podem ter as faixas fora de
   linha. Não voltar para flex sem resolver o alinhamento de outro jeito. */
.plan {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 5;
  align-content: start;
  padding: clamp(24px, 3vw, 30px);
  border: 1px solid var(--lex-line);
  border-radius: var(--r-lg);
  background: var(--lex-paper);
}
.plan--featured {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold);
}
/* O selo ocupa uma FAIXA RESERVADA em todos os quatro cartões, mesmo nos que
   não o têm. Sem isso ele empurra o cartão marcado 37px para baixo e o nome, o
   preço, o filete e a lista saem de linha com os vizinhos — quatro cartões que
   existem para ser comparados passam a parecer avulsos. */
.plan::before {
  content: '';
  display: block;
  height: 26px;
  margin-bottom: 12px;
}
.plan--featured::before {
  display: none;
}
.plan-tag {
  align-self: flex-start;
  height: 26px;
  margin-bottom: 12px;
}
.plan-name {
  margin: 0 0 4px;
  font-family: 'Lora', Georgia, serif;
  font-size: var(--t-xl);
}
.plan-size {
  margin-bottom: 20px;
  font-size: var(--t-sm);
  color: var(--lex-mute);
}
/* Ocupa o lugar que era do preço. "Sob consulta" em Lora 1.5rem era o elemento
   mais alto do cartão e dizia a mesma coisa nos quatro — o olho parava
   justamente onde não havia diferença. Aqui o destaque carrega o que separa um
   plano do outro. Não devolver preço a esta faixa enquanto ele for igual nos
   quatro; a linha de valor vive sob a grade, em `.planos-valor`. */
.plan-para {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--lex-line);
  font-family: 'Lora', Georgia, serif;
  font-size: var(--t-lg);
  line-height: 1.35;
  text-wrap: balance;
}
.plan ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: var(--t-md);
  color: var(--lex-mute);
}

/* UM ato sob a grade, não quatro dentro dela. Os planos diferem em para quem
   são, não no que fazer a seguir: quatro botões idênticos num viewport só
   prometiam quatro caminhos que não existem. Não devolver botão ao cartão. */
.planos-pe {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  margin-top: clamp(32px, 4vw, 48px);
  text-align: center;
}
.planos-valor {
  margin: 0;
  font-size: var(--t-md);
  color: var(--lex-mute);
}

/* ============ Hover dos blocos ============ */

/* Um filete de ouro varre da esquerda para a direita, mais elevação e sombra no
   que clica. Adaptado do cartão de serviço do site da Quality Engineering, e
   contido: 3px de elevação em vez de 8, filete de 2px em ouro no lugar do
   degradê azul, sombra neutra quente.
   Ficou de fora o movimento perpétuo daquele site (flutuar, pulsar, partículas):
   a página já tem o vídeo de ambiente carregando essa função, e duas fontes de
   movimento contínuo deixam a leitura inquieta.

   NADA SOBE, e a regra é essa: elevar o que não clica promete interação que
   não existe. Plano, camada e ponto cego só ACENDEM — lê como "o cursor está
   aqui", não como "clique".
   O plano já subiu, quando cada cartão tinha o próprio botão. O botão saiu para
   sob a grade (os planos diferem em para quem são, não no que fazer a seguir),
   e a elevação saiu junto: cartão que levanta sem nada para clicar dentro é
   promessa vazia. Se algum dia voltar botão ao cartão, a elevação volta com ele.
   Pelo mesmo motivo o mock fica intacto: ele desenha uma tela do produto, e
   reagir ao mouse sugeriria que a interface está rodando dentro do site.

   `::after` e não `::before` no .plan: o ::before dele já reserva a faixa do
   selo. Absoluto nos três para o filete não virar item de flex nem ocupar
   trilha do subgrid do .layer.

   O bloco de prefers-reduced-motion já zera transição em *, ::before e ::after
   — não precisa de exceção aqui. */
@media (hover: hover) {
  .plan,
  .layer {
    position: relative;
    overflow: hidden;
    transition:
      transform var(--motion-base) var(--ease-out),
      border-color var(--motion-base) var(--ease-out),
      box-shadow var(--motion-base) var(--ease-out);
  }
  .plan::after,
  .layer::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--motion-base) var(--ease-out);
  }
  .plan:hover::after,
  .layer:hover::after {
    transform: scaleX(1);
  }

  .plan:hover {
    border-color: var(--lex-ink);
  }
  /* O cartão marcado mantém o anel de ouro que o distingue; sem isto o hover o
     rebaixaria à aparência dos outros três justo enquanto é olhado. */
  .plan--featured:hover {
    border-color: var(--gold);
    box-shadow: 0 0 0 1px var(--gold);
  }
  .layer:hover {
    border-color: var(--lex-ink);
  }

  /* O ponto cego não tem caixa — tem o filete de cima, que já existe. Então o
     efeito não desenha linha nova: acende a que está lá. Daí `top: -1px` e
     1px de altura, para cobrir exatamente a borda, e nada de overflow:hidden,
     que recortaria o filete justo por estar fora do padding box. */
  .blindspot {
    position: relative;
  }
  .blindspot::after {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--motion-base) var(--ease-out);
  }
  .blindspot:hover::after {
    transform: scaleX(1);
  }

  /* A banda é rótulo de grupo, não linha de dado: sem esta exceção ela acende
     junto e promete uma leitura que não tem colunas para ler. */
  .compare-banda:hover {
    background: var(--lex-paper-2);
  }
  .compare-banda:hover th {
    border-bottom-color: var(--lex-line);
  }
}

/* ============ FAQ ============ */

.faq {
  max-width: var(--wrap-narrow);
  margin: 0 auto;
  border-top: 1px solid var(--lex-line);
}
.faq-item {
  border-bottom: 1px solid var(--lex-line);
}
.faq-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  min-height: 60px;
  padding: 18px 0;
  background: none;
  border: 0;
  text-align: left;
  font-family: 'Lora', Georgia, serif;
  font-size: var(--t-lg);
  letter-spacing: -0.01em;
  color: var(--lex-ink);
}
.faq-trigger svg {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--lex-mute);
  transition: transform var(--motion-base) var(--ease-out);
}
.faq-item.is-open .faq-trigger svg {
  transform: rotate(45deg);
}
.faq-body {
  display: none;
  max-width: 66ch;
  padding-bottom: 22px;
}
.faq-item.is-open .faq-body {
  display: block;
}
.faq-body p {
  margin: 0;
  color: var(--lex-mute);
}

/* ============ Formulário ============ */

.form-panel {
  max-width: 620px;
  margin: 0 auto;
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid var(--lex-line-inverse);
  border-radius: var(--r-xl);
  background: var(--lex-ink-2);
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.field label {
  display: block;
  margin-bottom: 6px;
  font-size: var(--t-sm);
  font-weight: 500;
  color: rgba(250, 250, 247, 0.86);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 46px;
  padding: 11px 14px;
  font: inherit;
  font-size: var(--t-md);
  color: var(--lex-on-ink);
  background: rgba(250, 250, 247, 0.05);
  border: 1px solid var(--lex-line-inverse);
  border-radius: var(--r-md);
  transition: border-color var(--motion-base) var(--ease-out);
}
.field textarea {
  min-height: 88px;
  resize: vertical;
}
.field input:hover,
.field select:hover,
.field textarea:hover {
  border-color: rgba(250, 250, 247, 0.28);
}
.field input::placeholder,
.field textarea::placeholder {
  color: rgba(250, 250, 247, 0.38);
}
.field select {
  appearance: none;
  background-image: linear-gradient(
      45deg,
      transparent 50%,
      rgba(250, 250, 247, 0.5) 50%
    ),
    linear-gradient(135deg, rgba(250, 250, 247, 0.5) 50%, transparent 50%);
  background-position:
    calc(100% - 19px) 21px,
    calc(100% - 14px) 21px;
  background-size:
    5px 5px,
    5px 5px;
  background-repeat: no-repeat;
}
.field select option {
  color: var(--lex-on-ink);
  background: var(--lex-ink-2);
}
.field--full {
  grid-column: 1 / -1;
}

/* Honeypot: invisível para gente, preenchível por bot. Nunca `display:none` —
   parte dos bots ignora campo escondido por display. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-note {
  margin: 16px 0 0;
  font-size: var(--t-xs);
  color: var(--lex-mute-inverse);
}
.form-note a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* O caminho de quem não preenche formulário. Discreto de propósito: é saída
   alternativa, não segundo ato concorrente. */
.form-alt {
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--lex-line-inverse);
  font-size: var(--t-md);
  color: var(--lex-mute-inverse);
  text-align: center;
}
.form-alt a {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.form-msg {
  display: none;
  gap: 10px;
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: var(--r-md);
  font-size: var(--t-md);
}
.form-msg.is-shown {
  display: flex;
}
.form-msg--ok {
  color: var(--lex-paper);
  background: color-mix(in srgb, var(--lex-success) 26%, transparent);
  border: 1px solid color-mix(in srgb, var(--lex-success) 50%, transparent);
}
.form-msg--err {
  color: var(--lex-paper);
  background: color-mix(in srgb, var(--lex-danger) 24%, transparent);
  border: 1px solid color-mix(in srgb, var(--lex-danger) 50%, transparent);
}

@media (min-width: 640px) {
  .form-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ============ Rodapé ============ */

/* Faixa única: marca · links · copyright, como no site_assetlys. Empilha e
   centraliza no estreito; vira linha no largo. O parágrafo legal de três linhas
   que existia aqui virou uma frase só, na tarja de baixo — ele ocupava metade
   da largura e deixava o outro lado vazio. */
.site-footer {
  padding: 36px 0 0;
  background: var(--lex-surface-inverse);
  color: var(--lex-mute-inverse);
  font-size: var(--t-md);
}
.site-footer > .wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
  padding-bottom: 28px;
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: 14px;
}
.footer-tagline {
  font-size: var(--t-sm);
}
/* Mapa da própria página: sem ele, quem chegou ao fim rola de volta ao topo
   para achar qualquer seção. Fica acima dos links legais porque é navegação,
   não obrigação. */
.footer-pagina {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 22px;
  font-size: var(--t-md);
}
.footer-pagina a:hover {
  color: var(--lex-on-ink);
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 22px;
}
.footer-links a:hover {
  color: var(--lex-on-ink);
}
.footer-copy {
  margin: 0;
  font-size: var(--t-sm);
}
.footer-nota {
  border-top: 1px solid var(--lex-line-inverse);
  padding: 16px 0 22px;
  font-size: var(--t-xs);
  text-align: center;
}
.footer-nota p {
  margin: 0;
}

@media (min-width: 900px) {
  .site-footer > .wrap {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

/* ============ Páginas legais ============ */

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: var(--t-md);
  color: rgba(250, 250, 247, 0.78);
}
.back-link:hover {
  color: var(--lex-on-ink);
}
.back-link svg {
  width: 16px;
  height: 16px;
}

.legal-page {
  padding: calc(var(--header-h) + 56px) 0 clamp(64px, 8vw, 96px);
}
.legal-head {
  max-width: var(--wrap-narrow);
  padding-bottom: 32px;
  margin-bottom: 40px;
  border-bottom: 1px solid var(--lex-line);
}
.legal-head h1 {
  font-size: var(--t-h2);
  margin-bottom: 12px;
}
.legal-date {
  margin: 0;
  font-size: var(--t-sm);
  color: var(--lex-mute);
}

/* Medida de leitura: texto jurídico é lido inteiro, não escaneado. */
.legal {
  max-width: 72ch;
  font-size: var(--t-md);
  line-height: 1.7;
}
.legal h2 {
  margin: 48px 0 16px;
  font-size: var(--t-h3);
}
.legal h3 {
  margin: 32px 0 10px;
  font-size: var(--t-lg);
}
.legal ul {
  list-style: disc;
  padding-left: 22px;
  margin: 0 0 1em;
}
.legal li {
  margin-bottom: 10px;
}
.legal a {
  color: var(--lex-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--lex-mute);
}
.legal a:hover {
  text-decoration-color: var(--lex-ink);
}
.legal strong {
  font-weight: 600;
}
.legal-nota {
  max-width: 72ch;
  margin-top: 56px;
  padding: 20px 22px;
  border: 1px solid var(--lex-line);
  border-left: 3px solid var(--gold);
  border-radius: var(--r-md);
  background: var(--lex-paper-2);
  font-size: var(--t-sm);
  color: var(--lex-mute);
}
.legal-nota p:last-child {
  margin-bottom: 0;
}