/* Páginas de apoio do site (obrigado, baixar, privacidade, painel): o visual da landing. */
:root { --bg: #0B0B0C; --panel: #151517; --line: #2A2A2E; --ink: #F2F2EE; --ink2: #9A9AA0; --ink3: #5C5C62; --lime: #C8F53A; --on: #0B0B0C; --bad: #E5483A; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.55 "Archivo", -apple-system, "Segoe UI", sans-serif; }
main { max-width: 760px; margin: 0 auto; padding: 24px 20px 80px; }
header { display: flex; align-items: center; height: 56px; border-bottom: 1px solid var(--line); margin-bottom: 40px; }
.logo { font-weight: 900; font-size: 24px; font-stretch: 68%; text-transform: uppercase; color: var(--ink); text-decoration: none; }
.logo { display: inline-flex; align-items: center; gap: 9px; }
.logo .mark { width: 28px; height: 28px; }
h1 { font-size: 56px; line-height: .92; font-weight: 900; font-stretch: 68%; text-transform: uppercase; margin: 0 0 20px; }
h2 { font-size: 26px; font-weight: 800; font-stretch: 75%; text-transform: uppercase; margin: 40px 0 10px; padding-top: 18px; border-top: 1px solid var(--line); }
p, li { color: var(--ink2); }
b, strong { color: var(--ink); }
a { color: var(--ink); }
ol li, ul li { margin: 8px 0; }
.btn { display: inline-block; background: var(--lime); color: var(--on); font: 800 16px "Archivo", sans-serif; font-stretch: 85%; text-transform: uppercase; letter-spacing: .02em; text-decoration: none; padding: 14px 20px; border: 0; cursor: pointer; }
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn:active { opacity: .6; }
.btn[disabled] { background: var(--line); color: var(--ink3); cursor: not-allowed; }
.key { font: 600 34px ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .08em; white-space: nowrap; background: var(--lime); color: var(--on); padding: 16px 18px; display: inline-block; margin: 8px 0 6px; }
.box { border: 1px solid var(--line); padding: 18px; margin: 18px 0; }
.note { font-size: 14px; color: var(--ink3); }
.err { color: var(--bad); }
input, select { background: var(--panel); border: 1px solid var(--line); color: var(--ink); font: 16px "Archivo", sans-serif; padding: 10px 12px; border-radius: 0; }
input:focus, select:focus { outline: 2px solid var(--lime); outline-offset: -1px; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 10px 8px 10px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--ink3); font-weight: 600; text-transform: uppercase; font-size: 12px; letter-spacing: .06em; }
.tag { font-weight: 800; font-size: 12px; text-transform: uppercase; padding: 2px 6px; }
.tag.active { background: var(--lime); color: var(--on); }
.tag.blocked, .tag.refunded { background: var(--bad); color: #fff; }
footer { margin-top: 56px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink3); }
footer a { color: var(--ink2); margin-right: 14px; }
@media (max-width: 600px) { h1 { font-size: clamp(36px, 12vw, 56px); } .key { font-size: clamp(18px, 6.4vw, 24px); letter-spacing: .04em; } main { padding: 16px 16px 64px; } }