/* Minimal sketch style for landing page */
:root{
  --bg:#fffdf7;
  --ink:#111827;
  --muted:#475569;
  --accent:#ef4444;
  --brand:#111827;
  --max:1100px;
}
*{box-sizing:border-box}
html,body{height:100%;}
body{margin:0;color:var(--ink);font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;line-height:1.5;background:
  radial-gradient(circle at 1px 1px, rgba(0,0,0,0.06) 1px, transparent 1px) 0 0/18px 18px,
  var(--bg);
}
main{max-width:var(--max);margin:40px auto;padding:0 20px}
header.site{position:sticky;top:0;background:rgba(255,255,255,0.85);backdrop-filter:saturate(120%) blur(6px);border-bottom:2px solid #111;}
.header-inner{max-width:var(--max);margin:0 auto;padding:10px 20px;display:flex;align-items:center;justify-content:space-between}
.brand{font-weight:700;color:var(--brand);text-decoration:none;border:2px solid #111;padding:6px 10px;border-radius:8px;box-shadow:2px 2px 0 #111}
.nav{display:flex;gap:12px;align-items:center}
.nav a{color:var(--ink);text-decoration:none}
.btn-sketch{appearance:none;border:2px solid #111;background:#fff;color:#111;padding:10px 14px;border-radius:10px;font-weight:600;box-shadow:3px 3px 0 #111;transition:transform .08s ease, box-shadow .08s ease}
.btn-sketch:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 #111;text-decoration:none}
.btn-primary{background:#fff;border-color:#111}
.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:28px;align-items:center}
.hero-title{font-family:"Patrick Hand", system-ui, sans-serif;font-size:48px;line-height:1.15;margin:0}
.hero-title .bang{color:var(--accent)}
.lead{color:var(--muted);margin-top:12px}
.frame{background:#f4f5f7;border:3px solid #111;border-radius:12px;position:relative;padding:24px;min-height:220px}
.frame::before{content:"";position:absolute;inset:14px;border:2px dashed #111;border-radius:8px}
.caption{position:absolute;bottom:10px;left:16px;color:#666;font-size:13px}
.section{margin-top:34px}
.card{background:#fff;border:2px solid #111;border-radius:12px;padding:16px;box-shadow:3px 3px 0 #111}
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.small{font-size:14px;color:#555}
footer.site{padding:24px 20px;text-align:center;color:#6b7280}
@media (max-width:820px){.hero{grid-template-columns:1fr}.hero-title{font-size:36px}}