/* raizelo — public verification page, all result states.
   Values (colour, spacing, type) read from the design canvas, artboards 1a (verified,
   mobile), 1b (in progress, mobile), 1c (not on record, mobile), 1d (two proofs +
   independent check open) and 1e (desktop, no issuer). The six brand colours are
   documented in /brand/README.md; the greens used below for the "verified" signal are
   NOT part of that six-colour identity palette — they are a semantic reinforcement
   colour, same status as the amber testnet stripe, and per the brief neither may ever
   be the ONLY way a state is told apart (see "no colour" below). */

/* Fontes da referência Standalone-v8, hospedadas localmente. O subset latino
   cobre pt-BR e en-US; caracteres adicionais usam a pilha de fallback. */
@font-face {
    font-family: 'Manrope';
    src: url('/fonts/manrope-latin.woff2') format('woff2');
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
}

@font-face {
    font-family: 'JetBrains Mono';
    src: url('/fonts/jetbrains-mono-latin.woff2') format('woff2');
    font-style: normal;
    font-weight: 100 800;
    font-display: swap;
}

@font-face {
    font-family: 'JetBrains Mono Fallback';
    src: local('Consolas'), local('Menlo'), local('Courier New');
    size-adjust: 106%;
    ascent-override: 100%;
    descent-override: 100%;
    line-gap-override: 0%;
}

:root {
    /* Brand palette, verbatim from /brand/README.md. */
    --coffee: #4A2F18;      /* tinta principal em fundos claros */
    --amber: #C07A26;       /* raízes, tracejado, detalhes */
    --cream: #F2E4D0;       /* tinta principal em fundos escuros */
    --amber-light: #E0A45A; /* acento em fundos escuros */
    --deep-brown: #3A2512;  /* fundo do selo; também o tom mais forte de título */
    --sand: #FAF6F0;        /* fundo neutro de apoio (site, cards) */

    /* Not brand colours — status reinforcement only, per the "no colour" rule below.
       Shape (frame weight, stripe texture, absence of a bar) is what actually carries
       the state; these three only echo it for anyone who does see colour. */
    --signal-verified: #3A5A40;
    --signal-caution: var(--amber);
    --signal-neutral: #6B5D4F;

    --ink-muted: #6B5D4F;

    /* Medido com Playwright sobre as duas páginas em 09/09/2026: em #8A7563 este token
       dava 4,06 sobre a areia e 4,37 sobre o branco, abaixo dos 4,5 que a WCAG AA pede
       para texto pequeno — e ele carrega quase tudo o que é pequeno no site: os olhos-de-
       -boi, as legendas do rodapé, os cabeçalhos das quatro tabelas da política, os links
       "seção N" dos cards e a nota do shasum. Trinta e poucos elementos, todos logo
       abaixo da linha.

       #7A6656 é o mesmo tom escurecido até 5,05 sobre areia e 5,44 sobre branco. Fica
       de propósito acima do mínimo e não no limite: 4,5 exato desaparece com o
       antialiasing. E continua distinguível de --ink-muted (5,90), que é o ponto de
       existirem dois níveis. */
    --ink-label: #7A6656;
    --hairline: rgba(74, 47, 24, .2);

    --sans: Manrope, system-ui, sans-serif;
    --mono: 'JetBrains Mono', 'JetBrains Mono Fallback', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

*, *::before, *::after {
    box-sizing: border-box;
}

/* `[hidden] { display: none }` vem da folha do NAVEGADOR, e qualquer regra de autor que
   defina `display` no mesmo elemento a vence — por origem da cascata, não por
   especificidade. Um `display: flex` de uma linha, escrito para o estado visível, torna
   o atributo inerte sem aviso nenhum.

   Foi o que aconteceu, e em produção: `.localhash`, `.checkbox__file`,
   `.checkbox__ready` e as três saídas de status todas declaram `display`, então tudo o
   que o servidor marca como `hidden` aparecia mesmo assim. Com JavaScript desligado o
   leitor via a mensagem "o cálculo precisa de JavaScript" e, logo abaixo, a zona de
   arrastar arquivo que não pode funcionar — exatamente a situação que as duas metades
   com padrões opostos existem para impedir.

   Nenhum teste de HTML alcança isto: o atributo ESTÁ no markup, e só o navegador sabe
   que o CSS o anulou. Quem pega é HomeBox_HidesTheFileHalfWithoutJavaScript, no
   Tests/E2E, medindo visibilidade real. */
[hidden] {
    display: none !important;
}

body {
    margin: 0;
    background: var(--sand);
    color: var(--coffee);
    font-family: var(--sans);
    line-height: 1.5;
    /* Belt-and-suspenders for the "no horizontal scroll on the body" rule below: even if
       one of the overflow-x containers further down were misconfigured, the page itself
       never grows wider than the viewport. */
    overflow-x: hidden;
}

/* Keep the footer at the viewport bottom on short pages and after the content
   on long pages. Screen-only so printed documents keep their natural pagination. */
@media screen {
    body:has(> .site-footer) {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        min-height: 100dvh;
    }

    body > .home,
    body > .policy,
    body > .result {
        width: 100%;
        flex: 1 0 auto;
    }

    body > .site-footer {
        flex-shrink: 0;
    }
}

a {
    color: var(--coffee);
}

a:hover {
    color: var(--amber);
}

.page-actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }
.language-switcher {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    padding: 3px;
    border: 1px solid var(--hairline);
    border-radius: 6px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .04em;
}
.language-switcher a {
    padding: 8px 10px;
    min-width: 36px;
    text-align: center;
    color: var(--coffee);
    text-decoration: none;
    border-radius: 3px;
}
.language-switcher a[aria-current="true"] { background: var(--coffee); color: var(--sand); }
.language-switcher a:not([aria-current]):hover { background: #F7EFE4; }
.language-switcher a:focus-visible { outline: 2px solid var(--coffee); outline-offset: 3px; }
.verify-language { width: 100%; max-width: 640px; margin: 0 auto; padding: 24px 20px 0; display: flex; justify-content: flex-end; }
@media (min-width: 960px) {
    .verify-language:has(+ .result--verified) { max-width: 1238px; padding: 24px 56px 0; }
}
@media (max-width: 599px) {
    .page-actions { gap: 12px; }
    .home .home__bar { flex-wrap: wrap; gap: 12px; }
}

/* Screen-default for the printed receipt (Task 11): hidden here, unconditionally, and
   only shown by verify-print.css's `[data-print-receipt] { display: block; }` rule.
   That rule lives in a stylesheet loaded with <link media="print">, so a browser never
   applies it — or downloads its cascade at all — outside of printing; it cannot be the
   thing that hides the receipt the rest of the time. Without this rule the receipt has
   no screen state of its own, and a <section> defaults to display:block, so it would
   render in full, in browser-default styling, under the normal result content on every
   visit — the opposite of "print-only". Print still wins: verify-print.css loads after
   this file, and an equal-specificity rule under @media print overrides this one only
   while actually printing. */
[data-print-receipt] {
    display: none;
}

/* ------------------------------------------------------------------------------------
   Result shell
   ------------------------------------------------------------------------------------ */

.result {
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    padding: 26px 22px 34px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.result__content {
    display: flex;
    flex-direction: column;
    gap: 22px;
    min-width: 0;
}

.result__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
}

.result__header .result__headline {
    font-size: 27px;
    line-height: 1.15;
    letter-spacing: -.025em;
}

/* The ceremonial seal is a state signal in its own right — its double ring and
   dashed perforation read as "verified" even in a black-and-white printout where the
   green accent below disappears entirely. Applied to the result header, keeping the seal beside its title on desktop. */
.result__header::before {
    content: '';
    display: block;
    width: 126px;
    height: 126px;
    flex: none;
    margin: 0 auto;
    background: url('/brand/raizelo-selo-completo.svg') center / contain no-repeat;
}

/* The seal reads as "verified" on its own, independent of the headline text next to
   it — so when not one anchored proof could have its own material re-derived, the seal
   must not render either, or a reader who only glances at the graphic gets the claim
   the headline text was just changed to stop making. */
.result--verified[data-any-verified="false"] .result__header::before {
    display: none;
}

.result__headline {
    margin: 0;
    text-align: center;
    font-size: 27px;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--deep-brown);
}

.result__also-pending {
    margin: 0;
    text-align: center;
    font-size: 13px;
    font-weight: 500;
    color: #A06A22;
}

/* Same convention as the verified seal above — a state signal built from CSS alone, with
   no image asset and no element of PendingState/NotFoundState's own markup. The dashed
   ring reads as "in progress" even in a monochrome printout; the plain ring reads as
   "nothing found" rather than as an error. Simplified from the canvas's three concentric
   rings to a dashed (or solid) ring plus one bar — the middle ring is decorative and not
   worth the extra radial-gradient layer for a state a reader sees once and moves past. */
.result--pending::before,
.result--not-found::before {
    content: '';
    display: block;
    width: 108px;
    height: 108px;
    margin: 0 auto;
    border-radius: 50%;
}

.result--pending::before {
    border: 4px dashed var(--amber);
    background: linear-gradient(var(--amber), var(--amber)) no-repeat center / 26px 4px;
}

.result--not-found::before {
    border: 1.5px solid var(--signal-neutral);
    background:
        linear-gradient(var(--signal-neutral), var(--signal-neutral)) no-repeat center / 46px 3px,
        #F4EFE7;
}

/* Shared by every plain explanatory paragraph across the pending and not-found states —
   the intro under the headline, and the "sensible next step" body. */
.result__body {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--ink-muted);
}

/* ------------------------------------------------------------------------------------
   Pending — two levels. The estimate box only renders while EstimatedAnchor is present;
   once the API drops it, only .result__body (via Pending.Late) and
   .result__receipt-unavailable (via Pending.ReceiptLaterNoTime) remain — see
   PendingState.razor for why the absence itself is the second level's whole signal.
   ------------------------------------------------------------------------------------ */

.result__estimate {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 15px 16px;
    background: repeating-linear-gradient(135deg, #FBF3E7 0 9px, #F7EBD9 9px 18px);
    border: 1px solid rgba(192, 122, 38, .45);
    border-radius: 10px;
}

.result__estimate-label {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #A06A22;
}

.result__estimate time {
    display: block;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--deep-brown);
}

.result__note {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--coffee);
}

/* A small open-circle bullet, drawn with ::before rather than as a markup element — same
   reasoning as the state rings above. */
.result__receipt-unavailable {
    position: relative;
    margin: 0;
    padding: 16px 0 0 20px;
    border-top: 1px solid rgba(74, 47, 24, .15);
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--ink-muted);
}

.result__receipt-unavailable::before {
    content: '';
    position: absolute;
    top: 19px;
    left: 0;
    width: 9px;
    height: 9px;
    border: 1.5px solid var(--ink-label);
    border-radius: 50%;
}

.result__address-note {
    margin: 0;
    text-align: center;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--ink-muted);
}

.result__meanwhile {
    margin: 0;
    padding-top: 16px;
    border-top: 1px solid rgba(74, 47, 24, .15);
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--ink-muted);
}

/* ------------------------------------------------------------------------------------
   Not-found — the explanations list and the follow-up subhead reuse the same
   .result__subhead class (see NotFoundState.razor); the canvas draws the first as a
   small mono label and the second as a larger heading, unified here into one style.
   ------------------------------------------------------------------------------------ */

.result__subhead {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--deep-brown);
}

.result__explanations {
    margin: 0;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 9px;
    list-style: none;
    counter-reset: explanation;
    background: #FFFCF7;
    border: 1px solid rgba(107, 93, 79, .4);
    border-radius: 10px;
}

.result__explanations li {
    counter-increment: explanation;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 13px;
    line-height: 1.5;
    color: var(--coffee);
}

.result__explanations li::before {
    content: counter(explanation, decimal-leading-zero);
    flex: none;
    margin-top: 2px;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--ink-label);
}

/* ------------------------------------------------------------------------------------
   Proof card — one anchored record. Every card carries the same 4px left frame; colour
   is not what marks a record "verified", the frame weight is. The testnet stripe below
   is the only thing that varies per card, and only some cards have it (chain_id lives on
   the proof, never the page — see ProofCard.razor).
   ------------------------------------------------------------------------------------ */

.proof {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 15px 16px;
    background: #FFFCF7;
    border: 1px solid rgba(58, 90, 64, .35);
    border-left: 4px solid var(--signal-verified);
    border-radius: 8px;
}

.proof__head {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.proof__position {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--signal-verified);
}

.proof__when {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--deep-brown);
}

/* Diagonal stripes, not a flat fill: a texture survives greyscale printing the way a
   colour alone does not. The 4px left border on this box only reinforces it. */
.proof__band {
    margin: 0;
    display: flex;
    gap: 9px;
    padding: 10px 12px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--coffee);
    background: repeating-linear-gradient(135deg, #FBF3E7 0 9px, #F7EBD9 9px 18px);
    border: 1px solid rgba(192, 122, 38, .55);
    border-left: 4px solid var(--amber);
    border-radius: 6px;
}

.proof__issuer {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.proof__issuer-label {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-label);
}

.proof__issuer-name {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--coffee);
}

/* A small dotted-row table. Scrolls within itself on a narrow screen rather than the
   whole page growing wider — see the file banner's second non-aesthetic rule. */
.proof__facts {
    margin: 0;
    display: grid;
    grid-template-columns: max-content 1fr;
    overflow-x: auto;
}

.proof__facts dt,
.proof__facts dd {
    padding: 9px 0;
    border-top: 1px dotted rgba(74, 47, 24, .25);
    font-family: var(--mono);
    font-size: 12px;
    white-space: nowrap;
}

.proof__facts dt {
    padding-right: 14px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-label);
}

.proof__facts dd {
    margin: 0;
    text-align: right;
    color: var(--coffee);
}

.proof__explorer {
    align-self: flex-start;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(192, 122, 38, .5);
}

/* ------------------------------------------------------------------------------------
   Hash block — shared by the document code and every proof's leaf.
   ------------------------------------------------------------------------------------ */

.hash-block {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.hash-block__label {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink-label);
}

/* Wrap only BETWEEN eight-character groups, as in the v8 canvas: the full
   code stays visible on mobile without breaking a group in the middle. */
.hash-block__value {
    display: flex;
    flex-wrap: wrap;
    gap: 0 .6em;
    padding: 12px 14px;
    overflow-x: auto;
    font-family: var(--mono);
    font-size: 13px;
    color: var(--coffee);
    background: var(--cream);
    border-radius: 8px;
}

.hash-block__value span {
    white-space: nowrap;
}

.hash-block__copy {
    align-self: flex-start;
    padding: 8px 14px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--coffee);
    background: transparent;
    border: 1px solid rgba(74, 47, 24, .35);
    border-radius: 999px;
    cursor: pointer;
}

.hash-block__copy:hover {
    background: var(--cream);
    border-color: var(--coffee);
}

/* ------------------------------------------------------------------------------------
   Independent check — native disclosure, collapsed on mobile and expanded once
   on desktop by the optional enhancement in verify.js.
   ------------------------------------------------------------------------------------ */

.check {
    padding: 20px;
    background: #F7EFE4;
    border: 1px solid var(--hairline);
    border-radius: 12px;
}

.check__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    list-style: none;
    cursor: pointer;
    font-size: 19px;
    font-weight: 600;
    color: var(--deep-brown);
}

.check__summary::-webkit-details-marker {
    display: none;
}

.check__summary::after {
    content: '▾';
    font-family: var(--mono);
    font-size: 14px;
    color: var(--ink-label);
    transition: transform .15s ease;
}

.check:not([open]) .check__summary::after {
    transform: rotate(-90deg);
}

.check__intro {
    margin: 10px 0 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--ink-muted);
}

.check__steps {
    list-style: none;
    counter-reset: step;
    margin: 18px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.check__steps > li {
    counter-increment: step;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 18px;
    border-top: 1px dotted rgba(74, 47, 24, .3);
}

.check__steps > li:first-child {
    padding-top: 0;
    border-top: 0;
}

.check__steps h2 {
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-size: 15px;
    font-weight: 600;
    color: var(--deep-brown);
}

.check__steps h2::before {
    content: counter(step);
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 500;
    color: var(--cream);
    background: var(--coffee);
    border-radius: 4px;
    padding: 3px 7px;
}

.check__steps p {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--ink-muted);
}

/* A single command line (shasum, the leaf formula) or a multi-line cast call. Real
   authored line breaks are kept (white-space: pre) and a line too wide for its box
   scrolls within the box, same reasoning as .hash-block__value above — the text of a
   command a reader is about to paste into a terminal must never be silently reflowed. */
.check__cmd {
    display: block;
    padding: 13px 14px;
    overflow-x: auto;
    white-space: pre;
    font-family: var(--mono);
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--cream);
    background: var(--deep-brown);
    border-radius: 8px;
}

.check__note {
    font-style: italic;
}

.check__unavailable {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--ink-muted);
}

/* ------------------------------------------------------------------------------------
   Local hash box — markup only in this task (Task 5); verify.js (a later task) removes
   [hidden]. Styled now so it is correct the moment that happens.
   ------------------------------------------------------------------------------------ */

.localhash {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 4px;
    padding: 16px;
    background: #F7EFE4;
    border: 2px dashed rgba(74, 47, 24, .4);
    border-radius: 10px;
}

.localhash__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--deep-brown);
}

.localhash__label {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 12.5px;
    color: var(--ink-muted);
}

.localhash__privacy {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--ink-muted);
}

.localhash__output {
    display: block;
    font-family: var(--mono);
    font-size: 12px;
    line-height: 1.7;
    color: var(--coffee);
    overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------------------------
   Desktop — artboard 1e's two-column reading layout. The component tree is flat (see
   VerifiedState.razor), so the split is done with grid-column on the direct children of
   .result rather than a wrapper div the components don't have: the left column is
   whatever auto-flows (headline, band, proof cards, document hash), the right column is
   the independent-check panel, pinned to span the full height next to it.
   ------------------------------------------------------------------------------------ */

@media (min-width: 960px) {
    .result--verified {
        max-width: 1238px;
        padding: 46px 56px 52px;
        display: grid;
        grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
        align-items: start;
        gap: 56px;
    }

    .result__content { grid-column: 1; gap: 26px; }

    .result__header { flex-direction: row; align-items: flex-start; gap: 26px; text-align: left; }
    .result__header::before { width: 150px; height: 150px; margin: 0; }
    .result__header .result__headline {
        text-align: left;
        font-size: 40px;
        line-height: 1.1;
    }

    .result__also-pending,
    .result__body {
        grid-column: 1;
        text-align: left;
    }

    .result--verified > .check {
        grid-column: 2;
        grid-row: 1;
        padding: 28px;
        min-width: 0;
    }
}


/* Verification v8: result hierarchy, disclosures and actions. */
body > .result ~ .site-footer { margin-top: 0; }
.result__heading, .result__state-header { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.result__state-header { text-align: center; }
.result__eyebrow { margin: 0; font: 500 10px/1.6 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--signal-neutral); }
.result--verified[data-any-verified="true"] .result__eyebrow { color: var(--signal-verified); }
.result--verified[data-any-verified="true"] .result__eyebrow::before { content: ''; display: block; width: 46px; height: 3px; margin: 0 auto 14px; background: var(--signal-verified); }
.result--pending .result__eyebrow { color: #A06A22; }
.result--pending::before { background: radial-gradient(circle at center, transparent 24px, rgba(192,122,38,.4) 24px 26px, transparent 26px), linear-gradient(var(--amber),var(--amber)) no-repeat center / 26px 4px; }
.result--malformed .result__state-header::before { content: ''; width: 84px; height: 84px; border: 1.5px solid var(--signal-neutral); transform: rotate(45deg); border-radius: 6px; margin: 18px auto 30px; background: linear-gradient(135deg, transparent calc(50% - 1.5px),var(--signal-neutral) calc(50% - 1.5px) calc(50% + 1.5px),transparent calc(50% + 1.5px)) no-repeat center / 36px 36px, #F4EFE7; }
.result--malformed .hash-block--received .hash-block__value { overflow-wrap: anywhere; background: #F0EBE3; border: 1px dashed rgba(107,93,79,.35); }
.result__explanation-panel { padding: 15px 16px; background: #FFFCF7; border: 1px solid rgba(107,93,79,.4); border-radius: 10px; }
.result__explanation-panel .result__explanations { border: 0; padding: 12px 0 0; background: none; }
.proof { min-width: 0; gap: 14px; }
.proof:not([data-merkle-verdict="true"]) { border-color: var(--hairline); border-left-color: var(--amber); }
.proof:not([data-merkle-verdict="true"]) .proof__position { color: var(--ink-label); }
.proof[data-single="true"] { border: 0; background: transparent; padding: 0; border-radius: 0; gap: 22px; }
.proof[data-single="true"] > .proof__head { display: none; }
.proof__band::before { content: ''; flex: 0 0 9px; height: 9px; margin-top: 4px; background: var(--amber); border-radius: 2px; }
.proof__issuer { border: 1px solid var(--hairline); border-radius: 10px; padding: 14px 16px; background: #FFFCF7; gap: 4px; }
.proof__issuer-name { font-size: 17px; color: var(--deep-brown); }
.proof__issuer-note, .proof__note { margin: 0; font-size: 12px; line-height: 1.55; color: var(--ink-muted); }
.proof__details { border-top: 1px solid rgba(74,47,24,.15); border-bottom: 1px solid rgba(74,47,24,.15); }
.proof__details summary { display: flex; justify-content: space-between; gap: 12px; padding: 16px 0; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--deep-brown); list-style: none; }
.proof__details summary::-webkit-details-marker { display: none; }
.proof__details summary::after { content: '+'; font-family: var(--mono); color: var(--ink-label); }
.proof__details[open] summary::after { content: '−'; }
.proof__technical { display: flex; flex-direction: column; gap: 14px; padding-bottom: 18px; min-width: 0; }
.proof__facts dt { font-size: 10px; }
.proof__facts dd { white-space: normal; overflow-wrap: anywhere; }
.proof__utc { font-size: 11px !important; }
.proof__technical .hash-block__value { background: transparent; padding: 0; font-size: 12px; }
.check__summary { font-size: 19px; line-height: 1.35; align-items: flex-start; }
.check__summary > span { display: flex; flex-direction: column; gap: 10px; }
.check__eyebrow { font: 10px/1.6 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-label); }
.check__teaser { font-size: 12.5px; font-weight: 400; line-height: 1.55; color: var(--ink-muted); }
.check__open { align-self: flex-start; padding: 10px 16px; border-radius: 999px; color: #FFFCF7; background: var(--coffee); font: 11px/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.check[open] .check__open { display: none; }
.check__summary::after { content: '+'; transform: none; }
.check[open] .check__summary::after { content: '−'; }
.check:not([open]) .check__summary::after { transform: none; }
.check__steps { gap: 22px; }
.check__cmd { margin: 0; max-width: 100%; }
.check__steps .hash-block__copy { font-size: 10px; padding: 7px 12px; }
.result__print { border-top: 1px solid rgba(74,47,24,.15); padding-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.result__print p { margin: 0; color: var(--ink-muted); font-size: 12.5px; line-height: 1.55; }
.result__print .hash-block__copy { margin-top: 2px; }
:is(summary, button, .proof__explorer):focus-visible { outline: 2px solid var(--coffee); outline-offset: 4px; }
@media (min-width: 960px) {
    .result--verified[data-any-verified="true"] .result__eyebrow::before { display: inline-block; vertical-align: middle; width: 28px; margin: 0 10px 2px 0; }
    .result--verified > .result__print { grid-column: 1; grid-row: 2; margin-top: -30px; }
    .result--verified > .check { grid-row: 1 / span 2; }
    .check__summary { font-size: 24px; }
}


.command-block { position: relative; min-width: 0; }
.command-block .check__cmd { padding-right: 116px; }
.command-block > .hash-block__copy { position: absolute; top: 10px; right: 10px; background: #E0A45A; color: var(--deep-brown); border: 0; padding: 7px 10px; font-size: 9px; }
.command-block > .hash-block__copy:hover { background: var(--cream); }
.localhash { border: 0; padding: 0; background: transparent; }
.localhash__label { position: relative; padding: 16px; border: 1px dashed rgba(74,47,24,.4); border-radius: 8px; cursor: pointer; background: #FAF6F0; text-align: center; }
.localhash__label:hover, .localhash__label.is-dragging { background: var(--cream); border-color: var(--coffee); }
.localhash__label:focus-within { outline: 2px solid var(--coffee); outline-offset: 3px; }
.localhash__label input { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.check__additional-command { min-width: 0; border-top: 1px dotted var(--hairline); }
.check__additional-command summary { padding: 12px 0; cursor: pointer; font-size: 13px; font-weight: 600; }
.result__file-check { min-width: 0; }
.result__file-check > summary { display: inline-block; list-style: none; }
.result__file-check > summary::-webkit-details-marker { display: none; }
.result__file-content { display: flex; flex-direction: column; gap: 14px; padding-top: 18px; }


/* First paint and connection failure: the code comes from the validated URL. */
.result--loading { gap: 24px; padding-top: 34px; padding-bottom: 40px; }
.result--loading .result__state-header { align-items: center; gap: 8px; }
.result__loading-mark { display: block; opacity: .45; margin-bottom: 8px; }
.result--loading .result__headline { font-size: 22px; }
.result__skeleton { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 7px; padding-top: 4px; }
.result__skeleton span { display: block; width: 100%; height: 11px; border-radius: 3px; background: rgba(74,47,24,.13); }
.result__skeleton span:last-child { width: 78%; }
.result__query-panel { border: 1px solid var(--hairline); border-radius: 10px; padding: 15px 16px; background: #FFFCF7; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.result__query-panel p { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--ink-muted); }
.result__retry { width: 100%; padding: 15px; background: var(--coffee); color: #FFFCF7; border: 0; border-radius: 10px; font: 600 15px/1.5 var(--sans); cursor: pointer; }
.result__retry:hover { background: var(--deep-brown); }
.result__direct { align-self: flex-start; font: 11px/1.5 var(--mono); letter-spacing: .06em; text-transform: uppercase; text-underline-offset: 4px; }
.result--offline, .result--query-error { padding-top: 32px; padding-bottom: 38px; }
.result--offline .result__headline, .result--query-error .result__headline { font-size: 24px; }
.result__connection-icon { width: 104px; height: 104px; margin: 0 auto 9px; border: 1.5px solid var(--signal-neutral); border-radius: 50%; background: #F4EFE7; display: grid; place-items: center; }
.result__connection-icon::before { content: ''; width: 44px; height: 44px; border: 3px solid var(--signal-neutral); border-radius: 6px; }
.result--query-error .result__connection-icon::before { width: 22px; height: 22px; background: var(--signal-neutral); border: 0; border-radius: 50%; }
.verification-announcement { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); }

/* ------------------------------------------------------------------------------------
   Homepage
   Values read from the design canvas, artboards 1a (mobile, 390px) and 1b (desktop,
   1240px). Same tokens, type and bands as the verification page — the brief's first
   rule is that this page is recognisably the same product, so nothing here introduces
   a colour or a family the palette above does not already carry.
   ------------------------------------------------------------------------------------ */

.home {
    max-width: 640px;
    margin: 0 auto;
    padding: 0 22px;
    display: flex;
    flex-direction: column;
}

/* The top bar the canvas has on both artboards, and which the page shipped without.
   The mark is the horizontal signature, not the seal: /brand/README.md reserves the
   isolated seal for the ceremonial surfaces (the PDF certificate, the QR page), and
   gives the horizontal lockup to the site. */
.home__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 30px 0 0;
}

.home__brand img {
    display: block;
    width: 132px;
    height: auto;
}

.home__contact {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--coffee);
    text-decoration: none;
    padding-bottom: 2px;
    border-bottom: 1px solid rgba(74, 47, 24, .35);
}

.home__contact:hover {
    border-bottom-color: var(--amber);
}

/* One grid, two shapes. Below 900px it is a single column and the source order IS the
   reading order; above it the aside moves to the right and the reader meets the box and
   the explanation at once, which is the whole argument of the desktop artboard. */
.home__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 22px;
    padding-top: 22px;
}

.home__intro,
.home__aside {
    display: flex;
    flex-direction: column;
    gap: 26px;
    min-width: 0;
}

.home__head {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.home__eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--ink-label);
    text-wrap: pretty;
}

/* The amber dash before the eyebrow. Decoration, so it is a box and not a character:
   a hyphen would be read aloud and would sit on the text baseline. */
.home__eyebrow-rule {
    flex: 0 0 22px;
    height: 2px;
    background: var(--amber);
}

.home__headline {
    margin: 0;
    font-size: 30px;
    line-height: 1.15;
    font-weight: 600;
    letter-spacing: -.03em;
    color: var(--deep-brown);
    text-wrap: pretty;
}

.home__lead {
    margin: 0;
    max-width: 52ch;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--ink-muted);
    text-wrap: pretty;
}

/* The testnet band sits below the headline and above the box, not at the top of the
   page: it qualifies what the records are worth, and a reader who has not yet been told
   what this page does has nothing for it to qualify. Amber stripe, the same marker the
   verification page uses for a non-final record. */
.home__band {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0;
    padding: 15px 17px;
    /* Diagonal hatch, straight from the canvas. It is what separates "this is a caveat
       about the whole system" from the tinted amber bar the verification page uses for a
       caveat about one record — same palette, different texture, so the two never read
       as the same claim. */
    background: repeating-linear-gradient(135deg, #FBF3E7 0 10px, #F7EBD9 10px 20px);
    border-top: 1px solid rgba(192, 122, 38, .55);
    border-bottom: 1px solid rgba(192, 122, 38, .55);
    border-left: 5px solid var(--amber);
    border-radius: 8px;
}

.home__band-mark {
    flex: 0 0 9px;
    height: 9px;
    margin-top: 6px;
    background: var(--amber);
}

.home__band-text {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.home__band-text p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--coffee);
    text-wrap: pretty;
}

.home__band-text a {
    align-self: flex-start;
    font-family: var(--mono);
    font-size: 12px;
    color: var(--coffee);
    text-decoration: none;
    border-bottom: 1px solid rgba(74, 47, 24, .35);
}

.home__band-text a:hover {
    border-bottom-color: var(--amber);
}

/* Sand, not white. The canvas puts this card on #F7EFE4 with a coffee hairline: it is
   the one surface on the page that asks the reader to DO something, and on a sand page
   a white card reads as a sheet of paper laid on top rather than as a control. */
.checkbox {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 22px 18px 24px;
    background: #F7EFE4;
    border: 1px solid rgba(74, 47, 24, .22);
    border-radius: 12px;
}

.checkbox__head {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

/* The canvas sets this eyebrow in amber. Measured, #C07A26 on #F7EFE4 is 3.04:1, and
   this is 11px text that has to be read — the palette simply cannot carry small type in
   amber on any ground (3.22 on sand, 3.47 on white, 3.04 here). Coffee gives 10.77 and
   is the same ink the rest of the card uses.

   This is a deliberate departure from the artboard, and the only one: amber survives on
   this page as the hero's rule and the band's marker, where nothing has to be read out
   of it. ContrastTests is what would have caught it either way. */
.checkbox__eyebrow {
    margin: 0;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--coffee);
}

.checkbox__title {
    margin: 0;
    font-size: 20px;
    line-height: 1.25;
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--deep-brown);
}

.checkbox__lead,
.checkbox__code-lead {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--ink-muted);
    text-wrap: pretty;
}

/* States 07 and 08. Grey, not amber: nothing failed and nothing is wrong with the
   reader's document — a capability is absent from this browser, and the field below is
   the working path. Amber here would read as a warning about the document. */
.checkbox__unavailable {
    padding: 13px 14px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--ink-muted);
    background: var(--sand);
    border: 1px dashed var(--hairline);
    border-radius: 8px;
}

.checkbox__unavailable p {
    margin: 0;
    text-wrap: pretty;
}

.checkbox__file {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Left-aligned and dashed in coffee, per the artboard. The whole zone is the <label>,
   so the click target is the box and not a 15px native button. */
.checkbox__drop {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 11px;
    padding: 18px;
    cursor: pointer;
    background: #FFFCF7;
    border: 2px dashed rgba(74, 47, 24, .4);
    border-radius: 10px;
}

.checkbox__prompt {
    font-size: 15px;
    line-height: 1.35;
    font-weight: 600;
    color: var(--deep-brown);
}

/* Inside the zone and above the control, not after it: this sentence is the reason
   someone drops a contract onto a web page at all, so it cannot arrive as reassurance
   once they already have. */
.checkbox__privacy {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--ink-muted);
    text-wrap: pretty;
}

/* What the reader sees in place of the browser's own file control, which arrives in the
   BROWSER's language — "Choose File" in the middle of a Portuguese page — and in a
   chrome no palette reaches. The span is decorative: the label around it already opens
   the picker, so it is aria-hidden and the input beneath keeps the accessible name. */
.checkbox__choose {
    padding: 8px 11px;
    font-family: var(--mono);
    font-size: 11.5px;
    color: var(--coffee);
    background: transparent;
    border: 1px solid rgba(74, 47, 24, .35);
    border-radius: 6px;
}

.checkbox__drop:hover .checkbox__choose {
    border-color: var(--amber);
}

/* Clipped, never `display: none` and never `hidden`: either takes the input out of the
   tab order, and the keyboard path to this control is the only one some readers have.
   It keeps a 1px box on purpose — a zero-sized focusable element is skipped by some
   browsers, and :focus-visible below needs something to hang the ring on. */
.checkbox__input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.checkbox__drop:has(.checkbox__input:focus-visible) {
    outline: 2px solid var(--amber);
    outline-offset: 2px;
}

.checkbox__working,
.checkbox__file-error,
.checkbox__code-error {
    display: block;
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    text-wrap: pretty;
}

.checkbox__working {
    color: var(--ink-muted);
}

.checkbox__file-error,
.checkbox__code-error {
    padding: 11px 13px;
    color: var(--coffee);
    background: rgba(192, 122, 38, .1);
    border-left: 3px solid var(--signal-caution);
    border-radius: 0 6px 6px 0;
}

.checkbox__ready {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.checkbox__ready-note {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--ink-muted);
    text-wrap: pretty;
}

.checkbox__shasum-note {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--ink-label);
    text-wrap: pretty;
}

/* Outline pill, not a filled block. The artboard reserves the filled dark button for
   "Enviar mensagem" in the contact card — a send, which is irreversible — and gives the
   outline to "abrir verificação", which only navigates. Weight follows consequence. */
.checkbox__action {
    flex: 0 0 auto;
    align-self: flex-start;
    padding: 12px 16px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    color: var(--coffee);
    background: transparent;
    border: 1px solid rgba(74, 47, 24, .35);
    border-radius: 999px;
    cursor: pointer;
}

.checkbox__action:hover {
    border-color: var(--amber);
    background: rgba(192, 122, 38, .08);
}

.checkbox__divider {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-label);
}

.checkbox__divider::before,
.checkbox__divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--hairline);
}

.checkbox__code {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Field and button on one line. The field takes the slack and the button keeps its
   text, which is what `flex: 0 0 auto` against `flex: 1 1 0` buys — at 390px the row
   wraps rather than squeezing a 64-character field to nothing. */
.checkbox__code-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.checkbox__code-label {
    flex: 1 1 220px;
    min-width: 0;
}

.checkbox__code-label input {
    width: 100%;
    padding: 13px 14px;
    font-family: var(--mono);
    font-size: 13px;
    color: var(--coffee);
    background: #FFFCF7;
    border: 1px solid rgba(74, 47, 24, .35);
    border-radius: 8px;
}

.checkbox__count {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .1em;
    color: var(--ink-label);
}

/* Ruled off from the lead above it, per the artboard: the hero argues, and this
   explains. The hairline is what says they are two things. */
.home__how {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-top: 24px;
    border-top: 1px solid rgba(74, 47, 24, .18);
}

.home__how-title {
    margin: 0;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--ink-label);
}

.home__steps {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px 22px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Chip beside the text on a phone, above it in the three desktop columns — both from
   the artboard, and both the same markup. `align-items: flex-start` keeps the chip on
   the first line's cap height instead of centring it against a three-line paragraph. */
.home__step {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

/* A filled chip, not a loose amber numeral. The old one was #C07A26 at 12px on sand:
   3.22:1, under the 4.5 floor, and only legal at all because it is aria-hidden. Sand
   ink on deep brown is 13.42:1 and needs no such licence — the ordinal is readable now
   by the people who were being asked to squint at it. */
.home__step-number {
    flex: 0 0 auto;
    padding: 4px 8px;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    color: var(--sand);
    background: var(--deep-brown);
    border-radius: 4px;
}

.home__step-text {
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--coffee);
    text-wrap: pretty;
}

/* ------------------------------------------------------------------------------------
   Contact card — the second card in the homepage aside
   ------------------------------------------------------------------------------------ */

/* Bordered rather than filled, so it reads as secondary to the conference box above it.
   Two solid cards side by side would make the page ask two questions with equal weight,
   and only one of them is what the reader came for. */
.contact {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 18px 24px;
    border: 1px solid rgba(74, 47, 24, .22);
    border-radius: 12px;
}

.contact__head {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.contact__title {
    margin: 0;
    font-size: 19px;
    line-height: 1.25;
    font-weight: 600;
    letter-spacing: -.015em;
    color: var(--deep-brown);
}

.contact__lead {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--ink-muted);
    text-wrap: pretty;
}

/* One shape for every outcome, success included. A green panel for "sent" and a red one
   for "check the address" would be the only place on this site where colour alone
   carries a state — the rule the whole verification page is built against. */
.contact__note {
    margin: 0;
    padding: 11px 13px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--coffee);
    background: rgba(192, 122, 38, .1);
    border-left: 3px solid var(--signal-caution);
    border-radius: 0 6px 6px 0;
    text-wrap: pretty;
}

/* Except this one, which is a confirmation and not a caution. Still told by the stripe
   and not by the fill: the verified state on /verify/{hash} uses the same green. */
.contact__note[data-outcome="ok"] {
    background: rgba(58, 90, 64, .1);
    border-left-color: var(--signal-verified);
}

.contact__form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.contact__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.contact__label {
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink-label);
}

.contact__field input,
.contact__field textarea {
    width: 100%;
    padding: 11px 13px;
    font-family: var(--sans);
    font-size: 14px;
    line-height: 1.5;
    color: var(--coffee);
    background: #FFFCF7;
    border: 1px solid rgba(74, 47, 24, .35);
    border-radius: 8px;
}

.contact__field textarea {
    resize: vertical;
    min-height: 96px;
}

.contact__field input:focus-visible,
.contact__field textarea:focus-visible {
    outline: 2px solid var(--amber);
    outline-offset: 1px;
}

/* The honeypot's wrapper. Off-screen, not `display: none` and not `hidden` — see
   ContactCard.razor for why a bot must not be able to tell it is a trap. `position:
   absolute` with a negative offset keeps it in the layout tree and out of the page. */
.contact__trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.contact__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
}

/* Filled, unlike "abrir verificação" above it. This one sends something that cannot be
   unsent; the other one navigates. Weight follows consequence. */
.contact__action {
    padding: 12px 18px;
    font-family: var(--sans);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--cream);
    background: var(--deep-brown);
    border: 0;
    border-radius: 8px;
    cursor: pointer;
}

.contact__action:hover {
    background: var(--coffee);
}

.contact__direct {
    margin: 0;
    font-size: 12.5px;
    color: var(--ink-muted);
}

.contact__direct a {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--coffee);
    text-decoration: none;
    border-bottom: 1px solid rgba(74, 47, 24, .35);
}

.contact__direct a:hover {
    border-bottom-color: var(--amber);
}

/* ------------------------------------------------------------------------------------
   Site footer — shared by / and, once it exists, /privacidade
   ------------------------------------------------------------------------------------ */

/* Full bleed, and it costs nothing to get there: the footer is a child of <body>, not
   of the page's max-width container, so the dark band simply is the width of the page.
   No 100vw and no negative margin — both of those overflow by the width of the
   scrollbar, which is the bug `body { overflow-x: hidden }` above would then hide. */
.site-footer {
    margin-top: 44px;
    color: var(--cream);
    background: var(--deep-brown);
}

/* The container the band no longer has. Same max-width and same side padding as .home
   and .policy, so the mark under the footer lines up with the mark above it. */
.site-footer__inner {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 1238px;
    margin: 0 auto;
    padding: 30px 20px 34px;
}

.site-footer__id {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.site-footer__mark {
    width: 132px;
    height: auto;
}

.site-footer__tagline {
    margin: 0;
    max-width: 46ch;
    font-size: 12.5px;
    line-height: 1.55;
    color: rgba(242, 228, 208, .82);
    text-wrap: pretty;
}

.site-footer__network {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 .5em;
    font-family: var(--mono);
    font-size: 11px;
    line-height: 1.7;
    color: rgba(242, 228, 208, .7);
}

.site-footer__label {
    /* .52 dava 4,24 sobre o marrom profundo — abaixo dos 4,5. .66 dá 5,90, o mesmo
       patamar de --ink-muted nos fundos claros. */
    color: rgba(242, 228, 208, .66);
}

.site-footer__value {
    overflow-wrap: anywhere;
}

.site-footer__sep {
    /* Pontuação entre itens, não texto que informe — a WCAG não lhe cobra 4,5. Mas a
       .35 media 2,71 e sumia; com a legenda ao lado subindo para .66, sumiria mais. */
    color: rgba(242, 228, 208, .5);
}

.site-footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    font-size: 12.5px;
}

.site-footer__links a {
    color: rgba(242, 228, 208, .82);
    text-decoration: none;
    border-bottom: 1px solid rgba(242, 228, 208, .3);
}

.site-footer__links a:hover {
    color: var(--cream);
    border-bottom-color: var(--amber-light);
}

@media (min-width: 900px) {
    /* 1126px of content plus 56px either side, which is the canvas's 1238px board. The
       two tracks are its 546 and 524 as fractions, so they hold their proportion instead
       of their pixels — the artboard is one width, the browser is all of them. */
    .home {
        max-width: 1238px;
        padding: 0 56px;
    }

    .home__bar {
        padding-top: 34px;
    }

    .home__brand img {
        width: 148px;
    }

    /* Two rows, and the box spans both. Placed explicitly rather than left to
       auto-flow: the source order is the phone's order, and only this placement puts
       the box on the right without reordering the markup. */
    .home__grid {
        grid-template-columns: minmax(0, 1.041fr) minmax(0, 1fr);
        column-gap: 56px;
        row-gap: 26px;
        padding-top: 40px;
    }

    .home__intro { grid-column: 1; grid-row: 1; }
    .home__how   { grid-column: 1; grid-row: 2; }
    .home__aside { grid-column: 2; grid-row: 1 / span 2; }

    /* The gap between the head, the band and the steps is wider than the gap between
       the two cards in the aside, and both come from the canvas: 26px inside a column
       of prose, 26px between the cards. Kept as one value rather than two because they
       measured the same, and inventing a difference the design does not have is how a
       layout stops matching it. */
    .home__headline {
        font-size: 52px;
        line-height: 1.06;
    }

    .home__eyebrow-rule { flex-basis: 28px; height: 3px; }

    .home__lead {
        font-size: 16.5px;
    }

    .checkbox {
        padding: 28px 28px 30px;
    }

    .checkbox__title {
        font-size: 25px;
    }

    .contact {
        padding: 26px 28px 28px;
    }

    .contact__title {
        font-size: 20px;
    }

    /* Three columns, and the chip moves above the text — the artboard's arrangement.
       Side by side the three steps read as one sequence at a glance; stacked, as three
       paragraphs that happen to be numbered. */
    .home__steps {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .home__step {
        flex-direction: column;
        gap: 8px;
    }
}

/* ------------------------------------------------------------------------------------
   Política de privacidade — /privacidade
   Uma URL, dois registros de leitura: o resumo em cartões, curto e com números, e o
   instrumento jurídico corrido logo abaixo. A diferença de tratamento é a informação:
   cartão é coisa que se lê aos pedaços, texto corrido é coisa que se lê inteira.
   ------------------------------------------------------------------------------------ */

.policy {
    max-width: 720px;
    margin: 0 auto;
    padding: 30px 22px 34px;
}

.policy + .site-footer { margin-top: 0; }

html:has(.policy) { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
    html:has(.policy) { scroll-behavior: auto; }
}

.policy__topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.policy__brand { display: block; flex: 0 0 auto; }
.policy__brand img { display: block; width: 132px; height: auto; }

.policy__back {
    display: none;
    padding-bottom: 2px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-decoration: none;
    border-bottom: 1px solid rgba(74, 47, 24, .35);
}

.policy__layout {
    display: grid;
    gap: 24px;
    margin-top: 24px;
}

.policy__head {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.policy__reading { min-width: 0; }

.policy__eyebrow {
    margin: 0;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--ink-label);
}

.policy__title {
    margin: 0;
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -.025em;
    line-height: 1.15;
    color: var(--deep-brown);
    text-wrap: balance;
}

.policy__version {
    margin: 0;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--ink-muted);
}

.policy__contents { display: none; }

.policy a:focus-visible {
    outline: 2px solid var(--coffee);
    outline-offset: 4px;
    border-radius: 2px;
}

/* Só aparece para quem pediu inglês. Emoldurada, porque é uma ressalva sobre o documento
   inteiro e não mais um parágrafo dele. */
.policy__lang {
    margin: 0 0 22px;
    padding: 11px 13px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--coffee);
    border: 1px solid var(--hairline);
    border-left: 3px solid var(--amber);
    border-radius: 3px;
    background: var(--sand);
}

.policy__lead {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--ink-muted);
    text-wrap: pretty;
}

/* ---------- o resumo ---------- */

.policy__summary {
    display: flex;
    flex-direction: column;
    gap: 22px;
    margin-top: 24px;
    padding-top: 22px;
    border-top: 2px solid var(--coffee);
}

/* Keep the section heading for assistive technology; the artboards open with card 1. */
.policy__summary-title {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.policy__card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    scroll-margin-top: 24px;
}

.policy__card--permanent {
    gap: 10px;
    padding: 15px 16px;
    border: 1px solid rgba(74, 47, 24, .35);
    border-left: 5px solid var(--coffee);
    border-radius: 8px;
    background: #F7EFE4;
}

.policy__card-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.policy__card-number {
    flex: 0 0 auto;
    padding: 3px 6px;
    font-family: var(--mono);
    font-size: 11px;
    color: #FFFCF7;
    background: var(--coffee);
    border-radius: 4px;
}

.policy__card-title {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    color: var(--deep-brown);
}

.policy__card-body {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--coffee);
    text-wrap: pretty;
}

.policy__card-body strong { font-weight: 600; }
.policy__card--permanent strong { font-weight: 700; }

.policy__card-body a { color: var(--coffee); }
.policy__card-body a:hover { color: var(--amber); }

/* O caminho do resumo para o parágrafo que ele resume. Discreto, mas sempre presente:
   é o que permite conferir se o resumo é fiel sem ter de procurar. */
.policy__card-link {
    align-self: flex-start;
    margin-top: 2px;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: .06em;
    color: var(--ink-label);
    text-decoration: none;
    border-bottom: 1px solid var(--hairline);
}

.policy__card-link:hover { color: var(--amber); border-bottom-color: var(--amber); }

/* ---------- o índice ---------- */

.policy__index {
    margin-top: 42px;
    padding: 22px;
    border: 1px solid var(--hairline);
    border-radius: 4px;
    background: var(--sand);
}

.policy__index-title {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 600;
    color: var(--deep-brown);
    scroll-margin-top: 24px;
}

.policy__index-lead {
    margin: 0 0 16px;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--ink-muted);
    text-wrap: pretty;
}

.policy__index-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 7px;
}

.policy__index-list a {
    font-size: 13.5px;
    line-height: 1.4;
    color: var(--coffee);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.policy__index-list a:hover { color: var(--amber); border-bottom-color: var(--amber); }

/* ---------- o instrumento ---------- */

.policy__text { margin-top: 40px; }

.policy__h2 {
    margin: 38px 0 12px;
    padding-top: 18px;
    border-top: 1px solid var(--hairline);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--deep-brown);
    scroll-margin-top: 18px;
    text-wrap: balance;
}

.policy__h3 {
    margin: 26px 0 10px;
    font-size: 15px;
    font-weight: 600;
    color: var(--coffee);
    scroll-margin-top: 18px;
}

.policy__text p {
    margin: 0 0 13px;
    font-size: 14.5px;
    line-height: 1.66;
    color: var(--coffee);
    text-wrap: pretty;
}

.policy__text ul { margin: 0 0 13px; padding-left: 20px; }

.policy__text li {
    margin-bottom: 9px;
    font-size: 14.5px;
    line-height: 1.62;
    color: var(--coffee);
    text-wrap: pretty;
}

.policy__text a { color: var(--coffee); }
.policy__text a:hover { color: var(--amber); }

/* Quatro tabelas de base legal, e nenhuma cabe em 390px. Rolam dentro do próprio
   contêiner, para que a página nunca role de lado. */
.policy__tablewrap {
    margin: 0 0 16px;
    overflow-x: auto;
    border: 1px solid var(--hairline);
    border-radius: 3px;
}

.policy__table {
    width: 100%;
    min-width: 480px;
    border-collapse: collapse;
    font-size: 13px;
}

.policy__table th,
.policy__table td {
    padding: 9px 12px;
    text-align: left;
    vertical-align: top;
    line-height: 1.5;
    border-bottom: 1px solid var(--hairline);
}

.policy__table th {
    font-family: var(--mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--ink-label);
    background: var(--sand);
    white-space: nowrap;
}

.policy__table td { color: var(--coffee); }
.policy__table tr:last-child td { border-bottom: 0; }

@media (min-width: 900px) {
    /* One row, per the artboard: who this is on the left, where to go on the right. */
    .site-footer__inner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 30px;
        padding: 26px 56px;
    }

    .site-footer__id { gap: 8px; }
}

@media screen and (min-width: 900px) {
    .policy { max-width: 1238px; padding: 34px 56px 56px; }
    .policy__brand img { width: 148px; }
    .policy__back { display: inline-block; }
    .policy__layout {
        grid-template-columns: 260px minmax(0, 1fr);
        align-items: start;
        gap: 40px;
        margin-top: 44px;
    }
    .policy__head { position: sticky; top: 24px; gap: 18px; }
    .policy__eyebrow { font-size: 11px; }
    .policy__title { font-size: 36px; line-height: 1.1; }
    .policy__version { font-size: 11.5px; }
    .policy__version span { display: block; margin-top: 5px; font-size: 10.5px; }
    .policy__reading { max-width: 680px; }
    .policy__lead { font-size: 16px; }
    .policy__contents { display: block; border-top: 1px solid var(--hairline); padding-top: 12px; }
    .policy__contents ol { margin: 0; padding: 0; list-style: none; }
    .policy__contents li a {
        display: flex;
        gap: 10px;
        padding: 7px 10px;
        margin-left: -10px;
        font-size: 13px;
        line-height: 1.55;
        text-decoration: none;
        border-radius: 3px;
    }
    .policy__contents li a[aria-current="location"] {
        font-weight: 700;
        background: #F7EFE4;
        box-shadow: inset 2px 0 var(--amber);
    }
    .policy__contents a[aria-current="location"] .policy__contents-number { color: var(--amber); }
    .policy__contents-number {
        flex: 0 0 18px;
        font-family: var(--mono);
        font-size: 11px;
        font-weight: 400;
        color: var(--ink-label);
    }
    .policy__contents-permanent { font-weight: 600; }
    .policy__contents-full {
        display: inline-block;
        margin-top: 16px;
        font-family: var(--mono);
        font-size: 11px;
        text-decoration: none;
        border-bottom: 1px solid var(--hairline);
    }
    .policy__contents-full[aria-current="location"] { font-weight: 700; border-bottom-color: var(--amber); }
    .policy__summary { gap: 26px; margin-top: 26px; padding-top: 0; border-top: 0; }
    .policy__card { padding-top: 20px; border-top: 1px solid var(--hairline); }
    .policy__card-number { padding: 3px 7px; }
    .policy__card-title { font-size: 19px; }
    .policy__card-body { font-size: 14.5px; line-height: 1.65; }
    .policy__card--permanent { padding: 20px 22px; border-top-color: rgba(74, 47, 24, .35); border-left-width: 6px; }
}

@media screen and (min-width: 1200px) {
    .policy__layout { grid-template-columns: 300px minmax(0, 1fr); gap: 64px; }
}

/* Na prancha mobile, as linhas separam as seções; os cards fechados ficam no desktop. */
@media (max-width: 899px) {
    .home__head { gap: 12px; }
    .home__eyebrow { font-size: 10px; letter-spacing: .18em; }
    .home__intro { gap: 22px; }
    .home__band { padding: 13px 14px; }
    .home__band-text p { font-size: 12.5px; line-height: 1.5; }
    .checkbox {
        padding: 20px 0 0;
        gap: 16px;
        background: transparent;
        border: 0;
        border-top: 2px solid var(--coffee);
        border-radius: 0;
    }
    .checkbox__title { font-size: 21px; }
    .checkbox__drop { background: #F7EFE4; }
    .checkbox__code-row { flex-wrap: wrap; }
    .checkbox__code-label { flex-basis: 180px; }
    .contact {
        padding: 20px 0 0;
        background: transparent;
        border: 0;
        border-top: 1px solid var(--hairline);
        border-radius: 0;
    }
    .contact__title { font-size: 19px; }
    .contact__action { width: 100%; padding: 15px; font-size: 15px; }
    .site-footer__inner { padding: 24px 22px; }
}