/* As páginas de documento: /terms, /privacy, /refunds, /partners e
 * /bot — a página onde um webmaster confere o nosso crawler depois de
 * o ver no log dele. Ela entrou em 22/09/2026, e trazia uma SÉTIMA
 * paleta só dela (`--accent:#5B8CFF`, um azul que não existe em mais
 * nenhum ficheiro do produto) e um `prefers-color-scheme: light`
 * próprio — um segundo tema para manter, de um modo escuro que o
 * produto não tem.
 *
 * 🔴 POR QUE ESTE ARQUIVO EXISTE. Até 22/09/2026 estas quatro páginas
 * tinham CADA UMA o seu `<style>` embutido — quatro cópias do mesmo
 * conjunto de componentes (`.wrap`, `.legal-brand`, `.box`, `.mut`,
 * `h2`, `table`, `ul`, `code`), e as quatro já tinham divergido: quatro
 * hashes diferentes para 920, 1228, 1172 e 1685 caracteres de CSS que
 * queriam dizer a mesma coisa.
 *
 * 🔴 E AS QUATRO ESTAVAM NO TEMA MORTO. `--bg:#060A12` (quase preto),
 * `--ink:#F4F7FF` (branco), `--brand:#65DDF3` (ciano) — a paleta de um
 * tema que o site público substituiu pela direção clara editorial. O
 * produto é marfim e verde-água; quem clicava em «Terms» caía numa
 * página preta com links ciano, e o logo lá era a variante de fundo
 * escuro, branca. Duas marcas com o mesmo nome.
 *
 * ⚠️ E não são páginas de canto: o diretório do WordPress.org EXIGE
 * /privacy e /terms e liga para elas. É a primeira coisa que alguém vê
 * depois de decidir instalar o plugin.
 *
 * ⚠️ A paleta e as fontes são as do `assets/research.css`, que por sua
 * vez são as do `:root` que vale no `index.html`. Três arquivos, um
 * valor — e `tools/checa_tokens.py` acusa cor de tema morto em todos
 * eles, para a próxima divergência não esperar um mês.
 */

@font-face{font-family:Poppins;src:url(/assets/fonts/poppins-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Poppins;src:url(/assets/fonts/poppins-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(/assets/fonts/ibm-plex-mono-500.woff2) format("woff2");font-weight:500;font-display:swap}

:root{
  --bg:#F4F3EE; --panel:#FFFDF8; --panel2:#EEEDE7;
  --line:rgba(22,22,26,.12); --line-strong:rgba(22,22,26,.22);
  --ink:#16161A; --ink-soft:#30332F; --mut:#686E69;
  --brand:#0E7A62; --brand-strong:#095E4B; --ok:#0E7A62;
  --exibir:Georgia,"Times New Roman",serif;
  --texto:Poppins,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --numero:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font:16px/1.7 var(--texto);-webkit-font-smoothing:antialiased}
/* ~68 caracteres por linha. As quatro páginas tinham 780px e 820px — um
 * documento que se lê do começo ao fim ganha mais com a medida certa que
 * com largura. */
.wrap{max-width:740px;margin:0 auto;padding:56px 20px 90px}
a{color:var(--brand);text-underline-offset:3px;
  text-decoration-thickness:from-font}
a:hover{color:var(--brand-strong)}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:4px}

.legal-brand{display:inline-flex;align-items:center;margin-bottom:40px;
  color:var(--ink);text-decoration:none}
.legal-brand img{display:block;width:104px;height:auto}

/* A serifada é a voz da marca, e ela vem do próprio site: o `h2` da home
 * é Georgia em peso 500. Num documento ela faz outra coisa útil — separa
 * «isto é um texto para ler» de «isto é uma tela de produto». */
h1{font-family:var(--exibir);font-weight:500;font-size:34px;line-height:1.15;
  letter-spacing:-.02em;margin:0 0 10px;text-wrap:balance}
.lede{font-size:18px;line-height:1.6;color:var(--ink-soft);margin:0 0 8px;
  max-width:58ch}
h2{font-family:var(--exibir);font-weight:500;font-size:23px;line-height:1.25;
  letter-spacing:-.018em;margin:46px 0 12px;padding-top:22px;
  border-top:1px solid var(--line);text-wrap:balance}
h3{font-size:15px;font-weight:600;margin:28px 0 6px}
p{margin:0 0 14px}
strong,b{font-weight:600}
.mut{color:var(--mut)}

/* O destaque, e só um. `.box.forte` troca a cor da borda — nada mais:
 * dois cartões com fundos diferentes leriam-se como dois componentes. */
.box{background:var(--panel);border:1px solid var(--line);
  border-radius:12px;padding:18px 20px;margin:22px 0}
.box.forte{border-color:var(--brand);
  background:color-mix(in srgb,var(--brand) 5%,var(--panel))}

/* Tabela rola DENTRO do contêiner; a página nunca rola na horizontal. */
table{width:100%;border-collapse:collapse;margin:18px 0;font-size:15px}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line)}
th{color:var(--mut);font-weight:600;font-size:11px;text-transform:uppercase;
  letter-spacing:.09em}
tbody tr:last-child td{border-bottom:none}
td b{color:var(--brand)}

ul,ol{padding-left:22px;margin:0 0 14px}
li{margin:7px 0}
li::marker{color:var(--mut)}

code{font-family:var(--numero);background:var(--panel2);padding:2px 6px;
  border-radius:5px;font-size:13px;border:1px solid var(--line)}
/* O bloco de codigo do /bot — a pagina onde um webmaster confere o
 * nosso crawler depois de o ver no log dele. Rola DENTRO da caixa: uma
 * linha de `User-agent` nao pode empurrar a pagina para o lado. */
pre{margin:14px 0;padding:14px 16px;overflow-x:auto;background:var(--panel2);
  border:1px solid var(--line);border-radius:10px;
  font-family:var(--numero);font-size:13px;line-height:1.6}
pre code{padding:0;background:none;border:0}

/* Botão chapado. Gradiente num botão não diz nada que a cor já não diga. */
.cta{display:inline-block;margin-top:16px;padding:13px 24px;border-radius:10px;
  background:var(--brand);color:#FFFDF8;font-weight:600;text-decoration:none;
  border:1px solid var(--brand);transition:background 140ms ease}
.cta:hover{background:var(--brand-strong);border-color:var(--brand-strong);
  color:#FFFDF8}
.cta.sec{background:transparent;border-color:var(--line-strong);color:var(--ink)}
.cta.sec:hover{background:var(--panel2);color:var(--ink)}

.pe{margin-top:58px;padding-top:22px;border-top:1px solid var(--line);
  color:var(--mut);font-size:13.5px;line-height:1.6}

@media(max-width:620px){
  .wrap{padding:36px 18px 70px}
  h1{font-size:28px}
  h2{font-size:21px;margin-top:38px}
  table{font-size:14px}
}
@media(prefers-reduced-motion:reduce){
  *{transition-duration:.01ms!important;animation-duration:.01ms!important}
}