/* Pixel art token maker landing page. Uses site.css tokens, so light and dark follow the system. */
.pp{max-width:860px;padding-bottom:24px}
.pp .lead{font-size:clamp(17px,2.6vw,20px);line-height:1.55;max-width:62ch;color:var(--text)}
.pp-cta{margin:20px 0 8px;gap:12px 22px}
.pp-cta .btn{min-height:52px;padding:12px 26px;font-size:17px}
.pp-note{font-size:14px;color:var(--muted);margin:0}
.pp h2{margin:48px 0 14px;scroll-margin-top:16px}
.pp h3{margin:0 0 4px}
.pp p,.pp li{line-height:1.6}
.pp-gallery{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.pp-gallery figure{margin:0;border:1px solid var(--line-soft);border-radius:12px;background:var(--ink-800);padding:10px;text-align:center}
.pp-gallery img{display:block;width:100%;height:auto;aspect-ratio:1;image-rendering:pixelated;border-radius:8px}
.pp-gallery figcaption{margin-top:8px;font-size:13px;line-height:1.35;color:var(--muted)}
.pp-sizes{display:flex;flex-wrap:wrap;align-items:flex-end;gap:18px;margin:18px 0 0}
.pp-sizes figure{margin:0;text-align:center;font-size:13px;color:var(--muted)}
.pp-sizes img{display:block;margin:0 auto 6px;image-rendering:pixelated;border-radius:50%}
.pp-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-top:14px}
.pp-grid .card+.card{margin-top:0}
.pp-grid h3{font-size:17px;margin-bottom:6px}
.pp-grid p,.pp-grid ul{margin:0;font-size:15px}
.pp-grid ul{padding-left:20px}
.pp-list{margin:0;padding-left:22px;display:grid;gap:10px}
.pp-list li::marker{color:var(--gold)}
.pp-list strong{color:var(--cream)}
.pp-faq{display:grid;gap:10px}
.pp-faq details{border:1px solid var(--line-soft);border-radius:var(--radius);background:var(--ink-800);padding:0 16px}
.pp-faq summary{cursor:pointer;min-height:48px;display:flex;align-items:center;padding:10px 0;font:600 16px/1.35 var(--sans);color:var(--cream);list-style:none}
.pp-faq summary::-webkit-details-marker{display:none}
.pp-faq summary::after{content:"+";margin-left:auto;padding-left:12px;font-size:22px;color:var(--gold)}
.pp-faq details[open] summary::after{content:"\2212"}
.pp-faq details p{margin:0 0 16px}
.pp-end{margin-top:44px;padding:24px}
.pp-end h2{margin:0 0 8px;font-size:clamp(20px,3.6vw,24px)}
.pp-crumbs{margin:0 0 10px;font-size:14px;color:var(--muted)}
.pp-crumbs a{padding:8px 0;display:inline-block}
@media(max-width:480px){.pp-gallery{gap:10px}.pp-gallery figure{padding:8px}}