[hidden] { display: none !important; } /* components set display; hidden must still win */
html { overflow-x: clip; } /* full-bleed decoration never widens the page */
/* Paguei components. Tokens live in tokens.css; every value here references them. */

* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font); font-size: var(--s2); line-height: 1.55;
  -webkit-font-smoothing: antialiased; }
.wrap { max-width: 1120px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px)); }
a { color: var(--pen); }
:focus-visible { outline: 3px solid var(--pen); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3 { text-wrap: balance; margin: 0; letter-spacing: -0.02em; }
p { margin: 0; }
.mono { font-family: var(--mono); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* header */
header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 20px; }
.brand { font-weight: 800; font-size: 1.5rem; letter-spacing: -0.04em; color: var(--ink); text-decoration: none;
  display: inline-flex; align-items: center; gap: .45rem; }
.brand i { width: 1.15rem; height: 1.15rem; border: 2.5px solid var(--ink); border-radius: 4px; display: inline-grid;
  place-items: center; font-style: normal; font-size: .8rem; line-height: 1; }
nav { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
nav a { color: var(--ink-soft); text-decoration: none; font-weight: 500; font-size: var(--s1); }
nav a:hover { color: var(--ink); }
.btn { font: inherit; font-weight: 700; border-radius: 999px; padding: .7rem 1.25rem; border: 2px solid var(--pen);
  background: var(--pen); color: var(--on-pen); cursor: pointer; text-decoration: none; display: inline-block; white-space: nowrap; }
.btn.ghost { background: transparent; color: var(--pen); }
.btn.small { padding: .5rem 1rem; font-size: var(--s1); }
@media (max-width: 720px) { nav a:not(.btn) { display: none; } }

/* hero */
.hero { padding-block: 32px 28px; display: grid; gap: 22px; }
.hero h1 { font-size: var(--s6); line-height: 1.02; font-weight: 800; max-width: 15ch; }
.hero .lede { font-size: var(--s3); color: var(--ink-soft); max-width: 50ch; }
.join { display: flex; flex-wrap: wrap; gap: 10px; max-width: 560px; }
.join input { flex: 1 1 240px; min-width: 0; font: inherit; padding: .7rem 1rem; border-radius: 999px; border: 1.5px solid var(--ink);
  background: var(--sheet); color: var(--ink); }
.promise-line { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: var(--s1); color: var(--ink-soft); }
.promise-line span::before { content: "✓ "; color: var(--ok); font-weight: 800; }
.formnote { font-size: var(--s1); color: var(--ink-soft); }
.formnote:empty { display: none; }

/* demo tabs */
.demo { display: grid; gap: 0; margin-top: 18px; }
.tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.tab { flex: 0 0 auto; }
.tab { font: inherit; font-weight: 600; font-size: var(--s1); padding: .5rem .9rem; border: 1.5px solid var(--ink); border-bottom: 0;
  background: transparent; color: var(--ink-soft); border-radius: 6px 6px 0 0; cursor: pointer; }
.tab[aria-selected="true"] { background: var(--sheet); color: var(--ink); position: relative; top: 1.5px; }

/* boleto stub */
.stub { background: var(--sheet); border: 1.5px solid var(--ink); border-radius: 0 6px 6px 6px;
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.stub-head { grid-column: 1 / -1; display: flex; align-items: stretch; border-bottom: 1.5px solid var(--ink); min-height: 58px; }
.stub-head > * { padding: 10px 14px; display: flex; align-items: center; }
.bankbox { font-weight: 800; font-size: var(--s3); border-right: 1.5px solid var(--ink); min-width: 7.5rem; gap: .5rem; }
.bankbox small { font-weight: 500; font-size: .75rem; color: var(--ink-soft); }
.inputbox { flex: 1; min-width: 0; gap: 10px; flex-wrap: wrap; }
.inputbox input, .inputbox textarea { width: 100%; font-family: var(--mono); font-size: clamp(.78rem, 1.7vw, 1rem); border: 0;
  background: transparent; color: var(--ink); padding: 6px 0; resize: vertical; }
.inputbox textarea { min-height: 3.2em; font-size: .85rem; }
.inputbox input::placeholder, .inputbox textarea::placeholder { color: var(--ink-soft); }
.drop { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; border: 1.5px dashed var(--rule);
  border-radius: 6px; padding: 8px 12px; cursor: pointer; }
.drop.over { border-color: var(--pen); background: var(--pen-soft); }
.drop p { font-size: var(--s1); color: var(--ink-soft); }
.drop b { color: var(--ink); }
.fields { display: grid; grid-template-columns: 1fr 1fr; border-right: 1.5px solid var(--ink); align-content: start; }
.field { padding: 8px 14px; border-bottom: 1px solid var(--rule); min-width: 0; }
.field:nth-child(odd) { border-right: 1px solid var(--rule); }
.field.wide { grid-column: 1 / -1; border-right: 0; }
.field span { display: block; font-size: .72rem; color: var(--ink-soft); }
.field b { font-weight: 600; overflow-wrap: anywhere; }
.preview { grid-column: 1 / -1; padding: 12px 14px 0; }
.preview img, .preview canvas { max-width: 100%; max-height: 180px; border: 1px solid var(--rule); border-radius: 4px; display: block; }
.barcode { grid-column: 1 / -1; padding: 12px 14px 4px; border-bottom: 1px solid var(--rule); }
.barcode svg { width: 100%; max-width: 560px; height: 54px; display: block; }
.barcode svg rect { fill: var(--ink); }
.actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; padding: 12px 14px; align-items: center; }
.actions .note { font-size: .8rem; color: var(--ink-soft); margin-left: auto; }

.result { padding: 14px 16px; display: grid; gap: 12px; align-content: start; position: relative; min-width: 0; }
.result h3 { font-size: var(--s2); font-weight: 700; }
.decoded { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 0; }
.decoded dt { color: var(--ink-soft); font-size: var(--s1); }
.decoded dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; font-size: var(--s1); }
.checks li { display: grid; grid-template-columns: 1.2rem 1fr; gap: 8px; align-items: start; }
.checks li::before { content: "✓"; font-weight: 800; color: var(--ok); }
.checks li.bad::before { content: "✕"; color: var(--danger); }
.checks li.skip::before { content: "–"; color: var(--ink-soft); }
.checks li.bad { color: var(--danger); font-weight: 600; }
.verdict { font-weight: 700; padding: 10px 12px; border-radius: 6px; background: var(--ok-soft); color: var(--ok); }
.verdict.bad, .verdict.error { background: var(--danger-soft); color: var(--danger); }
.verdict.busy { background: var(--pen-soft); color: var(--pen); }
.stamp { position: absolute; right: 14px; top: 12px; border: 3px double var(--ok); color: var(--ok); font-weight: 800;
  letter-spacing: .14em; padding: 4px 10px; border-radius: 6px; transform: rotate(-9deg); font-size: .9rem; opacity: .9;
  pointer-events: none; }
.stamp.bad { border-color: var(--danger); color: var(--danger); }
.stamp.thump { animation: thump .42s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes thump { from { transform: rotate(-9deg) scale(1.9); opacity: 0; } to { transform: rotate(-9deg) scale(1); opacity: .9; } }
@media (prefers-reduced-motion: reduce) { .stamp.thump { animation: none; } }
@media (max-width: 820px) {
  .stub { grid-template-columns: minmax(0, 1fr); }
  .stub-head { flex-direction: column; }
  .bankbox { border-right: 0; border-bottom: 1px solid var(--rule); }
  .fields { border-right: 0; border-bottom: 1.5px solid var(--ink); }
  .actions .note { margin-left: 0; flex-basis: 100%; }
}

/* sections */
section { padding-block: 64px; border-top: 1px solid var(--rule); }
section h2 { font-size: var(--s5); line-height: 1.08; font-weight: 800; max-width: 22ch; }
.sub { color: var(--ink-soft); max-width: 58ch; margin-top: 10px; font-size: var(--s3); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 48px; align-items: start; }
@media (max-width: 820px) { .split { grid-template-columns: minmax(0, 1fr); gap: 28px; } }

/* ink band */
section.band { background: var(--band); color: var(--on-band); border-top: 0; }
section.band + section { border-top: 0; }
.band h2, .band .facts strong { color: var(--on-band); }
.band .sub, .band .facts p { color: var(--on-band-soft); }
.band a { color: var(--band-link); }

/* verified numbers (proof-carrying) */
.vn { position: relative; font-weight: 700; border-bottom: 1.5px dotted var(--ok); cursor: help; white-space: nowrap; }
.vn::before { content: "✓"; color: var(--ok); font-size: .7em; vertical-align: super; margin-right: 1px; }
.vn::after { content: attr(data-src); position: absolute; left: 0; bottom: calc(100% + 6px); width: max-content; max-width: 240px;
  white-space: normal; background: var(--ink); color: var(--paper); font-size: .75rem; font-weight: 500; padding: 6px 8px;
  border-radius: 6px; opacity: 0; pointer-events: none; transition: opacity .15s; z-index: 2; }
.vn:hover::after, .vn:focus-visible::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .vn::after { transition: none; } }
.legend { font-size: .78rem; color: var(--ink-soft); justify-self: start; }

/* fraud facts */
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 28px; }
.facts p { color: var(--ink-soft); }
.facts strong { display: block; color: var(--ink); font-size: var(--s4); letter-spacing: -0.02em; line-height: 1.1; margin-bottom: 6px; }
.facts cite { display: block; font-style: normal; font-size: .78rem; margin-top: 6px; }
@media (max-width: 820px) { .facts { grid-template-columns: minmax(0, 1fr); } }

/* chat */
.chat { display: grid; gap: 10px; max-width: 520px; }
.day { justify-self: center; font-size: .75rem; color: var(--ink-soft); background: var(--sheet); border: 1px solid var(--rule);
  padding: 2px 10px; border-radius: 999px; }
.msg { max-width: 88%; padding: 10px 12px 6px; border-radius: 12px; background: var(--bubble-in); border: 1px solid var(--rule);
  font-size: .95rem; display: grid; gap: 6px; }
.msg.me { justify-self: end; background: var(--bubble-out); border-color: transparent; }
.msg time { font-size: .7rem; color: var(--ink-soft); justify-self: end; }
.codecopy { display: flex; gap: 8px; align-items: center; background: var(--paper); padding: 6px 8px; border-radius: 6px; }
.codecopy span { font-family: var(--mono); font-size: .76rem; overflow-wrap: anywhere; min-width: 0; flex: 1; }
.codecopy button { font: inherit; font-size: .75rem; font-weight: 700; color: var(--pen); background: transparent; border: 1.5px solid var(--pen);
  border-radius: 999px; padding: 2px 10px; cursor: pointer; }
.thumb { display: flex; gap: 10px; align-items: center; }
.thumb i { width: 64px; height: 40px; border-radius: 4px; border: 1px solid var(--rule); background:
  repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 4px, var(--ink) 4px 5px, transparent 5px 8px); opacity: .8; }

/* checks list */
.rows { display: grid; margin-top: 28px; }
.row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 24px; padding-block: 20px; border-top: 1px solid var(--rule); }
.row:last-child { border-bottom: 1px solid var(--rule); }
.row h3 { font-size: var(--s3); font-weight: 700; }
.row p { color: var(--ink-soft); }
.alert { font-size: var(--s1); border-left: 3px solid var(--danger); padding: 6px 10px; margin-top: 8px; color: var(--ink);
  background: var(--danger-soft); border-radius: 0 6px 6px 0; }
@media (max-width: 720px) { .row { grid-template-columns: minmax(0, 1fr); gap: 6px; } }

/* comparison */
.tablewrap { overflow-x: auto; margin-top: 28px; }
table.compare { border-collapse: collapse; width: 100%; min-width: 620px; }
.compare th, .compare td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.compare thead th { font-size: var(--s1); color: var(--ink-soft); font-weight: 600; border-bottom: 1.5px solid var(--ink); }
.compare thead th.us { color: var(--pen); }
.compare tbody th { font-weight: 600; }
.compare td { color: var(--ink-soft); }
.compare td.us { color: var(--ink); font-weight: 600; background: var(--pen-soft); }
.yes::before { content: "✓ "; color: var(--ok); font-weight: 800; }
.no::before { content: "✕ "; color: var(--danger); font-weight: 800; }

/* receipt */
.receipt { background: var(--sheet); border: 1.5px solid var(--ink); border-radius: 6px; padding: 16px; display: grid; gap: 12px; min-width: 0; }
.receipt pre { margin: 0; font-family: var(--mono); font-size: .78rem; white-space: pre-wrap; overflow-wrap: anywhere;
  background: var(--paper); padding: 12px; border-radius: 6px; }
.receipt .hash { font-family: var(--mono); font-size: .76rem; overflow-wrap: anywhere; }
.receipt .row2 { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.hashstate { font-weight: 700; font-size: var(--s1); padding: 8px 10px; border-radius: 6px; }
.hashstate.ok { background: var(--ok-soft); color: var(--ok); }
.hashstate.bad { background: var(--danger-soft); color: var(--danger); }

/* promises */
.promises { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 48px; margin-top: 28px; }
.promises h3 { font-size: var(--s3); font-weight: 700; margin-bottom: 6px; }
.promises p { color: var(--ink-soft); }
@media (max-width: 720px) { .promises { grid-template-columns: minmax(0, 1fr); } }

/* pricing */
.plans { margin-top: 28px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.plan { display: grid; grid-template-rows: auto auto auto 1fr auto; gap: 14px; padding: 24px 22px; background: var(--sheet);
  border: 1.5px solid var(--rule); border-radius: 6px; min-width: 0; }
.plan.featured { border: 2px solid var(--pen); position: relative; }
.plan .tag { position: absolute; top: -12px; left: 20px; background: var(--pen); color: var(--on-pen); font-size: .75rem; font-weight: 700;
  padding: 2px 10px; border-radius: 999px; }
.plan h3 { font-size: var(--s3); font-weight: 800; }
.plan.featured h3 { color: var(--pen); }
.price { font-size: var(--s5); font-weight: 800; letter-spacing: -0.03em; white-space: nowrap; line-height: 1; }
.price small { font-size: var(--s1); font-weight: 500; color: var(--ink-soft); letter-spacing: 0; }
.plan .for { color: var(--ink-soft); font-size: var(--s1); }
.plan ul { list-style: none; padding: 14px 0 0; margin: 0; display: grid; gap: 8px; align-content: start; border-top: 1px solid var(--rule);
  font-size: .95rem; }
.plan li { display: grid; grid-template-columns: 1.1rem 1fr; gap: 8px; }
.plan li::before { content: "✓"; color: var(--ok); font-weight: 800; }
.plan .btn { text-align: center; }
.plans-note { margin-top: 16px; font-size: var(--s2); color: var(--ink-soft); max-width: 70ch; }
.plans-note strong { color: var(--ink); }
@media (max-width: 820px) { .plans { grid-template-columns: minmax(0, 1fr); gap: 24px; } }

/* faq */
details { border-top: 1px solid var(--rule); padding-block: 14px; max-width: 760px; }
details:last-of-type { border-bottom: 1px solid var(--rule); }
summary { cursor: pointer; font-weight: 700; font-size: var(--s3); list-style: none; display: flex; justify-content: space-between; gap: 16px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; color: var(--pen); font-weight: 500; }
details[open] summary::after { content: "–"; }
details p { color: var(--ink-soft); margin-top: 8px; max-width: 62ch; }
.faq { margin-top: 24px; }

.closing { display: grid; gap: 18px; }
.closing h2 { max-width: 18ch; }
footer { border-top: 1.5px solid var(--ink); padding-block: 28px 40px; font-size: var(--s1); color: var(--ink-soft); }
footer .wrap { display: grid; gap: 10px; }
footer strong { color: var(--ink); }

/* ---- security paper: guilloche behind the hero (the fine-line pattern of cheques and boletos) ---- */
.hero { position: relative; isolation: isolate; }
.hero::before {
  content: ""; position: absolute; top: -40px; bottom: 40%; left: calc(50% - 50vw); right: calc(50% - 50vw);
  z-index: -1; pointer-events: none;
  background: var(--guilloche);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='60' viewBox='0 0 240 60'%3E%3Cg fill='none' stroke='%23000' stroke-width='.8'%3E%3Cpath d='M0 30 C 30 0, 90 60, 120 30 S 210 0, 240 30'/%3E%3Cpath d='M0 30 C 30 60, 90 0, 120 30 S 210 60, 240 30'/%3E%3Cpath d='M0 20 C 40 -5, 80 45, 120 20 S 200 -5, 240 20'/%3E%3Cpath d='M0 40 C 40 65, 80 15, 120 40 S 200 65, 240 40'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 240px 60px repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='60' viewBox='0 0 240 60'%3E%3Cg fill='none' stroke='%23000' stroke-width='.8'%3E%3Cpath d='M0 30 C 30 0, 90 60, 120 30 S 210 0, 240 30'/%3E%3Cpath d='M0 30 C 30 60, 90 0, 120 30 S 210 60, 240 30'/%3E%3Cpath d='M0 20 C 40 -5, 80 45, 120 20 S 200 -5, 240 20'/%3E%3Cpath d='M0 40 C 40 65, 80 15, 120 40 S 200 65, 240 40'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 240px 60px repeat;
  opacity: .5;
}
.hero h1 { font-size: var(--s6); line-height: var(--lh-tight); letter-spacing: -0.035em; max-width: 13ch; }

/* the code the person types reads like the printed line: the grotesk, semibold, slightly open */
.inputbox input { font-family: var(--font); font-weight: 600; letter-spacing: .02em; }

/* ---- the conference: one orchestrated sequence, replayed on every check the person runs ---- */
.stub { border-radius: 0 var(--r-form) var(--r-form) var(--r-form); }
.barcode { position: relative; overflow: hidden; }
.barcode::after {
  content: ""; position: absolute; top: 8px; bottom: 0; left: 0; width: 2px; background: var(--scanner);
  box-shadow: 0 0 10px 1px var(--scanner); opacity: 0; pointer-events: none;
}
.stub.reading .barcode::after { animation: scan var(--dur-3) var(--ease-out) both; }
@keyframes scan { 0% { opacity: 1; transform: translateX(0); } 90% { opacity: 1; } 100% { opacity: 0; transform: translateX(min(560px, 92vw)); } }
.result.seq :is(dt, dd, .checks li, .verdict) {
  animation: fill var(--dur-2) var(--ease-out) both;
  animation-delay: calc(var(--dur-3) + var(--i, 0) * var(--stagger));
}
@keyframes fill { from { opacity: 0; transform: translateY(3px); } }

/* ---- picote + autenticação mecânica: where the bank prints its proof on a real boleto ---- */
.authbox {
  grid-column: 1 / -1; position: relative; padding: 14px 14px 10px; display: grid; gap: 2px;
  background: radial-gradient(circle, var(--ink-soft) 1.1px, transparent 1.4px) 0 0 / 9px 3px repeat-x;
}
.authbox::before, .authbox::after {
  content: ""; position: absolute; top: -7px; width: 14px; height: 14px; border-radius: 50%; background: var(--paper);
  border: var(--line-form);
}
.authbox::before { left: -8px; clip-path: inset(0 0 0 50%); }
.authbox::after { right: -8px; clip-path: inset(0 50% 0 0); }
.authbox > span { font-size: var(--s0); color: var(--ink-soft); }
.auth {
  font-family: var(--dot); font-weight: 900; color: var(--auth); font-size: clamp(.82rem, 1.9vw, 1.05rem); letter-spacing: .06em;
  line-height: 1.3; min-height: 1.3em; overflow-wrap: anywhere;
}
.auth.printing::after { content: "▌"; animation: blink .5s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.auth.bad { color: var(--danger); }
@media (prefers-reduced-motion: reduce) {
  .stub.reading .barcode::after, .result.seq :is(dt, dd, .checks li, .verdict), .auth.printing::after { animation: none; }
}

/* receipts use the system monospace: JSON and hashes are read by people checking, not decoration */
.receipt pre, .receipt .hash { font-family: var(--mono); }
.receipt .hash { color: var(--auth); }

/* the stub reads like the real ficha: printed fields and the barcode on the left, what the code says on the right */
@media (min-width: 821px) {
  .result { grid-column: 2; grid-row: 2 / span 3; border-left: var(--line-form); }
  .fields, .preview, .barcode { grid-column: 1; border-right: 0; }
  .barcode { border-bottom: 0; }
}
.auth { font-size: clamp(.9rem, 2.1vw, 1.2rem); }

/* waitlist: the privacy line sits under the button; the trap field is for bots only */
.consent { font-size: var(--s1); color: var(--ink-soft); }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }