/* Minisystem landing. Tokens come from /tokens.css (design/tokens.css). Spec: docs/superpowers/specs/2026-10-12-minisystem-redesign-design.md */
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; min-height:100vh; display:flex; flex-direction:column; background:var(--body); color:var(--ink); font:18px/1.6 var(--font-body); }
body::after { content:''; flex:none; height:22px; margin-top:auto; background-color:var(--grille-bg); background-image:radial-gradient(circle, var(--grille-dot) 1.4px, transparent 1.9px); background-size:8px 8px; }
main { width:100%; max-width:640px; margin:0 auto; padding:40px 16px 32px; }
.brand { font:italic 700 1.15rem/1 var(--font-label); text-transform:uppercase; letter-spacing:.02em; margin:0 0 36px; padding-bottom:10px; border-bottom:3px solid var(--ink); }
.brand a, .prose .brand a { color:inherit; text-decoration:none; }
h1 { font-size:clamp(1.8rem,5vw,2.5rem); line-height:1.2; font-weight:600; margin:0 0 16px; }
.accent { color:var(--link); }
.lede { font-size:1.1rem; color:var(--muted); margin:0 0 28px; }
.sample { margin:0 0 32px; }
.display { background:var(--display); border-radius:4px; padding:14px 18px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; align-items:baseline; }
.display span:nth-child(2), .legend span:nth-child(2) { text-align:center; } .display span:last-child, .legend span:last-child { text-align:right; }
.display b { font:700 clamp(1.4rem,6vw,2rem)/1.1 var(--font-display); color:var(--vfd); text-shadow:0 0 8px var(--vfd-glow); }
.display i { font:700 .8rem var(--font-label); font-style:normal; color:var(--vfd-label); margin-left:4px; }
.legend { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; padding:5px 18px 0; font:500 .7rem var(--font-label); text-transform:uppercase; letter-spacing:.14em; color:var(--muted); }
.points { list-style:none; padding:0; margin:0 0 32px; border-top:1px solid var(--line); }
.points li { padding:14px 0; border-bottom:1px solid var(--line); }
.cta { margin:0 0 32px; }
.button { display:inline-block; background:var(--accent); color:var(--accent-ink); font:700 .95rem var(--font-label); text-transform:uppercase; letter-spacing:.12em; text-decoration:none; padding:15px 24px; border-radius:4px; }
.button:hover { background:var(--accent-hover); }
.button:focus-visible, a:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.fine { font-size:.85rem; color:var(--muted); }
footer { width:100%; max-width:640px; margin:0 auto; padding:0 16px 32px; font:500 .75rem var(--font-label); text-transform:uppercase; letter-spacing:.14em; }
footer a, .prose a, .lede a { color:var(--link); }
.prose h1 { font-size:1.8rem; } .prose h2 { font-size:1.2rem; margin:28px 0 8px; font-weight:600; } .prose li { margin:6px 0; }
.prose table { border-collapse:collapse; width:100%; font-size:.9rem; margin:8px 0; }
.prose th, .prose td { text-align:left; padding:8px 10px 8px 0; border-bottom:1px solid var(--line); vertical-align:top; }
.prose th { font:500 .72rem var(--font-label); text-transform:uppercase; letter-spacing:.12em; color:var(--muted); }
body.frame { background:transparent; margin:0; min-height:0; display:block; }
body.frame::after { display:none; }