/* Landing page chrome. Board styles come from src/render/board.css so the demo on this page is
   rendered by exactly the same CSS as the editor and the exported file. */

*{box-sizing:border-box}
body{margin:0;background:var(--bt-bg);color:var(--bt-fg);font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
a{color:#6ea8fe}
h1,h2,h3{line-height:1.2;letter-spacing:-.02em}

.nav{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding:16px 24px;border-bottom:1px solid var(--bt-line);position:sticky;top:0;background:var(--bt-bg);z-index:30}
.brand{font-weight:700;font-size:18px;letter-spacing:-.03em}
.navlinks{display:flex;align-items:center;gap:18px;margin-left:auto;flex-wrap:wrap}
.navlinks a:not(.btn){color:var(--bt-muted);text-decoration:none;font-size:14px}
.navlinks a:not(.btn):hover{color:var(--bt-fg)}
.navlinks .btn{text-decoration:none}

.btn{display:inline-block;padding:9px 16px;border-radius:9px;border:1px solid var(--bt-line);color:var(--bt-fg);text-decoration:none;font-size:14px;font-weight:550}
.btn:hover{border-color:#6ea8fe}
.btn-primary{background:#2b5cd7;border-color:#2b5cd7;color:#fff}
.btn-primary:hover{background:#3a69e0}
.btn-lg{padding:13px 24px;font-size:16px}

main{max-width:1060px;margin:0 auto;padding:0 20px}
section{padding:56px 0;border-bottom:1px solid var(--bt-line)}
section:last-child{border-bottom:0}
.section-h{font-size:24px;margin:0 0 8px}
.section-p{color:var(--bt-muted);margin:0 0 24px;max-width:64ch}

.hero{padding:72px 0 56px}
.hero h1{font-size:clamp(30px,5.2vw,48px);margin:0 0 18px;max-width:18ch}
.lede{font-size:18px;color:var(--bt-muted);max-width:62ch;margin:0 0 28px}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin:0 0 14px}
.micro{font-size:13px;color:var(--bt-muted);margin:0}

.demo-frame{padding:16px;border:1px solid var(--bt-line);border-radius:14px;background:var(--bt-card)}
.demo-frame .bt-row{background:var(--bt-bg)}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.card{padding:20px;border:1px solid var(--bt-line);border-radius:12px;background:var(--bt-card)}
.card h3{font-size:16px;margin:0 0 8px}
.card p{margin:0;color:var(--bt-muted);font-size:14px}

.steps{margin:0;padding-left:22px;max-width:70ch;color:var(--bt-muted)}
.steps li{margin-bottom:10px}
.steps b{color:var(--bt-fg)}

.two-up{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:28px}
.two-up h3{font-size:16px;margin:0 0 10px}
.two-up ul{margin:0;padding-left:20px;color:var(--bt-muted);font-size:14px}
.two-up li{margin-bottom:8px}

.code{padding:16px;border:1px solid var(--bt-line);border-radius:10px;background:var(--bt-card);overflow-x:auto;font:13px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--bt-fg)}

.foot{max-width:1060px;margin:0 auto;padding:32px 20px 56px;color:var(--bt-muted);font-size:13px}
.foot p{margin:0 0 6px}

@media (max-width:640px){
  .nav{padding:12px 16px;gap:12px}
  .navlinks{gap:12px;width:100%}
  .navlinks a:not(.btn){font-size:13px}
  section{padding:40px 0}
  .hero{padding:48px 0 40px}
}