/* ============================================================
   Atlas Styles v2 — light/minimal mono aesthetic, mobile-first
   Re-skin: all tokens overridden to light monochrome theme.
   @layer structure preserved for JS compatibility.
   ============================================================ */

@layer reset, base, layout, components, utilities, animations;

/* -------------- Design tokens ----------------------------- */
/* Mundo: serigrafia de cartaz. Tinta chapada em campos de página inteira.
   Ver DESIGN.md. Sem gradiente, sem sombra difusa, sem canto arredondado. */
:root {
  color-scheme: light dark;

  /* ════════════════════════════════════════════════════════════
     1. ESCALA DE TINTAS — imutável, declarada UMA vez, aqui.
     Nenhuma cor da marca tem definição exclusiva dentro de um
     media query: o bloco escuro só reatribui papéis (secção 2).

     Origem hex → OKLCH. A conversão preserva a aparência: cada
     valor faz round-trip para o mesmo hex de partida, delta
     máximo 0/255 por canal (medido, não estimado).

     Chroma junto aos extremos de luminosidade: o papel (L 95%)
     vive em C 0.034 e o azul profundo (L 24%) em C 0.065 —
     ambos abaixo dos meios-tons cromáticos (vermelho C 0.21,
     ouro C 0.16). A prática OKLCH já estava satisfeita pela
     direção; nada foi reesticado para "parecer" correto.
     ════════════════════════════════════════════════════════════ */

  /* Papel — o suporte de dia, a tinta de noite */
  --ink-paper-100: oklch(95.64% 0.0345 88.78);  /* #FAF0D7 */
  --ink-paper-200: oklch(91.85% 0.0512 88.57);  /* #F2E3BE */
  --ink-paper-050: oklch(94.15% 0.0387 89.10);  /* #F6EBCF — papel de noite */

  /* Vermelho */
  --ink-red-400: oklch(64.37% 0.2043 28.07);  /* #F04A3F — vermelho de noite */
  --ink-red-500: oklch(56.99% 0.2117 28.76);  /* #D8271F */
  --ink-red-700: oklch(46.16% 0.1778 28.87);  /* #A5140F */

  /* Azul */
  --ink-blue-700: oklch(31.55% 0.0911 259.21);  /* #12305F */
  --ink-blue-900: oklch(23.84% 0.0649 258.99);  /* #0A1E3D */

  /* Ouro */
  --ink-gold-400: oklch(84.73% 0.1567 88.28);  /* #F7C63A — ouro de noite */
  --ink-gold-500: oklch(80.96% 0.1643 84.25);  /* #F2B60D */
  --ink-gold-700: oklch(68.91% 0.1420 79.51);  /* #C98F05 */

  /* ════════════════════════════════════════════════════════════
     2. PAPÉIS — o que o tema escuro reatribui.
     ════════════════════════════════════════════════════════════ */

  /* As tintas nomeadas da direção. --ink-paper-2 e --ink-gold-deep
     não têm referência hoje: ficam porque são vocabulário da
     direção (DESIGN.md), não resíduo do tema antigo. */
  --ink-paper:     var(--ink-paper-100);
  --ink-paper-2:   var(--ink-paper-200);
  --ink-red:       var(--ink-red-500);
  --ink-red-deep:  var(--ink-red-700);
  --ink-blue:      var(--ink-blue-700);
  --ink-blue-deep: var(--ink-blue-900);
  --ink-gold:      var(--ink-gold-500);
  --ink-gold-deep: var(--ink-gold-700);

  /* Superfícies semânticas. É ISTO que vira à noite — não as
     tintas. "Papel" continua sendo papel: de dia é o suporte,
     de noite é a tinta clara sobre o azul. Um componente que
     pinta `--ink-paper` de fundo fica ilegível à noite; um que
     pinta `--surface-*` acompanha o tema. */
  --surface-page:  var(--ink-paper-100);
  --surface-field: var(--ink-paper-200);
  --surface-inset: var(--ink-paper-100);
  --on-surface:    var(--ink-blue-700);

  /* O campo vermelho fica fundo nos dois temas: a paper sobre
     --ink-red-500 mede 4.19:1 e reprovaria AA. Sobre red-700
     mede 6.84:1 (dia) e 6.54:1 (noite). */
  --field-red: var(--ink-red-700);

  /* Aliases de superfície herdados. auth.css e setup.css leem
     --bg-page/--bg-elevated/--bg-raised; apontam para os papéis,
     então acompanham o tema sem editar cada regra.
     --white, --black, --cream-bg, --bg-glass e --cream2-bg foram
     REMOVIDOS: eram nomes do tema antigo que mentiam sobre o que
     pintavam (--white pintava superfície escura à noite, --black
     pintava tinta clara) e nenhuma folha carregada os referencia
     mais. */
  --bg-page:      var(--surface-page);
  --bg-elevated:  var(--surface-field);
  --bg-raised:    var(--surface-field);

  /* ── Texto: tingido do próprio campo, nunca cinza ──
     Uma fórmula só, válida nos dois temas: a tinta do texto é
     sempre --on-surface diluída no próprio suporte. Medido em
     AA sobre page E field, claro e escuro (ver relatório). */
  --text-primary: var(--on-surface);
  --text-muted:   color-mix(in oklab, var(--on-surface) 76%, var(--surface-page));
  --text-faint:   color-mix(in oklab, var(--on-surface) 72%, var(--surface-page));

  /* ⚠ Aliases de compatibilidade que NÃO podem ser removidos:
     estilos inline no HTML os consomem direto como `color:`
     (--black-mute-40 em 12 lugares, --black-mute-65 em 10).
     Apagá-los deixaria esse texto sem cor declarada. Os nomes vêm
     do tema antigo; os valores já são tinta diluída do campo,
     medida em AA.

     --gray-text SAIU (2026-08-11). Tinha um único leitor no site
     inteiro — o `style="color:var(--gray-text)"` do <main> de
     termos.html — e esse main virou .doc-legal, que lê
     --text-primary como todo o resto. Sem leitor, as quatro
     declarações (aqui, .bg-black, .bg-red, .bg-gold) eram peso
     morto se mantidas e mentira se o comentário continuasse
     prometendo dois consumidores. */
  --black-mute-65: var(--text-muted);
  --black-mute-40: var(--text-faint);

  /* ── Acento: a tinta vermelha ──
     --accent-text é a tinta de TEXTO PEQUENO: o vermelho médio
     mede 4.38:1 sobre papel e reprova AA em corpo pequeno, então
     o papel de texto vai para o vermelho profundo (6.84:1).

     ⚠ --accent-from também é consumido por estilo inline no HTML
     (6 lugares, todos `color:`). Por isso ele passou a apontar
     para --accent-text: como todo uso remanescente é TEXTO, o
     vermelho médio ali reprovaria AA.

     Removidos por serem peso morto do tema laranja antigo, sem
     nenhuma referência nas folhas carregadas: --accent,
     --accent-mid, --accent-to, --accent-spark, --accent-gradient,
     --accent-gradient-subtle, --orange-500, --orange-600 e os
     cinco --orange-tint-*. */
  --accent-text: var(--ink-red-700);
  --accent-from: var(--accent-text);

  /* Tinta de estado negativo. Separada de --accent-text porque à
     noite o acento de texto vira ouro, e ouro não serve para negar.
     Vermelho profundo mede 6.84:1 sobre papel; à noite sobe para o
     vermelho claro, 4.55:1 sobre o azul profundo. */
  --status-no: var(--ink-red-700);

  /* ── Cartões: campo chapado com régua ──
     A régua e o desregistro seguem --on-surface: azul de dia,
     papel de noite. Régua azul sobre azul seria régua invisível.
     Removidos: --card-dark, --card-border-orange e
     --card-border-glass (não havia mais vidro nenhum). */
  --border-hairline: var(--on-surface);

  /* ── Botões: retângulo de tinta sólida ── */
  --btn-primary-bg:    var(--field-red);
  --btn-primary-text:  var(--ink-paper);
  --btn-primary-hover: var(--ink-blue-700);
  --btn-secondary-bg:     transparent;
  --btn-secondary-border: var(--on-surface);
  --btn-secondary-hover-bg:   var(--on-surface);
  --btn-secondary-hover-text: var(--surface-page);
  --focus-ring: 0 0 0 3px var(--ink-gold);

  /* ── Fontes ── */
  --font-display: 'Big Shoulders Display', 'Archivo', Impact, sans-serif;
  --font-body:    'Archivo', system-ui, -apple-system, sans-serif;
  --font-mono:    'Spline Sans Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ── Profundidade: desregistro de camada, não sombra ──
     A camada deslocada é --on-surface: some sozinha à noite se
     ficar cravada em azul.
     Removidos: --shadow-glow-orange (era o mesmo desregistro com
     nome de brilho — fundido em --misregister), --shadow-glow-accent,
     --shadow-3d-xl, --gradient-progress e --font-stack. Nenhum era
     referenciado, e todos prometiam brilho ou gradiente que este
     mundo não tem. */
  --misregister:  3px 3px 0 var(--ink-red);
  --shadow-3d-sm: 0 2px 0 var(--on-surface);
  --shadow-3d-md: 3px 3px 0 var(--on-surface);
  --shadow-3d-lg: 5px 5px 0 var(--on-surface);

  --ease-out-soft: cubic-bezier(.16, 1, .3, 1);
  --topbar-h: 4.5rem;

  /* ── Escala: salto de cartaz, razão >= 1.33 ── */
  --t-display:   clamp(3.5rem, 11vw, 8rem);
  --t-hero:      clamp(2.75rem, 8vw, 5.5rem);
  --t-section:   clamp(2rem, 5.5vw, 3.5rem);
  --t-card-title:clamp(1.3rem, 2.6vw, 1.6rem);
  --t-body:      clamp(1rem, 1.4vw, 1.125rem);
  --t-label:     clamp(0.78rem, 1.4vw, 0.85rem);
  --t-micro:     clamp(0.72rem, 1.2vw, 0.78rem);
  --t-overline:  clamp(0.68rem, 1vw, 0.75rem);

  --space-4:  4px;  --space-8:  8px;
  --space-12: 12px; --space-16: 16px; --space-20: 20px;
  --space-24: 24px; --space-32: 32px; --space-40: 40px;
  --space-48: 48px; --space-64: 64px; --space-80: 80px;

  /* ── Tinta chapada não tem canto arredondado ── */
  --radius-pill:  0;
  --radius-card:  0;
  --radius-badge: 0;
  --radius-chip:  0;
}

/* Tema escuro: a mesma folha impressa à noite. O azul vira suporte,
   o papel vira tinta. Nada vira cinza.

   Este bloco NÃO declara nenhuma cor: só reatribui papéis a tokens
   da escala da secção 1. Toda cor da marca continua tendo a sua
   definição no :root base — desligar este media query devolve o
   tema claro íntegro, e nenhuma cor existe apenas aqui.

   Superfícies, réguas, sombras e texto derivam de --surface-* e
   --on-surface, então giram sozinhos: só as quatro tintas e os
   dois papéis de botão precisam de menção explícita. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* As tintas sobem de luminosidade para manter AA sobre o azul */
    --ink-paper:    var(--ink-paper-050);
    --ink-red:      var(--ink-red-400);
    --ink-red-deep: var(--ink-red-500);
    --ink-gold:     var(--ink-gold-400);

    /* O suporte passa a ser o azul; o papel passa a ser a tinta */
    --surface-page:  var(--ink-blue-900);
    --surface-field: var(--ink-blue-700);
    --surface-inset: var(--ink-blue-900);
    --on-surface:    var(--ink-paper-050);

    /* Texto pequeno em acento: o vermelho de noite mede 3.57:1
       sobre o campo azul e reprova. O ouro mede 8.11:1. */
    --accent-text: var(--ink-gold-400);
    --status-no:   var(--ink-red-400);

    /* Botão: tinta clara com texto do suporte. O campo vermelho
       profundo com texto azul mediria 1.4:1 — à noite o botão
       inverte: vermelho claro (red-400) com tinta azul. */
    --btn-primary-bg:    var(--ink-red-400);
    --btn-primary-text:  var(--ink-blue-900);
    --btn-primary-hover: var(--ink-gold-400);
  }
}

html { scroll-padding-top: var(--topbar-h); }
section[id] { scroll-margin-top: var(--topbar-h); }

/* -------------- Reset ------------------------------------- */
@layer reset {
  *,
  *::before,
  *::after { box-sizing: border-box; margin: 0; padding: 0; }

  html { scroll-behavior: smooth; }

  body {
    -webkit-font-smoothing: antialiased;
    background: var(--bg-page);
    color: var(--text-primary);
    font-family: var(--font-body);
    line-height: 1.5;
  }

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

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

  [hidden] { display: none !important; }

  button { background: none; border: none; color: inherit; cursor: pointer; font: inherit; }

  html, body { overflow-x: hidden; }

  :focus-visible {
    border-radius: 4px;
    outline: 2px solid var(--ink-blue);
    outline-offset: 2px;
  }
}

/* -------------- Base type --------------------------------- */
@layer base {
  .t-hero {
    font-family: var(--font-display);
    font-size: var(--t-hero);
    font-weight: 500;
    font-variation-settings: "opsz" 144;
    letter-spacing: -0.02em;
    line-height: 1.05;
  }

  .t-section {
    font-family: var(--font-display);
    font-size: var(--t-section);
    font-weight: 500;
    font-variation-settings: "opsz" 144;
    letter-spacing: -0.02em;
    line-height: 1.18;
  }

  .t-body { font-size: var(--t-body); line-height: 1.7; }

  /* Card titles stay sans (< 2rem — a11y: serif only >= 2rem) */
  .t-card-title {
    font-family: var(--font-body);
    font-size: var(--t-card-title);
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.25;
  }

  .t-label {
    font-size: var(--t-label);
    font-weight: 600;
    letter-spacing: 0.10em;
    line-height: 1.4;
  }

  .t-micro { font-size: var(--t-micro); letter-spacing: 0.04em; line-height: 1.5; }

  .t-overline {
    font-size: var(--t-overline);
    font-weight: 700;
    letter-spacing: 0.15em;
    line-height: 1.4;
    text-transform: uppercase;
  }

  /* Colour utilities — mono theme (solid color, no text clip) */
  .c-orange { color: var(--text-primary); }

  /* ── Campos de tinta ───────────────────────────────────────────
     Cada seção é uma cor, não um fundo claro com detalhe.

     ⚠ ARMADILHA DE CUSTOM PROPERTY, e a razão de tanta repetição:
     uma custom property com var() é substituída no ponto onde é
     DECLARADA, não onde é lida. `--text-primary: var(--on-surface)`
     declarado no :root já computou com o --on-surface do :root; os
     descendentes herdam o valor pronto. Trocar --on-surface aqui
     NÃO reatualiza --text-primary — o derivado tem de ser
     redeclarado no mesmo elemento que troca a base.

     Isso não é estilo, é correção: sem redeclarar, `body.bg-black`
     (setup.html e termos.html) pintava campo azul e mantinha tinta
     azul do :root — título azul sobre azul, invisível.

     No bloco escuro a redeclaração é dispensável porque lá a troca
     acontece no PRÓPRIO :root, então os derivados recomputam. */
  .bg-black {
    background: var(--ink-blue);
    --surface-page:  var(--ink-blue);
    --surface-field: var(--ink-blue-900);
    --surface-inset: var(--ink-blue-900);
    --on-surface:    var(--ink-paper);
    --accent-text:   var(--ink-gold);
    --text-primary:  var(--on-surface);
    --text-muted:    color-mix(in oklab, var(--on-surface) 76%, var(--surface-page));
    --text-faint:    color-mix(in oklab, var(--on-surface) 72%, var(--surface-page));
    --black-mute-65: var(--text-muted);
    --black-mute-40: var(--text-faint);
    --accent-from:   var(--accent-text);
    --border-hairline: var(--on-surface);
    --bg-page:       var(--surface-page);
    --bg-elevated:   var(--surface-field);
    --bg-raised:     var(--surface-field);
    --shadow-3d-sm:  0 2px 0 var(--on-surface);
    --shadow-3d-md:  3px 3px 0 var(--on-surface);
    --shadow-3d-lg:  5px 5px 0 var(--on-surface);
    --btn-secondary-border:     var(--on-surface);
    --btn-secondary-hover-bg:   var(--on-surface);
    --btn-secondary-hover-text: var(--surface-page);
    color: var(--text-primary);
  }

  /* Papel: os papéis do :root já valem; só o campo interno afunda
     um passo para o cartão não desaparecer no suporte. */
  .bg-cream {
    background: var(--surface-page);
    --surface-field: var(--surface-inset);
    --bg-elevated:   var(--surface-field);
    --bg-raised:     var(--surface-field);
    color: var(--text-primary);
  }

  .bg-cream2 {
    background: var(--surface-field);
    color: var(--text-primary);
  }

  /* Campos cromáticos: tinta chapada não dilui. Sobre vermelho e
     ouro qualquer mistura cai abaixo de 4.5:1 (medido: 4.32 e
     3.97), então muted e faint colapsam na tinta cheia — mais
     legível E mais fiel ao mundo. */
  .bg-red {
    background: var(--field-red);
    --surface-page:  var(--field-red);
    --surface-field: var(--field-red);
    --surface-inset: var(--field-red);
    --on-surface:    var(--ink-paper);
    --accent-text:   var(--ink-gold);
    --text-primary:  var(--on-surface);
    --text-muted:    var(--on-surface);
    --text-faint:    var(--on-surface);
    --black-mute-65: var(--on-surface);
    --black-mute-40: var(--on-surface);
    --accent-from:   var(--accent-text);
    --border-hairline: var(--on-surface);
    --shadow-3d-sm:  0 2px 0 var(--on-surface);
    --shadow-3d-md:  3px 3px 0 var(--on-surface);
    --shadow-3d-lg:  5px 5px 0 var(--on-surface);
    --btn-secondary-border:     var(--on-surface);
    --btn-secondary-hover-bg:   var(--on-surface);
    --btn-secondary-hover-text: var(--surface-page);
    color: var(--text-primary);
  }

  .bg-gold {
    background: var(--ink-gold);
    --surface-page:  var(--ink-gold);
    --surface-field: var(--ink-gold);
    --surface-inset: var(--ink-gold);
    --on-surface:    var(--ink-blue-700);
    --accent-text:   var(--ink-red-700);
    --text-primary:  var(--on-surface);
    --text-muted:    var(--on-surface);
    --text-faint:    var(--on-surface);
    --black-mute-65: var(--on-surface);
    --black-mute-40: var(--on-surface);
    --accent-from:   var(--accent-text);
    --border-hairline: var(--on-surface);
    --shadow-3d-sm:  0 2px 0 var(--on-surface);
    --shadow-3d-md:  3px 3px 0 var(--on-surface);
    --shadow-3d-lg:  5px 5px 0 var(--on-surface);
    --btn-secondary-border:     var(--on-surface);
    --btn-secondary-hover-bg:   var(--on-surface);
    --btn-secondary-hover-text: var(--surface-page);
    color: var(--text-primary);
  }

  .text-center { text-align: center; }

  .section-py { padding-block: var(--space-48); }

  @media (min-width: 768px) {
    .section-py { padding-block: var(--space-80); }
  }
}

/* -------------- Layout ------------------------------------ */
@layer layout {
  .container {
    margin: 0 auto;
    max-width: 1200px;
    padding: 0 clamp(1.25rem, 4vw, 3rem);
    width: 100%;
  }

  .container-md {
    margin: 0 auto;
    max-width: 1000px;
    padding: 0 clamp(1.25rem, 4vw, 2rem);
    width: 100%;
  }

  .container-sm {
    margin: 0 auto;
    max-width: 760px;
    padding: 0 clamp(1.25rem, 4vw, 2rem);
    width: 100%;
  }

  .grid2 { display: grid; gap: var(--space-16); grid-template-columns: 1fr; }
  .grid3 { display: grid; gap: var(--space-16); grid-template-columns: 1fr; }

  .grid-bento {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-16);
    justify-content: center;
    margin: var(--space-40) auto 0;
    max-width: 620px;
  }

  @media (min-width: 480px) {
    .grid2 { gap: var(--space-24); }
    .grid3 { gap: var(--space-24); }
  }

  @media (min-width: 768px) {
    .grid2 { grid-template-columns: 1fr 1fr; }
    .grid3 { grid-template-columns: repeat(3, 1fr); gap: var(--space-24); }
  }

  @media (min-width: 960px) {
    .grid3 { gap: var(--space-32); }
  }
}

/* -------------- Hero ---------------------------------------- */
@layer components {
  #hero {
    background: var(--bg-page);
    overflow: hidden;
    padding-bottom: clamp(2.5rem, 5vw, 4rem);
    padding-top: calc(var(--topbar-h) + var(--space-40));
    position: relative;
  }

  /* Sem fundo decorativo: o herói é campo de tinta chapada. A grade
     de fio de cabelo de 1px que morava aqui (dois linear-gradient
     tilados em 48px) é anti-referência declarada em DESIGN.md e
     assinatura de UI genérica. A profundidade vem do desregistro. */

  .hero-wrap {
    align-items: center;
    display: grid;
    gap: var(--space-32);
    grid-template-columns: 1fr;
    position: relative;
    z-index: 1;
  }

  @media (min-width: 768px) {
    #hero { padding-top: calc(var(--topbar-h) + var(--space-80)); }
    .hero-wrap {
      gap: clamp(2rem, 5vw, 4rem);
      grid-template-columns: 1.15fr 1fr;
    }
  }

  .hero-text {
    display: flex;
    flex-direction: column;
    gap: var(--space-24);
    min-width: 0;
  }

  @media (min-width: 768px) {
    .hero-text { gap: var(--space-20); }
  }

  .hero-logo { display: block; margin-bottom: 0.25rem; width: 180px; }

  @media (min-width: 768px) {
    .hero-logo { width: 220px; }
  }

  .hero-sub { color: var(--text-muted); max-width: 580px; }

  .hero-cta-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-16);
    margin-top: 0.5rem;
  }

  .hero-micro {
    color: var(--text-faint);
    font-size: var(--t-micro);
    font-weight: 500;
  }

  /* Visual terminal — glassy */
  .hero-visual {
    background: var(--surface-page);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--on-surface);
    border-radius: 1.25rem;
    box-shadow: var(--shadow-3d-lg);
    min-height: 260px;
    overflow: hidden;
    position: relative;
  }

  @media (min-width: 768px) {
    .hero-visual { min-height: 320px; }
  }

  .hero-visual__bar {
    background: color-mix(in oklab, var(--on-surface) 12%, transparent);
    border-bottom: 1px solid color-mix(in oklab, var(--on-surface) 14%, transparent);
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
  }

  /* Os três pontos de janela de macOS saíram do HTML, mas as quatro
     regras que os pintavam (base 12x12 redonda + nth-child(1..3) em
     vermelho/ouro/azul) ficaram para trás, e mais abaixo um
     `display:none` as neutralizava. Sobrou um seletor de posição sem
     dono: `span:nth-child(1)` passou a casar o ÚNICO span que existe
     hoje na barra, o rótulo `api.tn1.top`, e a esconder o rótulo.
     Regra de posição não tem como saber quem ocupa a posição — por
     isso o rótulo agora é .hero-visual__origin, nomeado, e as regras
     dos pontos foram apagadas em vez de anuladas. */

  .hero-visual__code {
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 0.85rem;
    line-height: 1.65;
    padding: 1.25rem 1.5rem;
    white-space: pre-wrap;
  }

  .hero-visual__code .ac  { color: var(--ink-blue); font-weight: 700; }
  .hero-visual__code .ok  { color: var(--ink-gold); font-weight: 700; }
  .hero-visual__code .dim { color: var(--ink-gold); }
  .hero-visual__code .cursor { animation: cursor-blink 1s steps(2) infinite; }

  .hero-visual__badge {
    align-items: center;
    background: var(--ink-blue);
    border-radius: 999px;
    bottom: 14px;
    box-shadow: 0 8px 24px color-mix(in oklab, var(--on-surface) 30%, transparent);
    color: var(--ink-paper);
    display: flex;
    gap: 0.5rem;
    padding: 0.6rem 1.15rem;
    position: absolute;
    right: 14px;
    white-space: nowrap;
  }

  .hero-visual__badge::before {
    background: var(--ink-red);
    border-radius: 999px;
    content: "";
    flex-shrink: 0;
    height: 0.55rem;
    width: 0.55rem;
  }

  .hero-visual__badge strong { font-weight: 700; letter-spacing: 0.05em; }
  .hero-visual__badge span   { font-weight: 700; }
  .hero-visual__badge span::before { content: "\00B7\00A0"; }

  @media (max-width: 480px) {
    .hero-visual__badge { bottom: 10px; gap: 0.4rem; padding: 0.5rem 0.85rem; right: 10px; }
    .hero-visual__badge strong, .hero-visual__badge span { font-size: var(--t-micro); }
  }

  /* Claude Code symbol — oculto em mobile */
  .claude-code-symbol {
    animation: claude-code-dance 2.8s ease-in-out infinite;
    display: none;
    pointer-events: none;
    position: absolute;
    transform-origin: center;
    opacity: 0.12;
  }

  @media (min-width: 768px) {
    .claude-code-symbol { display: block; }
  }

  .claude-code-symbol__mark {
    animation: claude-code-pulse 1.4s ease-in-out infinite;
    height: 100%;
    object-fit: contain;
    transform-origin: center;
    width: 100%;
  }
}

/* -------------- Components gerais ------------------------- */
@layer components {

  /* Top bar */
  .top-bar {
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    background: var(--surface-page);
    border-bottom: 1px solid color-mix(in oklab, var(--on-surface) 14%, transparent);
    left: 0;
    padding: 0.75rem clamp(1rem, 3vw, 1.5rem);
    pointer-events: none;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 50;
  }

  .top-bar__inner {
    align-items: center;
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
    margin: 0 auto;
    max-width: 1200px;
  }

  .top-bar__actions {
    align-items: center;
    display: flex;
    gap: var(--space-12);
  }

  @media (max-width: 519px) {
    .top-bar__price { display: none; }
  }

  /* Badge 3D — dark glass */
  .badge-3d {
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    background: color-mix(in oklab, var(--ink-paper) 88%, transparent);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-badge);
    box-shadow: 0 1px 2px color-mix(in oklab, var(--on-surface) 12%, transparent);
    color: var(--text-primary);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--t-micro);
    font-weight: 600;
    min-height: 44px;
    padding: 0.5rem 1rem;
    pointer-events: auto;
    white-space: nowrap;
  }

  .badge-3d__icon { display: inline-flex; align-items: center; justify-content: center; }
  .badge-3d__icon svg,
  .badge-3d__icon img { height: 16px; width: 16px; }

  .top-bar__trial,
  .top-bar__doc {
    background: var(--btn-primary-bg);
    border-color: transparent;
    color: var(--btn-primary-text);
    font-weight: 700;
    transition: box-shadow 0.15s var(--ease-out-soft), transform 0.15s var(--ease-out-soft), opacity 0.15s;
  }

  .top-bar__trial:hover,
  .top-bar__doc:hover {
    background: var(--btn-primary-hover);
    transform: translateY(1px);
    box-shadow: 0 4px 12px color-mix(in oklab, var(--on-surface) 20%, transparent);
  }

  .top-bar__trial:focus-visible { outline-color: var(--on-surface); }

  @media (max-width: 639px) {
    .top-bar__doc { display: none; }
  }

  .top-bar__login {
    font-weight: 600;
    transition: background 0.15s, border-color 0.15s;
  }

  .top-bar__login:hover {
    background: color-mix(in oklab, var(--on-surface) 13%, transparent);
    border-color: color-mix(in oklab, var(--on-surface) 28%, transparent);
  }

  .top-bar__login:focus-visible { outline-color: var(--on-surface); }

  /* Primary CTA button — gradient with glow */
  .btn-cartoon {
    align-items: center;
    background: var(--btn-primary-bg);
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    box-shadow: 0 1px 2px color-mix(in oklab, var(--on-surface) 18%, transparent);
    color: var(--btn-primary-text);
    cursor: pointer;
    display: inline-flex;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    gap: 0.75rem;
    justify-content: center;
    letter-spacing: 0.01em;
    padding: 1rem 2rem;
    position: relative;
    text-decoration: none;
    transition: box-shadow 0.2s var(--ease-out-soft), transform 0.15s var(--ease-out-soft), background 0.15s;
  }

  .btn-cartoon:hover {
    background: var(--btn-primary-hover);
    box-shadow: 0 4px 12px color-mix(in oklab, var(--on-surface) 20%, transparent);
    transform: translateY(-1px);
  }

  .btn-cartoon:active {
    box-shadow: 0 1px 2px color-mix(in oklab, var(--on-surface) 18%, transparent);
    transform: translateY(0);
  }

  .btn-cartoon--full { max-width: 520px; width: 100%; }
  .btn-cartoon--xl   { font-size: 1.125rem; padding: 1.25rem 2.75rem; }
  .btn-cartoon--ghost {
    background: var(--btn-secondary-bg);
    border-color: var(--btn-secondary-border);
    color: var(--text-primary);
    box-shadow: none;
  }

  /* Inverte no hover: sem a tinta do suporte o texto ficava azul
     sobre azul (1:1). */
  .btn-cartoon--ghost:hover {
    background: var(--btn-secondary-hover-bg);
    color: var(--btn-secondary-hover-text);
  }

  /* Dark cards — glassy */
  .card-dark {
    background: var(--surface-page);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--on-surface);
    border-radius: var(--radius-card);
    overflow: hidden;
    padding: 1.5rem 1.25rem;
    position: relative;
    text-align: center;
    transition: border-color 0.2s, box-shadow 0.2s;
  }

  @media (min-width: 768px) {
    .card-dark { padding: 2rem 1.75rem; }
  }

  .card-dark:hover {
    border-color: color-mix(in oklab, var(--on-surface) 33%, transparent);
    box-shadow: var(--misregister);
  }

  .card-dark--featured {
    border-color: color-mix(in oklab, var(--on-surface) 43%, transparent);
    box-shadow: var(--misregister);
    position: relative;
    z-index: 2;
    background: var(--surface-inset);
  }

  @media (min-width: 768px) {
    .card-dark--featured { transform: translateY(-8px) scale(1.02); }
  }

  /* Card light (comparativo) — white card, hairline border */
  .card-light {
    background: var(--surface-inset);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-card);
    flex: 1;
    min-width: 220px;
    padding: var(--space-20);
  }

  .card-light--accent {
    background: var(--surface-inset);
    border-color: color-mix(in oklab, var(--on-surface) 20%, transparent);
    box-shadow: var(--shadow-3d-md);
  }

  /* O rótulo do cartão. A cor estava cravada em `style="color:..."` nas 12
     ocorrências do index.html — as 12 pediam a MESMA tinta diluída, então a
     declaração pertence aqui e não ao atributo. */
  .card-light__kicker {
    color: var(--text-faint);
    margin-bottom: 14px;
  }

  /* ── Cartão de modelo: três passos de token, não três rem cravados ──

     Era, em 9 cartões, tudo em atributo `style=`:
       kicker  .t-overline  -> 12.00px
       nome    1.05rem      -> 16.80px   (mono, peso 800)
       texto   0.85rem      -> 13.60px
     Razões medidas: nome/texto 1.235 e texto/kicker 1.133 — as duas abaixo
     do piso 1.25 do DESIGN.md. Três tamanhos quase iguais não são hierarquia,
     são o mesmo tamanho errado três vezes.

     A escada agora é a MESMA tríade que o resto da página já usa
     (t-overline -> título -> t-body), com as razões medidas em 1.42 e 1.50.
     Nenhum tamanho novo entrou no sistema: só tokens que já existiam. */
  .card-light__model {
    font-family: var(--font-mono);
    font-size: var(--t-card-title);
    font-weight: 800;
    margin-bottom: var(--space-8);
    /* Nome de modelo é string de máquina: quebra em qualquer ponto antes de
       estourar a caixa do cartão. */
    overflow-wrap: anywhere;
  }

  .card-light__note {
    color: var(--text-muted);
    font-size: var(--t-body);
    line-height: 1.6;
    margin: 0;
  }

  .card-light__list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: left;
  }

  .card-light__row {
    align-items: center;
    display: flex;
    gap: var(--space-8);
  }

  .card-light__check { font-weight: 700; }

  .card-light--vs .card-light__check { color: color-mix(in oklab, var(--on-surface) 28%, transparent); }
  .card-light--accent .card-light__check { color: var(--text-primary); }

  .card-light__text { font-size: 0.78rem; color: var(--text-muted); }

  .card-light--vs .card-light__text {
    color: var(--text-faint);
    text-decoration: line-through;
  }

  .card-light--accent .card-light__text {
    color: var(--text-primary);
    font-weight: 600;
  }

  /* Comparativo: stat card + win card (novas classes) */
  .card-light--stat {
    background: var(--surface-inset);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-3d-md);
    margin: 0 auto;
    max-width: 620px;
    padding: var(--space-40) var(--space-32);
  }

  .stat-figure {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 6vw, 3.75rem);
    font-weight: 500;
    font-variation-settings: "opsz" 144;
    letter-spacing: -0.02em;
    line-height: 1.05;
    margin: 0.5rem 0;
  }

  .comparison-hook {
    color: var(--text-primary);
    font-size: var(--t-body);
    font-weight: 500;
    line-height: 1.6;
    margin-top: 0.75rem;
  }

  .card-light--win {
    background: var(--surface-inset);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-card);
    flex: 1;
    min-width: 260px;
    padding: var(--space-24) var(--space-20);
  }

  .card-light--win .card-light__check { color: var(--text-primary); }
  .card-light--win .card-light__text {
    color: var(--text-primary);
    font-size: 0.9rem;
  }

  /* Features ticker */
  .features-ticker {
    border-bottom: 1px solid color-mix(in oklab, var(--on-surface) 14%, transparent);
    border-top: 1px solid color-mix(in oklab, var(--on-surface) 14%, transparent);
    margin-top: var(--space-32);
    overflow: hidden;
    padding: var(--space-16) 0;
    position: relative;
    z-index: 1;
  }

  .features-track {
    animation: marquee-left 40s linear infinite;
    display: inline-flex;
    gap: var(--space-32);
    white-space: nowrap;
  }

  .features-item {
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 500;
  }

  /* Trust bar */
  .trust-bar {
    background: var(--bg-elevated);
    border-bottom: 1px solid color-mix(in oklab, var(--on-surface) 14%, transparent);
    border-top: 1px solid color-mix(in oklab, var(--on-surface) 14%, transparent);
    padding: 0.85rem 0;
  }

  .trust-bar__inner {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: clamp(1.5rem, 4vw, 3rem);
    justify-content: center;
  }

  .trust-bar__item { align-items: center; display: flex; gap: 0.45rem; }

  .trust-bar__val {
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 700;
    font-family: var(--font-body);
  }

  .trust-bar__lbl {
    color: var(--text-faint);
    font-size: var(--t-micro);
    font-weight: 500;
    letter-spacing: 0.03em;
  }

  .trust-bar__sep { background: color-mix(in oklab, var(--on-surface) 16%, transparent); flex-shrink: 0; height: 20px; width: 1px; }

  /* ---- Seção comparativo ---- */
  .section-comparison {
    background: var(--bg-elevated);
    overflow: hidden;
    padding-block: var(--space-48);
    position: relative;
  }

  @media (min-width: 768px) {
    .section-comparison { padding-block: var(--space-80); }
  }

  .comparison-hook {
    font-family: var(--font-body);
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.55;
    margin: var(--space-24) auto 0;
    max-width: 640px;
  }

  /* ---- Seção "Como funciona" ---- */
  .section-steps {
    background: var(--bg-page);
    overflow: hidden;
    padding-block: var(--space-48);
    position: relative;
  }

  @media (min-width: 768px) {
    .section-steps { padding-block: var(--space-80); }
  }

  .steps-header { margin-bottom: var(--space-40); text-align: center; }

  .step-card {
    overflow: visible;
    padding: 1.5rem 1.25rem;
    position: relative;
    text-align: left;
  }

  @media (min-width: 768px) {
    .step-card { padding: 2rem 1.75rem; }
  }

  .step-card::before {
    -webkit-text-stroke: 1px color-mix(in oklab, var(--on-surface) 20%, transparent);
    color: transparent;
    content: attr(data-step);
    font-family: var(--font-display);
    font-size: 6rem;
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
    position: absolute;
    right: 12px;
    top: -8px;
    user-select: none;
  }

  .step-card__kicker { color: var(--accent-text); margin-bottom: var(--space-8); }
  .step-card__title  { color: var(--text-primary); margin-bottom: var(--space-8); }

  .step-card__body {
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.55;
  }

  .step-card__code {
    background: color-mix(in oklab, var(--on-surface) 13%, transparent);
    border-radius: var(--radius-chip);
    color: var(--text-primary);
    padding: 0.15em 0.4em;
    font-family: var(--font-mono);
  }

  /* ---- Seção uso ilimitado ---- */
  .section-unlimited {
    background: var(--bg-elevated);
    overflow: hidden;
    padding-block: var(--space-48);
    position: relative;
  }

  @media (min-width: 768px) {
    .section-unlimited { padding-block: var(--space-80); }
  }

  .section-unlimited__kicker { color: var(--accent-text); margin-bottom: var(--space-12); }

  /* ---- Tools section ---- */
  .section-tools {
    background: var(--bg-page);
    overflow: hidden;
    padding-block: var(--space-48);
    position: relative;
  }

  @media (min-width: 768px) {
    .section-tools { padding-block: var(--space-80); }
  }

  .tools-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-24);
    margin-top: var(--space-40);
  }

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

  .tool-card {
    background: var(--surface-page);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--on-surface);
    border-radius: var(--radius-card);
    padding: 2rem 1.75rem;
    position: relative;
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
  }

  .tool-card:hover {
    border-color: color-mix(in oklab, var(--on-surface) 28%, transparent);
    box-shadow: var(--misregister);
    transform: translateY(-3px);
  }

  .tool-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--ink-red);
    opacity: 0;
    transition: opacity 0.2s;
  }

  .tool-card:hover::before { opacity: 1; }

  .tool-card__icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--surface-field);
    border: 1px solid color-mix(in oklab, var(--on-surface) 18%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin-bottom: var(--space-16);
  }

  /* ── Escada do cartão de ferramenta ──

     Este é o defeito que originou a varredura do index.html, e ele foi
     MEDIDO antes de ser mexido (Chrome 148, 1280px, árvore servida):

       nome    1.25rem -> 20.00px
       texto   0.90rem -> 14.40px
       chip    0.78rem -> 12.48px
       linha de variável de ambiente, em atributo `style=`:
               0.80rem -> 12.80px

     O chip e a linha de variável são irmãos imediatos dentro do mesmo
     cartão e mediam razão 1.026 — dois tamanhos que ninguém distingue,
     um deles nascido de um rem cravado no HTML. Também mediam abaixo do
     piso: texto/variável 1.125 e texto/chip 1.154.

     A correção não é trocar a unidade dos quatro: é ter MENOS tamanhos e
     mais distância entre eles. Ficaram três passos, todos de token:

       nome   --t-card-title -> 25.60px
       texto  --t-body       -> 18.00px   razão 1.422
       chip   --t-micro      -> 12.48px   razão 1.442
       env    --t-micro      -> 12.48px   MESMO passo do chip, de propósito

     Chip e linha de variável passam a dividir o passo porque as duas são a
     mesma voz — string de máquina. Duas coisas no mesmo tamanho não são um
     salto achatado; são um salto que não existe. O que as separa é
     tratamento, não corpo: o chip é campo de tinta com régua, peso 600 e
     tracking; a linha é tinta diluída, peso normal, sem campo. */
  .tool-card__name {
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: var(--t-card-title);
    font-weight: 600;
    margin-bottom: var(--space-4);
  }

  .tool-card__engine {
    background: color-mix(in oklab, var(--on-surface) 13%, transparent);
    border: 1px solid color-mix(in oklab, var(--on-surface) 18%, transparent);
    border-radius: var(--radius-badge);
    color: var(--text-primary);
    display: inline-block;
    font-family: var(--font-mono);
    font-size: var(--t-micro);
    font-weight: 600;
    letter-spacing: 0.04em;
    margin-bottom: var(--space-12);
    padding: 0.2rem 0.6rem;
  }

  .tool-card__desc {
    color: var(--text-muted);
    font-size: var(--t-body);
    line-height: 1.6;
  }

  /* A linha de variável de ambiente. Vivia inteira em atributo `style=`
     nos dois cartões. URL de gateway não tem espaço onde quebrar, daí o
     overflow-wrap: sem ele a linha estoura a caixa em telas estreitas. */
  .tool-card__env {
    color: var(--text-faint);
    font-family: var(--font-mono);
    font-size: var(--t-micro);
    line-height: 1.5;
    margin-top: var(--space-16);
    overflow-wrap: anywhere;
  }

  /* A família .pricing-* / .plan-card__* foi REMOVIDA: o produto
     não tem plano nem preço (check-brand.sh item 6 falha se preço,
     plano ou recorrência aparecer numa página), e nenhuma das 19
     classes tinha consumidor em HTML ou JS. Era UI de um
     posicionamento anterior. */

  /* ---- Trial form ---- */
  .section-trial {
    background: var(--bg-elevated);
    padding-block: var(--space-48);
    position: relative;
  }

  @media (min-width: 768px) {
    .section-trial { padding-block: var(--space-80); }
  }

  .trial-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    margin: 0 auto;
    max-width: 480px;
  }

  .form-field {
    background: var(--surface-inset);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-badge);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 1rem;
    padding: var(--space-16) var(--space-20);
    width: 100%;
    transition: border-color 0.15s, box-shadow 0.15s;
  }

  .form-field::placeholder { color: var(--text-faint); }

  .form-field:focus {
    border-color: var(--on-surface);
    outline: none;
    box-shadow: var(--focus-ring);
    background: var(--surface-inset);
  }

  .form-field:invalid:not(:placeholder-shown) { border-color: var(--ink-red); }

  .trial-submit { min-height: 56px; }

  .trial-submit[disabled] {
    cursor: not-allowed;
    opacity: 0.5;
  }

  .trial-submit[disabled]:hover {
    box-shadow: none;
    transform: none;
  }

  /* ---- FAQ ---- */
  .section-faq {
    background: var(--bg-page);
    overflow: hidden;
    padding-block: var(--space-48);
    position: relative;
  }

  @media (min-width: 768px) {
    .section-faq { padding-block: var(--space-80); }
  }

  .faq-header { margin-bottom: var(--space-32); text-align: center; }

  .faq-item {
    background: var(--surface-inset);
    border: 1px solid var(--border-hairline);
    border-radius: 0.75rem;
    box-shadow: none;
    margin-bottom: var(--space-12);
    transition: border-color 0.15s;
  }

  .faq-item[open] {
    border-color: color-mix(in oklab, var(--on-surface) 33%, transparent);
  }

  .faq-summary {
    align-items: center;
    cursor: pointer;
    display: flex;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    justify-content: space-between;
    list-style: none;
    min-height: 44px;
    padding: var(--space-16) var(--space-20);
  }

  .faq-summary::-webkit-details-marker { display: none; }

  .faq-summary:hover { background: color-mix(in oklab, var(--on-surface) 11%, transparent); border-radius: 0.75rem; }

  .faq-summary:focus-visible {
    border-radius: 0.75rem;
    outline: 2px solid var(--ink-blue);
    outline-offset: 2px;
  }

  .faq-icon {
    color: var(--accent-text);
    font-size: 1.5rem;
    font-weight: 400;
    transition: transform 0.2s ease;
    flex-shrink: 0;
  }

  details[open] .faq-icon { transform: rotate(45deg); }

  .faq-body {
    color: var(--text-muted);
    line-height: 1.7;
    padding: 0 var(--space-20) var(--space-20);
  }

  .faq-body code,
  .faq-body__code {
    background: color-mix(in oklab, var(--on-surface) 13%, transparent);
    border-radius: var(--radius-chip);
    color: var(--text-primary);
    font-family: var(--font-mono);
    padding: 2px 6px;
  }

  /* ---- Final CTA ---- */
  .section-final-cta {
    background: var(--bg-elevated);
    overflow: hidden;
    padding-block: var(--space-48);
    position: relative;
  }

  @media (min-width: 768px) {
    .section-final-cta { padding-block: var(--space-80); }
  }

  .final-cta__kicker {
    color: var(--accent-text);
    margin-bottom: var(--space-16);
    opacity: 0.8;
  }

  .final-cta__heading {
    font-family: var(--font-display);
    color: var(--text-primary);
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    font-weight: 700;
    line-height: 1.25;
    margin: 0 auto var(--space-24);
    max-width: 640px;
  }

  .final-cta__sub {
    color: var(--text-muted);
    font-size: 1.05rem;
    line-height: 1.6;
    margin: 0 auto var(--space-32);
    max-width: 500px;
  }

  .final-cta__cta { margin-bottom: var(--space-24); }

  .final-cta__guarantee {
    align-items: center;
    background: color-mix(in oklab, var(--on-surface) 11%, transparent);
    border: 1px solid var(--border-hairline);
    border-radius: 0.75rem;
    display: inline-flex;
    gap: var(--space-12);
    margin: 0 auto;
    padding: var(--space-12) var(--space-24);
  }

  .final-cta__guarantee-title {
    color: var(--accent-text);
    font-size: 0.75rem;
    font-weight: 700;
    margin-bottom: 2px;
  }

  .final-cta__guarantee-sub { color: var(--text-faint); font-size: 0.7rem; }

  /* ---- Footer ---- */
  .footer {
    background: var(--bg-elevated);
    border-top: 1px solid color-mix(in oklab, var(--on-surface) 14%, transparent);
    color: var(--text-primary);
    padding: var(--space-32) 1.5rem var(--space-24);
    text-align: center;
  }

  @media (min-width: 768px) {
    .footer { padding: var(--space-48) 1.5rem var(--space-32); }
  }

  .footer__logo {
    display: block;
    margin: 0 auto var(--space-16);
    width: 140px;
  }

  @media (min-width: 768px) {
    .footer__logo { width: 180px; }
  }

  /* 0.85rem era o mesmo valor que --t-label entrega no topo do clamp; a troca
     não muda o corpo medido e passa as duas linhas a acompanhar a escala. */
  .footer__tagline { color: var(--text-muted); font-size: var(--t-label); margin-bottom: var(--space-8); }
  .footer__copy    { color: var(--text-faint); font-size: var(--t-label); }

  .footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    justify-content: center;
    margin-top: var(--space-16);
  }

  .footer__links a {
    color: var(--text-faint);
    font-size: 0.875rem;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .footer__links a:hover { color: var(--accent-text); }

  .footer__sep { color: color-mix(in oklab, var(--on-surface) 20%, transparent); }

  /* ---- Sticky CTA mobile ---- */
  .sticky-cta {
    background: var(--bg-elevated);
    border-top: 1px solid color-mix(in oklab, var(--on-surface) 16%, transparent);
    bottom: 0;
    box-shadow: 0 -8px 24px color-mix(in oklab, var(--on-surface) 16%, transparent);
    display: none;
    left: 0;
    position: fixed;
    right: 0;
    z-index: 40;
  }

  @media (max-width: 767px) {
    .sticky-cta.is-visible { display: block; }
  }

  .sticky-cta__inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    padding: var(--space-12) var(--space-16);
  }

  .sticky-cta__plans {
    display: flex;
    gap: var(--space-16);
    justify-content: center;
  }

  .sticky-cta__plan {
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 600;
    min-height: 24px;
    text-decoration: none;
  }

  .sticky-cta__plan:hover { color: var(--accent-text); }

  .sticky-cta__cta {
    font-size: 0.9rem;
    min-height: 44px;
    padding: 14px 20px;
  }

  /* ---- Scroll progress ---- */
  /* Tinta chapada, não gradiente. A barra é medida por SCALE, não
     por largura: `width` é propriedade de layout e escrevê-la a
     cada evento de scroll custa reflow por quadro, enquanto
     `transform` fica no compositor.

     O par é indivisível: a largura é fixa em 100% e quem varia é
     `scaleX()`, escrito por assets/js/main.js. Voltar o JS para
     `style.width` sem voltar isto aqui deixa a barra sempre cheia;
     mudar isto sem mudar o JS deixa a barra sempre vazia. */
  .scroll-progress {
    background: var(--ink-red);
    height: 2px;
    left: 0;
    pointer-events: none;
    position: fixed;
    top: 0;
    transform: scaleX(0);
    transform-origin: left center;
    width: 100%;
    z-index: 200;
  }

  /* ════════════════════════════════════════════════════════════
     CLASSES QUE SUBSTITUÍRAM ATRIBUTO `style=` NO index.html

     O index.html nunca havia sido varrido: era a última página com
     tipografia e cor cravadas em atributo. Cada classe abaixo existe
     porque o MESMO par declaração/valor se repetia em várias linhas do
     HTML — não para dar nome bonito a um caso único.
     ════════════════════════════════════════════════════════════ */

  /* Nota de fim de seção. Eram duas linhas idênticas em atributo, uma
     com --text-faint e outra com o alias --black-mute-40 (o MESMO
     valor sob dois nomes, que é como um sistema de tokens começa a
     divergir de si mesmo). */
  .section-note {
    color: var(--text-faint);
    font-size: var(--t-label);
    margin-top: var(--space-32);
    text-align: center;
  }

  /* Parágrafo de abertura de seção: 7 ocorrências pedindo a mesma tinta
     diluída em atributo. Só a COR vem para cá — a largura de medida de
     cada um segue no HTML porque varia por seção e é layout, não token. */
  .lede { color: var(--text-muted); }

  /* Rótulo de grupo no meio de uma seção ("Para o Claude Code…", "Para o
     Codex CLI…"). As duas ocorrências eram byte a byte idênticas em
     atributo, cor e margem incluídas, então as duas vêm inteiras. */
  .section-label {
    color: var(--text-faint);
    margin: var(--space-40) 0 var(--space-16);
  }

  /* .hero-sub é tinta diluída por definição; o <strong> dentro dela
     precisa da tinta cheia para o realce funcionar. Eram 4 atributos
     `style="color:var(--text-primary)"` no mesmo parágrafo. */
  .hero-sub strong,
  .lede strong { color: var(--text-primary); }

  /* Link dentro de corpo de texto: sublinhado com respiro, sem depender
     de cor para carregar o significado sozinho. */
  .link-inline {
    color: var(--text-primary);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .faq-body a { color: var(--accent-text); }

  /* Páginas utilitárias de uma mensagem só (404, trial-enviado). O bloco
     era IDÊNTICO nas duas, cravado em atributo nas duas.
     svh depois de vh: no celular o vh conta a barra de endereço que
     some, e a caixa centralizada dava um salto na primeira rolagem.
     Navegador sem svh fica com o vh, que era o comportamento anterior. */
  .page-center {
    align-items: center;
    display: flex;
    justify-content: center;
    min-height: 80vh;
    min-height: 80svh;
    /* O 8rem cravado que estava aqui era a altura da topbar fixa mais um
       respiro, escrita como número solto. Agora diz o que quer dizer: se
       --topbar-h mudar, este espaço acompanha em vez de encavalar. */
    padding: calc(var(--topbar-h) + var(--space-48)) 1.5rem var(--space-64);
    text-align: center;
  }

  .page-center__box { max-width: 520px; }
}

/* -------------- Animations & decorations ------------------ */
@layer animations {
  html.js-on .reveal {
    opacity: 0;
    transform: translateY(28px) scale(0.97);
    transition: opacity 0.65s var(--ease-out-soft), transform 0.65s var(--ease-out-soft);
  }

  html.js-on .reveal.is-visible { opacity: 1; transform: translateY(0) scale(1); }

  /* Os "ambient orbs" (.ao) e os @keyframes ao-float-1/2/3 saíram
     daqui junto com os 5 <div class="ao"> do index.html: eram
     manchas difusas em blur, que a tinta chapada não tem, e já
     estavam desligadas por `display: none` mais abaixo. Nenhum
     elemento e nenhuma animação restante os referencia. */

  @keyframes aurora-drift-a {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(60px, -40px) scale(1.1); }
  }

  @keyframes aurora-drift-b {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-50px, 30px) scale(0.95); }
  }

  @keyframes aurora-drift-c {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(30px, -20px) scale(1.05); }
  }

  @keyframes claude-code-dance {
    0%, 100% { transform: translate(0, 24px) rotate(-5deg) scale(1); }
    20% { transform: translate(46px, 70px) rotate(7deg) scale(1.04, 0.96); }
    40% { transform: translate(12px, 132px) rotate(-8deg) scale(0.98, 1.04); }
    60% { transform: translate(74px, 98px) rotate(6deg) scale(1.03, 0.97); }
    80% { transform: translate(28px, 48px) rotate(-4deg) scale(0.99, 1.02); }
  }

  @keyframes claude-code-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
  }

  @keyframes marquee-left {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }

  @keyframes cursor-blink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
  }

  /* Section watermark */
  .section-watermark {
    -webkit-text-stroke: 1px color-mix(in oklab, var(--on-surface) 13%, transparent);
    color: transparent;
    font-size: clamp(6rem, 18vw, 14rem);
    font-family: var(--font-display);
    font-weight: 700;
    pointer-events: none;
    position: absolute;
    text-transform: uppercase;
    user-select: none;
    z-index: 0;
  }

  /* prefers-reduced-motion vive num bloco único, fora das camadas,
     no fim do arquivo. Havia dois blocos parciais aqui e no fim, e
     entre os dois sobreviviam três animações (ver lá). */
}

/* -------------- Utilities --------------------------------- */
@layer utilities {
  .hidden { display: none !important; }

  /* Tinta de acento como utilitário, para os realces que estavam em
     `style="color:var(--accent-from)"`.

     Lê --accent-text de propósito, e não uma tinta da escala: o token já
     gira por contexto e é isso que mantém o realce legível sem uma regra
     por seção. Sobre papel é o vermelho profundo (6.84:1); no bloco
     escuro da noite é o ouro (8.11:1); dentro de .bg-black, que pinta
     campo azul mesmo de dia, o próprio .bg-black reatribui --accent-text
     para ouro — então a MESMA classe acerta a tinta nos três casos.
     Uma cor cravada aqui erraria pelo menos um deles. */
  .ink-accent { color: var(--accent-text); }

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

  .skip-link {
    background: var(--ink-blue);
    color: var(--ink-paper);
    left: 0;
    padding: 0.5rem 1rem;
    position: absolute;
    top: -40px;
    z-index: 9999;
  }

  .skip-link:focus { top: 0; }
}

/* -------------- Modal: e-mail descartável (trial) ---------- */
.cj-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: color-mix(in oklab, var(--ink-blue-900) 62%, transparent);
}

.cj-modal-overlay[hidden] { display: none; }

.cj-modal-card {
  background: var(--bg-raised);
  color: var(--text-primary);
  border: 1px solid color-mix(in oklab, var(--on-surface) 18%, transparent);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-3d-lg);
  max-width: 420px;
  width: 100%;
  padding: 1.75rem;
  text-align: center;
}

.cj-modal-title { margin: 0 0 0.75rem; font-size: 1.25rem; font-weight: 700; font-family: var(--font-body); }
.cj-modal-text  { margin: 0 0 1.5rem; font-size: 1rem; line-height: 1.6; color: var(--text-muted); }
.cj-modal-close { width: 100%; }

/* ============================================================
   MUNDO DE CARTAZ — componentes de serigrafia
   Regras fora de @layer: vencem as camadas legadas por cascata.
   ============================================================ */

/* -- Voz de cartaz: condensada, caixa alta, entrelinha travada -- */
h1, h2, .t-display, .t-hero, .t-section {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 800;
  line-height: .9;
  letter-spacing: -.015em;
  text-wrap: balance;
}
h1, .t-display { font-size: var(--t-display); }
.t-hero  { font-size: var(--t-hero); }
h2, .t-section { font-size: var(--t-section); }
h3 { font-family: var(--font-body); font-weight: 700; letter-spacing: .01em; }
p  { max-width: 68ch; }

/* -- Faixa marquee: o dispositivo de assinatura -- */
.marquee {
  background: var(--ink-red-deep);
  color: var(--ink-paper);
  border-block: 3px solid var(--ink-blue);
  overflow: hidden;
  padding-block: var(--space-8);
  position: relative;
}
.marquee__track {
  display: flex;
  gap: var(--space-32);
  width: max-content;
  animation: marquee-run 38s linear infinite;
}
.marquee__item {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: var(--space-32);
}
.marquee__item::after {
  content: "";
  width: .62em; height: .62em;
  background: var(--ink-gold);
  clip-path: polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
  flex: none;
}
@keyframes marquee-run { to { transform: translateX(-50%); } }

/* -- Emblema: a chave sobre campo ouro, raios chapados -- */
.emblem { display: block; width: min(100%, 30rem); margin-inline: auto; }
.emblem__rays { fill: var(--ink-gold); }
.emblem__disc { fill: var(--ink-gold); }
.emblem__key  { fill: var(--ink-blue); }
.emblem__ring { fill: none; stroke: var(--ink-red); stroke-width: 8; }

/* -- Botões: retângulo de tinta, canto reto, sem sombra difusa -- */
.btn-cartoon, .badge-3d, button[type="submit"], .btn {
  border-radius: 0;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: .04em;
  box-shadow: 4px 4px 0 var(--ink-blue);
  transition: transform .12s var(--ease-out-soft), box-shadow .12s var(--ease-out-soft);
}
.btn-cartoon { background: var(--btn-primary-bg); color: var(--btn-primary-text); border: 3px solid var(--ink-blue); }
.btn-cartoon:hover, .badge-3d:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink-blue); }
.btn-cartoon:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--ink-blue); }
.badge-3d { background: transparent; color: currentColor; border: 3px solid currentColor; }
.bg-black .btn-cartoon, .bg-red .btn-cartoon { box-shadow: 4px 4px 0 var(--ink-gold); border-color: var(--ink-paper); }

/* -- Cartões: campo chapado com régua; profundidade por desregistro -- */
.card, .faq-item, .tool-card, .step-card, .model-card, .comparison-card {
  border-radius: 0;
  border: 3px solid var(--border-hairline);
  background: var(--surface-field);
  box-shadow: var(--misregister);
}
.bg-black .card, .bg-black .faq-item, .bg-black .tool-card,
.bg-black .step-card, .bg-black .model-card {
  background: var(--ink-blue-deep);
  box-shadow: 3px 3px 0 var(--ink-gold);
}

/* -- Réguas de 2px: fio de cabelo pertence à anti-referência -- */
hr, .rule { border: 0; border-top: 3px solid var(--border-hairline); }

/* -- Código: bloco de tinta, não vidro -- */
pre, code, kbd { border-radius: 0; font-family: var(--font-mono); }
pre {
  background: var(--ink-blue);
  color: var(--ink-paper);
  border: 3px solid var(--ink-blue);
  box-shadow: 4px 4px 0 var(--ink-red);
  padding: var(--space-20);
  overflow-x: auto;
}
pre code { background: none; color: inherit; }
:not(pre) > code {
  background: var(--ink-gold);
  color: var(--ink-blue);
  padding: .12em .38em;
  font-size: .9em;
}

/* -- Campos de formulário -- */
input[type="email"], input[type="text"], input[type="password"], textarea, select {
  border-radius: 0;
  border: 3px solid var(--border-hairline);
  background: var(--surface-inset);
  color: var(--text-primary);
  font-family: var(--font-body);
}
input:focus-visible, textarea:focus-visible, select:focus-visible,
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--ink-red);
  outline-offset: 2px;
}

/* -- Movimento nativo: passagem de rodo, uma vez, orquestrada -- */
@keyframes squeegee {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}
.reveal.is-visible > * { animation: squeegee .55s var(--ease-out-soft) both; }
.reveal.is-visible > *:nth-child(2) { animation-delay: .07s; }
.reveal.is-visible > *:nth-child(3) { animation-delay: .14s; }

/* ============================================================
   prefers-reduced-motion — bloco ÚNICO e final.

   Antes eram dois blocos parciais (um em @layer animations, um
   aqui) e nenhum dos dois desligava `animation` de forma geral.
   Sobreviviam ao reduce: a marquee de features (`marquee-left`,
   40s), o cursor piscando do terminal (`cursor-blink`) e as
   animações inline dos orbes (`animation:` no atributo style).

   `!important` ficou APENAS no bloco universal, e por um motivo de
   especificidade que não tem como contornar: `*` é (0,0,0), então
   QUALQUER regra de classe com o atalho `transition:` ou
   `animation:` — e há dezenas, aqui, em auth.css e em setup.css —
   venceria o reduce. É o mesmo motivo pelo qual o reset canônico de
   reduced-motion usa `!important` nesse seletor.

   Os três blocos ALVO abaixo perderam o `!important` (eram 7). Eles
   não precisam dele porque vivem FORA de @layer:
   - `.features-track`, `.claude-code-symbol*` e
     `.hero-visual__code .cursor` são declarados dentro de
     @layer components, e declaração normal sem camada vence
     declaração normal em camada, seja qual for a especificidade;
   - `.marquee__track` e `.reveal*` são declarados sem camada mais
     ACIMA neste mesmo arquivo, com especificidade igual — e em
     empate vence a última, que é esta.
   Conferido também que auth.css, setup.css e o <style> que o
   contact-widget injeta não tocam nenhum destes seletores.

   O motivo antigo nº 1 — "os orbes trazem `animation:` em atributo
   style inline" — deixou de existir: os 5 `<div class="ao">` do
   index.html foram apagados (eram `display: none`, peso morto), e
   não sobrou nenhum `style="...animation:..."` em HTML nenhum.

   As duas marquees levam `animation: none` + `transform: none`
   em vez de duração ~0: com duração 0.01ms a animação salta para
   o quadro final (translateX(-50%)) e metade das ferramentas
   ficaria fora da tela. O requisito é manter tudo VISÍVEL. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-delay: 0s !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-delay: 0s !important;
    transition-duration: 0.01ms !important;
  }

  /* Faixas: param no início, legíveis, sem salto de quadro final */
  .features-track,
  .marquee__track {
    animation: none;
    transform: none;
  }

  /* Nada entra por varredura: tudo já está visível */
  .reveal,
  .reveal.is-visible,
  .reveal.is-visible > * {
    animation: none;
    clip-path: none;
    opacity: 1;
    transform: none;
  }

  /* Decoração puramente cinética sai de cena */
  .claude-code-symbol,
  .claude-code-symbol__mark,
  .hero-visual__code .cursor {
    animation: none;
  }
}

/* -- Marca em SVG: nada a fazer aqui, e é isso que está certo --

   Havia um `filter: invert(1)` neste ponto para salvar a wordmark no
   tema escuro: a arte trazia tinta escura cravada no atributo de
   preenchimento e, como SVG carregado por tag de imagem é documento
   próprio (não vê custom property nem cascata da página), essa tinta
   sobre o azul da noite desaparecia.

   O invert saiu porque a causa saiu. A arte agora se tematiza por
   dentro: o campo do emblema é ouro invariante e a wordmark vira por
   `prefers-color-scheme` declarado DENTRO do arquivo .svg, que é a
   única coisa da página que um documento carregado por tag de imagem
   realmente enxerga.

   Não recolocar o invert: sobre arte de dois tons ele trocaria o
   ouro por azul-claro e a chave azul por ouro — o emblema deixaria
   de ser o emblema. O porquê de cada tom está comentado dentro do
   próprio arquivo da marca, em assets/img/ */

/* -- Grão de papel: o suporte tem textura, a tinta não -- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================
   CORREÇÕES DE RENDER — verificadas em navegador

   Estas regras vivem FORA de @layer. Na cascata, uma declaração
   normal sem camada vence qualquer declaração normal dentro de
   @layer — independentemente da especificidade. Logo, para bater
   as regras de @layer components/base/animations deste arquivo,
   `!important` nunca foi necessário: era ruído.

   O que restou de `!important` está aqui por um motivo nomeado
   caso a caso, e não por ordem de cascata.
   ============================================================ */

/* O cabeçalho fixo com vidro escondia a faixa de ferramentas e é
   dispositivo banido pelo mundo. Cartaz não tem cromo flutuante.
   A barra é papel de dia e azul profundo de noite — cravar
   --ink-paper aqui deixava texto de papel sobre papel (1.05:1). */
.top-bar {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: var(--surface-page);
  border-bottom: 3px solid var(--on-surface);
  pointer-events: auto;
  position: static;
}
html { scroll-padding-top: 0; }
section[id] { scroll-margin-top: 0; }

/* Resto decorativo do site de origem: grade fantasma. Não pertence
   a tinta chapada.
   `.grid-overlay--dark` e `.ao` saíram da lista porque saíram do
   HTML — o modificador --dark virou `.grid-overlay` simples no
   index.html e os 5 orbes foram apagados. Manter seletor para
   classe que ninguém usa é a regra órfã que check-brand.sh 3b
   procura no sentido inverso.
   `.grid-overlay` FICA: são 5 elementos ainda no index.html, e sem
   esta regra a classe é que ficaria órfã (check-brand.sh 3a). */
.grid-overlay { display: none; }

/* Emblema: peça de composição, não fundo de tela. */
.emblem { margin: 0 0 var(--space-24); width: clamp(9rem, 20vw, 16rem); }

/* O display é a tinta vermelha, e precisa caber. */
h1,
.t-display { color: var(--ink-red); }
:root { --t-display: clamp(2.75rem, 7.5vw, 5.5rem); }
.bg-black h1,
.bg-black .t-display,
.bg-red h1 { color: var(--ink-gold); }

/* Terminal: bloco de tinta. Sem cantos redondos, sem sombra difusa,
   sem os três pontos de janela de outro sistema operacional.
   O terminal é campo azul nos dois temas, então a tinta interna
   fica cravada de propósito: papel e ouro sobre azul. */
.hero-visual,
.hero-visual__code {
  border: 3px solid var(--ink-blue);
  border-radius: 0;
  box-shadow: 6px 6px 0 var(--ink-red);
}

.hero-visual__bar {
  background: var(--ink-blue);
  border-bottom: 3px solid var(--ink-paper);
  border-radius: 0;
}

/* Comentário e placeholder do terminal estavam ilegíveis. */
.hero-visual__code .dim,
pre .dim {
  color: var(--ink-gold);
  opacity: 1;
}

.hero-visual__code .ok,
pre .ok { color: var(--ink-gold); }

.hero-visual__code .ac,
pre .ac {
  color: var(--ink-paper);
  font-weight: 700;
}

/* Elementos flutuantes em pílula com sombra macia. */
.hero-badge,
.badge-3d,
.sticky-cta,
.sticky-cta__inner,
.trust-pill,
[class*="pill"] { border-radius: 0; }

/* Fantasmas decorativos do site de origem: manchas difusas, brilhos e
   logos de terceiros em marca d'água. Tinta chapada não tem neblina. */
[class*="glow"],
[class*="orb"],
[class*="blob"],
[class*="deco"],
.hero-visual__float,
.hero__bg,
.hero-bg,
.section-models img[aria-hidden="true"],
#hero > svg,
#hero > img,
.section-models > svg[aria-hidden="true"] { display: none; }

/* Pílula flutuante do CTA móvel: bloco de tinta com desregistro. */
.sticky-cta__inner {
  background: var(--ink-blue);
  border: 3px solid var(--ink-paper);
  box-shadow: 4px 4px 0 var(--ink-red);
}

/* O ✓ e o rótulo do card precisam de tinta cheia, não diluída.
   Ordem importa: a regra do modificador vem depois da base. */
.card-light__check {
  color: var(--accent-text);
  opacity: 1;
}

.card-light__text {
  color: var(--text-primary);
  font-size: var(--t-label);
}

.card-light--vs .card-light__check { color: var(--text-primary); }

.bg-black .card-light__check,
.bg-black .card-light__text { color: var(--ink-paper); }

/* Badge do terminal: era pílula escura com três tamanhos quase iguais
   e texto a 72% de opacidade. Vira etiqueta de tinta, um tamanho só.
   Fica em ouro/azul nos dois temas: é etiqueta sobre o campo azul. */
.hero-visual__badge {
  background: var(--ink-gold);
  border: 3px solid var(--ink-blue);
  border-radius: 0;
  box-shadow: 3px 3px 0 var(--ink-red);
  padding: var(--space-8) var(--space-16);
}

.hero-visual__badge,
.hero-visual__badge * {
  color: var(--ink-blue);
  font-family: var(--font-display);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.05em;
  opacity: 1;
  text-transform: uppercase;
}

/* ============================================================
   Widget de contato — REDE DE SEGURANÇA, não mais correção.

   A FONTE foi corrigida: assets/js/contact-widget.js já injeta o
   próprio <style> lendo os tokens da direção, com literal de
   reserva em cada var(). O tema antigo (pílula de 9999px,
   near-black #111 com Inter, cartão branco que não virava à noite,
   cinza rgba(17,17,17,.66) no apoio) saiu de lá.

   Então por que este bloco fica? Porque `contact-widget.js` entra
   SEM cache-buster (`<script src="/assets/js/contact-widget.js">`,
   ao contrário do styles.v2.css, que leva ?v=). Um visitante com o
   JS antigo em cache e o CSS novo veria o widget do tema antigo.
   Este bloco cobre essa janela, e some quando o script ganhar
   versão no nome ou a janela de cache passar.

   Mecanismo, para quem mexer: o <style> injetado entra em
   document.head em runtime, DEPOIS deste arquivo. Ordem, porém, só
   decide EMPATE — o CSS injetado usa seletores de uma classe
   (0,1,0), então prefixar `body` (0,1,1) vence por especificidade,
   sem `!important`.

   As classes reais são .cjc-* — o bloco original deste arquivo
   mirava .contact-widget__*, que não casa com nada no DOM e
   portanto nunca corrigiu coisa alguma, apesar dos 5 !important.
   ============================================================ */
body .cjc-fab,
body .cjc-card,
body .cjc-field,
body .cjc-send {
  border-radius: 0;
  font-family: var(--font-body);
}

body .cjc-fab {
  background: var(--field-red);
  border: 3px solid var(--ink-blue);
  box-shadow: 4px 4px 0 var(--ink-blue);
  color: var(--ink-paper);
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body .cjc-overlay { background: color-mix(in oklab, var(--ink-blue-900) 62%, transparent); }

body .cjc-card {
  background: var(--surface-field);
  border: 3px solid var(--on-surface);
  box-shadow: 6px 6px 0 var(--ink-red);
  color: var(--text-primary);
}

body .cjc-title {
  color: var(--text-primary);
  font-family: var(--font-display);
  text-transform: uppercase;
}

body .cjc-sub { color: var(--text-muted); }

body .cjc-field {
  background: var(--surface-inset);
  border: 3px solid var(--on-surface);
  color: var(--text-primary);
}

body .cjc-field::placeholder { color: var(--text-faint); }

/* O :focus injetado é (0,2,0); este é (0,2,1). */
body .cjc-field:focus {
  border-color: var(--ink-red);
  box-shadow: var(--focus-ring);
  outline: none;
}

body .cjc-send {
  background: var(--btn-primary-bg);
  border: 3px solid var(--ink-blue);
  box-shadow: 4px 4px 0 var(--ink-blue);
  color: var(--btn-primary-text);
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
}

body .cjc-close,
body .cjc-status { color: var(--text-primary); }

/* ============================================================
   Documentos legais — privacidade.html e termos.html

   Estas duas páginas eram as últimas com o tema antigo cravado em
   `style=` inline: `color:#222` (near-black, anti-referência
   declarada no DESIGN.md), `color:#777` (cinza, idem), links em
   `#7C9CFF` (um azul-lavanda que nunca existiu na paleta) e
   font-size/font-weight em literal, passando por fora da escala de
   tokens. O #222 sobre o campo azul do tema escuro media 1.04:1 —
   a mesma classe de defeito catastrófico já corrigida em outros
   pontos do site.

   Por que FORA de @layer: as regras de voz de cartaz (`h1, h2 {
   font-size: var(--t-display) }`, mais acima neste arquivo) também
   estão fora de camada, e regra sem camada vence QUALQUER regra
   dentro de camada, por mais específica que seja. Um
   .doc-legal__title dentro de @layer components perderia o
   font-size para o `h1` e o título continuaria menor que os
   próprios h2 dele.

   RITMO DE ESPAÇAMENTO — o defeito era `margin:2rem 0 .5rem`
   repetido em todos os 7/8 h2, uma régua só, e parágrafo com
   margem ZERO (o reset zera, e nada devolvia): dois parágrafos
   seguidos encostavam sem intervalo nenhum. Aqui são três
   intervalos distintos, do mais apertado ao mais largo:

     8px  VÍNCULO   título → o bloco que ele governa; lista → a
                    frase que a introduz. Junto porque é uma coisa.
     20px PAR       parágrafo → parágrafo irmão dentro da mesma
                    cláusula. Separado, mas ainda dentro do assunto.
     64px CLÁUSULA  qualquer coisa → h2 seguinte. O respiro que
                    diz "acabou um assunto, começa outro".

   A proporção 1 : 2.5 : 8 é o que faz o agrupamento ser LIDO. Um
   único valor de margem, por mais bem escolhido, não hierarquiza:
   deixa o leitor procurar onde a seção começa.
   ============================================================ */
.doc-legal {
  color: var(--text-primary);
  font-size: var(--t-body);
  line-height: 1.7;
  margin-inline: auto;
  max-width: 72ch;
  padding-block: var(--space-64);
  padding-inline: var(--space-24);
}

/* O título vinha com `font-size:2rem` inline e saía com 32px,
   MENOR que os próprios h2 (56px pela escala): hierarquia
   invertida, não só achatada. Volta para a escala, um passo acima
   de --t-section (razão 1.57, acima do mínimo 1.33 do DESIGN.md).
   Fica em --t-hero e não em --t-display porque documento de leitura
   não é o herói do site: --t-display chega a 8rem e quebraria o
   título em cinco linhas dentro de uma coluna de 72ch. */
.doc-legal__title { font-size: var(--t-hero); }

.doc-legal__meta {
  color: var(--text-muted);
  font-size: var(--t-label);
}

.doc-legal__list { padding-inline-start: var(--space-24); }

.doc-legal__list > li + li { margin-block-start: var(--space-8); }

/* Cor sozinha não marca link (WCAG 1.4.1). Sublinhado de 2px: fio
   de cabelo de 1px pertence à anti-referência do DESIGN.md. */
.doc-legal a {
  color: var(--accent-text);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* -- Os três intervalos. Ordem e especificidade importam. --
   (0,1,0) o par, valor de base para irmãos quaisquer;
   (0,2,0) as duas exceções de vínculo e de cláusula;
   (0,2,1) e (0,3,0) os dois vínculos nomeados.
   Nenhum par de regras de mesma especificidade casa o mesmo
   elemento, então não há empate resolvido por sorte de ordem. */
.doc-legal > * + * { margin-block-start: var(--space-20); }

.doc-legal > * + .doc-legal__section { margin-block-start: var(--space-64); }

.doc-legal > .doc-legal__section + * { margin-block-start: var(--space-8); }

.doc-legal > .doc-legal__title + .doc-legal__meta { margin-block-start: var(--space-8); }

.doc-legal > p + .doc-legal__list { margin-block-start: var(--space-8); }

/* Rótulo de origem na barra do terminal imitado. O tamanho miúdo em
   monoespaçada é CORRETO e intencional: é chrome de terminal, onde
   rótulo pequeno é o comportamento do domínio, não hierarquia
   achatada. Ouro sobre o campo azul da barra nos dois temas. */
.hero-visual__origin {
  align-self: center;
  color: var(--ink-gold);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  margin-inline-start: auto;
}