.instructions-page{min-height:100vh;background:var(--paper);color:var(--ink)}.instructions-header{width:var(--page);height:100px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;/* O botão de compartilhar entra por JS como terceiro item e encostava no
     "Voltar". Sem este gap eles ficam com 0px entre si, e no hover o botão
     desloca 2px e passa por cima. */gap:26px;border-bottom:1.5px solid var(--ink)}.instructions-back{display:inline-flex;align-items:center;gap:8px;padding-bottom:4px;border-bottom:1px solid var(--ink);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}/* Mesmo motivo do .check-back: no celular o texto encolhe e a seta responde
   sozinha pelo botão, então precisa de contraste de texto. */.instructions-back span{color:var(--ink);font-size:18px}/* ---------- Estrutura do passo a passo ---------- */.wizard{width:min(560px, calc(100vw - 32px));margin:0 auto;padding:26px 0 30px}.wizard-progress{position:sticky;top:0;z-index:15;padding:12px 0 14px;background:var(--paper)}.wizard-progress-meta{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:9px;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.1em}.wizard-count b{font-family:var(--display);font-size:17px;font-weight:400;letter-spacing:.02em}/* Era laranja. Em 10px o laranja sobre o papel fica em 3.31 de contraste, e
   texto pequeno precisa de 4.5 — nenhum tom de laranja da marca chega la sem
   virar marrom. O destaque agora vem do peso e do espacamento, nao da cor. */.wizard-phase{color:var(--ink)}.wizard-bar{height:12px;border:2px solid var(--ink);background:var(--white)}.wizard-bar i{display:block;width:4%;height:100%;background:var(--acid);border-right:2px solid var(--ink);transition:width .3s ease}/* Só aparece via <noscript>, quando o passo a passo vira uma lista simples. */.wizard-noscript{display:none;margin:16px 0 0;padding:12px 14px;border:2px dashed var(--ink);font-size:12px;font-weight:700}.wizard-steps{list-style:none;margin:22px 0 0;padding:0}.wizard-step{display:none;border:2px solid var(--ink);background:var(--white);box-shadow:8px 8px 0 var(--blue),10px 10px 0 2px var(--ink)}/* O texto vem antes da imagem (ver .wizard-figure), para a instrução
   aparecer logo de cara e a imagem servir de confirmação. */.wizard-steps > .wizard-step.is-current{display:flex;flex-direction:column;animation:step-in .26s ease both}@keyframes step-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}.wizard-figure{order:2;/* Desce a imagem para baixo do texto. */margin:0;padding:14px;display:grid;place-items:center;border-top:2px solid var(--ink);background:var(--paper-deep)}/* Os prints são verticais: a altura é o limite real, então deixamos
   a imagem crescer até quase encher a tela para os detalhes ficarem legíveis. */.wizard-figure picture{display:block;max-width:100%;min-width:0}.wizard-figure img{display:block;width:auto;height:auto;max-width:100%;max-height:62vh;border:2px solid var(--ink);background:var(--white)}.wizard-step-body{padding:20px 18px 22px}.wizard-kicker{margin:0 0 8px;font-size:9px;font-weight:800;color:#5c584f;text-transform:uppercase;letter-spacing:.12em}.wizard-step-body h2{margin:0 0 10px;font-family:var(--body);font-size:23px;font-weight:800;line-height:1.15;letter-spacing:-.035em}.wizard-step-body > p{margin:0;font-size:14px;line-height:1.5}.wizard-step-body > p + p{margin-top:10px}/* Bloco do código ORG. Ele é público e fixo — aparece na página da HUB até em
   janela anônima, sem login —, então dá para escrever aqui e poupar a ida.
   Monoespaçado e espaçado: quem preferir digitar precisa distinguir cada
   caractere. */.org-code{width:100%;margin:14px 0;padding:13px 15px;display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:center;border:2px solid var(--ink);background:var(--acid);box-shadow:4px 4px 0 var(--ink);text-align:left;cursor:pointer;transition:transform .16s ease,box-shadow .16s ease}.org-code:hover{transform:translate(2px, 2px);box-shadow:2px 2px 0 var(--ink)}.org-code:active{transform:translate(4px, 4px);box-shadow:0 0 0 var(--ink)}.org-code-label{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.12em}.org-code-value{grid-column:1;font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;font-size:22px;font-weight:700;letter-spacing:.16em}.org-code-action{grid-column:2;grid-row:1/3;padding:8px 12px;border:2px solid var(--ink);background:var(--white);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}.wizard-tip{padding:11px 13px;border-left:4px solid var(--acid);background:var(--paper);font-size:12px;font-weight:700}/* Peso maior que o do .wizard-tip: não é um detalhe da tela, é uma saída para
   quem ia parar aqui esperando o kit chegar. */.wizard-alt{padding:13px 15px;border:2px solid var(--ink);border-left:6px solid var(--orange);background:var(--white);font-size:12.5px;line-height:1.55}.wizard-alt b{display:block;margin-bottom:5px;font-family:var(--display);/* 24px não é enfeite: abaixo disso o laranja sobre o branco precisaria de 4.5
     de contraste e só chega a 3.7. A partir de 24px o mínimo cai para 3, porque
     letra grande já é mais legível. Diminuir daqui exige trocar a cor. */font-size:24px;font-weight:400;text-transform:uppercase;letter-spacing:-.01em;color:var(--orange)}/* Link dentro de dica ou aviso: mantém o preto (que já contrasta no fundo claro),
   mas ganha peso e sublinhado para não se confundir com o texto ao redor. */.wizard-tip a,.wizard-alt a{font-weight:800;text-decoration:underline;text-underline-offset:2px}/* O endereço fica monoespaçado dentro do próprio aviso: conferir endereço só
   funciona se der para comparar caractere por caractere. */.wizard-alt code{display:inline-block;margin-top:2px;padding:3px 7px;border:1px solid var(--ink);background:var(--paper);font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;font-size:13px;font-weight:700;letter-spacing:.01em;overflow-wrap:anywhere}/* ---------- Passo 1: link da HUB ---------- */.wizard-hub .wizard-step-body h2{font-size:30px}.wizard-cta{min-height:62px;margin:20px 0 18px;padding:0 20px;display:flex;align-items:center;justify-content:space-between;gap:14px;border:2px solid var(--ink);background:var(--acid);box-shadow:5px 5px 0 var(--ink);font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;transition:transform .16s ease,box-shadow .16s ease}.wizard-cta span{font-size:19px}.wizard-cta:hover{transform:translate(2px, 2px);box-shadow:3px 3px 0 var(--ink)}.wizard-cta:active{transform:translate(5px, 5px);box-shadow:0 0 0 var(--ink)}/* ---------- Passo 23: lojas de aplicativo ---------- *//* Dois botões lado a lado: a pessoa está em uma das plataformas e escolhe a dela
   de relance. Empilham sozinhos se a largura não der. */.store-links{display:grid;grid-template-columns:repeat(auto-fit, minmax(118px, 1fr));gap:10px;margin:18px 0}.store-link{min-height:62px;padding:10px 11px;display:flex;flex-direction:column;justify-content:center;gap:3px;border:2px solid var(--ink);background:var(--white);box-shadow:4px 4px 0 var(--ink);transition:transform .16s ease,box-shadow .16s ease}.store-link:hover{transform:translate(2px, 2px);box-shadow:2px 2px 0 var(--ink)}.store-link:active{transform:translate(4px, 4px);box-shadow:0 0 0 var(--ink)}.store-link span{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:#5c584f}/* 14px e nao 15: em 320px "Google Play" quebrava em duas linhas. */.store-link b{font-size:14px;font-weight:800;letter-spacing:-.03em;white-space:nowrap}.store-link i{font-style:normal;font-size:13px;color:var(--ink)}.wizard-warn{padding:14px 15px;border:2px solid var(--ink);background:var(--orange);color:var(--ink)}.wizard-warn b{display:block;font-size:13px;letter-spacing:-.01em}.wizard-warn p{margin:6px 0 0;font-size:12.5px;line-height:1.5;font-weight:500}.wizard-warn p b{display:inline;font-size:inherit}.wizard-returned{margin-top:14px;padding:13px 15px;border:2px solid var(--ink);background:var(--acid);font-size:12.5px;font-weight:700;line-height:1.5}.wizard-note{margin:18px 0 0;padding-top:14px;border-top:1px dashed #aaa;color:#5c584f;font-size:10px;line-height:1.6}/* ---------- Tela final ---------- */.wizard-done{margin-top:22px}.wizard-done-card{padding:26px 20px;border:2px solid var(--ink);background:var(--white);box-shadow:8px 8px 0 var(--acid),10px 10px 0 2px var(--ink);text-align:center}.wizard-done-mark{width:54px;aspect-ratio:1;margin:0 auto 16px;display:grid;place-items:center;border:2px solid var(--ink);border-radius:50%;background:var(--acid);box-shadow:4px 4px 0 var(--ink);font-size:26px;font-weight:800}.wizard-done-card h2{margin:0 0 8px;font-family:var(--body);font-size:24px;font-weight:800;line-height:1.15;letter-spacing:-.035em}.wizard-done-card > p{margin:0 0 20px;font-size:13.5px}.wizard-done-actions{display:grid;gap:10px}.wizard-restart,.wizard-done-hub{min-height:54px;padding:0 18px;display:flex;align-items:center;justify-content:center;gap:10px;border:2px solid var(--ink);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;cursor:pointer}.wizard-done-hub{background:var(--acid);box-shadow:4px 4px 0 var(--ink);order:-1}.wizard-restart{background:var(--white)}/* ---------- Navegação ---------- */.wizard-nav{position:sticky;bottom:0;z-index:15;margin-top:26px;padding:14px 0 max(14px, env(safe-area-inset-bottom));display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;background:var(--paper);border-top:2px solid var(--ink)}.wizard-prev,.wizard-next{min-height:54px;padding:0 14px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:2px solid var(--ink);font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;cursor:pointer;transition:transform .16s ease,box-shadow .16s ease}.wizard-prev{background:var(--white)}.wizard-next{background:var(--acid);box-shadow:4px 4px 0 var(--ink)}.wizard-next:active{transform:translate(4px, 4px);box-shadow:0 0 0 var(--ink)}.wizard-prev[disabled]{opacity:.34;cursor:not-allowed}/* Destaque quando o usuário volta da janela da HUB. */.wizard-next.is-ready{animation:next-pulse 1.4s ease-in-out 3}@keyframes next-pulse{0%,100%{box-shadow:4px 4px 0 var(--ink)}50%{box-shadow:4px 4px 0 var(--ink),0 0 0 5px rgba(50, 103, 255, .35)}}.wizard-dots{display:flex;align-items:center;gap:5px}.wizard-dots i{width:6px;height:6px;border:1.5px solid var(--ink);border-radius:50%;background:transparent}.wizard-dots i.is-done{background:var(--ink)}.wizard-dots i.is-current{background:var(--orange);transform:scale(1.5)}.wizard-live{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.instructions-footer{width:var(--page);min-height:70px;margin:0 auto;padding:20px 0;display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid var(--ink);font-size:8px;text-transform:uppercase;letter-spacing:.06em}@media (max-width: 620px){.instructions-header{height:82px}.instructions-back{font-size:0}.instructions-back span{font-size:20px}.wizard{padding-top:18px}.wizard-step{box-shadow:6px 6px 0 var(--blue),8px 8px 0 1px var(--ink)}.wizard-figure{padding:10px}.wizard-step-body h2{font-size:21px}.wizard-hub .wizard-step-body h2{font-size:26px}.wizard-dots{display:none}.wizard-nav{grid-template-columns:1fr 1fr}.instructions-footer{flex-direction:column;align-items:flex-start;gap:5px}}@media (min-width: 900px){.wizard{width:min(620px, calc(100vw - 48px))}.wizard-figure img{max-height:68vh}}@media (prefers-reduced-motion: reduce){.js-on .wizard-steps > .wizard-step.is-current{animation:none}.wizard-next.is-ready{animation:none}.wizard-bar i{transition:none}}