/* site/css/styles.css */
:root{
  --bg:#f7f8fb; --card:#fff; --muted:#6b7280; --brand:#0b63ff; --success:#00b56a;
  --maxW:1100px;
}
*{box-sizing:border-box}
body{font-family:Inter,system-ui,Arial;background:var(--bg);margin:0;color:#111}
.container{max-width:var(--maxW);margin:20px auto;padding:0 16px}
.header{display:flex;justify-content:space-between;align-items:center;padding:12px 0}
.logo{font-weight:700;color:var(--brand)}
.card{background:var(--card);padding:16px;border-radius:12px;box-shadow:0 6px 18px rgba(12,15,20,.04)}
.btn{padding:8px 12px;border-radius:8px;background:var(--brand);color:#fff;text-decoration:none;border:0}
.btn-ghost{background:#fff;border:1px solid #e6e9ef;color:inherit}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.locked::after{
  content:"🔒 Upgrade to Pro";
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,0.85);backdrop-filter:blur(3px);font-weight:600;border-radius:12px;
}
pre{background:#f2f4f7;padding:10px;border-radius:8px}
small.note{color:var(--muted);display:block;margin-top:8px}