:root{--cream:#f4f1ec;--ink:#0b0b0b;--red:#ff3b30;--muted:#6b6560;--line:#d6d1c9}
*{box-sizing:border-box}
body{margin:0;background:var(--cream);color:var(--ink);font:16px/1.55 "Archivo",-apple-system,system-ui,sans-serif}
main{max-width:720px;margin:0 auto;padding:40px 20px 56px;min-height:100vh;display:flex;flex-direction:column}
.marca{display:flex;align-items:center;gap:10px}
.barras{width:22px;height:32px;fill:var(--red)}
.nome{display:flex;flex-direction:column;font-family:"Archivo Black",sans-serif;font-size:15px;line-height:.98;transform:skewX(-10.25deg)}
.hero{margin-top:72px}
h1{font-family:"Archivo Black",sans-serif;font-weight:400;font-size:clamp(2.5rem,9vw,4rem);line-height:.92;letter-spacing:.005em;margin:0;text-wrap:balance}
.sub{margin:24px 0 0;max-width:34ch;font-size:1.125rem;color:var(--muted)}
.como{margin-top:56px;display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.passo{background:#fff;border-radius:24px;padding:20px;box-shadow:inset 0 0 0 1px var(--line)}
.passo h2{font-family:"Archivo Black",sans-serif;font-weight:400;font-size:1.25rem;line-height:1.1;margin:0 0 8px}
.passo p{margin:0;color:var(--muted);font-size:.95rem}
.breve{margin:40px 0 0;font-weight:600}
footer{margin-top:auto;padding-top:56px;color:var(--muted);font-size:.9rem}
footer nav{display:flex;flex-wrap:wrap;gap:8px 20px;margin-bottom:12px}
footer p{margin:4px 0}
a{color:var(--ink)}