/* =========================================================
   TOLZE · Páginas de documento — privacy.html e terms.html

   As duas tinham blocos <style> idênticos, copiados um do outro, e
   nenhuma delas carregava os tokens: era por isso que pareciam outro
   produto. Agora são um arquivo só, e as cores vêm do sistema.

   Uma correção de contraste no caminho: a data e o selo do cabeçalho
   usavam rgba(71,0,133,.45), que sobre o fundo claro dá ~3,4:1 — e
   estavam em 11 e 12px, onde o mínimo do WCAG é 4,5:1. Passaram a
   --tolze-text-2 (5,45:1).

   O que NÃO virou token: os tamanhos de tipo. A rampa do sistema é
   feita para o app e para o site (h1 38, h2 34, h3 23) e nenhum
   degrau dela cai nos 28/17 que um documento jurídico pede para ser
   lido em coluna estreita. O que faz estas páginas parecerem TOLZE é
   a família, a paleta e o raio — não o tamanho do título.
   ========================================================= */

*{ box-sizing:border-box; margin:0; padding:0; }

body{
  font-family:var(--tolze-font-body);
  background:var(--tolze-bg);
  color:var(--tolze-text);
  line-height:1.7;
}

header{
  background:var(--tolze-surface);
  border-bottom:1.5px solid var(--tolze-border);
  padding:16px 24px;
  display:flex; align-items:center; gap:12px;
  position:sticky; top:0; z-index:10;
}

.logo{
  font-family:var(--tolze-font-display);
  font-size:22px; font-weight:800;
  background:linear-gradient(135deg,var(--tolze-gold),var(--tolze-primary));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* O selo do cabeçalho é um overline: mono, caixa alta, tracking largo.
   É o mesmo tratamento do .tolze-eyebrow do app. */
.badge{
  font-family:var(--tolze-font-mono);
  font-size:11px; font-weight:700;
  color:var(--tolze-text-2);
  letter-spacing:var(--tolze-ls-overline-wide);
  text-transform:uppercase;
}

main{ max-width:720px; margin:0 auto; padding:40px 24px 80px; }

h1{
  font-family:var(--tolze-font-display);
  font-size:28px; font-weight:var(--tolze-fw-display);
  letter-spacing:-.03em;
  color:var(--tolze-text);
  margin-bottom:8px;
}

.updated{ font-size:12px; color:var(--tolze-text-2); margin-bottom:36px; }

h2{
  font-family:var(--tolze-font-display);
  font-size:17px; font-weight:var(--tolze-fw-strong);
  letter-spacing:-.02em;
  color:var(--tolze-primary);
  margin:32px 0 10px;
}

p, li{ font-size:14px; color:var(--tolze-text); margin-bottom:12px; }
ul{ margin:8px 0 14px 20px; }
li{ margin-bottom:6px; }

.card{
  background:var(--tolze-surface);
  border:1.5px solid var(--tolze-border);
  border-radius:var(--tolze-r-md);
  padding:20px 22px; margin-bottom:12px;
}

/* Destaque e aviso ficam um degrau abaixo do cartão no raio, porque
   estão dentro do fluxo do texto e não são um contêiner à parte. */
.highlight{
  background:var(--tolze-primary-soft);
  border:1.5px solid rgba(71,0,133,.15);
  border-radius:var(--tolze-r-sm);
  padding:14px 18px; margin:16px 0;
  font-size:13px; color:var(--tolze-on-soft);
}

/* Só o terms.html usa. Warning no sistema não é âmbar — é laranja
   terroso, justamente para não ser lido como selo de marca. */
.warning{
  background:var(--tolze-warning-bg);
  border:1.5px solid rgba(181,71,8,.28);
  border-radius:var(--tolze-r-sm);
  padding:14px 18px; margin:16px 0;
  font-size:13px; color:var(--tolze-warning);
}

/* Aqui o sublinhado fica: num documento jurídico o link precisa ser
   identificável sem depender de cor. */
a{
  color:var(--tolze-primary);
  text-decoration:underline; text-underline-offset:3px;
}
a:hover{ color:var(--tolze-primary-hover); }

footer{
  text-align:center; padding:24px;
  font-size:12px; color:var(--tolze-text-2);
  border-top:1.5px solid var(--tolze-border);
}