/* Pele GeniePost para as paginas legais.
 *
 * Carregada DEPOIS de publication.css e so quando a pagina e do estudio. Ela
 * troca os tokens e o cabecalho — nunca o texto: a politica e a mesma, e um
 * arquivo de cor nao pode virar um lugar onde a politica se contradiz.
 *
 * As cores sao as do estudio (views/studio/*.html): coral --acao, teal --serie,
 * cinzas --tinta/--muted/--line. Duas mudam de propriedade aqui:
 * o coral de link fica mais escuro (#B3272C) porque #FF5A5F sobre branco da
 * 3,4:1 e texto precisa de 4,5:1.
 *
 * A fonte NAO e a Inter do estudio de proposito: estas paginas rodam sob CSP
 * com font-src 'self', entao o Google Fonts nao carregaria. O melhor disponivel
 * e a pilha do sistema, que ja e a de publication.css.
 */
:root{
  --ink:#484848;
  --muted:#767676;
  --brand:#FF5A5F;
  --brand-dark:#B3272C;
  --soft:#FFF4F4;
  --line:#EBEBEB;
  --warning:#FFF8E8;
}
body{background:#FAFAFA;color:var(--ink)}
/* Escurecer titulo so DENTRO do conteudo: o h1 do hero mora sobre o gradiente
   escuro e herda o branco de publication.css — apanha-lo aqui deixaria o titulo
   da pagina preto sobre preto. */
.content h2,.content h3,.content strong,.content th{color:#2B2B2B}

/* Cabecalho: o logo do estudio e uma marca d'agua de 34px, nao um letreiro de
   180px como o do Total Value — por isso o nome vem ao lado, em texto. */
.nav .brand{display:flex;align-items:center;gap:9px;color:#2B2B2B;font-weight:800;
  font-size:17px;text-decoration:none;letter-spacing:-.01em}
.nav .brand img{width:34px;height:34px}
.nav .brand:hover,.nav .brand:focus{text-decoration:none}
.nav-links{font-size:.93rem}
.nav a{font-weight:600}

.hero{background:linear-gradient(135deg,#2B2B2B,#8E2F33 58%,#FF5A5F)}
.hero h1{letter-spacing:-.02em;font-weight:800;color:#fff}
.eyebrow{opacity:.9}

.meta,.notice,.card,table{border-radius:14px}
.toc{border-left-color:var(--brand);background:var(--soft);border-radius:0 12px 12px 0}
th{background:var(--soft)}

/* Botao: a pilula do estudio, e nao o retangulo do site principal. O fundo e o
   coral ESCURO, e nao o #FF5A5F das telas do editor: texto branco de 14px sobre
   o coral claro da 3,1:1, abaixo do minimo legivel. A forma e a da marca; a cor
   e a que da para ler. */
.button{background:var(--brand-dark);border-radius:999px;padding:.72rem 1.35rem;font-weight:700}
.button:hover,.button:focus{background:#8E1F23}

.footer{background:#2B2B2B;color:#E8E8E8}
.footer a{color:#FFB3B5}

/* O aviso de "isto e permanente" e o unico bloco desta pagina que precisa
   parar o olho — aqui ele usa o coral da marca, nao o amarelo generico. */
.notice{background:var(--soft);border-color:#FFD4D5;border-left:4px solid var(--brand)}